@include('user_layout.header');
 
  <div class="hiddenbar-body-ovelay"></div>

 
  <div id="page" class="mobilie_header_nav stylehome1">
     
    <div class="mobile-menu">
      <div class="header innerpage-style">
        <div class="menu_and_widgets">
          <div class="mobile_menu_bar d-flex justify-content-between align-items-center">
            <a class="menubar" href="#menu"><img src="uploads/mobile-dark-nav-icon.svg" alt=""></a>
            
       <!--     <a href="page-login.php"><span class="icon fz18 fa fa-user-circle"></span></a>  -->        </div>
        </div>
      </div>
    </div>
    <!-- /.mobile-menu -->
    <nav id="menu" class="">
      <ul>
        <li><a href="{{ asset('home')}}">Home</a></li>
		<li><a href="{{ asset('about-us')}}">ABOUT US</a></li>
        <li><a href="{{ asset('projects')}}">Projects</a></li>
		<li><a href="sale.php">Re-Sale</a></li>
		<li><a href="rent.php">Rent</a></li>
		<li><a href="team.php">Team</a></li>
		<li><a href="career.php">Career</a></li>
		<li><a href="contact.php">Contact Us</a></li>
        
         
       
        <!-- Only for Mobile View -->
      </ul>
    </nav>

     
  </div>
    



  <div class="body_content">
    <!-- Property All Lists -->
      <!-- UI Elements Sections -->
<!-- <section class="breadcumb-section2" style="background-color: #000; padding: 44px 0 40px 0;">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="breadcumb-style1" style="text-align: center;">
          <h2 class="title" style="font-size: 46px; color: #fff; letter-spacing: 2px; font-weight: 600; margin-top: 80px;">
            ABOUT US
          </h2>
          <P>Turn Your Property Dreams Into Reality</P>
        </div>
      </div>
    </div>
  </div>
</section> -->
<section class="breadcumb-section2" style="background-color: #000; padding: 44px 0 60px 0;">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="breadcumb-style1" style="text-align: center;">

          <!-- Main Title -->
          <h2 class="title" style="
            font-size: 46px; 
            color: #fff; 
            letter-spacing: 2px; 
            font-weight: 600; 
            margin-top: 80px;">
            ABOUT US
          </h2>

          <!-- Slogan -->
          <p style="
            font-size: 20px; 
            color: #f5d473; 
            margin-top: 10px; 
            letter-spacing: 1px; 
            font-weight: 300;">
            "Turning Your Property Dreams Into Reality"
          </p>

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



<div style="width: 100%; height: 1px; background-color: #fff;"></div>
<!-- Achievements / Stats Section -->
<section class="achievements-section" style="background-color:#000; color:#d4af37; padding:80px 0; font-family:'Poppins',sans-serif;">
  <div style="max-width:1100px; margin:0 auto; text-align:center;">
    <h2 style="font-size:36px; margin-bottom:50px; color:#d4af37; letter-spacing:1px;">
      OUR GLOBAL ACHIEVEMENTS
    </h2>

    <div class="achievements-container" style="display:flex; flex-wrap:wrap; justify-content:center; gap:40px;">

      <!-- Box 1 -->
      <div class="achievement-box">
        <div style="font-size:50px; margin-bottom:20px;">🌍</div>
        <h3>Over 6000+</h3>
        <p>Clients Globally</p>
      </div>

      <!-- Box 2 -->
      <div class="achievement-box">
        <div style="font-size:50px; margin-bottom:20px;">👥</div>
        <h3>250+</h3>
        <p>Employees Globally</p>
      </div>

      <!-- Box 3 -->
      <div class="achievement-box">
        <div style="font-size:50px; margin-bottom:20px;">💰</div>
        <h3>150 Million + USD</h3>
        <p>In Commission Achieved</p>
      </div>

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

<style>
/* Achievement Box Styling */
.achievement-box {
  flex: 1 1 280px;
  background-color: #111;
  border: 1px solid #d4af37;
  border-radius: 15px;
  padding: 40px 20px;
  box-shadow: 0 0 15px rgba(212,175,55,0.3);
  transition: all 0.4s ease;
  cursor: pointer;
}

.achievement-box h3 {
  font-size: 26px;
  color: #d4af37;
  margin-bottom: 10px;
}

.achievement-box p {
  color: #f5f5f5;
  font-size: 16px;
}

/* Hover Effect */
.achievement-box:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 0 30px rgba(212,175,55,0.6);
  background-color: #1a1a1a;
  border-color: #fff;
}
</style>


  <section id="director" class="director-highlight-section">
  <div class="container">
    <div class="director-highlight">
      <div class="director-image-wrap">
        <img src="{{ asset('images/founder.png') }}" alt="Director - Sanjeev Kumar Sharma">
      </div>

      <div class="director-content">
        <span class="director-eyebrow">Director</span>
        <h2>Meet Our Director</h2>
        <p>
          Sanjeev Kumar Sharma leads Sanjeev Properties with a clear vision for premium real estate advisory,
          trusted investment guidance, and client-first property experiences across high-growth markets.
        </p>
        <a href="{{ url('/founder') }}" class="director-btn">Read More About Director</a>
      </div>
    </div>
  </div>
</section>

<style>
.director-highlight-section {
  background: linear-gradient(135deg, #060606, #171717);
  padding: 90px 20px;
}

.director-highlight {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 58px;
  align-items: center;
}

.director-image-wrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.35);
  background: #111;
}

.director-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.director-content {
  max-width: 640px;
  color: #fff;
}

.director-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: #d4af37;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.director-content h2 {
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 18px;
}

.director-content p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.director-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  background: #d4af37;
  color: #000;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.director-btn:hover {
  background: #c19a2c;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(212, 175, 55, 0.28);
}

@media (max-width: 991.98px) {
  .director-highlight {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .director-image-wrap {
    max-width: 420px;
    margin: 0 auto;
  }

  .director-content {
    text-align: center;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .director-highlight-section {
    padding: 64px 16px;
  }

  .director-content h2 {
    font-size: 32px;
  }

  .director-content p {
    font-size: 15px;
  }
}
</style>


    
<section class="our-cta2 p0" style="overflow: hidden;">
      <div class="cta-banner2 bgc-thm maxw1600 mx-auto pt100 pt50-md pb85 pb50-md px30-md bdrs12 position-relative">
        <div class="img-box-5">
          <img class="img-1 spin-right" src="uploadselement-1.png" alt="">
        </div>
        <div class="img-box-6">
          <img class="img-1 spin-left" src="uploadselement-2.png" alt="">
        </div>
        <div class="cta-style2 d-none d-lg-block wow fadeInRight" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInRight;">
          <img src="uploads/cta-img-1.png" alt="">
        </div>
        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-xl-6 wow fadeInUp" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInUp;">
              <div class="cta-style2">
                <h2 class="cta-title">Need help? Talk to our expert</h2>
                <p class="cta-text">"Join us on this exciting journey as we shape the future of Real Estate"</p>
                <a href="contact.php" class="ud-btn btn-dark mt10">Learn More<i class="fa fa-long-arrow-right"></i></a><br><br>
				<a href="tel:8527520000" class="ud-btn btn-dark"><span class="fa fa-mobile vam pe-2"></span>8527520000</a> 
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    @include('user_layout.footer');
     
  <!-- Our CTA -->