Revonzy Mini Shell

Revonzy Mini Shell

Şuanki Dizin: /home/wwwdreamtechnolo/public_html/yashdeveloper.com/
Dosya Yükle :
Şuanki Dosya : /home/wwwdreamtechnolo/public_html/yashdeveloper.com/index.php

<?php
	require_once('mis_software7_dts-unts/project/dashboard/lib/functions.php');
	$db		=	new class_functions();
	
	$flag	=	0;
	if(isset($_GET['delete_id']))
	{
		$delete_id	=	$_GET['delete_id'];
		
		if($db->delete_add_project($delete_id))
		{
			$flag	=	3;
		}
	}


	$flag	=	0;
	if(isset($_POST['add_contact']))
	{
		$user_name 	  		= $_POST['user_name'];
		$user_contact 	  	= $_POST['user_contact'];
		$status 			= "Pending";
		
		if($db->insert_contacted_person_details($user_name,$user_contact,$status))
		{
			$flag = 1;
			// $customer_name = ""
			// $cust_mobile_no = "";
			//Send Email
			$to		=	"bapusaheb51@yahoo.co.in";
			$from	=	"contact@yashdeveloper.com";
			$subject= 	"Customer Call Request From Website- www.yashdeveloper.com";
			$message 	= 	"
					<html>
					<head></head>
					<body>
						Dear Sir, <br />
						
						You received new customer 'Call Request'. Kindly call them and take follow up. <br /><br />
						
						Customer details given below: <br />
						Name : ".$user_name." <br />
						Mobile No : ".$user_contact." <br />
					</body>
					</html>";
				
					// To send HTML mail, the Content-type header must be set
				$headers  = 'MIME-Version: 1.0' . "\r\n";
				$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
				$headers .= 'From:'.$from."\r\n"
				.'Reply-To: $from'."\r\n";
		
				if($user_contact!="")
				{
					mail($to,$subject, $message, $headers);
				}
		}
		else
		{
			$flag = 2;
		}
	}


	
	
?>

<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Yash Developers - Real Estate, Solapur</title>
<link rel="icon" type="image/x-icon" href="images/yash-developers-ico.ico">
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Yash Developer Plots Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet"> 
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link href="css/owl.carousel.css" rel="stylesheet">
<link rel="stylesheet" href="css/lightbox.css">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--fonts-->
<link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
<!--//fonts-->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
    <!-- Bootstrap Icons CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

<link href="https://fonts.googleapis.com/css2?family=Alumni+Sans+Collegiate+One&family=Dancing+Script:wght@700&family=Lemon&family=Roboto+Slab&family=Rochester&family=Rye&family=Yellowtail&display=swap" rel="stylesheet">
<style>
body , h1 ,h2,h3,h4,h5,h6{
    font-family: 'Roboto Slab', serif;
}    

.slider-container {
    position: relative;
    width: 100%;
    margin: auto;
    /*border:1px solid red;*/
    overflow: hidden;
    height: 100%; /* Ensure container takes full height of its parent */
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider img {
    object-fit: fill;  /* Cover the container, maintaining the aspect ratio */
    height: 80%;        /* Set the image height to 100% to fill the container's height */
    width: auto;         /* Set width to auto to maintain aspect ratio */
    
}
.slide {
    min-width: 100%;
    display: block;
    object-fit: cover;
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    z-index: 1;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.dots-container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 2;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 6px;
    border-radius: 50%;
    background-color: white; /* Soft, neutral color */
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly brighter when hovered */
    transform: scale(1.2); /* Subtle grow effect */
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); /* Light glowing effect */
}

.active {
    background-color: white; /* Muted blue for a professional feel */
    transform: scale(1.4); /* Larger active dot for emphasis */
    box-shadow: 0 0 15px rgba(92, 107, 192, 0.8); /* Soft glowing blue shadow */
}

.dot:active {
    background-color: rgba(255, 255, 255, 0.9); /* Light color when clicked */
}

</style>
</head>
<body>
<!--banner start here-->
<div class="header">
		   <div class="header-main">
		   	 <div class="container">
			    <nav class="navbar navbar-default">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!--<h1><a  href="index.html">Yash Developers</a></h1>-->
				<!--	<img src="images/yashdev_logo.jpg" -->
    <!--style="height:100px;width:100px;border-radius:120px;margin-top:10px;-->
    <!--box-shadow: 5px 2px 0px 0px rgba(255, 165, 0, 0.7), 15px 0px 10px 0px rgba(173, 216, 230, 0.9);margin-bottom:10px;border:1px solid rgba(255, 165, 0, 0.7)">-->
    <img src="images/yashdev_logo.png" style="height:100px;width:250px">

					</div>
					<!-- navbar-header -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:15px">
						<ul class="nav navbar-nav navbar-right">
								<li class="scroll hvr-underline-from-center"><a href="index.html">Home</a></li>
								<li><a class="scroll hvr-underline-from-center" href="#about">About</a></li>
								<li><a class="scroll hvr-underline-from-center" href="#property">Properties</a></li>
								<li><a class="scroll hvr-underline-from-center" href="#team">Agents</a></li>

								<li><a class="scroll hvr-underline-from-center" href="#gallery">Gallery</a></li>
							
								<li><a class="scroll hvr-underline-from-center" href="#contact">Contact</a></li>
						  </ul>

					</div>
					<div class="clearfix"> </div>	
				</nav>


			 <div class="clearfix"> </div>
		   </div>
<div class="slider-container">
    <button class="prev" onclick="moveSlide(-1)">&#10094;</button>
    
    <div class="slider">
        <img src="images/1.jpeg" alt="Image 1" class="slide">
        <img src="images/2.jpeg" alt="Image 1" class="slide">
        <img src="images/3.jpeg" alt="Image 1" class="slide">
        <img src="images/4.jpeg" alt="Image 1" class="slide">
        <img src="images/5.jpeg" alt="Image 1" class="slide">
        <img src="images/6.jpeg" alt="Image 1" class="slide">
        <!-- Add more images as needed -->
    </div>

    <div class="dots-container">
        <span class="dot" onclick="goToSlide(0)"></span>
        <span class="dot" onclick="goToSlide(1)"></span>
        <span class="dot" onclick="goToSlide(2)"></span>
        <span class="dot" onclick="goToSlide(3)"></span>
        <span class="dot" onclick="goToSlide(4)"></span>
        <span class="dot" onclick="goToSlide(5)"></span>
        <!-- Add more dots if you add more images -->
    </div>
    
    <button class="next" onclick="moveSlide(1)">&#10095;</button>
</div>


<script type="text/javascript">
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
const dots = document.querySelectorAll('.dot');

function moveSlide(direction) {
    currentIndex += direction;

    if (currentIndex < 0) {
        currentIndex = totalSlides - 1;
    } else if (currentIndex >= totalSlides) {
        currentIndex = 0;
    }

    updateSliderPosition();
    updateActiveDot();
}

function updateSliderPosition() {
    const slider = document.querySelector('.slider');
    slider.style.transform = `translateX(-${currentIndex * 100}%)`;
}

function updateActiveDot() {
    dots.forEach(dot => dot.classList.remove('active'));
    dots[currentIndex].classList.add('active');
}

function goToSlide(index) {
    currentIndex = index;
    updateSliderPosition();
    updateActiveDot();
}

// Initialize active dot
updateActiveDot();

// Auto slide every 3 seconds (3000 milliseconds)
setInterval(() => {
    moveSlide(1);  // This will move the slider one step forward every 3 seconds
}, 3000);

</script>


<!-banner code-->
<!--<div class="banner" id="home">-->
<!--<div class="agileinfo-dot">-->
<!--</div>-->
<!--<div class="container">-->
<!--		   <div class="banner-bottom">-->
<!--		   	   <section class="slider">-->
<!--				 <div class="flexslider">-->
<!--					<ul class="slides">-->
<!--					  <li>-->
<!--					  	<div class="banner-bottom-text">-->
<!--					  			<h3>Discover Luxury Homes</h3>-->
<!--						   	   <p>We complete your dreams.</p> 	-->
						  
<!--					 	</div>-->
<!--					  </li>-->
<!--					  <li>-->
<!--					  	<div class="banner-bottom-text">-->
<!--					  		<h3>Buy and  sell amazing places</h3>-->
<!--						   	   <p>We complete your dreams.</p> 	-->
<!--					 	</div>-->
<!--					  </li>-->
<!--					  <li>-->
<!--					  	<div class="banner-bottom-text">-->
<!--					  		<h3>Explore unique lifestyles</h3>-->
<!--						   	   <p>We complete your dreams.</p> 	-->
<!--					 	</div>-->
<!--					  </li>				  -->
<!--				    </ul>-->
<!--				 </div>-->
<!--				 <div class="clearfix"> </div>-->
<!--		      </section>-->
<!--			<div class="search-agileits">			-->
<!--				<form action="#" method="post">-->
<!--					<input type="search" name="Search" placeholder="Search Your Property" required="" />-->
<!--					<input type="submit" value="Search">-->
<!--				</form>-->
<!--			</div>	-->
<!--			<div class="thim-click-to-bottom">-->
<!--				<a href="#about" class="scroll">-->
<!--					<i class="fa fa-chevron-down" aria-hidden="true"></i>-->
<!--				</a>-->
<!--			</div>-->
			
<!--		   </div>-->
<!--		</div>-->
<!--	</div>-->
<!--</div>-->
<!--</div>-->
<!--banner end here-->
<style>
.paragraph_show
{
	display:inline-table;
	margin-left:70px;
}
.about_us
{
	text-align:justify;
	line-height:25px;
}
.val_display
{
	font-size:45px; color:#06C53E !important;
	text-shadow:1px 1px #FFFFFF !important;
}
.main_parent_div
{
	border:1px solid #8BDEA3; padding:15px; border-radius:35px; background-color:#FAFAFA; margin:5px; width:32%;
}
.h5_main_class
{
	color:#666666 !important; font-size:22px !important; line-height:30px; margin:0px;text-shadow:0px 1px #666666;
}
.about_us strong
{
	color:orangered;
}
.about_us p
{
	color:#333333;
}
.main_services banner-botm-w3ls
{
	border:2px solid orangered !important;
}
.main_service_txt
{
	border:2px solid #FFF766;
	border-top-left-radius:20px;
	border-bottom-right-radius:20px;
}
.main_service_txt h5{
	color:#FFF200; font-size:22px;
}
@media only screen and (max-width: 600px) {
	.main_parent_div
	{
		width:100%;
	}
}
</style>
<div class="banner-btm-w3layouts" id="services">
	<div class="container">
	<div class="tittle-agileinfo">
		<h3>Welcome to <span>Yash Developer Ploting Projects</span></h3>
		
		<div class="about_us">
			<br/>
			<center><strong style="font-size:20px; color:#333333; text-align:center; font-style:italic;">"Yash Developers: Building Your Dreams on Solid Ground"</strong></center>
			<br />
			<p style="margin-top:10px; text-align:left;"><span class="paragraph_show"></span>Welcome to Yash Developers, where your aspirations for the perfect plot of land meet our passion for excellence. Established in 2009, we have rapidly grown into a trusted name in land development and sales, dedicated to providing the finest plots for residential and commercial purposes.
			</p>
			<p style="margin-top:10px; text-align:left;">
			<strong>Our Journey : </strong> It all began with "Krushna Park, Boramani" – our maiden venture in 2010. This project was more than just a launch; it was a testament to our commitment to quality and customer satisfaction. Since then, our journey has been one of constant growth and enduring relationships.
			</p>
			<hr />
			
		
<p style="margin-top:10px; text-align:left;">
			<strong>Our Promise :</strong> At Yash Developers, we believe in creating more than just land parcels; we aim to create communities and spaces where dreams can flourish. Our team of experienced professionals is committed to ensuring that every square inch of land we sell meets the highest standards of quality and legality.</p>
			
			<hr />
			
			<p style="margin-top:10px;text-align:left;">
			<strong>Our Vision :</strong> We envision a future where Yash Developers is synonymous with the best in land development. A future where every project we undertake becomes a benchmark for excellence and a vibrant space for communities to thrive.</p>
			
			<hr />
			
			<p style="margin-top:10px;text-align:left;">
			<strong>Join Us :</strong> As we continue to grow and expand our horizons, we invite you to be a part of our journey. Whether you are looking for the perfect plot for your dream home, a strategic location for your business, or a fruitful investment opportunity, Yash Developers is here to turn your aspirations into reality.</p>
		
		<br /><br />
		
		
			<h3 style="">Our Achievements</h3>
			<br />
			<div style="text-align:center !important; width:100%; display:inline-table;">
			<div class="col-md-4 banner-botm-w3ls main_parent_div">
				<h5 class="h5_main_class">
				<div style="color;">
				<span class="val_display">18</span> 
				<br />Projects Completed
				</div>
				<hr />
				<span class="val_display">80</span> 
				<br />
				Acres Plots Sold
				</h5>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls main_parent_div">
				<h5 class="h5_main_class">
				<div style="color;">
				<span class="val_display">16</span> 
				<br />Ongoing Projects
				</div>
				<hr />
				<span class="val_display">116</span> 
				<br />
				Acres Plot Area
				</h5>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls main_parent_div">
				<h5 class="h5_main_class">
				<div style="color;">
				<span class="val_display">5</span> 
				<br />Projects To Launch
				</div>
				<hr />
				<span class="val_display">64</span> 
				<br />
				Acres Plot Area
				</h5>
			</div>			
			</div>
			
			<!--<div class="col-md-3 banner-botm-w3ls" style="border:7px solid #666666; padding:15px;">
				<h5 style="color:orangered; text-shadow:0px 1px #333333; font-size:20px; line-height:30px; margin:0px;">
				<span class="val_display">16</span> <br />Ongoing Projects 
				<hr />
				<span class="val_display">116</span> <br />Acres Plot Area
				</h5>
			</div>-->
		</div>
	</div>
	
	</div>
</div>
<style>
#our_services .services-main .top-w3ls .banner-botm-w3ls
{
    margin-top:22px;
}
#our_services .services-main .top-w3ls .banner-botm-w3ls .banner-btm-w3layouts-img
{
    object-fit:fill;
    /*background-image:url('images/land3.png');*/
}
#our_services .services-main .top-w3ls .banner-botm-w3ls .banner-btm-w3layouts-grids
{
    background-image:url('images/landmain.jpg'); height:180px;
}
</style>
<!--banner bottom-->
<hr />

 <div class="banner-btm-w3layouts" id="our_services" style="background-color:#EFEFEF">
	<div class="container">
	<div class="tittle-agileinfo">
		<h3>Yash Developer <span> Projects</span></h3>
		<!--<p >Suspendisse fringilla pellentesque risus sit amet bibendum.</p>-->
	</div>

           
							<?php
								$data	=	array();
								$data	=	$db->get_all_add_project();
								$counter = 1;
								if(!empty($data))
								{
									foreach($data as $record)
									{
										$res_id				=	$record[0];
										$project_name		=	$record[1];
										$project_address	=	$record[2];
										$registration_no	=	$record[3];
										$location			=	$record[4];
										$project_type		=	$record[5];
										$project_current_status	=	$record[6];
										$project_layout		=	$record[7];
										$project_logo		=	$record[8];
										$image1				=	$record[9];
										$image2				=	$record[10];
										$image3				=	$record[11];
										$image4				=	$record[12];
										$image5				=	$record[13];
										$image6				=	$record[14];
										$image7				=	$record[15];
										$image8				=	$record[16];
										$image9				=	$record[17];
										$image10			=	$record[18];
										$video				=	$record[19];
										$no_of_towers		=	$record[20];
										$project_selling_status = $record[21];
										$latitude			=	$record[22];
										$longitude			=	$record[23];
										$added				=	$record[24];
										$project_facilities =   $record[25];
										$description 		=   $record[26];
										$layout_three_d_view=   $record[27];
										$prathmik_layout 	=   $record[28];
										$na_layout 			=   $record[29];
										$final_layout 		=   $record[30];
										$layout_order 		=   $record[31];
										$total_plots 		=   $record[32];
										$date				=	$record[33];
										$time				=	$record[34];
							?>
                          
	<!--	<div class="services-main">-->
	<!--	<div class="top-w3ls">-->
	<!--		<div class="col-md-3 banner-botm-w3ls">-->
	<!--			<div class="banner-btm-w3layouts-grids wow fadeInUp animated" data-wow-delay=".5s" style="background-image: url('mis_software7_dts-unts/project/dashboard/Project_images/<?php echo $project_logo; ?>');  background-size: cover; background-position: center; object-fit:fill">-->
	<!--				<p>-->
	<!--				    <a  href="project.php?project_id=<?php echo $res_id; ?>" style="background-color:#FFFFFF; border:1px solid #DFDFDF; border-radius:8px; padding:7px;">View Project Details</a>-->
	<!--				</p>-->
					<!--<div class="banner-btm-w3layouts-img">-->
					<!--	<i class="fa fa-home" aria-hidden="true">	</i>-->
					<!--	<br />-->
					<!--	<span style="color:#000000; font-weight:bold;">-->
					<!--	    <?php echo $project_name ?> <br />-->
					<!--	    <?php echo $project_current_status; ?><br /> <?php echo $location; ?>-->
						    
					<!--	</span>-->
					<!--</div>-->
 <!--       			<div class="banner-btm-w3layouts-img" style="background-image: url('mis_software7_dts-unts/project/dashboard/Project_images/<?php echo $project_logo; ?>');  background-size: cover; background-position: center; object-fit:fill">-->
 <!--                       <br />-->
 <!--                       <span style="color:#000000; font-weight:bold;">-->
 <!--                           <?php echo $project_name; ?> <br />-->
 <!--                           <?php echo $project_current_status; ?><br />-->
 <!--                           <?php echo $location; ?>-->
 <!--                       </span>-->
 <!--                   </div>-->
	<!--			</div>-->
				<!--<h5>Homes for sale</h5>-->
	<!--		</div>-->
	<!--	</div>-->
	<!--</div>-->
	
	<div class="services-main">
    <div class="top-w3ls">
        <div class="col-md-3 banner-botm-w3ls">
        <div class="banner-btm-w3layouts-grids wow fadeInUp animated" data-wow-delay=".5s" style="position: relative; background-image: url('mis_software7_dts-unts/project/dashboard/Project_images/<?php echo $project_logo; ?>'); background-size: contain; background-position: center; height: 350px; width: 100%; padding: 25px; display: flex; flex-direction: column; justify-content: flex-end; color: white; font-weight: bold; text-align: center; background-color: white; background-repeat: no-repeat;">
                 	<p>
					    <a  href="project.php?project_id=<?php echo $res_id; ?>" style="background-color:#337ab7; border:3px solid white;color:white;font-weight:800; border-radius:8px; padding:7px;">View Details</a>
					</p>
                <!-- Text Content -->
                <div class="banner-btm-w3layouts-img" style="background-color: rgba(0, 0, 0, 0.5); padding: 15px; border-radius: 8px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);">
                    <span style="font-size: 18px; line-height: 1.4;">
                        <?php echo $project_name; ?> <br />
                        <?php echo $project_current_status; ?><br />
                        <?php echo $location; ?>
                    </span>
                    <br />
                    <!--<p>-->
                    <!--    <a href="project.php?project_id=<?php echo $res_id; ?>" style="background-color: #FFFFFF; border: 1px solid #DFDFDF; border-radius: 8px; padding: 7px 15px; color: #000000; font-weight: normal; text-decoration: none; margin-top: 10px;">View Project Details</a>-->
                    <!--</p>-->
                </div>
            </div>
        </div>
    </div>
</div>
	<?php
									}
								}
							?>
</div>
</div>

						</tbody>
                    </table>
                  
                </div>
            </div>
	</div>
</div>
</div>
 




			
			
			
			
			<!--
			<div class="col-md-3 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s">
					<p>Lorem ipsum dolor sit amet, consectetur adipi amet bibendum.</p>
					
					<div class="banner-btm-w3layouts-img">
						<i class="fa fa-building-o" aria-hidden="true"></i>
					</div>
				</div>
				<h5>Homes for rent</h5>
			</div>
			<div class="col-md-3 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl1 wow fadeInUp animated" data-wow-delay=".5s">
					<p>Lorem ipsum dolor sit amet, consectetur adipi amet bibendum.</p>
					
					<div class="banner-btm-w3layouts-img">
						<i class="fa fa-building" aria-hidden="true"></i>
					</div>
				</div>
				<h5>Homes for lease</h5>
			</div>
			<div class="col-md-3 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids wow fadeInUp animated" data-wow-delay=".5s">
					<p>Lorem ipsum dolor sit amet, consectetur adipi amet bibendum.</p>
					
					<div class="banner-btm-w3layouts-img">
						<i class="fa fa-hospital-o" aria-hidden="true"></i>
					</div>
				</div>
				<h5>Homes for mortgage</h5>
			</div>-->
			<div class="clearfix"> </div>	
			</div>
			<div class="bottom-w3ls">
			<!--
			<div class="col-md-3 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids wow fadeInUp animated" data-wow-delay=".5s">
					<p>Lorem ipsum dolor sit amet, consectetur adipi amet bibendum.</p>
					
					<div class="banner-btm-w3layouts-img">
						<i class="fa fa-bar-chart" aria-hidden="true"></i>
					</div>
				</div>
				<h5>Finance service</h5>
			</div>
			<div class="col-md-3 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s">
					<p>Lorem ipsum dolor sit amet, consectetur adipi amet bibendum.</p>
					
					<div class="banner-btm-w3layouts-img">
						<i class="fa fa-users" aria-hidden="true"></i>
					</div>
				</div>
				<h5>Matching Buyer</h5>
			</div>
			<div class="col-md-3 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl1 wow fadeInUp animated" data-wow-delay=".5s">
					<p>Lorem ipsum dolor sit amet, consectetur adipi amet bibendum.</p>
					
					<div class="banner-btm-w3layouts-img">
						<i class="fa fa-percent" aria-hidden="true"></i>
					</div>
				</div>
				<h5>Price analysis</h5>
			</div>
			<div class="col-md-3 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids wow fadeInUp animated" data-wow-delay=".5s">
					<p>Lorem ipsum dolor sit amet, consectetur adipi amet bibendum.</p>
					
					<div class="banner-btm-w3layouts-img">
						<i class="fa fa-money" aria-hidden="true"></i>
					</div>
				</div>
				<h5>Make money</h5>
			</div>
			-->
			<div class="clearfix"> </div>	
			</div>
				<div class="clearfix"> </div>	
		</div>
	</div>
</div>


<div class="container">
    <div class="tittle-agileinfo">
        <br/>
        <h3 style="color:#FFFFFF; font-weight:bold; text-shadow:2px 2px #000000;"> <span>Project Videos</span></h3>
    </div>
    <div class="services-main">
        <div class="col-lg-12">
            <div class="carousel" style="text-align:center;">
                <?php
                $groups_data = $db->get_all_project_video_details();
                $counter = 1;
                $first_video = ''; 
                foreach ($groups_data as $record) {
                    $title = $record[1];
                    $description = $record[2];
                    $video_one = $record[3];

                    if (!empty($video_one)) {
                        if ($counter == 1) {
                            $first_video = $video_one; 
                        }
                        $counter++;
                    }
                }
                if (!empty($first_video)) {
                    ?>
                    <div>
                        <video id="mainVideo" src="mis_software7_dts-unts/project/dashboard/Project_videos/<?php echo $first_video; ?>" style="height: 300px; width: 100%;" controls autoplay>
                            Your browser does not support the video tag.
                        </video>
                    </div>
                    <?php
                }
                ?>

                <div class="video-thumbnails">
                    <button class="slider-btn left" onclick="slideLeft()">&#8592;</button>
                    <div class="video-slider">
                        <?php
                        foreach ($groups_data as $record) {
                            $title = $record[1];
                            $description = $record[2];
                            $video_one = $record[3];

                            if (!empty($video_one)) {
                                ?>
                                <a href="javascript:void(0);" onclick="changeVideo('<?php echo $video_one; ?>')">
                                    <video src="mis_software7_dts-unts/project/dashboard/Project_videos/<?php echo $video_one; ?>" style="height: 100px; width: 100%; object-fit: cover; margin: 5px;">
                                        Your browser does not support the video tag.
                                    </video>
                                    <p><?php echo $title; ?></p>
                                    <span><?php echo $description; ?></span>
                                </a>
                                <?php
                            }
                        }
                        ?>
                    </div>
                    <button class="slider-btn right" onclick="slideRight()">&#8594;</button>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
function changeVideo(videoId) {
    var mainVideo = document.querySelector('#mainVideo');
    mainVideo.src = "mis_software7_dts-unts/project/dashboard/Project_videos/" + videoId;
    mainVideo.play();
}

function slideLeft() {
    const slider = document.querySelector('.video-slider');
    slider.scrollLeft -= 160; // Adjust scroll amount as needed
}

function slideRight() {
    const slider = document.querySelector('.video-slider');
    slider.scrollLeft += 160; // Adjust scroll amount as needed
}

</script>

<style>
.carousel {
    padding: 1em;
    text-align: center;
}

.carousel video {
    max-width: 100%;
    margin: 10px 0;
}

.video-thumbnails {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px 0;
    margin-top: 20px;
}

.video-slider {
    display: flex;
    overflow: hidden;
    width: 80%;
    transition: all 0.3s ease-in-out;
}

.video-thumbnails a {
    display: inline-block;
    margin: 5px;
    width: 160px;
    height: 200px;
    border-radius: 5px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.video-thumbnails a:hover {
    opacity: 1;
}

.video-thumbnails video {
    width: 140px;
    height: 100%;
    object-fit: cover;
}

.video-thumbnails p {
    font-size: 14px;
    margin-top: 5px;
    width: 160px;
    font-weight: 800;
    text-align: center;
    color: #1A68B0;
}

.video-thumbnails span {
    font-size: 14px;
    margin-top: 5px;
    width: 160px;
    font-weight: 800;
    text-align: center;
    color: #DF3921;
}

.slider-btn {
    position: absolute;
    top: 30%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 10;
}

.slider-btn.left {
    left: 0;
}

.slider-btn.right {
    right: 0;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

</style>



    <div class="container">
    <div class="tittle-agileinfo">
        <br/>
        <h3 style="color:#FFFFFF; font-weight:bold; text-shadow:2px 2px #000000;"> <span>Youtube Videos</span></h3>
    </div>
    <div class="services-main">
        <div class="col-lg-12">
            <div class="carousel" style="text-align:center;">
                <?php
                $data = $db->get_all_video_src_record();
                $counter = 1;
                $first_video = ''; 
                if (!empty($data)) {
                    foreach ($data as $record) {
                        $res_id = $record[0];
                        $title = $record[1];
                        $description = $record[2];
                        $video_link = $record[3];
                        $date = $record[4];
                        $time = $record[5];

                        if ($counter == 1) {
                            $first_video = $video_link; 
                        }
                        $counter++;
                    }
                }
                if (!empty($first_video)) {
                    ?>
                    <!--<div>-->
                    <!--    <iframe width="100%" height="300" src="https://www.youtube.com/embed/<?php echo $first_video; ?>" frameborder="0" allowfullscreen></iframe>-->
                    <!--</div>-->
                    <?php
                }
                ?>

                <div class="video-thumbnails">
                    <button class="slider-btn left" onclick="slideLeft()">&#8592;</button>
                    <div class="video-slider">
                        <?php
                        if (!empty($data)) {
                            foreach ($data as $record) {
                                $title = $record[1];
                                $description = $record[2];
                                $video_link = $record[3];
                                ?>
                               <a class="video-links" >
                                    <div><?php echo $video_link; ?></div><br><br><br>
                                    <!--<iframe width="140" height="100" src="<?php echo $video_link; ?>" frameborder="0" allowfullscreen></iframe>-->
                                    <p><?php echo $title; ?></p>
                                    <span><?php echo $description; ?></span>
                                </a>
                                <?php
                            }
                        }
                        ?>
                    </div>
                    <button class="slider-btn right" onclick="slideRight()">&#8594;</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function changeVideo(videoId) {
    var mainVideo = document.querySelector('#mainVideo');
    mainVideo.src = "https://www.youtube.com/embed/" + videoId;
}

function slideLeft() {
    const slider = document.querySelector('.video-slider');
    slider.scrollLeft -= 160; // Adjust scroll amount as needed
}

function slideRight() {
    const slider = document.querySelector('.video-slider');
    slider.scrollLeft += 160; // Adjust scroll amount as needed
}
</script>

<style>
.video-links{
    display:flex;
}
.carousel {
    padding: 1em;
    text-align: center;
}

.carousel iframe {
    max-width: 100%;
    margin: 10px 0;
}

.video-thumbnails {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px 0;
    margin-top: 20px;
}

.video-slider {
    display: flex;
    overflow: hidden;
    width: 80%;
    transition: all 0.3s ease-in-out;
}

.video-thumbnails a {
    display: inline-block;
    margin: 5px;
    width: 160px;
    height: 200px;
    border-radius: 5px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.video-thumbnails a:hover {
    opacity: 1;
}

.video-thumbnails iframe {
    width: 140px;
    height: 100%;
    object-fit: cover;
}

.video-thumbnails p {
    font-size: 14px;
    margin-top: 5px;
    width: 160px;
    font-weight: 800;
    text-align: center;
    color: #1A68B0;
}

.video-thumbnails span {
    font-size: 14px;
    margin-top: 5px;
    width: 160px;
    font-weight: 800;
    text-align: center;
    color: #DF3921;
}

.slider-btn {
    position: absolute;
    top: 30%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 10;
}

.slider-btn.left {
    left: 0;
}

.slider-btn.right {
    right: 0;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
</style>










<!--//banner bottom-->
<!-- about -->
<br>
<div class="about" id="about">
	<!--<div class="about-left">
		<h2>About <span>Yash Developers</span></h2>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</div>-->
	
	<div class="container">
	    	<div class="tittle-agileinfo">
		<h3>Features Of Our <span> Projects</span></h3>
		<!--<p >Suspendisse fringilla pellentesque risus sit amet bibendum.</p>-->
	</div>
	<!--<div class="tittle-agileinfo">-->
	<!--	<br/>-->
	<!--	<h3 style="color:#000; font-weight:bold; text-shadow:2px 2px #000000;">Features Of Our <span>Projects</span></h3>-->
	<!--</div>-->
		<div class="services-main">
		<div class="top-w3ls main_services">
			<div class="col-md-4 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated main_service_txt" data-wow-delay=".5s">
				<h5>NATP अंतिम ले-आऊट</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated main_service_txt" data-wow-delay=".5s">
				<h5>स्वतंत्र ७/१२ उतारा (ऑनलाईन)</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated main_service_txt" data-wow-delay=".5s">
				<h5>वास्तु शास्त्राप्रमाणे प्लॉटची रचना</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated main_service_txt" data-wow-delay=".5s">
				<h5>N.A क्लिअर टायटल</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated main_service_txt" data-wow-delay=".5s">
				<h5>बँक लोन ची सुविधा</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated main_service_txt" data-wow-delay=".5s">
				<h5>निसर्गरम्य परिसरात ओपन प्लॉट</h5>
				</div>
			</div>
			<div class="clearfix"> </div>	
			</div>
				<div class="clearfix"> </div>	
		</div>
	</div>
	
</div>
<!-- //about-bottom -->
<!--
<div class="banner-btm-w3layouts" id="services">
	<div class="container">
	<div class="tittle-agileinfo">
		<h3>Features Of Our <span>Projects</span></h3>
	</div>
		<div class="services-main">
		<div class="top-w3ls">
			<div class="col-md-4 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s">
				<h5 style="color:#FFFFFF; font-size:20px;">NATP अंतिम ले-आऊट</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s">
				<h5 style="color:#FFFFFF; font-size:20px;">स्वतंत्र ७/१२ उता रा (ऑनलाईन)</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s">
				<h5 style="color:#FFFFFF; font-size:20px;">वास्तु शास्त्राप्रमाणे प्लॉटची रचना</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s">
				<h5 style="color:#FFFFFF; font-size:20px;">N.A क्लिअर टायटल</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s">
				<h5 style="color:#FFFFFF; font-size:20px;">बँक लोन ची सुविधा</h5>
				</div>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s">
				<h5 style="color:#FFFFFF; font-size:20px;">निसर्गरम्य परिसरात ओपन प्लॉट</h5>
				</div>
			</div>
			<div class="clearfix"> </div>	
			</div>
				<div class="clearfix"> </div>	
		</div>
	</div>
</div>
-->
<hr />

<div class="banner-btm-w3layouts" id="services">
	<div class="container">
	<div class="tittle-agileinfo">
		<h3>Facilities Available at Our <span>Projects</span></h3>
	</div>
		<div class="services-main">
		<div class="top-w3ls">
			<div class="col-md-4 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Play Ground.jpeg'); background-size:100% 100%;height:200px;">
			
				</div>
				<h5 style="color:#000; font-size:20px; margin-top:25px;">Play Ground</h5>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Pipe Line.jpeg'); background-size:100% 100%;height:200px;">
				
				</div>
				<h5 style="color:#000; font-size:20px; margin-top:25px;">Pipe Line</h5>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Wall Compound.jpeg'); background-size:100% 100%;height:200px;">
				
				</div>
				<h5 style="color:#000; font-size:20px; margin-top:25px;">Wall Compound</h5>
			</div>
			
			
			
			<!--<div class="col-md-4 banner-botm-w3ls">-->
			<!--	<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Wall Compound1.jpeg'); background-size:100% 100%;">-->
			<!--	<h5 style="color:#000000; font-size:20px; margin-top:25px;">Wall Compound</h5>-->
			<!--	</div>-->
			<!--</div>-->
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Garden.jpeg'); background-size:100% 100%;height:200px;">
				
				
				</div>
				<h5 style="color:#000; font-size:20px; margin-top:25px;">Garden</h5>
			</div>
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Garden1.jpeg'); background-size:100% 100%;height:200px;">
				
			
				</div>
					<h5 style="color:#000; font-size:20px; margin-top:25px;">Garden</h5>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Street Light.jpeg'); background-size:100% 100%;height:200px;">
				
				
				</div>
				<h5 style="color:#000; font-size:20px; margin-top:25px;">Street Light</h5>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Underground MSEB.jpeg'); background-size:100% 100%;height:200px;">
				
			
				</div>
					<h5 style="color:#000; font-size:20px; margin-top:25px;">Underground MSEB</h5>
			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Drainage Line.jpeg'); background-size:100% 100%;height:200px;">
				
				
				</div>

            <h5 style="color:#000; font-size:20px; margin-top:25px;">Drainage Line</h5>			</div>
			
			<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Dambari Raste.jpeg'); background-size:100% 100%; height:150px;height:200px;">
				
			
				</div>
					<h5 style="color:#000; font-size:20px; margin-top:25px;">Dambari Raste</h5>
			</div>
			
				<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Dambari Raste2.jpeg'); background-size:100% 100%; height:150px;height:200px;">
				
			
				</div>
					<h5 style="color:#000; font-size:20px; margin-top:25px;">Dambari Raste</h5>
			</div>
				<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Function hall.jpeg'); background-size:100% 100%; height:150px;height:200px;">
				
				
				</div>

                <h5 style="color:#000; font-size:20px; margin-top:25px;">Function Hall</h5>			</div>
				<div class="col-md-4 banner-botm-w3ls" style="margin-top:25px;">
				<div class="banner-btm-w3layouts-grids banner-btm-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s" style="background-image:url('facilities_img/Wall Compound1.jpeg'); background-size:100% 100%; height:200px;">
				
			
				</div>
					<h5 style="color:#000; font-size:20px; margin-top:25px;">Wall Compound</h5>
			</div>
			
			<div class="clearfix"> </div>	
			</div>
				<div class="clearfix"> </div>	
		</div>
	</div>
</div>

<!--property -->
	<!--<div class="property" id="property">
	<div class="container">
	<div class="tittle-agileinfo">
			<h3>property for<span> sale</span></h3>
			<p >Suspendisse fringilla pellentesque risus sit amet bibendum.</p>
		</div>
			<div class="agile-team-grids">
				<div class="col-md-4 team-grid">
					<div class="team-img">
						<img src="images/g3.jpg" class="img-responsive" alt=" " />
						<figcaption class="overlay">
								<a href="#"  data-toggle="modal" data-target="#myModal1">Read More</a>
						</figcaption>
					</div>
					<div class="prop-info-w3ls">
						<div class="both-w3-agileits">
						<p><i class="fa fa-home" aria-hidden="true"></i> 450 Sqft</p>
						</div>
						<div class="both-w3-agileits">
						<p><i class="fa fa-bed" aria-hidden="true"></i> 5</p>
						</div>
						<div class="both-w3-agileits">
						<p><i class="fa fa-wheelchair" aria-hidden="true"></i> 3</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="prop-btm-w3ls">
						<h4>Luxury Villa<span>$55,320</span></h4>
						<p><i class="fa fa-map-marker" aria-hidden="true"></i>8901 Marmora Road,Australia</p>
					</div>
				
				</div>
				<div class="col-md-4 team-grid">
					<div class="team-img">
						<img src="images/g4.jpg" class="img-responsive" alt=" " />
						<figcaption class="overlay">
							<a href="#"  data-toggle="modal" data-target="#myModal2">Read More</a>
						</figcaption>
					</div>
					<div class="prop-info-w3ls">
						<div class="both-w3-agileits">
						<p><i class="fa fa-home" aria-hidden="true"></i> 480 Sqft</p>
						</div>
						<div class="both-w3-agileits">
						<p><i class="fa fa-bed" aria-hidden="true"></i> 5</p>
						</div>
						<div class="both-w3-agileits">
						<p><i class="fa fa-wheelchair" aria-hidden="true"></i> 3</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="prop-btm-w3ls">
						<h4>Luxury Villa<span>$58,390</span></h4>
						<p><i class="fa fa-map-marker" aria-hidden="true"></i>8901 Marmora Road,New Jersey</p>
					</div>
					
				</div>
				<div class="col-md-4 team-grid">
					<div class="team-img">
						<img src="images/g8.jpg" class="img-responsive" alt=" " />
						<figcaption class="overlay">
								<a href="#"  data-toggle="modal" data-target="#myModal3">Read More</a>
						</figcaption>
					</div>
					<div class="prop-info-w3ls">
						<div class="both-w3-agileits">
						<p><i class="fa fa-home" aria-hidden="true"></i> 500 Sqft</p>
						</div>
						<div class="both-w3-agileits">
						<p><i class="fa fa-bed" aria-hidden="true"></i> 4</p>
						</div>
						<div class="both-w3-agileits">
						<p><i class="fa fa-wheelchair" aria-hidden="true"></i> 3</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="prop-btm-w3ls">
						<h4>Luxury Villa<span>$60,320</span></h4>
						<p><i class="fa fa-map-marker" aria-hidden="true"></i>8901 Marmora Road,Italy</p>
					</div>
					
				</div>
				<div class="clearfix"></div>
			</div>
		<div class="clearfix"> </div>
			</div>
	</div>-->
	<!-- Modal2 -->
						<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h4>Yash Developer Plots</h4>
										<img src="images/g3.jpg" alt=" " class="img-responsive">
										<h5>PROPERTY FOR SALE</h5>
										<div class="prop-btm-w3ls">
											<h4>Luxury Villa<span>$55,320</span></h4>
											<p><i class="fa fa-map-marker" aria-hidden="true"></i>8901 Marmora Road,Australia</p>
										</div>
										<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
									</div>
								</div>
							</div>
						</div>
<!-- //Modal2 -->
<!-- Modal2 -->
						<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h4>Yash Developer Plots</h4>
										<img src="images/g4.jpg" alt=" " class="img-responsive">
										<h5>PROPERTY FOR SALE</h5>
										<div class="prop-btm-w3ls">
											<h4>Luxury Villa<span>$58,390</span></h4>
											<p><i class="fa fa-map-marker" aria-hidden="true"></i>8901 Marmora Road,New Jersey</p>
										</div>
										<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
									</div>
								</div>
							</div>
						</div>
<!-- //Modal2 -->
<!-- Modal2 -->
						<div class="modal fade" id="myModal3" tabindex="-1" role="dialog">
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h4>Yash Developer Plots</h4>
										<img src="images/g8.jpg" alt=" " class="img-responsive">
										<h5>PROPERTY FOR SALE</h5>
										
										<div class="prop-btm-w3ls">
											<h4>Luxury Villa<span>$60,320</span></h4>
											<p><i class="fa fa-map-marker" aria-hidden="true"></i>8901 Marmora Road,Italy</p>
										</div>
										<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
									</div>
								</div>
							</div>
						</div>
<!-- //Modal2 -->

<!-- //property -->
<!-- team -->
	<!--<div class="team" id="team">
		<div class="container">
		<div class="tittle-agileinfo">
			<h3>Our <span>Agents</span></h3>
			<p >Suspendisse fringilla pellentesque risus sit amet bibendum.</p>
		</div>
						  <div class="inner_w3l_agile_grids">
						<div class="sreen-gallery-cursual">
							
						       <div id="owl-demo" class="owl-carousel">
							      <div class="item-owl">
					                		<div class="test-review">
						                	  <img src="images/s1.jpg" class="img-responsive" alt=""/>
											  <h5>Nick Anderson</h5>
											  <h6>Manager</h6>
					                	    </div>
					                </div>
					                 <div class="item-owl">
					                	<div class="test-review">
						                	  <img src="images/s2.jpg" class="img-responsive" alt=""/>
											  <h5>Susan</h5>
											  <h6>Sales Agent</h6>
					                	    </div>
					                </div>
					                 <div class="item-owl">
					                	    <div class="test-review">
						                	  <img src="images/s3.jpg" class="img-responsive" alt=""/>
											  <h5>Mendelson</h5>
											  <h6>Agent</h6>
					                	    </div>
					                </div>
									 <div class="item-owl">
					                	    <div class="test-review">
						                	  <img src="images/s4.jpg" class="img-responsive" alt=""/>
											  <h5>John Smith</h5>
											  <h6>Area Agent</h6>
					                	    </div>
					                </div>
									<div class="item-owl">
					                	    <div class="test-review">
						                	  <img src="images/s5.jpg" class="img-responsive" alt=""/>
											 <h5>Alexandra</h5>
											  <h6>Manager</h6>
					                	    </div>
					                </div>
					                 <div class="item-owl">
					                		<div class="test-review">
						                	  <img src="images/s6.jpg" class="img-responsive" alt=""/>
											   <h5>Mendelson</h5>
											  <h6>Sales Manager</h6>
					                	    </div>
					                </div>
									 <div class="item-owl">
					                		<div class="test-review">
						                	  <img src="images/s1.jpg" class="img-responsive" alt=""/>
											  <h5>Nick Anderson</h5>
											  <h6>Agent</h6>
					                	    </div>
					                </div>
								</div>
							</div>
				            </div>

				<div class="clearfix"> </div>
		</div>
	</div>-->
<!-- //team -->
 <!--/gallery-->
<!-- <div class="gallery" id="gallery">-->
<!--	<div class="container">-->
<!--	<div class="tittle-agileinfo">-->
<!--			<h3>Our<span> Gallery</span></h3>-->
<!--			<p >Here are some of our project photos</p>-->
<!--		</div>-->
<!--		    <div class="w3-agile-top-info">	-->
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/project/5.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/project/5.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>	-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/project/6.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/project/6.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>	-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/project/7.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/project/7.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>		-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
							
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/project/8.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/project/8.jpg" alt="" />-->
<!--								<figcaption>-->
<!--								<h3><span></span></h3>-->
<!--								</figcaption>	-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/project/9.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/project/9.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>	-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/project/10.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/project/10.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>		-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
				
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/project/11.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/project/11.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>	-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/project/12.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/project/12.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>	-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/project/13.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/project/13.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>		-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
				
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/1.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/1.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>		-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
				
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/2.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/2.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>		-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
				
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/3.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/3.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>		-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>	-->
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/4.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/4.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>		-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
				
<!--				<div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/6.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/6.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>		-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
<!--			    <div class="col-md-4 gallery-grid">-->
<!--					<div class="grid">-->
<!--						<figure class="effect-roxy">-->
<!--							<a class="example-image-link" href="images/5.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">-->
<!--								<img src="images/5.jpg" alt="" />-->
<!--								<figcaption>-->
<!--									<h3><span></span></h3>-->
<!--								</figcaption>		-->
<!--							</a>-->
<!--						</figure>-->
<!--					</div>-->
<!--				</div>-->
				
<!--				</div>-->
				
<!--				<div class="clearfix"> </div>-->
<!--			</div>-->

<!--	</div>-->
<!--</div>-->

<div class="gallery" style="background-color:#333333; background-image:url('images/calendar-image.jpg'); background-size:100% 100%; border:2px solid #ec0b3f; padding:0px !important; ">
    <div class="container">
        <div class="tittle-agileinfo" style="background-color:transparent; margin:0px !important;padding:60px;">
            <h3 style="color:#ff0000; font-weight:bold; text-shadow:4px 4px #FFFFFF;">&#128198; Yash Developer - 2025 Calendar Download &#128198;</h3>
            <a href="pdf/Yash-Developer-Calender-2025.pdf" style="color:red; font-size:22px; font-weight:bold;" target="_blank">&#128065; View Calendar</a> - 
            <a href="pdf/Yash-Developer-Calender-2025.pdf"  style="color:green; font-size:22px; font-weight:bold;"  target="_blank" download> &#x2193; Download Calendar </a>
        </div>
    </div>
</div>

<div class="gallery" id="gallery">
    <div class="container">
        <div class="tittle-agileinfo">
            <h3>Our <span>Gallery</span></h3>
            <p>Here are some of our project photos</p>
        </div>

        <!-- Tabs for different galleries -->
        <div class="gallery-tabs">
            <ul class="tab-list">
                <li class="tab-item " data-tab="customer-gallery">Customer Gallery</li>
                <li class="tab-item active" data-tab="site-gallery">Site Gallery</li>
                <li class="tab-item" data-tab="office-gallery">Office Gallery</li>
            </ul>
        </div>

        <!-- Gallery Content -->
        <div class="tab-content">
            <!-- Customer Gallery -->
            <div class="tab-pane customer-gallery ">
                <?php
                $report_details = $db->get_team_details();
                if (!empty($report_details)) {
                    $counter = 0;
                    ?>
                    <div class="gallery-row">
                        <?php
                        foreach ($report_details as $record) {
                            $select_subject = $report_details[$counter][6];
                            if ($select_subject == 'gallery') {
                                $team_photo = $report_details[$counter][5];
                                ?>
                                <div class="gallery-grid">
                                    <div class="grid">
                                        <figure class="effect-roxy">
                                            <a class="example-image-link" href="mis_software7_dts-unts/project/dashboard/gallary/<?php echo $team_photo; ?>" data-lightbox="example-set" data-title="Customer Image">
                                                <img src="mis_software7_dts-unts/project/dashboard/gallary/<?php echo $team_photo; ?>" alt="" />
                                            </a>
                                        </figure>
                                    </div>
                                </div>
                                <?php
                            }
                            $counter++;
                        }
                        ?>
                    </div>
                <?php } ?>
            </div>

            <!-- Site Gallery -->
            <div class="tab-pane site-gallery active" style="margin-top:50px">
                <?php
                $report_details = $db->get_team_details();
                if (!empty($report_details)) {
                    $counter = 0;
                    ?>
                    <div class="gallery-row">
                        <?php
                        foreach ($report_details as $record) {
                            $select_subject = $report_details[$counter][6];
                            if ($select_subject == 'site') {
                                $team_photo = $report_details[$counter][5];
                                ?>
                                <div class="gallery-grid" style="background-color:white !important;">
                                    <div class="grid" style="background-color:white !important;">
                                        <figure class="effect-roxy">
                                            <a class="example-image-link" href="mis_software7_dts-unts/project/dashboard/gallary/<?php echo $team_photo; ?>" data-lightbox="example-set" data-title="Site Image">
                                                <img src="mis_software7_dts-unts/project/dashboard/gallary/<?php echo $team_photo; ?>" alt=""  />
                                            </a>
                                        </figure>
                                    </div>
                                </div>
                                <?php
                            }
                            $counter++;
                        }
                        ?>
                    </div>
                <?php } ?>
            </div>

            <!-- Office Gallery -->
            <div class="tab-pane office-gallery">
                <?php
                $report_details = $db->get_team_details();
                if (!empty($report_details)) {
                    $counter = 0;
                    ?>
                    <div class="gallery-row">
                        <?php
                        foreach ($report_details as $record) {
                            $select_subject = $report_details[$counter][6];
                            if ($select_subject == 'office') {
                                $team_photo = $report_details[$counter][5];
                                ?>
                                <div class="gallery-grid">
                                    <div class="grid">
                                        <figure class="effect-roxy">
                                            <a class="example-image-link" href="mis_software7_dts-unts/project/dashboard/gallary/<?php echo $team_photo; ?>" data-lightbox="example-set" data-title="Office Image">
                                                <img src="mis_software7_dts-unts/project/dashboard/gallary/<?php echo $team_photo; ?>" alt="" />
                                            </a>
                                        </figure>
                                    </div>
                                </div>
                                <?php
                            }
                            $counter++;
                        }
                        ?>
                    </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

<style>
/* Sticky Title and Tabs */
.tittle-agileinfo {
  position: sticky;
  top: 0;
  background-color: white; /* Ensure background is solid */
  z-index: 1000; /* Ensure the title and tabs stay above the content */
  padding: 10px 0;
  text-align: center;
  width: 100%; /* Ensure it spans the width of the page */
}

/* Tabs container with shiny gradient */
.gallery-tabs {
  padding: 10px 0;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tab-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  text-align: center;
}

.tab-item {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid orangered;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: 600;
  margin-left: 30px;
  background: linear-gradient(90deg, orangered, #236EB3);
  background-size: 200% 200%;
  animation: shine 1.5s ease-in-out infinite;
}

@keyframes shine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.tab-item:hover {
  color: #236EB3;
  padding: 10px 15px;
}

.tab-item.active {
  color: #fff;
  border: 1px solid orangered;
  border-radius: 5px;
  box-shadow: none; /* Remove box-shadow when active */
}

/* Glossy overlay effect */
.tab-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.tab-content {
  display: flex;
  flex-wrap: wrap;
  /*margin-top:270px;*/
  justify-content: flex-start;
  padding-top: 270px;
}

.tab-pane {
  display: none;
  width: 100%;
  box-shadow: none;
}

.tab-pane.active {
  display: block;
}

.gallery-row {
  display: flex; 
  flex-wrap: wrap;
  gap: 20px; /* Adds spacing between images */
}

.gallery-grid {
  flex: 1 1 23%; /* Ensures 4 items per row */
  margin-bottom: 20px;
}

.gallery-grid img {
  width: 100%;
  height: 230px;
  padding:10px;
  object-fit: fill; 
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}


.gallery-grid img:hover {
  transform: scale(1.05);
}

/* Responsive Layout for tablets and smaller devices */
@media screen and (max-width: 992px) {
  .gallery-grid {
    flex: 1 1 48%; /* 2 items per row */
  }

  .tab-item {
    margin-left: 10px; /* Reduce space between tabs */
    font-size: 14px; /* Adjust font size for smaller screens */
  }

  .gallery-tabs {
    padding: 0 10px; /* Reduce padding for smaller screens */
  }
}

/* For small screens (mobile) */
@media screen and (max-width: 600px) {
  .gallery-grid {
    flex: 1 1 100%; /* 1 item per row on small screens */
  }

  .tab-item {
    padding: 8px 12px; /* Adjust padding for smaller tabs */
    font-size: 14px; /* Adjust font size */
    margin-left: 10px; /* Reduce space between tabs */
  }

  .gallery-row {
    gap: 15px; /* Reduce space between images */
  }

  .gallery-tabs {
    padding: 0 10px; /* Adjust padding for smaller screens */
  }

  /* Ensure tabs are properly aligned */
  .tab-list {
    display: block;
    margin: 0;
    text-align: center;
  }

  .tab-item {
    display: block;
    margin: 5px 0; /* Stack tabs vertically on small screens */
  }
}

/* For even smaller screens (phones in portrait mode) */
@media screen and (max-width: 480px) {
  .tab-item {
    padding: 8px 12px; /* Further adjust padding */
  }

  .gallery-row {
    gap: 10px; /* Decrease gap between images */
  }

  .gallery-grid {
    flex: 1 1 100%; /* 1 item per row on very small screens */
  }

  .gallery-grid img {
    width: 100%; /* Ensure images take up full width */
  }
}


</style>

<script>
  // JavaScript to toggle tabs
  const tabs = document.querySelectorAll('.tab-item');
  const tabPanes = document.querySelectorAll('.tab-pane');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      // Remove active class from all tabs
      tabs.forEach(item => item.classList.remove('active'));
      // Add active class to the clicked tab
      tab.classList.add('active');

      // Hide all tab panes
      tabPanes.forEach(pane => pane.classList.remove('active'));

      // Show the clicked tab's content
      const tabContent = document.querySelector(`.${tab.dataset.tab}`);
      tabContent.classList.add('active');
    });
  });
</script>


<!--//gallery-->
<!-- testimonials -->
<!--
	<div class="testimonials">
		<div class="container">
		<div class="tittle-agileinfo">
			<h3>Some of our<span> happy clients</span></h3>
			<p >Suspendisse fringilla pellentesque risus sit amet bibendum.</p>
		</div>
			<div class="w3_testimonials_grids">
				<div id="slideshow" class="disabled">
					<button class="previous"><b>« Previous</b></button>
					<button class="next"><b>Next »</b></button>
					<div class="strip">
						<div class="slide sticky">
							<div class="col-md-6 agileinfo_team_grid">
					<div class="agileinfo_team_grid1">
						<div class="agileinfo_team_grid1_text">
							<div class="agileinfo_team_grid1_pos">
								<img src="images/s1.jpg" alt=" " class="img-responsive" />
							</div>
							<h4>Mark Henry</h4>
							<h5>Client 1</h5>
							<p>Sed eu sollicitudin ex. Donec malesuada maur ac lectus molestie tristique.</p>
						</div>
						
					</div>
				</div>
					<div class="col-md-6 agileinfo_team_grid">
					<div class="agileinfo_team_grid1">
						<div class="agileinfo_team_grid1_text">
							<div class="agileinfo_team_grid1_pos">
								<img src="images/s2.jpg" alt=" " class="img-responsive" />
							</div>
							<h4>John Mark</h4>
							<h5>Client 2</h5>
							<p>Sed eu sollicitudin ex. Donec malesuada maur ac lectus molestie tristique.</p>
						</div>
						
					</div>
				</div>
						</div>
						<div class="slide">
							<div class="col-md-6 agileinfo_team_grid">
					<div class="agileinfo_team_grid1">
						<div class="agileinfo_team_grid1_text">
							<div class="agileinfo_team_grid1_pos">
								<img src="images/s3.jpg" alt=" " class="img-responsive" />
							</div>
							<h4>Thomus Lii</h4>
							<h5>Client 3</h5>
							<p>Sed eu sollicitudin ex. Donec malesuada maur ac lectus molestie tristique.</p>
						</div>
						
					</div>
				</div>
				<div class="col-md-6 agileinfo_team_grid">
					<div class="agileinfo_team_grid1">
						<div class="agileinfo_team_grid1_text">
							<div class="agileinfo_team_grid1_pos">
								<img src="images/s5.jpg" alt=" " class="img-responsive" />
							</div>
							<h4>Joseph Carl</h4>
							<h5>Client 4</h5>
							<p>Sed eu sollicitudin ex. Donec malesuada maur ac lectus molestie tristique.</p>
						</div>
						
					</div>
				</div>
						</div>
						
					</div>
				</div>
				
			</div>
		</div>
	</div>
	-->
<!-- //testimonials -->
<!-- newsletter -->
	<!--<div class="agileits_w3layouts newsletter">
		<div class="col-md-4 news-left">
			<h3>Subscribe <span>Newsletter</span></h3>
		</div>
		<div class="col-md-8 news-right">
			<form action="#" method="post">
				<input class="email" type="email" name="Email" placeholder="Email" required="">
				<input type="submit" value="Submit">
			</form>
		</div>
		<div class="clearfix"> </div>
	</div>-->
<!-- //newsletter -->

<br><br><br><br><br><br><br>
<section>
    <!--<h1 class="title">our team</h1>-->
   	
	<div class="container">
	    
	    	<div class="tittle-agileinfo">
		<h3> Our <span> team</span></h3>
		<!--<p >Suspendisse fringilla pellentesque risus sit amet bibendum.</p>-->
	</div>
    <!-- <div class="tittle-agileinfo">
				<h3>our <span>team</span></h3>
	</div> -->
	<br>
   <center><h3 style="margin-top:10px" >Yash Developers and Constructions</h3></center> 
    <div class="team-row">
        <div class="member">
            <img src="images/Suyash.jpeg" alt="">
            <h2>Suyash Khanapure</h2>
            <p>Designation : Managing Director</p>
        </div>
         <div class="member">
            <img src="images/Sonali.jpeg" alt="">
            <h2>Sonali Khanapure</h2>
            <p>Designation : Director</p>
        </div>
    </div>
    
    	<br>
   <center><h3 style="margin-top:10px" >Yash And Yash Build Contra Pvt Ltd</h3></center> 
    <div class="team-row">
       
        <div class="member">
            <img src="images/Bapusaheb.jpeg" alt="">
            <h2>Bapusaheb Patil</h2>
            <p>Designation : Director</p>
        </div>
    </div>
     <div class="team-row">
        <div class="member">
            <img src="images/Sagar.jpeg" alt="">
            <h2>Sagar Lakhapati</h2>
            <p>Designation :  Operational Manager </p>
        </div>
        <div class="member">
            <img src="images/SUFIYAN MULLA1.jpeg" alt="">
            <h2>Sufiyan Mulla</h2>
            <p>Designation :Chief Engineer</p>
        </div>
        <div class="member">
            <img src="images/Nikhil1.jpeg" alt="">
            <h2>Nikhil Bayas</h2>   
            <p>Designation : Sales Manager</p>
        </div>
    </div>
    
    <div class="team-row">
        <div class="member">
            <img src="images/Megharaj.jpeg" alt="">
            <h2>Megharaj Tamshetti</h2>
            <p>Designation :  Supervisor </p>
        </div>
         <div class="member">
            <img src="images/Saipan.jpeg" alt="">
            <h2>Saifan Shaik </h2>
            <p>Designation : Supervisor </p>
        </div>
          <div class="member">
            <img src="images/Birajdar.jpeg" alt="">
            <h2>Omkar Birajdar </h2>
            <p>Designation : Supervisor </p>
        </div>
        <div class="member">
            <img src="images/Akash Shinde.jfif" alt="">
            <h2>Akash Shinde</h2>
            <p>Designation : Supervisor</p>
        </div>
        <div class="member">
            <img src="images/Kamil.jpeg" alt="">
            <h2>Kamil Patel</h2>
            <p>Designation : Supervisor</p>
        </div>
        <!--<div class="member">-->
        <!--    <img src="images/Prakash Tamshetti.jpeg" alt="">-->
        <!--    <h2>Prakash Tamshetti</h2>-->
        <!--    <p>Designation :  Senior Advisor </p>-->
        <!--</div>-->
        <!--<div class="member">-->
        <!--    <img src="images/Sudhir Kumavat1.jpeg" alt="">-->
        <!--    <h2>Sudhir Kumavat</h2>-->
        <!--    <p>Designation :  Senior Advisor</p>-->
        <!--</div>-->
        <!--<div class="member">-->
        <!--    <img src="images/Amit Adone Photo.jfif" alt="">-->
        <!--    <h2>Amit Adone</h2>-->
        <!--    <p>Designation :  Senior Advisor </p>-->
        <!--</div>-->
        <!--<div class="member">-->
        <!--    <img src="images/Nagesh Paskanti Photo.jfif" alt="">-->
        <!--    <h2>Nagesh Paskanti</h2>-->
        <!--    <p>Designation :  Senior Advisor </p>-->
        <!--</div>-->
        
    </div>
     <div class="team-row">
        
         <div class="member">
            <img src="images/kavita.jpeg" alt="">
            <h2>Kavita Yangundi</h2>
            <p>Designation :  Cashier</p>
        </div>
        <div class="member">
            <img src="images/Amarnath.jpeg" alt="">
             <h2>Amarnath Yaldandi</h2>
            <p>Designation : Accountant </p>
        </div>
    </div>
     <div class="team-row">
        <div class="member">
            <img src="images/Dhanraj Kolhapure Photo New.jfif" alt="">
            <h2>Dhanraj Kolhapure</h2>
            <p>Designation : Senior Sales Executive</p>
        </div>
        <div class="member">
            <img src="images/Nayan.jpeg" alt="">
            <h2>Nayan Lakapati</h2>
            <p>Designation : Senior Sales Executive </p>
        </div>
        <div class="member">
            <img src="images/Nitin.jpeg" alt="">
            <h2>Nitin Shirke</h2>
            <p>Designation : Senior Sales Executive </p>
        </div>
        <div class="member">
            <img src="images/Sudhir Kumavat1.jpeg" alt="">
            <h2>Sudhir Kumavat</h2>
            <p>Designation :  Senior Sales Executive</p>
        </div>
        <div class="member">
            <img src="images/Amit Adone Photo.jfif" alt="">
            <h2>Amit Adone</h2>
            <p>Designation :  Senior Sales Executive</p>
        </div>
        <div class="member">
            <img src="images/Prakash Tamshetti.jpeg" alt="">
            <h2>Prakash Tamshetti</h2>
            <p>Designation :   Senior Sales Executive </p>
        </div>
     </div>
     
     
    
    <!-- <div class="team-row">-->
    <!--    <div class="member">-->
    <!--        <img src="images/Prakash Tamshetti.jpeg" alt="">-->
    <!--        <h2>Prakash Tamshetti</h2>-->
    <!--        <p>Designation :   Advisor </p>-->
    <!--    </div>-->
    <!--    <div class="member">-->
    <!--        <img src="images/Sudhir Kumavat.jpeg" alt="">-->
    <!--        <h2>Sudhir Kumavat</h2>-->
    <!--        <p>Designation :   Advisor</p>-->
    <!--    </div>-->
        <!--<div class="member">-->
        <!--    <img src="" alt="">-->
        <!--    <h2>Senior Advisor</h2>-->
        <!--    <p>Designation :   Advisor </p>-->
        <!--</div>-->
        <!--<div class="member">-->
        <!--    <img src="" alt="">-->
        <!--    <h2>Senior Advisor</h2>-->
        <!--    <p>Designation :   Advisor</p>-->
        <!--</div>-->
        
    <!--</div>-->
     <div class="team-row">
        <div class="member">
            <img src="images/Adhir Gonyal1.jpeg" alt="">
            <h2>Adhir Gonyal</h2>
            <p>Designation : Sales Executive</p>
        </div>
        <div class="member">
            <img src="images/Vivek.jpeg" alt="">
            <h2>Vivek Mohan Kshirsagar</h2>
            <p>Designation : Sales Executive</p>
        </div>
        <div class="member">
            <img src="images/Veerbhadra.jpeg" alt="">
            <h2>Veerbhadra Swami </h2>
            <p>Designation : Sales Executive</p>
        </div>
         <div class="member">
            <img src="images/Akshay.jpeg" alt="images/Akshay.jpeg">
            <h2>Akshay Hiremath  </h2>
            <p>Designation : Sales Executive</p>
        </div>
         <div class="member">
            <img src="images/Navin Yannam Photo.jfif" alt="">
            <h2>Navin Yannam</h2>
            <p>Designation : Sales Executive </p>
        </div>
       
        <div class="member">
            <img src="images/Vinayak Indapure.jpeg" alt="">
            <h2>Vinayak Indapure</h2>
            <p>Designation : Sales Executive</p>
        </div>
   
       
        <!--<div class="member">-->
        <!--    <img src="" alt="">-->
        <!--    <h2>Sales Executiv</h2>-->
        <!--    <p>Designation : Sales Executive </p>-->
        <!--</div>-->
        
    </div>
    <div class="team-row">
        
        <div class="member">
            <img src="images/aditya.jpeg" alt="images/aditya.jpeg">
            <h2>Aditya Chilweri</h2>
            <p>Designation : Sales Executive</p>
        </div>
        <div class="member">
            <img src="images/Chandan.jpeg" alt="">
            <h2>Chandan Maindargi</h2>
            <p>Designation : Sales Executive</p>
        </div>
        <div class="member">
            <img src="images/Piyush.jpeg" alt="">
            <h2>Piyush Panche</h2>
            <p>Designation : Sales Executive</p>
        </div>
        <div class="member">
            <img src="images/Prashant.jpeg" alt="">
            <h2>Prashanth Gaikwad</h2>
            <p>Designation : Sales Executive</p>
        </div>
        <div class="member">
            <img src="images/Tejas.jpeg" alt="">
            <h2>Tejas Dede</h2>
            <p>Designation : Sales Executive</p>
        </div>
        <!--<div class="member">-->
        <!--    <img src="images/Sandeep Santi Photo.jfif" alt="">-->
        <!--    <h2>Sandip Santi</h2>-->
        <!--    <p>Designation : Sales Executive</p>-->
        <!--</div>-->
       
        <!--<div class="member">-->
        <!--    <img src="images/Ajay Shinde Photo JPG.jpg" alt="">-->
        <!--    <h2>Ajay Shinde</h2>-->
        <!--    <p>Designation : Sales Executive </p>-->
        <!--</div>-->
        <!--     <div class="member">-->
        <!--    <img src="images/SANJANA MYAGERI.jpeg" alt="">-->
        <!--    <h2>Sanjana Myageri </h2>-->
        <!--    <p>Designation : Sales Executive </p>-->
        <!--</div>-->
    </div>
</section>

<style type="text/css">
	
.title{
    text-align: center;
    text-transform: capitalize;
    color: #000	;
    font-size: 40px;
    margin: 10px 0;
    position: relative;
}

.title::after{
    content: "";
    position: absolute;
    width: 20%; height: 2px;
    background-image: linear-gradient(to left, transparent 5%, #726a95);
    bottom: -10px; left: 50%;
    transform: translate(-50%);
}

.team-row{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 40px 0;
}

.member{
    flex: 1 1 250px;
    margin: 20px;
    text-align: center;
    border:1px solid rgba(0,0,0,0.4);
    padding: 20px 10px;
    cursor: pointer;
    max-width: 300px;
    transition: all 0.3s;
}

.member:hover{
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transform: translateY(-20px);
}

.member img{
    display: block;
    width: 150px; height: 150px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto;
    margin-top:10p;
}

.member h2{
    text-transform: uppercase;
    font-size: 24px;
    color: #000;
    margin: 15px 0;
}

.member p{
    font-size: 15px;
    color: #838383;
    line-height: 1.6;
}
</style>

<!-- contact -->
<hr />
    <div class="contact" id="contact">
        <div class="container">
            <div class="tittle-agileinfo">
                <h3>Contact <span>Us</span></h3>
            </div>
            <div class="agile-contact-grids">
                <div class="col-md-12 agile-contact-left">
                    <div class="address-grid">
                        <ul class="w3_address">
                            <!-- Office Address Section -->
                            <li class="col-md-3">
                                <i class="fa fa-map-marker" aria-hidden="true" style="float:left; font-size:40px; margin-right:15px;"></i>
                                <h3 style="padding-top:15px;">Office Address</h3>
                                <br />
                                <div style="padding-left:35px; width:90%; margin-top:0px;"><?php echo $address1 ?></div>
                            </li>
                            
                            <!-- Call Us Section -->
                            <li class="col-md-3">
                                <i class="fa fa-mobile" aria-hidden="true" style="float:left; font-size:40px; margin-right:15px;"></i>
                                <h3 style="padding-top:15px;">Call Us</h3>
                                <div style="padding-left:35px; margin-top:15px; font-size:20px;">
                                    <a href="tel:+91 9096355405">+91 9096355405</a>
                                </div>
                            </li>

                            <!-- Connect with Us Section -->
                            <li class="col-md-3">
                                <i class="fa fa-mobile" aria-hidden="true" style="float:left; font-size:40px; margin-right:15px;"></i>
                                <h3 style="padding-top:15px;">Connect with Us</h3>
                                <div style="padding-left:35px; margin-top:15px; font-size:20px;">
                                    <a href="https://www.facebook.com/yashdevelopers" target="_blank">
                                        <i class="bi bi-facebook" style="display:inline-block; font-size:25px; margin-right:15px; color:blue;"></i>
                                    </a>
                                    <a href="https://www.youtube.com/c/yashdevelopers" target="_blank">
                                        <i class="bi bi-youtube" style="display:inline-block; font-size:25px; margin-right:15px; color:red;"></i>
                                    </a>
                                    <a href="mailto:yashdevelopers@gmail.com" target="_blank">
                                        <i class="bi bi-envelope" style="display:inline-block; font-size:25px; margin-right:15px; color:orange;"></i>
                                    </a>
                                    <a href="https://www.instagram.com/yashdevelopers" target="_blank">
                                        <i class="bi bi-instagram" style="display:inline-block; font-size:25px; margin-right:15px; color:orangered;"></i>
                                    </a>
                                    <a href="https://www.yashdevelopers.com" target="_blank">
                                        <i class="bi bi-link" style="display:inline-block; font-size:25px; margin-right:15px; color:blue;"></i>
                                    </a>
                                </div>
                            </li>

                            <!-- Email Us Section -->
                            <li class="col-md-3">
                                <i class="fa fa-envelope-o" aria-hidden="true" style="float:left; font-size:40px; margin-right:15px;"></i>
                                <h3 style="padding-top:15px;">Email Us</h3>
                                <div style="padding-left:5px; margin-top:15px; display:inline-table;">
                                    <a href="mailto:info@yashdeveloper.com">info@yashdeveloper.com</a><br />
                                    <a href="mailto:yashdevelopers7070@gmail.com">yashdevelopers7070@gmail.com</a>
                                </div>
                            </li>

                            <!-- Google Review Section -->
                            <li class="col-md-3">
                                <div style="padding-left:5px; margin-bottom:15px; font-size:15px;font-weight:800">
                                    <a href="https://g.co/kgs/u8FKAgu" target="_blank" style="color:#FF9900;">
                                        Click here to leave a review!
                                    </a>
                                </div>
                               <a href="https://g.co/kgs/u8FKAgu" target="_blank" style="color:#FF9900;">  <i class="fa fa-star" aria-hidden="true" style="float:left; font-size:30px; margin-right:15px;color:#E5DC2E"></i></a>
                                <a href="https://g.co/kgs/u8FKAgu" target="_blank" style="color:#FF9900;">  <i class="fa fa-star" aria-hidden="true" style="float:left; font-size:30px; margin-right:15px;color:#E5DC2E"></i></a>
                                 <a href="https://g.co/kgs/u8FKAgu" target="_blank" style="color:#FF9900;">  <i class="fa fa-star" aria-hidden="true" style="float:left; font-size:30px; margin-right:15px;color:#E5DC2E"></i></a>
                                 <a href="https://g.co/kgs/u8FKAgu" target="_blank" style="color:#FF9900;">   <i class="fa fa-star" aria-hidden="true" style="float:left; font-size:30px; margin-right:15px;color:#E5DC2E"></i></a>
                                  <a href="https://g.co/kgs/u8FKAgu" target="_blank" style="color:#FF9900;">   <i class="fa fa-star" aria-hidden="true" style="float:left; font-size:30px; margin-right:15px;color:#E5DC2E"></i></a>
                                <!--<h3 style="padding-top:15px;">Leave a Google Review</h3>-->
                                
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Contact Form and Map -->
                <div style="background-color:#333333; display:inline-table; width:100%; padding:15px; margin-top:30px;">
                    <div class="col-md-6 agile-contact-left">
                        <div class="contact-form">
                            <h4 style="color:#FFFFFF;">Contact Form</h4>
                            <form action="#" method="post">
                                <div class="styled-input agile-styled-input-top">
                                    <input type="text" name="Name" required="" style="color:#FFFFFF;">
                                    <label>Name</label>
                                    <span></span>
                                </div>
                                <div class="styled-input">
                                    <input type="email" name="Email" required="" style="color:#FFFFFF;"> 
                                    <label>Email</label>
                                    <span></span>
                                </div> 
                                <div class="styled-input">
                                    <input type="text" name="Subject" required="" style="color:#FFFFFF;">
                                    <label>Subject</label>
                                    <span></span>
                                </div>
                                <div class="styled-input">
                                    <textarea name="Message" required="" style="color:#FFFFFF;"></textarea>
                                    <label>Message</label>
                                    <span></span>
                                </div>	 
                                <input type="submit" value="SEND">
                            </form>
                        </div>
                    </div>

                    <div class="col-md-6 agile-contact-right">
                        <div class="agileits-map">
                            <h4 style="color:#FFFFFF; margin-top:25px;">Our Location</h4>
                        </div>
                        <div class="map-grid">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d672.0059687701843!2d75.90289186820061!3d17.67667125222651!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc5dbdcc92fcce3%3A0x5c0b54018263663c!2sYash%20Developers!5e0!3m2!1sen!2sin!4v1707219455160!5m2!1sen!2sin" style="border:0; height:350px !important;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
        </div>
    </div>
	<!-- //contact -->

        <a href="tel:+91 9096355405" class="call_btn pulse"><img src="https://cdn-icons-png.flaticon.com/512/217/217887.png" style="height:60px;" /></a>
    
        <a href="https://wa.me/+919096355405?text=Thank you for connecting with Yash Developers." class="wppBtn pulse"></a>
        <style>
            .wppBtn {
              position: fixed;
              bottom: 40px;
              right: 35px;
              width: 60px;
              height: 70px;
              z-index: 999;
              max-width: 60px;
              max-height: 60px;
              background-size: cover;
              border-radius: 50px;
              margin-bottom:60px;
              background-repeat: no-repeat;
              background-image: url(images/wp1.jpg);
            }
            
            .call_btn {
              position: fixed;
              bottom: 120px;
              right:35px;
              width: 60px;
              height: 60px;
              z-index: 999;
              max-width: 60px;
               margin-bottom:60px;
              max-height: 60px;
              background-size: cover;
              background-repeat: no-repeat;
             
            }
            
            /* pulse */
            .pulse {position: fixed;}
            .pulse:after {
                content: "";
                display: block;
                width: 70px;
                height: 70px;
                border-radius: 40px;
                border: 3px solid #4caf50;
                position: absolute;
                top: -3px;
                left: -3px;
                animation: pulse 2s ease 0s infinite;
            }
            @keyframes pulse {
              0% {
                  opacity: 1;
                  transform: scale(1);
              }
              80% {
                  opacity: 0;
                  transform: scale(1.2);
              }
              100% {
                  opacity: 0;
                  transform: scale(2);
              }
            }
            .call_now_btn
            {
                width:60%;
            }
            @media only screen and (max-width: 600px) {
              .call_now_btn
                {
                    width:80%;
                }
            }
            </style>         

<!--footer-->
			<div class="copy">
		        <p>© 2023 Yash Developer Plots . All Rights Reserved | Design by <a href="http://www.dreamtechnology.in">Dream Technology</a> </p>
		    </div>
<!--/footer -->



<style type="text/css">
.success-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background:  linear-gradient(166.66deg, rgb(31, 117, 206) 4.62%, rgb(23, 121, 207) 4.62%, rgb(116, 75, 196) 86.29%) !important;
    color: white;
    text-align: center;
    padding: 5px;
    font-size: 18px;
    z-index: 10000;
    display: block; /* Show the message */
    animation: slideDown 3s ease-in-out; /* Optional animation for a smooth effect */
}

.chat-widget-container {
    position: fixed;
    bottom: -50px;
    right: 130px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Chat Box */
.chat-box {
    display: none;
    position: absolute;
    bottom: 60px;
    right: 0;
    background-color: #fff;
    width: 300px;
    height: 250px;
    border-radius: 8px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-header {
    background: linear-gradient(166.66deg, rgb(31, 117, 206) 4.62%, rgb(23, 121, 207) 4.62%, rgb(116, 75, 196) 86.29%) !important;
    color: white;
    padding: 5px;
    font-size: 16px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.chat-content {
    padding: 10px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.chat-message {
    margin-bottom: 10px;
    background-color: #f1f1f1;
    padding: 8px;
    border-radius: 5px;
}

.contact-form {
    padding: 10px;
    margin-top:-1px;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
    display: flex;
    flex-direction: column;
}

.contact-form label {
    font-size: 12px;
    color: #555;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;  /* Adds professionalism */
    letter-spacing: 0.5px;      /* Adds spacing between letters for a clean look */
}

/* Input Field Styling */
.contact-form input {
    padding: 5px 5px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 10px;        /* Soft rounded corners */
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    background-color: #f9f9f9; /* Soft background color */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus Effect on Input Fields */
.contact-form input:focus {
    border-color: #007bff;     /* Blue border when focused */
    outline: none;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);  /* Subtle shadow */
    background-color: #ffffff; /* White background when focused */
}


.contact-form button {
    background: linear-gradient(166.66deg, rgb(31, 117, 206) 4.62%, rgb(23, 121, 207) 4.62%, rgb(116, 75, 196) 86.29%) !important;
    color: white;
    padding: 5px 5px; /* Increased padding for better appearance */
    border: none;
    margin-top: 70px; /* Adjusted margin */
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    font-weight: 600;
    margin-left: 100px;
    width: 100%; /* Makes button fill the width of the parent container */
    max-width: 70px; /* Set a max width for the button */
    text-align: center; /* Ensure the text is centered inside the button */
}

.contact-form button:hover {
    background-color: #0056b3;
}

.chat-footer {
    background: linear-gradient(166.66deg, rgb(31, 117, 206) 4.62%, rgb(23, 121, 207) 4.62%, rgb(116, 75, 196) 86.29%) !important;
    padding: 5px;
    text-align: center;
    font-size: 14px;
    color: white;
    margin-top: 35px;
    border-bottom: 15px;
}

.close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.success-icon {
    display: inline-block;
    width: 25px;        /* Circle width */
    height: 25px;       /* Circle height */
    border-radius: 50%; /* Make it a circle */
    background-color: #28a745; /* Green color */
    color: #fff;        /* White color for the checkmark */
    text-align: center; /* Center align the content horizontally */
    line-height: 25px;  /* Center the checkmark vertically (should match height) */
    font-size: 18px;    /* Size of the checkmark */
    font-weight: bold;  /* Make the checkmark bold */
}
.header-text {
    display: flex;
    align-items: center;
    font-size: 16px;  /* Adjust text size */
}

/* Icon Styling */
.header-text i {
    font-size: 20px;  /* Icon size */
    color: #fff;      /* White color for the icon */
    margin-right: 8px; /* Space between icon and text */
}
</style>

 <div class="chat-widget-container" id="chat-widget">
    <!-- Chat Box -->
    <div class="chat-box" id="chat-box">
       <div class="chat-header">
		    <span class="header-text">
		         <i class="fas fa-comments"></i> <!-- Handshake icon for professionalism -->
		        Send 	details, we will reach you
		    </span>
		</div>
        		<?php if ($flag == 1): ?>
			       	<div class="success-message">
			       		  <span class="success-icon">&#10003;</span> 
			            <span>Details successfully sent!</span>
			        </div>
			    <?php endif; ?>

        <!-- Contact Form Section -->
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <div class="contact-form">
            <label for="name">Your Name:</label>
            <input type="text" id="name" name="user_name" placeholder="Enter your name" required>

            <label for="contact">Contact Number:</label>
            <input type="text" id="contact" name="user_contact" placeholder="Enter your contact number" required>

            <button type="submit" name="add_contact" >Submit</button>
        </div>
    	</form>	

        <div class="chat-footer">
            <span>Yashbdevelopers</span>
        </div>
    </div>
</div>



<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>


<!-- FlexSlider -->
				  <script defer src="js/jquery.flexslider.js"></script>
				  <script type="text/javascript">
					$(function(){				 
					});
					$(window).load(function(){
					  $('.flexslider').flexslider({
						animation: "slide",
						start: function(slider){
						  $('body').removeClass('loading');
						}
					  });
					});
				  </script>
<!-- FlexSlider -->
<script src="js/lightbox-plus-jquery.min.js"> </script>
<!-- required-js-files-->
	<script src="js/owl.carousel.js"></script>
		<script>
			$(document).ready(function() {
			$("#owl-demo").owlCarousel({
			items :3,
			itemsDesktop : [768,2],
			itemsDesktopSmall : [414,2],
			lazyLoad : true,
			autoPlay : true,
			navigation :true,
			navigationText :  false,
			pagination : true,
			});
			});
			</script>
<!--//required-js-files-->
<!-- clients-slider-script -->
				<script src="js/slideshow.min.js"></script>
				<script src="js/launcher.js"></script>
<!-- //clients-slider-script -->

<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	
	
	<a href="#home" class="scroll" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
<script src="js/bootstrap.js"></script>

</body>
</html>

EliteHackz.ORG
Revonzy Mini Shell
root@revonzy.com

Linux 65-254-81-4.cprapid.com 5.14.0-284.11.1.el9_2.x86_64 #1 SMP PREEMPT_DYNAMIC Tue May 9 05:49:00 EDT 2023 x86_64
Apache
65.254.81.4