<?php 
$page_title = "Our Team - Sales Basket";
$meta_description = "Meet our expert team of real estate professionals dedicated to helping you find your dream home.";
$meta_keywords = "real estate team, property experts, real estate agents, home consultants";
include 'header.php'; ?>
   <!DOCTYPE html>
<html lang="en">
<head>
    <title><?php echo $page_title; ?></title>
    <link rel="icon" href="images/icon.webp" type="image/gif" sizes="16x16">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php echo $meta_description; ?>">
    <meta name="keywords" content="<?php echo $meta_keywords; ?>">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- CSS Files -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/plugins.css" rel="stylesheet" type="text/css">
    <link href="css/swiper.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/coloring.css" rel="stylesheet" type="text/css">
    <link href="css/colors/scheme-01.css" rel="stylesheet" type="text/css">
    <link href="css/datepicker.css" rel="stylesheet" type="text/css">
    </head>

<body>

<!-- Page Banner -->
<section class="page-banner" style="background: linear-gradient(rgba(0, 55, 49, 0.8), rgba(0, 55, 49, 0.8)), url('images/background/1.webp') center/cover no-repeat;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-title text-center">
                    <h1 class="text-white mb-3">Our Expert Team</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a href="index.php" class="text-white">Home</a></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section class="team-section pt-120 pb-90">
    <div class="container">
        <div class="section-title text-center mb-60">
            <span class="subtitle text-uppercase" style="color: #FF6B35; font-weight: 600;">Our Professionals</span>
            <h2 class="mb-3" style="color: #003731;">Meet Our Expert Team Members</h2>
            <div class="title-divider">
                <span class="d-inline-block" style="background-color: #FF6B35; width: 50px; height: 2px;"></span>
            </div>
        </div>

        <div class="row g-4">
            <!-- Team Member 1 -->
            <div class="col-lg-3 col-md-6">
                <div class="team-card text-center">
                    <div class="team-img mb-3">
                        <img src="images/team/team-1.jpg" alt="Team Member" class="img-fluid rounded-circle" style="width: 200px; height: 200px; object-fit: cover; border: 5px solid #FF6B35;">
                        <div class="team-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <h4 class="mb-1">John Smith</h4>
                    <p class="text-muted mb-0">CEO & Founder</p>
                </div>
            </div>

            <!-- Team Member 2 -->
            <div class="col-lg-3 col-md-6">
                <div class="team-card text-center">
                    <div class="team-img mb-3">
                        <img src="images/team/team-2.jpg" alt="Team Member" class="img-fluid rounded-circle" style="width: 200px; height: 200px; object-fit: cover; border: 5px solid #FF6B35;">
                        <div class="team-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <h4 class="mb-1">Sarah Johnson</h4>
                    <p class="text-muted mb-0">Chief Architect</p>
                </div>
            </div>

            <!-- Team Member 3 -->
            <div class="col-lg-3 col-md-6">
                <div class="team-card text-center">
                    <div class="team-img mb-3">
                        <img src="images/team/team-3.jpg" alt="Team Member" class="img-fluid rounded-circle" style="width: 200px; height: 200px; object-fit: cover; border: 5px solid #FF6B35;">
                        <div class="team-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <h4 class="mb-1">Michael Chen</h4>
                    <p class="text-muted mb-0">Project Manager</p>
                </div>
            </div>

            <!-- Team Member 4 -->
            <div class="col-lg-3 col-md-6">
                <div class="team-card text-center">
                    <div class="team-img mb-3">
                        <img src="images/team/team-4.jpg" alt="Team Member" class="img-fluid rounded-circle" style="width: 200px; height: 200px; object-fit: cover; border: 5px solid #FF6B35;">
                        <div class="team-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <h4 class="mb-1">Emily Wilson</h4>
                    <p class="text-muted mb-0">Interior Designer</p>
                </div>
            </div>

            <!-- Team Member 5 -->
            <div class="col-lg-3 col-md-6">
                <div class="team-card text-center">
                    <div class="team-img mb-3">
                        <img src="images/team/team-5.jpg" alt="Team Member" class="img-fluid rounded-circle" style="width: 200px; height: 200px; object-fit: cover; border: 5px solid #FF6B35;">
                        <div class="team-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <h4 class="mb-1">David Kim</h4>
                    <p class="text-muted mb-0">Lead Engineer</p>
                </div>
            </div>

            <!-- Team Member 6 -->
            <div class="col-lg-3 col-md-6">
                <div class="team-card text-center">
                    <div class="team-img mb-3">
                        <img src="images/team/team-6.jpg" alt="Team Member" class="img-fluid rounded-circle" style="width: 200px; height: 200px; object-fit: cover; border: 5px solid #FF6B35;">
                        <div class="team-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <h4 class="mb-1">Lisa Wong</h4>
                    <p class="text-muted mb-0">Marketing Director</p>
                </div>
            </div>

            <!-- Team Member 7 -->
            <div class="col-lg-3 col-md-6">
                <div class="team-card text-center">
                    <div class="team-img mb-3">
                        <img src="images/team/team-7.jpg" alt="Team Member" class="img-fluid rounded-circle" style="width: 200px; height: 200px; object-fit: cover; border: 5px solid #FF6B35;">
                        <div class="team-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <h4 class="mb-1">Robert Garcia</h4>
                    <p class="text-muted mb-0">Site Supervisor</p>
                </div>
            </div>

            <!-- Team Member 8 -->
            <div class="col-lg-3 col-md-6">
                <div class="team-card text-center">
                    <div class="team-img mb-3">
                        <img src="images/team/team-8.jpg" alt="Team Member" class="img-fluid rounded-circle" style="width: 200px; height: 200px; object-fit: cover; border: 5px solid #FF6B35;">
                        <div class="team-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <h4 class="mb-1">Michelle Lee</h4>
                    <p class="text-muted mb-0">Customer Relations</p>
                </div>
            </div>
        </div>
    </div>
</section>


<style>
/* Page Banner */
.page-banner {
    padding: 120px 0 80px;
    position: relative;
    color: #fff;
    text-align: center;
}

.page-title h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
}

.breadcrumb {
    justify-content: center;
    background: transparent;
    padding: 0;
}

.breadcrumb-item a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #FF6B35;
}

.breadcrumb-item.active {
    color: #fff;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.5);
}

/* Team Section */
.team-section {
    background-color: #f8f9fa;
}

.section-title h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.team-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    height: 100%;
}

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

.team-img {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
}

.team-social {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 55, 49, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

.team-img:hover .team-social {
    opacity: 1;
}

.team-social a {
    display: inline-flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    background: #FF6B35;
    color: #fff;
    border-radius: 50%;
    margin: 0 5px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.team-social a:hover {
    background: #fff;
    color: #FF6B35;
    transform: translateY(-3px);
}

.team-card h4 {
    font-size: 20px;
    font-weight: 600;
    color: #003731;
    margin-bottom: 5px;
}

.team-card p {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 0;
}

/* CTA Section */
.cta-section h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.cta-section p {
    font-size: 16px;
    margin-bottom: 0;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .page-title h1 {
        font-size: 36px;
    }
    
    .section-title h2 {
        font-size: 30px;
    }
    
    .team-card {
        padding: 20px 15px;
    }
}

@media (max-width: 767px) {
    .page-banner {
        padding: 100px 0 60px;
    }
    
    .page-title h1 {
        font-size: 30px;
    }
    
    .section-title h2 {
        font-size: 26px;
    }
    
    .cta-section {
        text-align: center;
    }
    
    .cta-section .text-lg-end {
        text-align: center !important;
        margin-top: 20px;
    }
    
    .client-info {
        justify-content: center;
        text-align: center;
    }
    
    .client-info img {
        margin: 0 auto 15px;
    }
    
    .join-team-section {
        text-align: center;
    }
    
    .join-team-section .benefits {
        text-align: left;
        max-width: 400px;
        margin: 0 auto 30px;
    }
    
    .join-team-image {
        max-width: 500px;
        margin: 40px auto 0;
    }
    
    .partner-logo {
        padding: 20px !important;
    }
}
</style>

<!-- ===================== OUR PARTNERS SECTION ===================== -->
<section class="partners-section">
  <div class="partners-container">

    <div class="partners-title">
      <span>COLLABORATION</span>
      <h2>Our Trusted Partners</h2>
      <p>We work with industry leaders to deliver exceptional real estate solutions.</p>
    </div>

    <div class="partners-grid">

      <div class="partner-card">
        <img src="images/download__3_-removebg-preview.png" alt="Indraprastha">
      </div>

      <div class="partner-card">
        <img src="images/partner2.png" alt="Partner 2">
      </div>

      <div class="partner-card">
        <img src="images/partner3.png" alt="Partner 3">
      </div>

      <div class="partner-card">
        <img src="images/partner4.png" alt="Partner 4">
      </div>

      <div class="partner-card">
        <img src="images/partner5.png" alt="Partner 5">
      </div>

    </div>

  </div>
</section>

<style>
:root{
  --primary:#003731;
  --accent:#FF6B35;
  --light:#f7f9f8;
}

/* ===================== SECTION ===================== */
.partners-section{
  padding:100px 20px;
  background:var(--light);
}

.partners-container{
  max-width:1200px;
  margin:auto;
}

/* ===================== TITLE ===================== */
.partners-title{
  text-align:center;
  max-width:700px;
  margin:0 auto 70px;
}

.partners-title span{
  color:var(--accent);
  font-weight:600;
  letter-spacing:1px;
  font-size:14px;
}

.partners-title h2{
  font-size:40px;
  color:var(--primary);
  margin:10px 0 15px;
}

.partners-title p{
  color:#666;
  font-size:15px;
}

/* ===================== GRID ===================== */
.partners-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:30px;
  align-items:center;
}

/* ===================== CARD ===================== */
.partner-card{
  background:rgba(0, 55, 49, 0.44);
  height:130px;
  border-radius:16px;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
  transition:.35s ease;
}

.partner-card:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

/* ===================== IMAGE ===================== */
.partner-card img{
  max-width:140px;
  max-height:120px;
  object-fit:contain;
  transition:.35s ease;
}

.partner-card:hover img{
  transform:scale(1.08);
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:768px){
  .partners-title h2{
    font-size:30px;
  }

  .partner-card{
    height:110px;
  }

  .partner-card img{
    max-width:100px;
    max-height:55px;
  }
}
</style>


<!-- Join Our Team Section -->
<section class="join-team-section py-5" style="background: linear-gradient(rgba(0, 55, 49, 0.9), rgba(0, 55, 49, 0.9)), url('images/background/join-team.jpg') center/cover no-repeat fixed;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="pe-lg-5">
                    <span class="subtitle text-uppercase" style="color: #FF6B35; font-weight: 600; display: block; margin-bottom: 15px;">Careers</span>
                    <h2 class="text-white mb-4">Join Our Growing Team</h2>
                    <p class="text-white-50 mb-4">We're always looking for talented individuals who are passionate about real estate and customer service. Join us in shaping the future of real estate.</p>
                    
                    <div class="benefits mb-4">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-check-circle me-3" style="color: #FF6B35; font-size: 20px;"></i>
                            <span class="text-white">Competitive salary and benefits</span>
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-check-circle me-3" style="color: #FF6B35; font-size: 20px;"></i>
                            <span class="text-white">Professional development opportunities</span>
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-check-circle me-3" style="color: #FF6B35; font-size: 20px;"></i>
                            <span class="text-white">Collaborative work environment</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle me-3" style="color: #FF6B35; font-size: 20px;"></i>
                            <span class="text-white">Make a meaningful impact</span>
                        </div>
                    </div>
                    
                    <!-- <a href="careers.php" class="btn btn-primary mt-3" style="background-color: #FF6B35; border: none; padding: 12px 30px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; font-size: 14px;">View Open Positions</a> -->
                </div>
            </div>
            <div class="col-lg-6 mt-5 mt-lg-0">
                <div class="join-team-image p-4">
                    <img src="https://plus.unsplash.com/premium_photo-1661767467261-4a4bed92a507?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dGVhbXxlbnwwfHwwfHx8MA%3D%3D" alt="Join Our Team" class="img-fluid rounded-3 shadow-lg">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section py-5" style="background-color: #003731;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mb-4 mb-lg-0">
                <h3 class="text-white mb-2">Ready to Start Your Project?</h3>
                <p class="text-white-50 mb-0">Our team is ready to bring your dream home to life. Contact us today to get started.</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="contact.php" class="btn-cta" style="background-color: #FF6B35; border-radius: 30px; padding: 12px 30px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; font-size: 14px; color: #fff;">Contact Us</a>
            </div>
        </div>
    </div>
</section>

<?php include 'footer.php'; ?>
<script src="js/vendors.js"></script>
<script src="js/designesia.js"></script>
</body>
</html>