{% extends 'website/base/base.html' %}
{% block title %} Team {% endblock %}
{% block meta_description %}We have an expert team of Digital Marketing in Pakistan. Our specialized team help the clients to reach their goals and targets.{% endblock %}

{% block stylesheets %}




<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link href="../static/website/assets/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/website/assets/css/flaticon.css" rel="stylesheet">
<link href="../static/website/assets/css/owl.css" rel="stylesheet">
<link href="../static/website/assets/css/bootstrap.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/website/assets/css/animate.css" rel="stylesheet">
<link href="../static/website/assets/css/aos.css" rel="stylesheet">
<link href="../static/website/assets/css/nice-select.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery-ui.css" rel="stylesheet">
<link href="../static/website/assets/css/elpath.css" rel="stylesheet">
<link href="../static/website/assets/css/color.css" id="jssDefault" rel="stylesheet">
<link href="../static/website/assets/css/rtl.css" rel="stylesheet">
<link href="../static/website/assets/css/style.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/team.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/cta.css" rel="stylesheet">
<link href="../static/website/assets/css/responsive.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/subscribe.css" rel="stylesheet">
<link href="../static/website/assets/css/responsive.css" rel="stylesheet">

<style>
h1, h2, h3, h5, p {
  margin: 0;
}
body{
            background-image: url('../static/website/assets/images/entire-body.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

.badge {
  font-size: 1rem;
}

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border: none;
  background-color: #222;
  border-radius: 10px;
}

.card img {
  border: 5px solid #fff;
}

h1, h2 {
  color: #fff;
}

.text-danger {
  color: #d65b81 !important;
}

.grayscale img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.grayscale img:hover {
  filter: grayscale(0%);
}

a {
  color: #d65b81;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #fff;
}

.team-section .gap-3 a i {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.team-section .gap-3 a:hover i {
  transform: scale(1.1);
}

.text-uppercase {
  letter-spacing: 1px;
}




 /* Make images responsive */
 .team-image {
    width: 100%;
    height: auto;
    max-width: 200px; /* Control max width to prevent images from getting too large */
    display: block; /* Ensure the image behaves like a block element */
    margin-left: auto; /* Center the image horizontally */
    margin-right: auto; /* Center the image horizontally */
    
}

/* Ensure proper image scaling on mobile */
@media (max-width: 768px) {
    .team-image {
        max-width: 150px; /* Reduce max width on smaller screens */
    }
}





/* GRID */
.tmx-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* CARD */
.tmx-card {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

.tmx-card:hover {
    transform: translateY(-8px);
}

/* IMAGE */
.tmx-img {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 3px solid #ff6b00;
}

/* POPUP OVERLAY */
.tmx-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 999;
}

/* SHOW */
.tmx-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* POPUP BOX */
.tmx-popup-box {
    background: linear-gradient(45deg, rgba(107,145,199,0.85), rgba(214,91,129,0.85));
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 320px;
    color: #fff;
    position: relative;
    animation: tmxScale 0.3s ease;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

@keyframes tmxScale {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* POPUP IMAGE */
.tmx-popup-box img {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 3px solid #ff6b00;
    margin-bottom: 10px;
}
#tmxPopupDesc {
    color: #ffffff;
}

/* CLOSE BUTTON */
.tmx-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .tmx-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .tmx-grid {
        grid-template-columns: 1fr;
    }

    .tmx-popup-box {
        width: 90%;
    }
}
</style>

{% endblock stylesheets %}

{% block content %}









 <section  style="margin-top: 200px;">
    <div class="container">

        <div class="tmx-grid">

            <!-- Card -->
            <div class="tmx-card" onclick="tmxOpenPopup('bilal')">
                <img src="../static/website/assets/images/team/bilal_1.png" class="tmx-img">
                <h3 style="color: white; font-size: 20px;">Bilal Bajwa</h3>
                <span style="font-size: 15px;">CEO</span>
            </div>

            <div class="tmx-card" onclick="tmxOpenPopup('asjad')">
                <img src="../static/website/assets/images/team/asjad_1.png" class="tmx-img">
                <h3 style="color: white; font-size: 20px;">S. Asjad Ali</h3>
                <span style="font-size: 15px;">COO</span>
            </div>

            <div class="tmx-card" onclick="tmxOpenPopup('usama')">
                <img src="../static/website/assets/images/team/usama_1.png" class="tmx-img">
                <h3 style="color: white; font-size: 20px;">Usama Bin Mazhar</h3>
                <span style="font-size: 15px;">CTO</span>
            </div>

            <div class="tmx-card" onclick="tmxOpenPopup('farhan')">
                <img src="../static/website/assets/images/team/farhan_1.png" class="tmx-img">
                <h3 style="color: white; font-size: 20px;">Farhan Qureshi</h3>
                <span style="font-size: 15px;">Commercial Advisor</span>
            </div>

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

<!-- POPUP -->
<div class="tmx-popup-overlay" id="tmxPopup">
    <div class="tmx-popup-box">
        <span class="tmx-close" onclick="tmxClosePopup()">×</span>

        <img id="tmxPopupImg">
        <h3 id="tmxPopupName"></h3>
        <p id="tmxPopupDesc"></p>
    </div>
</div>

  







        

        <!-- Employees Section -->
        <section class="team-style-two team-page pt_130 pb_120">
            <div class="auto-container">
                <div class="row clearfix">
                    {% for team in teams %}
                    <div class="col-lg-3 col-md-6 col-sm-12 team-block">
                        <div class="team-block-two">
                            <div class="inner-box">
                                <div class="image-box">
                                    <figure class="image">
                                        <img src="{{ team.picture.url }}" alt="{{ team.name }}" class="team-image">
                                    </figure>
                                </div>
                                <div class="lower-content" style="text-align: center;">
                                    <h3 style="color: rgb(255, 255, 255); font-size: 25px;">{{ team.name }}</h3>
                                    <span style="color: rgb(255, 255, 255); font-size: 15px;">{{ team.designation }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>






        <section class="subscribe-section" style="margin-bottom: 50px;" >
            <div class="auto-container">
                <div class="inner-container white-bg">
                    <div class="shape" style="background-image: url(../static/website/assets/images/shape/bg-03.png);"></div>
                    <div class="row align-items-center">
                        <div class="col-lg-6 col-md-12 col-sm-12 text-column">
                            <div class="text-box">
                                <h2>Become Part of our Team</h2>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 form-column">
                            <div class="form-inner pl_110">
                                <form method="post" action="index.html">
                                    <div class="form-group">
                                        <input type="email" name="email" placeholder="Your email" required>
                                        <button class="btn-two theme-btn" type="submit">Apply</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>





        <script>
function tmxOpenPopup(person) {
    const data = {
        bilal: {
            name: "Bilal Bajwa",
            img: "../static/website/assets/images/team/bilal_1.png",
            desc: "Visionary CEO with strong expertise in business scaling and leadership."
        },
        asjad: {
            name: "S. Asjad Ali",
            img: "../static/website/assets/images/team/asjad_1.png",
            desc: "Operations expert with deep knowledge in Agile and team management."
        },
        usama: {
            name: "Usama Bin Mazhar",
            img: "../static/website/assets/images/team/usama_1.png",
            desc: "CTO focused on scalable systems and modern technologies."
        },
        farhan: {
            name: "Farhan Qureshi",
            img: "../static/website/assets/images/team/farhan_1.png",
            desc: "Commercial strategist with expertise in partnerships and growth."
        }
    };

    document.getElementById("tmxPopupImg").src = data[person].img;
    document.getElementById("tmxPopupName").innerText = data[person].name;
    document.getElementById("tmxPopupDesc").innerText = data[person].desc;

    document.getElementById("tmxPopup").classList.add("active");
}

function tmxClosePopup() {
    document.getElementById("tmxPopup").classList.remove("active");
}

/* close on outside click */
document.getElementById("tmxPopup").addEventListener("click", function(e){
    if(e.target === this){
        tmxClosePopup();
    }
});
</script>
        

       


        {% block javascripts %}


    <!-- jequery plugins -->
    <script src="../static/website/assets/js/jquery.js"></script>
    <script src="../static/website/assets/js/bootstrap.min.js"></script>
    <script src="../static/website/assets/js/owl.js"></script>
    <script src="../static/website/assets/js/wow.js"></script>
    <script src="../static/website/assets/js/jquery.fancybox.js"></script>
    <script src="../static/website/assets/js/appear.js"></script>
    <script src="../static/website/assets/js/isotope.js"></script>
    <script src="../static/website/assets/js/jquery.nice-select.min.js"></script>
    <script src="../static/website/assets/js/aos.js"></script>
    <script src="../static/website/assets/js/jquery-ui.js"></script>
    <script src="../static/website/assets/js/product-filter.js"></script>
    <script src="../static/website/assets/js/bxslider.js"></script>
    <script src="../static/website/assets/js/jquery.bootstrap-touchspin.js"></script>

    <!-- main-js -->
    <script src="../static/website/assets/js/script.js"></script>

    {% endblock javascripts %}
    {% endblock content %}