﻿<!DOCTYPE html>
<html lang="en">
<head>
	
	<!-- Title -->
	<title>PowerZone - Fitness, Workout & Gym HTML Template</title>
	
	<!-- Meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="author" content="DexignZone">
	<meta name="robots" content="index, follow">
	<meta name="keywords" content="bodybuilding, class, clean, coach, fitness, fitness gym, gym, gym trainer, health, martial arts, personal trainer, sport, sports theme, training, workout, Fitness template, Workout design, Health and wellness, Exercise layout, Fitness app, Gym website, UI components, UX components, Workout routines, Health template, UIUX, creative, HTML, CSS, Sass Integration, HTML Template, Bootstrap, Bootstrap Template, Gym UI Kit, websiite, Website template, Fitness Website Design, Exercise App Design, Gym Interface, Exercise Dashboard, Gym Homepage Template, HTML Gym Template, Responsive Gym Design, responsive, HTML Fitness Components, Workout Program Template, Fitness Studio HTML, Responsive Workout Design, Landing Page Kit, HTML5, HTML/CSS">
	<meta name="description" content="Embark on a transformative fitness journey with the PowerZone HTML Template. Elevate your workouts and gym routines with this dynamic and versatile template designed to unleash the power of sleek aesthetics and intuitive features. Discover a world of possibilities for fitness and wellness, as PowerZone becomes your gateway to a healthier, stronger version of yourself. With its modern design and comprehensive features, this template is set to redefine and enhance your fitness experience like never before">
	<meta property="og:title" content="PowerZone - Fitness, Workout & Gym HTML Template | DexignZone">
	<meta property="og:description" content="Embark on a transformative fitness journey with the PowerZone HTML Template. Elevate your workouts and gym routines with this dynamic and versatile template designed to unleash the power of sleek aesthetics and intuitive features. Discover a world of possibilities for fitness and wellness, as PowerZone becomes your gateway to a healthier, stronger version of yourself. With its modern design and comprehensive features, this template is set to redefine and enhance your fitness experience like never before">
	<meta property="og:image" content="https://powerzone.dexignzone.com/xhtml/social-image.png">
	<meta name="format-detection" content="telephone=no">
	<meta name="twitter:title" content="PowerZone - Fitness, Workout & Gym HTML Template | DexignZone">
	<meta name="twitter:description" content="Embark on a transformative fitness journey with the PowerZone HTML Template. Elevate your workouts and gym routines with this dynamic and versatile template designed to unleash the power of sleek aesthetics and intuitive features. Discover a world of possibilities for fitness and wellness, as PowerZone becomes your gateway to a healthier, stronger version of yourself. With its modern design and comprehensive features, this template is set to redefine and enhance your fitness experience like never before">
	<meta name="twitter:image" content="https://powerzone.dexignzone.com/xhtml/social-image.png">
	<meta name="twitter:card" content="summary_large_image">
	
	<!-- Mobile Specific -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Favicon icon -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png">
    
	<!-- Stylesheet -->
	<link href="assets/vendor/animate/animate.css" rel="stylesheet">
	<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
	<link href="assets/vendor/splitting/dist/splitting.css" rel="stylesheet">
	<link href="assets/vendor/magnific-popup/magnific-popup.min.css" rel="stylesheet">
	<link href="assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
	<link href="assets/vendor/rangeslider/rangeslider.css" rel="stylesheet">
	<link href="assets/vendor/switcher/switcher.css" rel="stylesheet">
	<link href="assets/vendor/lightgallery/dist/css/lightgallery.css" rel="stylesheet">
    <link href="assets/vendor/lightgallery/dist/css/lg-thumbnail.css" rel="stylesheet">
    <link href="assets/vendor/lightgallery/dist/css/lg-zoom.css" rel="stylesheet">
	<!-- Custom Stylesheet -->
    <link rel="stylesheet" href="assets/css/style.css">
	<link class="skin" rel="stylesheet" href="assets/css/skin/skin-6.css">

	<!-- Google Fonts -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
	<link href="../css2?family=Poppins: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">
	
	<style>
		/* Hide hamburger icon spans when menu is open */
		.navbar-toggler.collapsed span {
			display: block;
		}
		
		.navbar-toggler:not(.collapsed) span {
			display: none;
		}
		
		/* Show close button only when menu is open */
		#mobileMenuClose {
			display: none !important;
		}
		
		.header-nav.show ~ .navbar-toggler #mobileMenuClose,
		.navbar-toggler:not(.collapsed) ~ .header-nav #mobileMenuClose {
			display: block !important;
			margin-left: auto;
		}
		
		/* Mobile hamburger button visibility */
		@media (max-width: 991px) {
			.navbar-toggler {
				display: block !important;
				visibility: visible !important;
				opacity: 1 !important;
			}
		}
		
		@media (min-width: 992px) {
			.navbar-toggler {
				display: none !important;
			}
		}
		
		/* Remove open class conflicts */
		.navbar-toggler.open {
			/* override any open class styles */
		}

		/* Login/Register Modal Styles */
		.auth-modal .modal-content {
			border: none;
			border-radius: 15px;
			background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
			box-shadow: 0 10px 40px rgba(0,0,0,0.3);
		}

		.auth-modal .modal-header {
			border-bottom: 1px solid rgba(255,255,255,0.1);
			padding: 30px;
		}

		.auth-modal .modal-title {
			font-size: 1.5rem;
			font-weight: 700;
			color: white;
			width: 100%;
		}

		.auth-modal .modal-body {
			padding: 30px;
		}

		.auth-modal .form-control {
			background: rgba(255,255,255,0.05);
			border: 1px solid rgba(255,255,255,0.1);
			color: white;
			padding: 12px 15px;
			border-radius: 8px;
			font-size: 0.95rem;
			transition: all 0.3s ease;
			margin-bottom: 15px;
		}

		.auth-modal .form-control::placeholder {
			color: rgba(255,255,255,0.5);
		}

		.auth-modal .form-control:focus {
			background: rgba(255,255,255,0.08);
			border-color: var(--primary);
			box-shadow: 0 0 0 0.2rem rgba(255, 94, 20, 0.25);
			color: white;
		}

		.auth-modal .form-label {
			color: rgba(255,255,255,0.8);
			font-size: 0.9rem;
			font-weight: 600;
			margin-bottom: 8px;
			display: block;
		}

		.auth-modal .btn-primary {
			background: linear-gradient(135deg, var(--primary) 0%, #ff7f3f 100%);
			border: none;
			padding: 12px 20px;
			font-weight: 600;
			border-radius: 8px;
			width: 100%;
			transition: all 0.3s ease;
			font-size: 1rem;
		}

		.auth-modal .btn-primary:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(255, 94, 20, 0.4);
		}

		.auth-modal .form-check {
			margin-bottom: 15px;
		}

		.auth-modal .form-check-input {
			background: rgba(255,255,255,0.1);
			border: 1px solid rgba(255,255,255,0.2);
			width: 20px;
			height: 20px;
			cursor: pointer;
		}

		.auth-modal .form-check-input:checked {
			background: var(--primary);
			border-color: var(--primary);
		}

		.auth-modal .form-check-label {
			color: rgba(255,255,255,0.7);
			font-size: 0.9rem;
			margin-left: 8px;
			cursor: pointer;
		}

		.auth-modal .divider {
			display: flex;
			align-items: center;
			margin: 20px 0;
			color: rgba(255,255,255,0.5);
		}

		.auth-modal .divider::before,
		.auth-modal .divider::after {
			content: '';
			flex: 1;
			height: 1px;
			background: rgba(255,255,255,0.1);
		}

		.auth-modal .divider span {
			padding: 0 10px;
			font-size: 0.85rem;
		}

		.auth-modal .social-login {
			display: flex;
			gap: 10px;
			margin-top: 20px;
		}

		.auth-modal .social-login button {
			flex: 1;
			padding: 10px;
			border: 1px solid rgba(255,255,255,0.2);
			background: rgba(255,255,255,0.05);
			color: white;
			border-radius: 8px;
			cursor: pointer;
			font-size: 0.85rem;
			transition: all 0.3s ease;
		}

		.auth-modal .social-login button:hover {
			background: rgba(255,255,255,0.1);
			border-color: rgba(255,255,255,0.3);
		}

		.auth-modal .toggle-form {
			text-align: center;
			margin-top: 20px;
			color: rgba(255,255,255,0.7);
			font-size: 0.9rem;
		}

		.auth-modal .toggle-form a {
			color: var(--primary);
			text-decoration: none;
			font-weight: 600;
			cursor: pointer;
			transition: color 0.3s ease;
		}

		.auth-modal .toggle-form a:hover {
			color: #ff7f3f;
		}

		.auth-modal .form-group {
			margin-bottom: 20px;
		}

		.auth-modal .password-toggle {
			position: relative;
		}

		.auth-modal .password-toggle .toggle-password {
			position: absolute;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
			color: rgba(255,255,255,0.5);
			border: none;
			background: none;
			margin-top: 8px;
		}

		.auth-modal .password-toggle .form-control {
			padding-right: 40px;
		}

		/* Modal Animation */
		.modal.fade .modal-dialog {
			transition: all 0.3s ease;
		}

		.modal.show .modal-dialog {
			animation: slideDown 0.3s ease-out;
		}

		@keyframes slideDown {
			from {
				opacity: 0;
				transform: translateY(-50px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* Responsive adjustments */
		@media (max-width: 576px) {
			.auth-modal .modal-content {
				border-radius: 10px;
			}

			.auth-modal .modal-header,
			.auth-modal .modal-body {
				padding: 20px;
			}

			.auth-modal .modal-title {
				font-size: 1.3rem;
			}

			.social-login {
				flex-direction: column;
			}
		}
	</style>

</head>
<body id="bg" class="data-typography-1">
<div id="loading-area" class="loading-page-1">
	<div class="loading-inner">
		<span class="text-primary">P</span>
		<span class="text-primary">o</span>
		<span class="text-primary">w</span>
		<span class="text-primary">e</span>
		<span class="text-primary">r</span>
		<span class="text-white">Z</span>
		<span class="text-white">o</span>
		<span class="text-white">n</span>
		<span class="text-white">e</span>
	</div>
</div>

<div class="page-wraper">
	<!-- Header -->
	<header class="site-header mo-left header header-transparent style-2">
		

		<!-- Top Header -->
		 <div class="top-bar">
			<div class="container">
				<div class="dz-topbar-inner d-flex justify-content-between align-items-center">
					<div class="dz-topbar-left">
						<ul>
							<li><i class="fa-regular fa-envelope"></i> info@example.com</li>
						</ul>
					</div>
					<div class="dz-topbar-right">
						<ul>
							<li><i class="fa-regular fa-clock"></i> Time 06:00 AM To 08:00 PM</li>
							<li><i class="fa fa-phone"></i> +91-1234567890</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<!-- Main Header -->
		<div class="sticky-header main-bar-wraper navbar-expand-lg">
			<div class="main-bar clearfix ">
				<div class="container clearfix ">
				
					<!-- Website Logo -->
					<div class="logo-header logo-white">
						<a href="index.html"><img src="assets/images/logo-white-6.png" alt=""></a>
					</div>
					<div class="logo-header logo-dark">
						<a href="index.html"><img src="assets/images/logo-6.png" alt=""></a>
					</div>
					
					<!-- Nav Toggle Button -->
				<button class="navbar-toggler navbar-toggler-skew collapsed navicon justify-content-end" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
					<span></span>
					<span></span>
					<span></span>
				</button>
					<!-- Search Form -->
					<div class="dz-quik-search">
						<form action="#">
							<input name="search" value="" type="text" class="form-control" placeholder="Enter Your Keyword ...">
							<span id="quik-search-remove"><i class="fa-solid fa-xmark"></i></span>
						</form>
					</div>
					
					<!-- Header Nav -->
					<div class="header-nav navbar-collapse collapse justify-content-end" id="navbarNavDropdown">
						<div class="logo-header logo-dark">
							<a href="index-4.html"><img src="assets/images/logo.png" alt=""></a>
							<button type="button" class="menu-close-btn" id="mobileMenuClose" style="background:none; border:none; font-size:28px; padding:5px; cursor:pointer; color:#333;">
								<i class="fa-solid fa-xmark"></i>
							</button>
						</div>
						<ul class="nav navbar-nav navbar navbar-left">	
							<li><a href="index-4.html">Home</a>
								
							</li>
							<li class="sub-menu-down"><a href="about-us.html">About</a>
								<ul class="sub-menu">
									<li><a href="team.html">Team</a></li>
									<li><a href="blog-grid-4-masonary.html">Blog</a></li>
									<li><a href="events.html">Event</a></li>

									
								</ul>
							</li>
							
							<li><a href="services.html">Services</a></li>
							<li><a href="portfolio.html">Gallery</a></li>
							<li><a href="shop.html">Shop</a></li>
							<li><a href="contact-us.html">Contact Us</a></li>
							<li class="sub-menu-down"><a href="shop-cart.html">Cart</a>
								<ul class="sub-menu">
									<li><a href="shop-wishlist.html">Whishlist</a></li>
									<li><a href="shop-checkout.html">Checkout</a></li>
									
								</ul>
							</li>
							
						</ul>
						<div class="col-auto">
							<style>
								/* Container for header buttons */
.header-button {
    display: flex;
    align-items: center;
}

/* Style for the 'Login' text link */
.btn-link {
    font-weight: 600;
    color: #333; /* Change based on your header background */
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
}

.btn-link:hover {
    color: #06c6d180; /* Your theme primary color */
}

/* Small adjustments for the Register button to make it distinct */
.th-btn.btn-sm {
    padding: 10px 20px;
    font-size: 14px;
    background-color: #ff5e14; /* Primary Color */
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.th-btn.btn-sm:hover {
    background-color: #ff7f3f;
    transform: translateY(-2px);
}

/* Ensure spacing on smaller desktop screens */
@media (max-width: 1200px) {
    .btn-link, .th-btn {
        margin-right: 10px !important;
    }
}
							</style>
    <div class="header-button d-none d-lg-flex align-items-center">
        <button type="button" class="th-btn btn-sm me-3" data-bs-toggle="modal" data-bs-target="#loginModal">Login</button>
        
        <button type="button" class="th-btn btn-sm me-3" data-bs-toggle="modal" data-bs-target="#registerModal">Register</button>
		<a href="appointment.html" class="btn btn-skew-2 btn-lg btn-primary">Get Appointment</a>
        
        
</div>

						<div class="dz-social-icon">
							<ul>
								<li>
									<a target="_blank" href="https://www.facebook.com/">
										<i class="fab fa-facebook-f"></i>
									</a>
								</li>
								<li>
									<a target="_blank" href="https://twitter.com/?lang=en">
										<i class="fab fa-twitter"></i>
									</a>
								</li>
								<li>
									<a target="_blank" href="https://www.linkedin.com/">
										<i class="fab fa-linkedin-in"></i>
									</a>
								</li>
								<li>
									<a target="_blank" href="https://www.instagram.com/?hl=en">
										<i class="fab fa-instagram"></i>
									</a>
								</li>
							</ul>
						</div>	
					</div>
				</div>
			</div>
		</div>
		<!-- Main Header End -->
	</header>
	<!-- Header -->
	
	<div class="page-content bg-white">
		
		<!-- Banner -->
		<div class="main-bnr-four">
			<style>
				/* =========================================
   HERO SLIDER – FULL RESPONSIVE DESIGN
========================================= */

.main-bnr-four{
    position:relative;
    overflow:hidden;
}

/* Swiper */
.main-slider-3{
    width:100%;
    height:100%;
}

/* Slide Container */
.banner-inner{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    padding:clamp(40px,6vw,100px) 0;
}

/* Content */
.banner-content{
    max-width:520px;
}

.banner-content .sub-title{
    font-size:clamp(14px,2vw,18px);
    font-weight:600;
    margin-bottom:10px;
    display:block;
}

.banner-content .title{
    font-size:clamp(34px,6vw,70px);
    line-height:1.1;
    font-weight:800;
    margin-bottom:15px;
}

.banner-content p{
    font-size:clamp(14px,2vw,18px);
    line-height:1.7;
    margin-bottom:25px;
}

/* Buttons */
.banner-content .btn{
    padding:14px 26px;
    font-size:16px;
}

.video-bx4{
    margin-left:20px;
}

/* ================= IMAGE ================= */
.banner-media{
    display:flex;
    justify-content:center;
    align-items:flex-end;
}

.banner-media img{
    width:100%;
    max-width:520px;
    height:auto;
    object-fit:contain;
}

/* ================= SHAPES ================= */
.shapes{
    position:absolute;
    right:-50px;
    top:50%;
    transform:translateY(-50%);
    opacity:.35;
}

.bg-pattern1,
.bg-pattern2{
    position:absolute;
    z-index:0;
}

/* ================= PAGINATION ================= */
.num-pagination{
    position:absolute;
    right:40px;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
}

/* =========================================
   TABLET RESPONSIVE
========================================= */
@media (max-width:992px){

    .banner-inner{
        min-height:auto;
        padding:80px 0;
    }

    .banner-media img{
        max-width:420px;
    }

    .num-pagination{
        right:20px;
    }
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */
@media (max-width:768px){

    .banner-inner{
        text-align:center;
    }

    .banner-content{
        margin-bottom:40px;
        max-width:100%;
    }

    .banner-content .d-flex{
        flex-direction:column;
        gap:15px;
    }

    .video-bx4{
        margin-left:0;
    }

    .banner-media{
        justify-content:center;
    }

    .banner-media img{
        max-width:320px;
    }

    .num-pagination{
        position:relative;
        top:auto;
        right:auto;
        transform:none;
        margin-top:30px;
        display:flex;
        justify-content:center;
        gap:15px;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */
@media (max-width:480px){

    .banner-content .title{
        font-size:32px;
    }

    .banner-media img{
        max-width:260px;
    }

    .banner-content p{
        font-size:14px;
    }
}

/* =========================================
   LARGE SCREENS
========================================= */
@media (min-width:1400px){

    .banner-inner{
        padding:120px 0;
    }

    .banner-content{
        max-width:600px;
    }

    .banner-media img{
        max-width:620px;
    }
}

			</style>
			<div class="swiper main-slider-3">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="banner-inner" style="background-color: var(--secondary)">
							<div class="container">
								<div class="row align-items-end">
									<div class="col-lg-6 col-md-7">
										<div class="banner-content">
											<span class="sub-title">Take care of your body</span>
											<h1 class="title">Let's <span class="text-primary">talk</span></h1>
											<p>Whether your aim is to loose weight, tone up, gain weight we can put together a gym programme or recommend the right classes for you to attend in our studios.</p>
											<div class="d-flex align-items-center">
												<a href="about-us.html" class="btn btn-skew-2 btn-lg btn-primary">Get Started</a>
												<div class="video-bx4">
													<a class="video-btn style-1 popup-youtube" href="https://www.youtube.com/watch?v=XJb1G9iRoL4">
														<i class="fa fa-play"></i>
														<span class="text">Play Video</span>
													</a>
												</div>
											</div>
										</div>
									</div>
									<div class="col-lg-6 col-md-5 col-sm-12">
										<div class="banner-media">
											<img src="assets/images/main-slider/slider3/pic1.png" alt="Let's talk fitness banner" loading="lazy" title="Fitness Banner">
										</div>
									</div>
								</div>
							</div>
							<ul class="shapes">
								<li>
									<svg width="198" height="155" viewbox="0 0 198 155" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M104 168L137 141V140L104 113V168Z" fill="var(--primary)"></path>
										<path d="M104 98L137 71V70L104 43V98Z" fill="var(--primary)"></path>
										<path d="M147 203L114 176V175L147 148V203Z" fill="var(--primary)"></path>
										<path d="M147 133L114 106V105L147 78V133Z" fill="var(--primary)"></path>
										<path d="M155 166L188 139V138L155 111V166Z" fill="var(--primary)"></path>
										<path d="M198 201L165 174V173L198 146V201Z" fill="var(--primary)"></path>
										<path d="M52 53L85 80V81L52 108V53Z" fill="var(--primary)"></path>
										<path d="M52 123L85 150V151L52 178V123Z" fill="var(--primary)"></path>
										<path d="M95 18L62 45V46L95 73V18Z" fill="var(--primary)"></path>
										<path d="M95 88L62 115V116L95 143V88Z" fill="var(--primary)"></path>
										<path d="M-1 0L32 27V28L-1 55V0Z" fill="var(--primary)"></path>
										<path d="M-1 70L32 97V98L-1 125V70Z" fill="var(--primary)"></path>
										<path d="M42 35L9 62V63L42 90V35Z" fill="var(--primary)"></path>
										<path d="M42 105L9 132V133L42 160V105Z" fill="var(--primary)"></path>
									</svg>
								</li>
								
								
							</ul>
							<svg class="bg-pattern1" width="1271" height="850" viewbox="0 0 1271 850" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path opacity="0.05" d="M1272 851L0 -1L1272 -2V851Z" fill="white"></path>
								<path opacity="0.05" d="M1272 851L560 -1L1272 -2V851Z" fill="white"></path>
							</svg>
							<svg class="bg-pattern2" width="858" height="847" viewbox="0 0 858 847" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M0 849L858 0V849H0Z" fill="var(--primary)"></path>
							</svg>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="banner-inner" style="background-color: var(--secondary)">
							<div class="container">
								<div class="row align-items-end">
									<div class="col-lg-6 col-md-7">
										<div class="banner-content">
											<span class="sub-title">We Stay Fit With </span>
											<h1 class="title">Best <span class="text-primary">Gym</span></h1>
											<p>Whether your aim is to loose weight, tone up, gain weight we can put together a gym programme or recommend the right classes for you to attend in our studios.</p>
											<div class="d-flex align-items-center">
												<a href="about-us.html" class="btn btn-skew-2 btn-lg btn-primary">Get Started</a>
												<div class="video-bx4">
													<a class="video-btn style-1 popup-youtube" href="https://www.youtube.com/watch?v=XJb1G9iRoL4">
														<i class="fa fa-play"></i>
														<span class="text">Play Video</span>
													</a>
												</div>
											</div>
										</div>
									</div>
									<div class="col-lg-6 col-md-5 col-sm-12">
										<div class="banner-media">
											<img src="assets/images/main-slider/slider3/pic2.png" alt="Best gym equipment banner" loading="lazy" title="Best Gym Banner">
										</div>
									</div>
								</div>
							</div>
							<ul class="shapes">
								<li>
									<svg width="198" height="155" viewbox="0 0 198 155" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M104 168L137 141V140L104 113V168Z" fill="var(--primary)"></path>
										<path d="M104 98L137 71V70L104 43V98Z" fill="var(--primary)"></path>
										<path d="M147 203L114 176V175L147 148V203Z" fill="var(--primary)"></path>
										<path d="M147 133L114 106V105L147 78V133Z" fill="var(--primary)"></path>
										<path d="M155 166L188 139V138L155 111V166Z" fill="var(--primary)"></path>
										<path d="M198 201L165 174V173L198 146V201Z" fill="var(--primary)"></path>
										<path d="M52 53L85 80V81L52 108V53Z" fill="var(--primary)"></path>
										<path d="M52 123L85 150V151L52 178V123Z" fill="var(--primary)"></path>
										<path d="M95 18L62 45V46L95 73V18Z" fill="var(--primary)"></path>
										<path d="M95 88L62 115V116L95 143V88Z" fill="var(--primary)"></path>
										<path d="M-1 0L32 27V28L-1 55V0Z" fill="var(--primary)"></path>
										<path d="M-1 70L32 97V98L-1 125V70Z" fill="var(--primary)"></path>
										<path d="M42 35L9 62V63L42 90V35Z" fill="var(--primary)"></path>
										<path d="M42 105L9 132V133L42 160V105Z" fill="var(--primary)"></path>
									</svg>
								</li>
								
							</ul>
							<svg class="bg-pattern1" width="1271" height="850" viewbox="0 0 1271 850" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path opacity="0.05" d="M1272 851L0 -1L1272 -2V851Z" fill="white"></path>
								<path opacity="0.05" d="M1272 851L560 -1L1272 -2V851Z" fill="white"></path>
							</svg>
							<svg class="bg-pattern2" width="858" height="847" viewbox="0 0 858 847" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M0 849L858 0V849H0Z" fill="var(--primary)"></path>
							</svg>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="banner-inner" style="background-color: var(--secondary)">
							<div class="container">
								<div class="row align-items-end">
									<div class="col-lg-6 col-md-7">
										<div class="banner-content">
											<span class="sub-title">Take care of your body</span>
											<h1 class="title">Build <span class="text-primary">Body</span></h1>
											<p>Whether your aim is to loose weight, tone up, gain weight we can put together a gym programme or recommend the right classes for you to attend in our studios.</p>
											<div class="d-flex align-items-center">
												<a href="about-us.html" class="btn btn-skew-2 btn-lg btn-primary">Get Started</a>
												<div class="video-bx4">
													<a class="video-btn style-1 popup-youtube" href="https://www.youtube.com/watch?v=XJb1G9iRoL4">
														<i class="fa fa-play"></i>
														<span class="text">Play Video</span>
													</a>
												</div>
											</div>
										</div>
									</div>
									<div class="col-lg-6 col-md-5 col-sm-12">
										<div class="banner-media">
											<img src="assets/images/main-slider/slider3/pic3.png" alt="Build your body fitness banner" loading="lazy" title="Build Body Banner">
										</div>
									</div>
								</div>
							</div>
							<ul class="shapes">
								<li>
									<svg width="198" height="155" viewbox="0 0 198 155" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M104 168L137 141V140L104 113V168Z" fill="var(--primary)"></path>
										<path d="M104 98L137 71V70L104 43V98Z" fill="var(--primary)"></path>
										<path d="M147 203L114 176V175L147 148V203Z" fill="var(--primary)"></path>
										<path d="M147 133L114 106V105L147 78V133Z" fill="var(--primary)"></path>
										<path d="M155 166L188 139V138L155 111V166Z" fill="var(--primary)"></path>
										<path d="M198 201L165 174V173L198 146V201Z" fill="var(--primary)"></path>
										<path d="M52 53L85 80V81L52 108V53Z" fill="var(--primary)"></path>
										<path d="M52 123L85 150V151L52 178V123Z" fill="var(--primary)"></path>
										<path d="M95 18L62 45V46L95 73V18Z" fill="var(--primary)"></path>
										<path d="M95 88L62 115V116L95 143V88Z" fill="var(--primary)"></path>
										<path d="M-1 0L32 27V28L-1 55V0Z" fill="var(--primary)"></path>
										<path d="M-1 70L32 97V98L-1 125V70Z" fill="var(--primary)"></path>
										<path d="M42 35L9 62V63L42 90V35Z" fill="var(--primary)"></path>
										<path d="M42 105L9 132V133L42 160V105Z" fill="var(--primary)"></path>
									</svg>
								</li>
								
								
							</ul>
							<svg class="bg-pattern1" width="1271" height="850" viewbox="0 0 1271 850" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path opacity="0.05" d="M1272 851L0 -1L1272 -2V851Z" fill="white"></path>
								<path opacity="0.05" d="M1272 851L560 -1L1272 -2V851Z" fill="white"></path>
							</svg>
							<svg class="bg-pattern2" width="858" height="847" viewbox="0 0 858 847" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M0 849L858 0V849H0Z" fill="var(--primary)"></path>
							</svg>
						</div>
					</div>
				</div>
				<div class="num-pagination">
					<div class="main-btn-prev btn-prev"><i class="fa-solid fa-chevron-up"></i></div>
					<div class="swiper-pagination main-pagination style-1"></div>
					<div class="main-btn-next btn-next"><i class="fa-solid fa-chevron-down"></i></div>
				</div>
			</div>
		</div>
		<!-- End of Banner -->


		<!-- Ovarlay Box -->
		<section class="content-inner bg-secondary overflow-hidden overlay-section">
			<style>
				/* =====================================
   GLASSMORPHISM EXPERTISE SECTION
===================================== */

.content-inner {
    padding: 20px 0;
    position: relative;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    overflow: hidden;
}

/* =============================
   GLASS CARD
============================= */
.ovarlay-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.ovarlay-box:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

/* IMAGE */
.ovarlay-box img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.7s ease;
}

.ovarlay-box:hover img {
    transform: scale(1.1);
}

/* =============================
   GLASS OVERLAY CONTENT
============================= */
.ovarlay-box .content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.75)
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ovarlay-box:hover .content {
    opacity: 1;
}

/* =============================
   ICON + TEXT
============================= */
.ovarlay-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.view-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 20px;
    transition: all 0.4s ease;
}

.ovarlay-box:hover .view-btn {
    background: var(--primary);
    transform: rotate(90deg);
}

/* Title */
.ovarlay-info .title span {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

/* =============================
   CENTER CONTENT GLASS CARD
============================= */
.content-box {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px);
    border-radius: 22px;
    padding: 45px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.section-head .title {
    font-size: 34px;
    color: #fff;
}

.section-head .p-big {
    color: rgba(255, 255, 255, 0.8);
}

/* Button glow */
.btn-primary {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* =============================
   PROGRESS GLASS BAR
============================= */
.progress-bx {
    margin-bottom: 28px;
}

.progress {
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(
        90deg,
        var(--primary),
        #00e5ff
    );
    border-radius: 50px;
}

/* =============================
   LARGE BG TEXT
============================= */
.bg-data-text span {
    color: rgba(255, 255, 255, 0.05);
}

/* =============================
   SVG PATTERNS
============================= */
.pattern1,
.pattern2 {
    opacity: 0.15;
}

/* =============================
   RESPONSIVE
============================= */

/* TABLET */
@media (max-width: 991px) {
    .content-inner {
        padding: 70px 0;
    }

    .section-head .title {
        font-size: 28px;
    }

    .bg-data-text,
    .pattern1,
    .pattern2 {
        display: none;
    }

    .ovarlay-box img {
        min-height: 220px;
    }
}

/* MOBILE */
@media (max-width: 575px) {
    .content-inner {
        padding: 45px 0;
    }

    .ovarlay-box {
        border-radius: 16px;
    }

    .ovarlay-box img {
        min-height: 200px;
        border-radius: 16px;
    }

    .ovarlay-info {
        gap: 12px;
    }

    .view-btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .ovarlay-info .title span {
        font-size: 18px;
    }

    .content-box {
        padding: 30px;
        text-align: center;
    }

    .section-head .title {
        font-size: 24px;
    }
}

			</style>
			<div class="container">
				<div class="row lightgallery">
					<div class="col-lg-4 col-sm-6 m-b30 wow fadeInUp" data-wow-delay="0.2s">
						<div class="ovarlay-box style-1  gallery">
							<img src="assets/images/overly-box/pic1.png" alt="">							
							<div class="content">
								<div class="ovarlay-info">
									<a href="javascript:void(0);">
										<span data-exthumbimage="assets/images/overly-box/pic1.png" data-src="assets/images/overly-box/pic1.png" class="view-btn lightimg" title="">
											<i class="fa-solid fa-plus"></i>
										</span>
									</a>
									<a class="title" href="services-motivation.html">
										<span>Endurance</span>
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 m-b30 wow fadeInUp" data-wow-delay="0.4s">
						<div class="ovarlay-box style-1">
							<img src="assets/images/overly-box/pic2.png" alt="">
							<div class="content">
								<div class="ovarlay-info">
									<a href="javascript:void(0);">
										<span data-exthumbimage="assets/images/overly-box/pic2.png" data-src="assets/images/overly-box/pic2.png" class="view-btn lightimg" title="">
											<i class="fa-solid fa-plus"></i>
										</span>
									</a>
									<a class="title" href="services-weight-gain.html">
										<span>Conditioning</span>
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 d-none d-lg-block position-relative wow fadeInUp" data-wow-delay="0.6s">
						<h2 class="bg-data-text style-3">
							<span>P</span>
							<span>O</span>
							<span>W</span>
							<span>E</span>
							<span>R</span>
							<span>Z</span>
							<span>O</span>
							<span>N</span>
							<span>E</span>
						</h2>
					</div>
					<div class="col-lg-4 col-sm-6 align-self-center m-b30 wow fadeInUp" data-wow-delay="0.8s">
						<div class="content-box h-100">
							<div class="section-head style-4 m-0">
								<h2 class="title">My Fields Of<span> Expertise</span></h2>
								<p class="p-big m-b25">Loren ipsum Dolor Sit Amet, Consectelur Adipiscing Elit. Suspendisse</p>
							</div>
							<a href="about-us.html" class="btn btn-skew-2 btn-lg btn-primary">About Us</a>
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 m-b30 overlay-content-box wow fadeInUp" data-wow-delay="1.0s">
						<div class="ovarlay-box style-1">
							<img src="assets/images/overly-box/pic3.png" alt="">
							<div class="content">
								<div class="ovarlay-info">
									<a href="javascript:void(0);">
										<span data-exthumbimage="assets/images/overly-box/pic3.png" data-src="assets/images/overly-box/pic3.png" class="view-btn lightimg" title="">
											<i class="fa-solid fa-plus"></i>
										</span>
									</a>
									<a class="title" href="services-health-coach.html">
										<span>Yoga</span>
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 m-b30 wow fadeInUp" data-wow-delay="1.2s">
						<div class="ovarlay-box style-1">
							<img src="assets/images/overly-box/pic4.png" alt="">
							<div class="content">
								<div class="ovarlay-info">
									<a href="javascript:void(0);">
										<span data-exthumbimage="assets/images/overly-box/pic4.png" data-src="assets/images/overly-box/pic4.png" class="view-btn lightimg" title="">
											<i class="fa-solid fa-plus"></i>
										</span>
									</a>
									<a class="title" href="services-perfect-diet.html">
										<span>Performance</span>
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-8 col-sm-12  m-b30 order-2 order-lg-0 wow fadeInUp" data-wow-delay="1.4s">
						<div class="progress-bar-wrapper1">
							<div class="progress-bx style-6">
								<div class="progress-head">
									<h6 class="title">SPECIFIC PREPARATION</h6>
									<span>40%</span>
								</div>
								<div class="progress">
									<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"></div>
								</div>
							</div>

							<div class="progress-bx style-6">
								<div class="progress-head">
									<h6 class="title">NUTRITION SKILLS</h6>
									<span>80%</span>
								</div>
								<div class="progress">
									<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"></div>
								</div>
							</div>

							<div class="progress-bx style-6">
								<div class="progress-head">
									<h6 class="title">75 CARDIO CONDITIONING</h6>
									<span>60%</span>
								</div>
								<div class="progress">
									<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"></div>
								</div>
							</div>
			
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 m-b30 wow fadeInUp" data-wow-delay="1.6s">
						<div class="ovarlay-box style-1">
							<img src="assets/images/overly-box/pic5.png" alt="">
							<div class="content">
								<div class="ovarlay-info">
									<a href="javascript:void(0);">
										<span data-exthumbimage="assets/images/overly-box/pic5.png" data-src="assets/images/overly-box/pic5.png" class="view-btn lightimg" title="">
											<i class="fa-solid fa-plus"></i>
										</span>
									</a>
									<a class="title" href="services-fat-loss.html">
										<span>Strength</span>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<svg class="pattern1" width="43" height="160" viewbox="0 0 43 160" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M0 0L33 27V28L0 55V0Z" fill="var(--primary)"></path>
				<path d="M0 70L33 97V98L0 125V70Z" fill="var(--primary)"></path>
				<path d="M43 35L10 62V63L43 90V35Z" fill="var(--primary)"></path>
				<path d="M43 105L10 132V133L43 160V105Z" fill="var(--primary)"></path>
			</svg>
			<svg class="pattern2" width="95" height="230" viewbox="0 0 95 230" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M52 125L85 98V97L52 70V125Z" fill="var(--primary)"></path>
				<path d="M52 55L85 28V27L52 0V55Z" fill="var(--primary)"></path>
				<path d="M95 160L62 133V132L95 105V160Z" fill="var(--primary)"></path>
				<path d="M95 90L62 63V62L95 35V90Z" fill="var(--primary)"></path>
				<path d="M0 105L33 132V133L0 160V105Z" fill="var(--primary)"></path>
				<path d="M0 175L33 202V203L0 230V175Z" fill="var(--primary)"></path>
				<path d="M43 70L10 97V98L43 125V70Z" fill="var(--primary)"></path>
				<path d="M43 140L10 167V168L43 195V140Z" fill="var(--primary)"></path>
			</svg>
		</section>
		<!-- End overlay -->
	
		<!-- Counter Sec -->
		<section class="counter-section bg-secondary">
			<style>
				/* ===============================
   ANIMATED RESPONSIVE COUNTER
================================ */

.counter-section {
    position: relative;
    padding: 90px 0;
    background: radial-gradient(circle at top, #1e3c72, #0f2027);
    overflow: hidden;
}

/* CARD */
.counter-inner-2 {
    height: 100%;
    padding: 40px 25px;
    text-align: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    position: relative;
}

/* Glow border */
.counter-inner-2::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.counter-inner-2:hover::before {
    opacity: 1;
}

.counter-inner-2:hover {
    transform: translateY(-14px) scale(1.05);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

/* NUMBER */
.counter-inner-2 .title {
    font-size: 52px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 12px;
}

/* Gradient text animation */
.counter-inner-2 .counter {
    background: linear-gradient(90deg, var(--primary), #00f2ff, var(--primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGlow 3s linear infinite;
}

@keyframes textGlow {
    to {
        background-position: 200% center;
    }
}

/* K */
.counter-inner-2 .title span:last-child {
    font-size: 24px;
    margin-left: 4px;
    color: var(--primary);
}

/* LABEL */
.counter-inner-2 p {
    font-size: 16px;
    letter-spacing: 0.6px;
    opacity: 0.9;
}

/* SVG */
.counter-section .pattern1 {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.15;
}

/* ===============================
   RESPONSIVE
================================ */

/* TABLET */
@media (max-width: 991px) {
    .counter-section {
        padding: 70px 0;
    }

    .counter-inner-2 {
        padding: 32px 20px;
    }

    .counter-inner-2 .title {
        font-size: 42px;
    }
}

/* MOBILE */
@media (max-width: 575px) {
    .counter-section {
        padding: 45px 0;
    }

    .counter-inner-2 {
        padding: 26px 16px;
        border-radius: 16px;
    }

    .counter-inner-2 .title {
        font-size: 34px;
    }

    .counter-inner-2 p {
        font-size: 14px;
    }

    .pattern1 {
        display: none;
    }
}

			</style>

			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-6 m-b30 wow fadeInUp" data-wow-delay="0.2s">
						<div class="counter-inner-2">
							<h3 class="title">
								<span class="counter">2577</span>
							</h3>
							<p class="m-b0 text-white">Total Client</p>
						</div>
					</div>
					<div class="col-lg-3 col-6 m-b30 wow fadeInUp" data-wow-delay="0.4s">
						<div class="counter-inner-2">
							<h3 class="title">
								<span class="counter">978</span>
								<span>K</span>
							</h3>
							<p class="m-b0 text-white">Donations</p>
						</div>						
					</div>
					<div class="col-lg-3 col-6 m-b30 wow fadeInUp" data-wow-delay="0.6s">
						<div class="counter-inner-2">
							<h3 class="title">
								<span class="counter">762</span>
							</h3>
							<p class="m-b0 text-white">Projects</p>
						</div>
					</div>
					<div class="col-lg-3 col-6 m-b30 wow fadeInUp" data-wow-delay="0.8s">
						<div class="counter-inner-2">
							<h3 class="title">
								<span class="counter">852</span>
								<span>K</span>
							</h3>
							<p class="m-b0 text-white">Companies</p>
						</div>
					</div>
				</div>
			</div>
			<svg class="pattern1" width="43" height="160" viewbox="0 0 43 160" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M0 0L33 27V28L0 55V0Z" fill="var(--primary)"></path>
				<path d="M0 70L33 97V98L0 125V70Z" fill="var(--primary)"></path>
				<path d="M43 35L10 62V63L43 90V35Z" fill="var(--primary)"></path>
				<path d="M43 105L10 132V133L43 160V105Z" fill="var(--primary)"></path>
			</svg>
		</section>

		<!-- Our Services -->
		<section class="services-section bg-secondary">
			<style>
				/* =====================================
   SERVICES – GLASS + ANIMATION
===================================== */

.services-section {
    position: relative;
    padding: 90px 0;
    background: radial-gradient(circle at top, #1e3c72, #0f2027);
    overflow: hidden;
}

/* SECTION TITLE */
.services-section .section-head .title {
    color: #fff;
    font-size: 42px;
}

.services-section .section-head .title span {
    color: var(--primary);
}

/* =====================================
   SERVICE CARD
===================================== */

.icon-bx-wraper.style-5 {
    position: relative;
    height: 100%;
    border-radius: 22px;
    padding: 40px 25px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    backdrop-filter: blur(16px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
    transition: all 0.5s ease;
}

/* Glass overlay */
.icon-bx-wraper.style-5::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25),
        rgba(0, 0, 0, 0.75)
    );
    z-index: 0;
}

/* Hover glow */
.icon-bx-wraper.style-5::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    opacity: 0;
    transition: opacity 0.5s ease;
}

.icon-bx-wraper.style-5:hover::after {
    opacity: 1;
}

.icon-bx-wraper.style-5:hover {
    transform: translateY(-14px) scale(1.04);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

/* =====================================
   ICON
===================================== */

.icon-bx {
    position: relative;
    z-index: 1;
}

.icon-cell {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 32px;
    transition: all 0.4s ease;
}

.icon-bx-wraper:hover .icon-cell {
    background: var(--primary);
    color: #fff;
    transform: rotate(360deg) scale(1.1);
}

/* =====================================
   CONTENT
===================================== */

.icon-content {
    position: relative;
    z-index: 1;
}

.icon-content .dz-title a {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.icon-bx-wraper:hover .dz-title a {
    color: var(--primary);
}

.icon-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
}

/* Read more */
.read-more {
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.read-more i {
    transition: transform 0.3s ease;
}

.icon-bx-wraper:hover .read-more {
    color: var(--primary);
}

.icon-bx-wraper:hover .read-more i {
    transform: translateX(6px);
}

/* =====================================
   BUTTON
===================================== */

.services-section .btn-primary {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: transform 0.3s ease, box-shadow 0.4s ease;
}

.services-section .btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* =====================================
   SVG PATTERN
===================================== */

.services-section .pattern1 {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.15;
    pointer-events: none;
}

/* =====================================
   RESPONSIVE
===================================== */

/* TABLET */
@media (max-width: 991px) {
    .services-section {
        padding: 70px 0;
    }

    .services-section .section-head .title {
        font-size: 34px;
    }

    .icon-bx-wraper.style-5 {
        padding: 34px 22px;
    }
}

/* MOBILE */
@media (max-width: 575px) {
    .services-section {
        padding: 45px 0;
    }

    .services-section .section-head .title {
        font-size: 26px;
    }

    .icon-bx-wraper.style-5 {
        padding: 28px 18px;
        border-radius: 18px;
    }

    .icon-cell {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .icon-content .dz-title a {
        font-size: 18px;
    }

    .icon-content p {
        font-size: 14px;
    }

    .pattern1 {
        display: none;
    }
}

			</style>
			<div class="container">
				<div class="section-head style-4 text-center wow fadeInUp" data-wow-delay="0.2s">
					<h2 class="title">Stop Wishing<span> Start Doing</span></h2>
				</div>
				<div class="row">
					<div class="col-xl-3 col-sm-6 m-b30 wow fadeInUp" data-wow-delay="0.2s">
						<div class="icon-bx-wraper style-5 bg-secondary pad-t" style="background-image: url(assets/images/overly-box/pic3.png);">
							<div class="icon-bx m-b20"> 
								<div class="icon-cell text-primary">
									<i class="flaticon-fitness"></i>
								</div>
							</div>
							<div class="icon-content">
								<h4 class="dz-title m-b10"><a href="about-us.html">Our Classes</a></h4>
								<p class="m-b15">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<a href="about-us.html" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-sm-6 m-b30 wow fadeInUp" data-wow-delay="0.4s">
						<div class="icon-bx-wraper style-5 bg-secondary" style="background-image: url(assets/images/overly-box/pic2.png);">
							<div class="icon-bx m-b20"> 
								<div class="icon-cell text-primary">
									<i class="flaticon-user"></i>
								</div>
							</div>
							<div class="icon-content">
								<h4 class="dz-title m-b10"><a href="team.html">Our Trainers</a></h4>
								<p class="m-b15">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<a href="team.html" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-sm-6 m-b30 wow fadeInUp" data-wow-delay="0.6s">
						<div class="icon-bx-wraper style-5 bg-secondary" style="background-image: url(assets/images/overly-box/pic1.png);">
							<div class="icon-bx m-b20"> 
								<div class="icon-cell text-primary">
									<i class="flaticon-medal"></i>
								</div>
							</div>
							<div class="icon-content">
								<h4 class="dz-title m-b10"><a href="pricing.html">Memberships</a></h4>
								<p class="m-b15">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<a href="pricing.html" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-sm-6 m-b30 wow fadeInUp" data-wow-delay="0.8s">
						<div class="icon-bx-wraper style-5 bg-secondary pad-t" style="background-image: url(assets/images/overly-box/pic4.png);">
							<div class="icon-bx m-b20"> 
								<div class="icon-cell text-primary">
									<i class="flaticon-calendar"></i>
								</div>
							</div>
							<div class="icon-content">
								<h4 class="dz-title m-b10"><a href="schedule.html">Our Timeline</a></h4>
								<p class="m-b15">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<a href="schedule.html" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 text-center pad-m wow fadeInUp" data-wow-delay="1.0s">
					<a href="services.html" class="btn btn-skew-2 btn-lg btn-primary">View All Services</a>
				</div>
			</div>
			<svg class="pattern1" width="95" height="230" viewbox="0 0 95 230" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M52 125L85 98V97L52 70V125Z" fill="var(--primary)"></path>
				<path d="M52 55L85 28V27L52 0V55Z" fill="var(--primary)"></path>
				<path d="M95 160L62 133V132L95 105V160Z" fill="var(--primary)"></path>
				<path d="M95 90L62 63V62L95 35V90Z" fill="var(--primary)"></path>
				<path d="M0 105L33 132V133L0 160V105Z" fill="var(--primary)"></path>
				<path d="M0 175L33 202V203L0 230V175Z" fill="var(--primary)"></path>
				<path d="M43 70L10 97V98L43 125V70Z" fill="var(--primary)"></path>
				<path d="M43 140L10 167V168L43 195V140Z" fill="var(--primary)"></path>
			</svg>
		</section>
		
		<!-- Video box -->
		<section class="content-inner-2 bg-secondary video-box-sec">
			<style>
				/* =====================================
   VIDEO SECTION – GLASS + ANIMATION
===================================== */

.video-box-sec {
    position: relative;
    padding: 90px 0;
    background: radial-gradient(circle at top, #1e3c72, #0f2027);
    overflow: hidden;
}

/* =============================
   VIDEO CARD
============================= */
.video-bx.style-1 {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(18px);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.6);
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.video-bx.style-1:hover {
    transform: translateY(-14px) scale(1.03);
    box-shadow: 0 55px 120px rgba(0, 0, 0, 0.75);
}

/* IMAGE */
.video-bx .dz-media {
    position: relative;
}

.video-bx .dz-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

/* DARK GLASS OVERLAY */
.video-bx .dz-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.7)
    );
}

/* =============================
   PLAY BUTTON (PULSE)
============================= */
.video-btn {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
}

.video-btn i {
    width: 82px;
    height: 82px;
    background: var(--primary);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 28px;
    box-shadow: 0 0 0 rgba(255, 0, 0, 0.7);
    animation: pulse 2s infinite;
    transition: transform 0.4s ease;
}

.video-bx:hover .video-btn i {
    transform: scale(1.15);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6);
    }
    70% {
        box-shadow: 0 0 0 35px rgba(255, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

/* =============================
   RIGHT CONTENT GLASS
============================= */
.video-right-box {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    border-radius: 24px;
    padding: 45px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.video-right-box .title {
    color: #fff;
    font-size: 36px;
}

.video-right-box p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
}

/* BUTTON */
.video-right-box .btn-primary {
    transition: transform 0.3s ease, box-shadow 0.4s ease;
}

.video-right-box .btn-primary:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.6);
}

/* =============================
   SVG PATTERNS
============================= */
.video-box-sec .pattern1,
.video-box-sec .pattern2 {
    opacity: 0.15;
    pointer-events: none;
}

/* =============================
   RESPONSIVE
============================= */

/* TABLET */
@media (max-width: 991px) {
    .video-box-sec {
        padding: 70px 0;
    }

    .video-right-box {
        padding: 35px;
    }

    .video-right-box .title {
        font-size: 28px;
    }
}

/* MOBILE */
@media (max-width: 575px) {
    .video-box-sec {
        padding: 45px 0;
    }

    .video-bx.style-1 {
        border-radius: 18px;
    }

    .video-bx .dz-media img {
        border-radius: 18px;
    }

    .video-btn i {
        width: 64px;
        height: 64px;
        font-size: 22px;
    }

    .video-right-box {
        padding: 28px;
        text-align: center;
    }

    .video-right-box .title {
        font-size: 24px;
    }

    .pattern1,
    .pattern2 {
        display: none;
    }
}

			</style>
			<div class="container">
				<div class="row">
					<div class="col-lg-6 col-sm-9 mx-auto m-b30 wow fadeInUp" data-wow-delay="0.2s">
						<div class="video-bx style-1">
							<div class="dz-media">
								<img src="assets/images/about/video.jpg" alt="image">
								<a href="https://www.youtube.com/watch?v=XJb1G9iRoL4" class="popup-youtube video-btn"><i class="fa-solid fa-play text-white"></i></a>
							</div>
						</div>
					</div>
					<div class="col-lg-6 col-sm-12 m-b30 align-self-center wow fadeInUp" data-wow-delay="0.4s">
						<div class="video-right-box">
							<div class="section-head style-4">
								<h2 class="title">Visit My Channel For Free  <span class="text-primary">Fitness Classes</span></h2>
								<p>Loren Ipsum Dolor Sit Amet, Consectelur Adipiscing Elit. Suspendisse.</p>
							</div>
							<a href="javasript:void(0);" class="btn btn-skew-2 btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLabel">Subscribe Now</a>
						</div>
					</div>
				</div>
			</div>
			<svg class="pattern1" width="95" height="230" viewbox="0 0 95 230" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M52 125L85 98V97L52 70V125Z" fill="var(--primary)"></path>
				<path d="M52 55L85 28V27L52 0V55Z" fill="var(--primary)"></path>
				<path d="M95 160L62 133V132L95 105V160Z" fill="var(--primary)"></path>
				<path d="M95 90L62 63V62L95 35V90Z" fill="var(--primary)"></path>
				<path d="M0 105L33 132V133L0 160V105Z" fill="var(--primary)"></path>
				<path d="M0 175L33 202V203L0 230V175Z" fill="var(--primary)"></path>
				<path d="M43 70L10 97V98L43 125V70Z" fill="var(--primary)"></path>
				<path d="M43 140L10 167V168L43 195V140Z" fill="var(--primary)"></path>
			</svg>
			<svg class="pattern2" width="43" height="160" viewbox="0 0 43 160" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M0 0L33 27V28L0 55V0Z" fill="var(--primary)"></path>
				<path d="M0 70L33 97V98L0 125V70Z" fill="var(--primary)"></path>
				<path d="M43 35L10 62V63L43 90V35Z" fill="var(--primary)"></path>
				<path d="M43 105L10 132V133L43 160V105Z" fill="var(--primary)"></path>
			</svg>
		</section>
		<!-- End of Video Box -->

		<!-- FAQ -->
		<section class="content-inner-2 bg-secondary">
			<style>
				/* General Section Spacing */
.content-inner-2 {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Accordion Adjustments */
.dz-accordion-outline .accordion-item {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
}

.dz-accordion-outline .accordion-button {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding: 20px;
    font-size: 18px;
    box-shadow: none;
}

.dz-accordion-outline .accordion-button:not(.collapsed) {
    background: var(--primary);
    color: #fff;
}

/* Pricing Table Styling */
.pricingtable-wrapper.style-5 {
	margin-top: -190px;
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.pricingtable-wrapper.style-5:hover,
.pricingtable-wrapper.style-5.show {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
    transform: translateX(10px);
}

.pricingtable-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Responsive Media Queries */

/* Tablet (991px and down) */
@media (max-width: 991px) {
    .content-inner-2 {
        padding-top: 60px;
        padding-bottom: 40px;
    }
    
    .section-head.style-4 {
        text-align: center;
        margin-bottom: 40px;
    }

    .p-r20, .p-r10 {
        padding-right: 0 !important; /* Remove right padding to center content */
    }

    .pricingtable-wrapper.style-5:hover {
        transform: translateY(-5px); /* Upward lift instead of sideways on tablets */
    }
}

/* Mobile (767px and down) */
@media (max-width: 767px) {
    .pricingtable-inner {
        flex-direction: column; /* Stack features and price on mobile */
        text-align: center;
    }

    .pricingtable-price {
        margin-top: 15px;
    }

    .dz-accordion-outline .accordion-button {
        font-size: 16px;
        padding: 15px;
    }

    .m-sm-b30 {
        margin-bottom: 30px;
    }
}
			</style>
			<div class="container">
				<div class="row">
					<div class="col-lg-6 col-md-12">
						<div class="col-xl-8 col-lg-12 p-r20 wow fadeInUp" data-wow-delay="0.2s">
							<div class="section-head style-4">
								<h2 class="title">Select Your<span> Magic Plan</span></h2>
								<p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse.</p>
							</div>
						</div>
						<div class="accordion dz-accordion dz-accordion-outline p-r10 m-sm-b30 wow fadeInUp" data-wow-delay="0.4s" id="accordionFaq2">
							<div class="accordion-item">
								<h2 class="accordion-header" id="headingOne1">
									<a href="#" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
										How to maximise time spent at the gym.
										<span class="toggle-close"></span>
									</a>
								</h2>
								<div id="collapseOne1" class="accordion-collapse collapse show" aria-labelledby="headingOne1" data-bs-parent="#accordionFaq2">
									<div class="accordion-body">
										<p class="m-b0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal </p>
									</div>
								</div>
							</div>
							<div class="accordion-item">
								<h2 class="accordion-header" id="headingTwo1">
									<a href="#" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
										Simple condition for all around fitness.
										<span class="toggle-close"></span>
									</a>
								</h2>
								<div id="collapseTwo1" class="accordion-collapse collapse" aria-labelledby="headingTwo1" data-bs-parent="#accordionFaq2">
									<div class="accordion-body">
										<p class="m-b0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal </p>
									</div>
								</div>
							</div>
							<div class="accordion-item">
								<h2 class="accordion-header" id="headingThree1">
									<a href="#" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree1" aria-expanded="false" aria-controls="collapseThree1">
										10 Tips how to prepare meals fast and easy.
										<span class="toggle-close"></span>
									</a>
								</h2>
								<div id="collapseThree1" class="accordion-collapse collapse" aria-labelledby="headingThree1" data-bs-parent="#accordionFaq2">
									<div class="accordion-body">
										<p class="m-b0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal </p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6 col-md-12">
						<div class="col-lg-12 m-b30 wow fadeInUp" data-wow-delay="0.6s">
							<div class="pricingtable-wrapper style-5 icon-dropdown">
								<div class="check-circle"></div>
								<div class="pricingtable-inner">
									<div class="pricingtable-features">
										<h3>Basic</h3>
										<p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse.</p>
									</div>
									<div class="pricingtable-price">
										<h2 class="pricingtable-bx text-primary">$37<small> /Mo.</small></h2>
										<h3 class="pricingtable-bx-1">$49<small> /Mo.</small></h3>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-12 m-b30 wow fadeInUp" data-wow-delay="0.8s">
							<div class="pricingtable-wrapper style-5 icon-dropdown show">
								<div class="check-circle"></div>
								<div class="pricingtable-inner">
									<div class="pricingtable-features">
										<h3>Standard</h3>
										<p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse.</p>
									</div>
									<div class="pricingtable-price">
										<h2 class="pricingtable-bx text-primary">$48<small> /Mo.</small></h2>
										<h3 class="pricingtable-bx-1">$49<small> /Mo.</small></h3>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-12 m-b30 wow fadeInUp" data-wow-delay="1.0s">
							<div class="pricingtable-wrapper style-5 icon-dropdown">
								<div class="check-circle"></div>
								<div class="pricingtable-inner">
									<div class="pricingtable-features">
										<h3>Pro</h3>
										<p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse.</p>
									</div>
									<div class="pricingtable-price">
										<h2 class="pricingtable-bx text-primary">$79<small> /Mo.</small></h2>
										<h3 class="pricingtable-bx-1">$49<small> /Mo.</small></h3>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-12 wow fadeInUp" data-wow-delay="1.2s">
							<a href="pricing.html" class="btn rounded-0 btn-lg btn-primary d-block" style="margin-top: -100px;">Continue</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- End of FAQ -->

		<!-- Schedule Classes -->
		<section class="content-inner-2 bg-secondary overflow-hidden schedule-section">
			<style>
				/* ================================
   ULTIMATE SCHEDULE SYSTEM
================================ */

.schedule-section{
  position:relative;
  padding:clamp(50px,8vw,110px) 0;
  background:
    radial-gradient(circle at 15% 10%,rgba(255,0,0,.15),transparent 40%),
    radial-gradient(circle at 85% 90%,rgba(0,200,255,.15),transparent 40%),
    #0f2027;
}

/* ---------- FILTER BAR ---------- */
.schedule-filter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.schedule-filter button{
  padding:8px 16px;
  border-radius:30px;
  border:none;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  transition:.3s;
}
.schedule-filter button.active,
.schedule-filter button:hover{
  background:var(--primary);
}

/* ---------- TABLE ---------- */
.schedule-table{
  overflow-x:auto;
}
.schedule-table::-webkit-scrollbar{height:6px}
.schedule-table::-webkit-scrollbar-thumb{
  background:var(--primary);
  border-radius:10px;
}

.ck-table{
  min-width:1000px;
  border-spacing:10px;
  border-collapse:separate;
}

/* Header */
.ck-table thead th{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(14px);
  color:#fff;
  padding:16px;
  z-index:5;
  border-radius:12px;
}

/* Time column */
.ck-table td.time{
  position:sticky;
  left:0;
  background:rgba(255,255,255,.2);
  color:#fff;
  font-weight:600;
  text-align:center;
  border-radius:12px;
  z-index:4;
}

/* Cells */
.ck-table td{
  background:rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px;
  min-width:150px;
}

/* ---------- SCHEDULE CARD ---------- */
.schedule-item{
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.1));
  border-radius:16px;
  padding:16px;
  box-shadow:0 15px 35px rgba(0,0,0,.4);
  transition:.4s;
}
.schedule-item:hover{
  transform:translateY(-6px) scale(1.03);
}

/* Color tags */
.title-fitness{color:#00e5ff}
.title-boxing{color:#ff5252}
.title-meditation{color:#ffd54f}
.title-building{color:#8bc34a}
.title-karate{color:#ff9800}
.text-running{color:#4caf50}
.text-cycling{color:#03a9f4}

/* Coach */
.coach-profile{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.coach-profile img{
  width:42px;height:42px;
  border-radius:50%;
  border:2px solid var(--primary);
}
.coach-profile .name{color:#fff;font-size:14px}
.coach-profile .position{font-size:12px;color:#ccc}

/* Today highlight */
.today{
  outline:2px solid var(--primary);
  box-shadow:0 0 20px rgba(255,0,0,.6);
}

/* ---------- MOBILE CARD MODE ---------- */
@media(max-width:767px){
  .ck-table thead{display:none}
  .ck-table,.ck-table tbody,.ck-table tr{
    display:block;width:100%;
  }
  .ck-table tr{margin-bottom:20px}
  .ck-table td{
    display:block;width:100%;margin-bottom:12px;
  }
  .ck-table td.time{
    position:relative;
    text-align:left;
  }
}

/* SVG */
.schedule-section .pattern1{
  position:absolute;
  right:0;top:50%;
  transform:translateY(-50%);
  opacity:.15;
}
/* ================================
   FORCE SCHEDULE TO FIT SCREEN
================================ */

/* Remove horizontal scroll completely */
.schedule-table {
    overflow: hidden !important;
}

/* Table width auto-fit */
.ck-table {
    width: 100%;
    min-width: unset !important;
    table-layout: fixed;
    border-spacing: 8px;
}

/* Header cells */
.ck-table thead th {
    font-size: 14px;
    padding: 12px 8px;
    white-space: nowrap;
}

/* Time column */
.ck-table td.time {
    width: 110px;
    font-size: 13px;
    padding: 12px 8px;
}

/* All cells */
.ck-table td {
    min-width: unset !important;
    padding: 10px;
}

/* ================================
   SCHEDULE ITEM (COMPACT)
================================ */

.schedule-item {
    padding: 10px;
    border-radius: 12px;
}

/* Title */
.schedule-item .title {
    font-size: 13px;
    line-height: 1.2;
}

/* Time text */
.item-time {
    font-size: 11px;
}

/* Coach profile compact */
.coach-profile {
    gap: 6px;
    margin-top: 6px;
}

.coach-profile img {
    width: 28px;
    height: 28px;
}

.coach-profile .name {
    font-size: 12px;
}

.coach-profile .position,
.coach-profile .btn-link {
    display: none; /* hide extra info to fit */
}

/* ================================
   LARGE DESKTOP ONLY
================================ */
@media (min-width: 1200px) {
    .ck-table td.time {
        width: 130px;
    }

    .schedule-item .title {
        font-size: 14px;
    }
}

/* ================================
   LAPTOP / TABLET
================================ */
@media (max-width: 1199px) {
    .ck-table thead th {
        font-size: 12px;
    }

    .ck-table td.time {
        width: 95px;
        font-size: 12px;
    }
}

/* ================================
   MOBILE → CARD MODE (NO CHANGE)
================================ */
@media (max-width: 767px) {
    .schedule-table {
        overflow: visible;
    }

    .ck-table thead {
        display: none;
    }

    .ck-table,
    .ck-table tbody,
    .ck-table tr {
        display: block;
        width: 100%;
    }

    .ck-table td {
        display: block;
        width: 100%;
        margin-bottom: 12px;
    }

    .ck-table td.time {
        width: 100%;
        text-align: left;
    }
}


			</style>
			<div class="resize-wrapper">
				<div class="row align-items-center">
					<div class="col-lg-3">
						<div class="section-head style-4 m-r30 m-md-r0 wow fadeInUp" data-wow-delay="0.2s">
							<h2 class="title">Find The <span> Class </span>That Suits You</h2>
						</div>
						<img src="assets/images/about/pic1.jpg" class="d-none d-lg-block wow fadeInUp" data-wow-delay="0.4s" alt="">
					</div>
					<div class="col-lg-9 wow fadeInRight" data-wow-delay="0.6s">
						<div class="schedule-table table-scroll">
							<table class="table-responsive-md ck-table bg-secondary-dark">
								<thead>
									<tr class="">
										<th></th>
										<th>Monday</th>
										<th>Tuesday</th>
										<th>Wednesday</th>
										<th>Thursday</th>
										<th>Friday</th>
										<th>Saturday</th>
										<th>Sunday</th>
									</tr>
								</thead>
								<tbody>
									<tr class="row_1">
										<td class="time"> 06:00 - 07:00 </td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title title-fitness">Fitness</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title title-boxing">Boxing</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
									</tr>
									<tr class="row_1">
										<td class="time"> 07:00 - 08:00 </td>
										<td class="schedule-item">
											<h6 class="title text-running">Running</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title title-meditation">Meditation</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
									<tr class="row_1">
										<td class="time"> 08:00 - 09:00 </td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title title-building">Body Building</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td class="schedule-item">
											<h6 class="title title-karate">Karate</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td class="schedule-item">
											<h6 class="title text-cycling">Cycling</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
									<tr class="row_1">
										<td class="time"> 04:00 - 05:00 </td>
										<td></td>
										<td></td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title title-meditation">Meditation</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title title-karate">Karate</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
									</tr>
									<tr class="row_1">
										<td class="time"> 05:00 - 06:00 </td>
										<td></td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title text-running">Running</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
									<tr class="row_1">
										<td class="time"> 06:00 - 07:00 </td>
										<td class="schedule-item">
											<h6 class="title title-boxing">Boxing</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title text-cycling">Cycling</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title title-fitness">Fitness</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
									</tr>
									<tr class="row_1">
										<td class="time"> 07:00 - 08:00 </td>
										<td></td>
										<td></td>
										<td class="schedule-item">
											<h6 class="title title-building">Body Building</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td class="schedule-item">
											<h6 class="title title-fitness">Fitness</h6>
											<span class="item-time">9:00am - 10:00am</span>
											<div class="coach-profile">
												<div class="dz-media">
													<img src="assets/images/avatar/avatar2.jpg" alt="">
												</div>
												<div class="dz-content">
													<h6 class="name">Robert Louis</h6>
													<span class="position">Boxing Trainer</span>
													<a href="javascript:void(0);" class="btn-link">View Profile</a>
												</div>
											</div>
										</td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<svg class="pattern1" width="43" height="160" viewbox="0 0 43 160" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M0 0L33 27V28L0 55V0Z" fill="var(--primary)"></path>
				<path d="M0 70L33 97V98L0 125V70Z" fill="var(--primary)"></path>
				<path d="M43 35L10 62V63L43 90V35Z" fill="var(--primary)"></path>
				<path d="M43 105L10 132V133L43 160V105Z" fill="var(--primary)"></path>
			</svg>
		</section>
		<!-- End of schedule -->
		
		<!-- Our Blog -->
		<section class="content-inner-2 bg-secondary overflow-hidden blog-section">
			<style>
				/* =====================================
   BLOG FLIP CARD – PREMIUM UI
===================================== */

.blog-section {
    padding: clamp(50px, 8vw, 110px) 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(255,0,0,.15), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(0,200,255,.15), transparent 40%),
        #0f2027;
    overflow: hidden;
}

/* Swiper fix */
.blog-slider-wrapper {
    overflow: visible;
}

/* Slide height control */
.blog-slider-wrapper .swiper-slide {
    height: auto;
    perspective: 1200px;
}

/* =====================================
   FLIP CARD CORE
===================================== */

.dz-card.style-4 {
    position: relative;
    width: 100%;
    min-height: 420px;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(.4,.2,.2,1);
    border-radius: 22px;
}

/* Hover = flip (desktop) */
@media (hover: hover) {
    .dz-card.style-4:hover {
        transform: rotateY(180deg);
    }
}

/* =====================================
   FRONT & BACK
===================================== */

.dz-card.style-4::before,
.dz-card.style-4::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    backface-visibility: hidden;
}

/* ---------- FRONT ---------- */
.dz-card.style-4::before {
    background:
        linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.8)),
        var(--bg-img);
    background-size: cover;
    background-position: center;
}

/* ---------- BACK ---------- */
.dz-card.style-4::after {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(18px);
    transform: rotateY(180deg);
    box-shadow: 0 25px 60px rgba(0,0,0,.6);
}

/* Inject background image dynamically */
.dz-card.style-4 {
    --bg-img: none;
}
.dz-card.style-4[style] {
    --bg-img: inherit;
}

/* =====================================
   CONTENT POSITIONING
===================================== */

/* FRONT CONTENT (DATE) */
.post-date {
    position: absolute;
    top: 18px;
    left: 18px;
    background: var(--primary);
    padding: 10px 14px;
    border-radius: 14px;
    color: #fff;
    font-weight: 700;
    z-index: 2;
}

/* BACK CONTENT */
.dz-info {
    position: absolute;
    inset: 0;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: 2;
}

/* =====================================
   TYPOGRAPHY
===================================== */

.dz-title a {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.dz-info p {
    color: rgba(255,255,255,.85);
    font-size: 14px;
    margin-top: 10px;
}

/* Meta */
.dz-meta ul {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}

.dz-meta img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* Button */
.dz-info .btn-primary {
    margin-top: 18px;
    align-self: flex-start;
    transition: transform .3s ease, box-shadow .4s ease;
}

.dz-info .btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.6);
}

/* =====================================
   RESPONSIVE
===================================== */

/* Tablet */
@media (max-width: 991px) {
    .dz-card.style-4 {
        min-height: 380px;
    }

    .dz-title a {
        font-size: 20px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .dz-card.style-4 {
        min-height: 340px;
    }

    .dz-info {
        padding: 24px;
    }

    .dz-title a {
        font-size: 18px;
    }
}

.dz-card.style-4.is-flipped {
    transform: rotateY(180deg);
}

			</style>
			<div class="container">
				<div class="section-head style-4 text-center wow fadeInUp" data-wow-delay="0.2s">
					<h2 class="title">Latest News<span> Feed</span></h2>
				</div>
				<div class="swiper blog-slider-full blog-slider-wrapper">
					<div class="swiper-wrapper">
						<div class="swiper-slide wow fadeInUp" data-wow-delay="0.4s">
							<div class="dz-card style-4" style="background-image: url(assets/images/overly-box/pic3.png);">
								<div class="post-date">
									<span class="date">28</span>
									<span class="months">January</span>
								</div>
								<div class="dz-info">
									<div class="dz-meta">
										<ul>
											<li class="post-author">
												<a href="javascript:void(0);">
													<img src="assets/images/avatar/avatar1.jpg" alt=""> 
													<span>By Jemmy</span>
												</a>
											</li>
											<li class="post-comments"><a href="javascript:void(0);"> 20 Comments</a></li>
										</ul>
									</div>
									<h4 class="dz-title"><a href="blog-details.html">How to keep your Body.</a></h4>
									<p>A wonderful serenity has taken of my entire soul, like these.</p>
									<a href="blog-details.html" class="btn rounded-0 btn-primary"><span>Read More</span></a>
								</div>
							</div>
						</div>
						<div class="swiper-slide wow fadeInUp" data-wow-delay="0.6s">
							<div class="dz-card style-4" style="background-image: url(assets/images/overly-box/pic1.png);">
								<div class="post-date">
									<span class="date">07</span>
									<span class="months">January</span>
								</div>
								<div class="dz-info">
									<div class="dz-meta">
										<ul>
											<li class="post-author">
												<a href="javascript:void(0);">
													<img src="assets/images/avatar/avatar2.jpg" alt=""> 
													<span>By Frenchi</span>
												</a>
											</li>
											<li class="post-comments"><a href="javascript:void(0);"> 20 Comments</a></li>
										</ul>
									</div>
									<h4 class="dz-title"><a href="blog-details.html">Best 50 Tips For Fitness.</a></h4>
									<p>A wonderful serenity has taken of my entire soul, like these.</p>
									<a href="blog-details.html" class="btn rounded-0 btn-primary"><span>Read More</span></a>
								</div>
							</div>
						</div>						
						<div class="swiper-slide wow fadeInUp" data-wow-delay="0.8s">
							<div class="dz-card style-4" style="background-image: url(assets/images/overly-box/pic2.png);">
								<div class="post-date">
									<span class="date">24</span>
									<span class="months">January</span>
								</div>
								<div class="dz-info">
									<div class="dz-meta">
										<ul>
											<li class="post-author">
												<a href="javascript:void(0);">
													<img src="assets/images/avatar/avatar3.jpg" alt=""> 
													<span>By Jone Doe</span>
												</a>
											</li>
											<li class="post-comments"><a href="javascript:void(0);"> 20 Comments</a></li>
										</ul>
									</div>
									<h4 class="dz-title"><a href="blog-details.html">The Philosophy Of Fitness.</a></h4>
									<p>A wonderful serenity has taken of my entire soul, like these.</p>
									<a href="blog-details.html" class="btn rounded-0 btn-primary"><span>Read More</span></a>
								</div>
							</div>
						</div>						
					</div>
				</div>
				<div class="text-center m-t30"><a href="blog-details.html" class="btn btn-skew-2 btn-primary wow fadeInUp" data-wow-delay="1.0s">View All Feed</a></div>
			</div>
			<svg class="pattern1" width="95" height="230" viewbox="0 0 95 230" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M52 125L85 98V97L52 70V125Z" fill="var(--primary)"></path>
				<path d="M52 55L85 28V27L52 0V55Z" fill="var(--primary)"></path>
				<path d="M95 160L62 133V132L95 105V160Z" fill="var(--primary)"></path>
				<path d="M95 90L62 63V62L95 35V90Z" fill="var(--primary)"></path>
				<path d="M0 105L33 132V133L0 160V105Z" fill="var(--primary)"></path>
				<path d="M0 175L33 202V203L0 230V175Z" fill="var(--primary)"></path>
				<path d="M43 70L10 97V98L43 125V70Z" fill="var(--primary)"></path>
				<path d="M43 140L10 167V168L43 195V140Z" fill="var(--primary)"></path>
			</svg>
		</section>
			
	<!-- Clients Logo -->
	<div class="half-shape-top-w bg-secondary content-inner-2">
		<div class="container">
			<div class="clients-box">
				<div class="swiper clients-swiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide wow fadeInUp" data-wow-delay="0.2s">
							<div class="clients-logo">
								<img src="assets/images/client-logo/logo1.png" alt="">
							</div>
						</div>	
						<div class="swiper-slide wow fadeInUp" data-wow-delay="0.4s">
							<div class="clients-logo">
								<img src="assets/images/client-logo/logo2.png" alt="">
							</div>
						</div>
						<div class="swiper-slide wow fadeInUp" data-wow-delay="0.6s">
							<div class="clients-logo">
								<img src="assets/images/client-logo/logo3.png" alt="">
							</div>
						</div>	
						<div class="swiper-slide wow fadeInUp" data-wow-delay="0.8s">
							<div class="clients-logo">
								<img src="assets/images/client-logo/logo1.png" alt="">
							</div>
						</div>
						<div class="swiper-slide wow fadeInUp" data-wow-delay="1.0s">
							<div class="clients-logo">
								<img src="assets/images/client-logo/logo2.png" alt="">
							</div>
						</div>
						<div class="swiper-slide wow fadeInUp" data-wow-delay="1.2s">
							<div class="clients-logo">
								<img src="assets/images/client-logo/logo3.png" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Clients Logo End-->
	<!-- footer-->
	 <section class="call-action style-2 bg-img-fix bg-primary">
			<div class="container">
				<div class="inner-content">
					<div class="row justify-content-between align-items-center">
						<div class="text-center text-lg-start col-xl-6 m-lg-b20 wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
							<h2 class="title m-0"><span class="font-weight-400">Subscribe To Our </span>Newsletter</h2>
						</div>
						<div class="text-center text-lg-end col-xl-6 wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
							<form class="dzSubscribe" action="assets/script/mailchamp.php" method="post">
								<div class="dzSubscribeMsg"></div>
								<div class="form-group">
									<div class="input-group mb-0"> 
										<div class="input-skew">
											<input name="dzEmail" required="required" type="email" class="form-control" placeholder="Your Email Address">
										</div>
										<div class="input-group-addon">
											<button name="submit" value="Submit" type="submit" class="btn btn-secondary btn-lg btn-skew h-100"><span class="skew-inner"><span class="text">Subscribe Now</span></span></button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- Call To Action -->
	
	</div>
	
	<!-- Footer -->
    <footer class="site-footer style-1 bg-parallax" style="background-image: url(assets/images/background/footer-bg-2.jpg); background-attachment: fixed; background-size: cover; background-position: center;" id="footer">
		<!-- Footer Top Section -->
		<div class="footer-top pt-5 pb-4">
            <div class="container">
				<div class="row g-4">
					<!-- About Section -->
					<div class="col-12 col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.2s">
						<div class="widget widget_about">
							<div class="footer-logo logo-white mb-3">
								<a href="index.html"><img src="assets/images/logo-white.png" alt="PowerZone Logo" class="img-fluid" style="max-width: 180px;"></a> 
							</div>
							<p class="text-white-50 mb-3" style="font-size: 0.95rem; line-height: 1.6;">Experience world-class fitness training with state-of-the-art equipment and certified trainers dedicated to your transformation.</p>
							<div class="mb-3">
								<h6 class="text-white fw-bold mb-3" style="font-size: 0.9rem; letter-spacing: 1px;">FOLLOW US</h6>
								<div class="dz-social-icon style-1 dz-hover-move dark">
									<ul class="list-unstyled d-flex gap-2">									
										<li>
											<a target="_blank" href="https://www.facebook.com/dexignzone/" class="btn btn-sm btn-outline-light rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; transition: all 0.3s ease;">
												<i class="fab fa-facebook-f"></i>
											</a>
										</li>
										<li>
											<a target="_blank" href="https://twitter.com/dexignzones" class="btn btn-sm btn-outline-light rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; transition: all 0.3s ease;">
												<i class="fab fa-twitter"></i>
											</a>
										</li>
										<li>
											<a target="_blank" href="https://www.instagram.com/dexignzone/" class="btn btn-sm btn-outline-light rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; transition: all 0.3s ease;">
												<i class="fab fa-instagram"></i>
											</a>
										</li>
										<li>
											<a target="_blank" href="https://www.youtube.com/channel/UCGL8V6uxNNMRrk3oZfVct1g" class="btn btn-sm btn-outline-light rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; transition: all 0.3s ease;">
												<i class="fab fa-youtube"></i>
											</a>
										</li>
									</ul>
								</div>							
							</div>
						</div>
					</div>

					<!-- Latest Blog Posts -->
					<div class="col-12 col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.3s">
						<div class="widget recent-posts-entry">
							<h4 class="footer-title text-white fw-bold mb-4" style="font-size: 1.1rem; border-bottom: 2px solid var(--primary); padding-bottom: 10px; display: inline-block;">LATEST POSTS</h4>
							<div class="widget-post-bx">
								<div class="widget-post mb-3 pb-3" style="border-bottom: 1px solid rgba(255,255,255,0.1);">
									<div class="dz-info">
										<h6 class="title text-white mb-2" style="font-size: 0.95rem; line-height: 1.4;"><a class="text-white text-decoration-none" href="blog-detail.html" style="transition: color 0.3s ease;">Simple Condition for all Around.</a></h6>
										<span class="post-date text-white-50" style="font-size: 0.85rem;">JUNE 18, 2023</span>
									</div>
								</div>
								<div class="widget-post">
									<div class="dz-info">
										<h6 class="title text-white mb-2" style="font-size: 0.95rem; line-height: 1.4;"><a class="text-white text-decoration-none" href="blog-detail.html" style="transition: color 0.3s ease;">Best 50 Tips For Heavy Fitness.</a></h6>
										<span class="post-date text-white-50" style="font-size: 0.85rem;">AUGUST 22, 2023</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Quick Links -->
					<div class="col-12 col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.4s">
						<div class="widget widget_links">
							<h4 class="footer-title text-white fw-bold mb-4" style="font-size: 1.1rem; border-bottom: 2px solid var(--primary); padding-bottom: 10px; display: inline-block;">QUICK LINKS</h4>
							<ul class="list-unstyled">
								<li class="mb-2">
									<a href="services.html" class="text-white-50 text-decoration-none" style="transition: color 0.3s ease; font-size: 0.95rem;">
										<i class="fa fa-chevron-right me-2" style="font-size: 0.75rem;"></i>Services
									</a>
								</li>
								<li class="mb-2">
									<a href="pricing.html" class="text-white-50 text-decoration-none" style="transition: color 0.3s ease; font-size: 0.95rem;">
										<i class="fa fa-chevron-right me-2" style="font-size: 0.75rem;"></i>Pricing Plans
									</a>
								</li>
								<li class="mb-2">
									<a href="schedule.html" class="text-white-50 text-decoration-none" style="transition: color 0.3s ease; font-size: 0.95rem;">
										<i class="fa fa-chevron-right me-2" style="font-size: 0.75rem;"></i>Class Schedule
									</a>
								</li>
								<li class="mb-2">
									<a href="about-us.html" class="text-white-50 text-decoration-none" style="transition: color 0.3s ease; font-size: 0.95rem;">
										<i class="fa fa-chevron-right me-2" style="font-size: 0.75rem;"></i>About Us
									</a>
								</li>
								<li>
									<a href="contact-us.html" class="text-white-50 text-decoration-none" style="transition: color 0.3s ease; font-size: 0.95rem;">
										<i class="fa fa-chevron-right me-2" style="font-size: 0.75rem;"></i>Contact
									</a>
								</li>
							</ul>
						</div>
					</div>

					<!-- Contact Information -->
					<div class="col-12 col-sm-6 col-lg-3 wow fadeInUp" data-wow-delay="0.5s">
						<div class="widget widget_contact">
							<h4 class="footer-title text-white fw-bold mb-4" style="font-size: 1.1rem; border-bottom: 2px solid var(--primary); padding-bottom: 10px; display: inline-block;">CONTACT US</h4>
							<ul class="list-unstyled">
								<li class="mb-3">
									<div class="d-flex gap-3">
										<i class="fa fa-map-marker-alt text-primary" style="font-size: 1.2rem; width: 25px;"></i>
										<div>
											<p class="text-white-50 mb-1" style="font-size: 0.9rem;">1559 Alabama Ave SE,<br>Washington, USA</p>
										</div>
									</div>
								</li>
								<li class="mb-3">
									<div class="d-flex gap-3">
										<i class="fa fa-phone text-primary" style="font-size: 1.2rem; width: 25px;"></i>
										<div>
											<p class="text-white-50 mb-1" style="font-size: 0.9rem;"><a href="tel:+1234567890" class="text-white-50 text-decoration-none" style="transition: color 0.3s ease;">+1 (234) 567-890</a></p>
										</div>
									</div>
								</li>
								<li>
									<div class="d-flex gap-3">
										<i class="fa fa-envelope text-primary" style="font-size: 1.2rem; width: 25px;"></i>
										<div>
											<p class="text-white-50 mb-0" style="font-size: 0.9rem;"><a href="mailto:info@powerzone.com" class="text-white-50 text-decoration-none" style="transition: color 0.3s ease;">info@powerzone.com</a></p>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>

				
            </div>
        </div>

        <!-- Footer Bottom Part -->
        <div class="footer-bottom py-4" style="border-top: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3);">
        	<div class="container">
				<div class="row align-items-center">
					<div class="col-12 col-md-6 text-center text-md-start mb-3 mb-md-0">
						<p class="text-white-50 mb-0" style="font-size: 0.9rem;">
							<span>Copyright © <span class="current-year">2024</span></span> 
							<a href="https://dexignzone.com/" target="_blank" class="text-white text-decoration-none fw-bold" style="transition: color 0.3s ease;">PowerZone Fitness</a>
							<span>. All rights reserved.</span>
						</p>
					</div>
					<div class="col-12 col-md-6 text-center text-md-end">
						<ul class="list-unstyled d-flex justify-content-center justify-content-md-end gap-3">
							<li><a href="#" class="text-white-50 text-decoration-none" style="font-size: 0.9rem; transition: color 0.3s ease;">Privacy Policy</a></li>
							<li><span class="text-white-50">|</span></li>
							<li><a href="#" class="text-white-50 text-decoration-none" style="font-size: 0.9rem; transition: color 0.3s ease;">Terms & Conditions</a></li>
						</ul>
					</div>
				</div>
            </div>
        </div>
	</footer>

	<!-- Footer Responsive Styles -->
	<style>
		.footer-title:hover {
			color: var(--primary) !important;
		}

		.dz-social-icon a:hover {
			background-color: var(--primary) !important;
			border-color: var(--primary) !important;
			color: white !important;
			transform: translateY(-3px);
		}

		.widget_links a:hover,
		.widget_contact a:hover {
			color: var(--primary) !important;
		}

		.btn-primary:hover {
			transform: translateX(5px);
			box-shadow: 0 5px 20px rgba(var(--primary-rgb), 0.4);
		}

		/* Mobile Responsive Footer */
		@media (max-width: 576px) {
			.site-footer .container {
				padding-left: 15px;
				padding-right: 15px;
			}

			.footer-logo img {
				max-width: 150px !important;
			}

			.footer-title {
				font-size: 1rem !important;
			}

			.widget {
				margin-bottom: 20px;
			}

			.footer-bottom {
				padding: 20px 0 !important;
			}

			.footer-bottom .row {
				flex-direction: column;
			}

			.text-md-start {
				text-align: center !important;
			}

			.text-md-end {
				text-align: center !important;
			}
		}

		/* Tablet Responsive Footer */
		@media (min-width: 577px) and (max-width: 991px) {
			.site-footer .row > [class*='col-']:not(.col-12) {
				margin-bottom: 20px;
			}

			.footer-title {
				font-size: 1rem !important;
			}
		}

		/* Desktop Enhancements */
		@media (min-width: 992px) {
			.site-footer .row.g-4 > div {
				transition: transform 0.3s ease;
			}

			.site-footer .widget:hover {
				transform: translateY(-5px);
			}
		}

		/* Text hover effects */
		.site-footer a {
			transition: all 0.3s ease;
		}

		/* Smooth transitions for footer links */
		.site-footer .text-white-50 {
			transition: color 0.3s ease;
		}

		.site-footer a.text-white-50:hover {
			color: var(--primary) !important;
		}
	</style>
    <!-- Footer End -->
	 <!--  -->
	<div class="scroltop-progress scroltop-primary active-progress">
		<svg width="100%" height="100%" viewbox="-1 -1 102 102">
			<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 24.3299px;"></path>
		</svg>
	</div>
</div>
<!-- JAVASCRIPT FILES ========================================= -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.min.js"></script><!-- JQUERY.MIN JS -->
<script src="assets/vendor/wow/wow.js"></script><!-- WOW.JS -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script src="assets/vendor/splitting/dist/splitting.min.js"></script><!-- Splitting -->
<script src="assets/vendor/lightgallery/dist/lightgallery.min.js"></script><!-- LIGHT GALLERY -->
<script src="assets/vendor/lightgallery/dist/plugins/thumbnail/lg-thumbnail.min.js"></script><!-- LIGHT GALLERY -->
<script src="assets/vendor/lightgallery/dist/plugins/zoom/lg-zoom.min.js"></script><!-- LIGHT GALLERY -->
<script src="assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script><!-- BOOTSTRAP SELEECT -->
<script src="assets/vendor/magnific-popup/magnific-popup.js"></script><!-- MAGNIFIC POPUP JS -->
<script src="assets/vendor/counter/waypoints-min.js"></script><!-- WAYPOINTS JS -->
<script src="assets/vendor/counter/counterup.min.js"></script><!-- COUNTERUP JS -->
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script><!-- SWIPER -->
<script src="assets/vendor/rangeslider/rangeslider.js"></script><!-- RANGESLIDER -->
<script src="assets/vendor/switcher/switcher.js"></script><!-- SWITCHER -->
<script src="assets/js/dz.carousel.js"></script><!-- OWL-CAROUSEL -->
<script src="assets/js/dz.ajax.js"></script><!-- AJAX -->
<script src="assets/js/custom.js"></script><!-- CUSTOM JS -->
<!-- counter -->
<script>
document.addEventListener("DOMContentLoaded", () => {
    const counters = document.querySelectorAll(".counter");

    const animateCounter = (counter) => {
        const target = +counter.innerText;
        let current = 0;
        const increment = target / 80;

        const update = () => {
            current += increment;
            if (current < target) {
                counter.innerText = Math.ceil(current);
                requestAnimationFrame(update);
            } else {
                counter.innerText = target;
            }
        };
        update();
    };

    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateCounter(entry.target);
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.5 });

    counters.forEach(counter => observer.observe(counter));
});
</script>
<!-- End of Counter -->

<!-- schedule -->
 <script>
document.addEventListener("DOMContentLoaded", () => {

  /* ==========================
     DAY FILTER BUTTONS
  ========================== */
  const days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
  const filterBar = document.createElement("div");
  filterBar.className = "schedule-filter";
  filterBar.innerHTML = `<button class="active" data-day="all">All</button>` +
    days.map(d=>`<button data-day="${d}">${d}</button>`).join("");
  document.querySelector(".schedule-section .schedule-table").before(filterBar);

  const buttons = filterBar.querySelectorAll("button");
  const headers = document.querySelectorAll(".ck-table thead th");

  buttons.forEach(btn=>{
    btn.onclick=()=>{
      buttons.forEach(b=>b.classList.remove("active"));
      btn.classList.add("active");
      const day = btn.dataset.day;

      headers.forEach((th,i)=>{
        if(i===0)return;
        const show = day==="all" || th.innerText===day;
        document.querySelectorAll(`.ck-table tr`).forEach(row=>{
          if(row.children[i]) row.children[i].style.display = show?"":"none";
        });
      });
    }
  });

  /* ==========================
     TODAY HIGHLIGHT
  ========================== */
  const todayName = new Date().toLocaleDateString("en-US",{weekday:"long"});
  headers.forEach((th,i)=>{
    if(th.innerText===todayName){
      document.querySelectorAll(`.ck-table tr`).forEach(r=>{
        r.children[i]?.classList.add("today");
      });
    }
  });

  /* ==========================
     TRAINER MODAL (AUTO)
  ========================== */
  document.body.insertAdjacentHTML("beforeend",`
    <div id="trainerModal" style="
      position:fixed;inset:0;display:none;
      background:rgba(0,0,0,.7);
      backdrop-filter:blur(6px);
      align-items:center;justify-content:center;z-index:9999">
      <div style="background:#111;padding:30px;border-radius:20px;max-width:320px;color:#fff;text-align:center">
        <img id="trainerImg" style="width:80px;height:80px;border-radius:50%;border:2px solid var(--primary)">
        <h3 id="trainerName"></h3>
        <p id="trainerRole"></p>
        <button onclick="document.getElementById('trainerModal').style.display='none'"
          style="margin-top:15px" class="btn btn-primary">Close</button>
      </div>
    </div>
  `);

  document.querySelectorAll(".btn-link").forEach(btn=>{
    btn.onclick=(e)=>{
      e.preventDefault();
      const box = btn.closest(".coach-profile");
      document.getElementById("trainerImg").src = box.querySelector("img").src;
      document.getElementById("trainerName").innerText = box.querySelector(".name").innerText;
      document.getElementById("trainerRole").innerText = box.querySelector(".position").innerText;
      document.getElementById("trainerModal").style.display="flex";
    }
  });

});
</script>
<!-- end of schedule -->

<!--  -->
<script>
document.querySelectorAll('.dz-card.style-4').forEach(card => {
    card.addEventListener('click', () => {
        card.classList.toggle('is-flipped');
    });
});
</script>
<!--  -->

<!-- Mobile Menu Toggle Fix -->
<script>
document.addEventListener('DOMContentLoaded', function() {
	const toggleBtn = document.querySelector('.navbar-toggler');
	const navbarCollapse = document.getElementById('navbarNavDropdown');
	const menuLinks = document.querySelectorAll('.header-nav .nav a');
	const closeBtn = document.getElementById('mobileMenuClose');
	
	// Function to close menu
	function closeMenu() {
		navbarCollapse.classList.remove('show');
		toggleBtn.classList.add('collapsed');
		toggleBtn.classList.remove('open');
		toggleBtn.setAttribute('aria-expanded', 'false');
	}
	
	// Function to open menu
	function openMenu() {
		navbarCollapse.classList.add('show');
		toggleBtn.classList.remove('collapsed');
		toggleBtn.classList.remove('open');
		toggleBtn.setAttribute('aria-expanded', 'true');
	}
	
	// Toggle button click - explicitly toggle instead of using built-in toggle
	if (toggleBtn) {
		toggleBtn.addEventListener('click', function(e) {
			e.stopPropagation();
			// Prevent Bootstrap's default toggle behavior
			e.preventDefault();
			
			if (navbarCollapse.classList.contains('show')) {
				closeMenu();
			} else {
				openMenu();
			}
		});
	}
	
	// Close button click - only closes
	if (closeBtn) {
		closeBtn.addEventListener('click', function(e) {
			e.stopPropagation();
			e.preventDefault();
			closeMenu();
		});
	}
	
	// Close menu when clicking menu items (on mobile only)
	menuLinks.forEach(link => {
		link.addEventListener('click', function(e) {
			if (window.innerWidth <= 991) {
				closeMenu();
			}
		});
	});
});
</script>

<!-- Login Modal -->
<div class="modal fade auth-modal" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" style="max-width: 450px;">
		<div class="modal-content">
			<div class="modal-header d-flex justify-content-between align-items-center">
				<h5 class="modal-title" id="loginModalLabel">Welcome Back</h5>
				<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form id="loginForm">
					<div class="form-group">
						<label class="form-label">Email Address</label>
						<input type="email" class="form-control" placeholder="Enter your email" required>
					</div>

					<div class="form-group password-toggle">
						<label class="form-label">Password</label>
						<input type="password" class="form-control" placeholder="Enter your password" required>
						<button type="button" class="toggle-password" onclick="togglePassword(this)">
							<i class="fa fa-eye"></i>
						</button>
					</div>

					<div class="form-check d-flex align-items-center">
						<input class="form-check-input" type="checkbox" id="rememberLogin">
						<label class="form-check-label" for="rememberLogin">Remember me</label>
					</div>

					<button type="submit" class="btn btn-primary mt-3">Login Now</button>
				</form>

				<div class="divider">
					<span>Or continue with</span>
				</div>

				<div class="social-login">
					<button type="button" class="social-btn">
						<i class="fab fa-google me-2"></i> Google
					</button>
					<button type="button" class="social-btn">
						<i class="fab fa-facebook-f me-2"></i> Facebook
					</button>
				</div>

				<div class="toggle-form">
					Don't have an account? 
					<a onclick="switchToRegister()">Create one</a>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Register Modal -->
<div class="modal fade auth-modal" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" style="max-width: 450px;">
		<div class="modal-content">
			<div class="modal-header d-flex justify-content-between align-items-center">
				<h5 class="modal-title" id="registerModalLabel">Create Account</h5>
				<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form id="registerForm">
					<div class="form-group">
						<label class="form-label">Full Name</label>
						<input type="text" class="form-control" placeholder="Enter your full name" required>
					</div>

					<div class="form-group">
						<label class="form-label">Email Address</label>
						<input type="email" class="form-control" placeholder="Enter your email" required>
					</div>

					<div class="form-group">
						<label class="form-label">Phone Number</label>
						<input type="tel" class="form-control" placeholder="Enter your phone number" required>
					</div>

					<div class="form-group">
						<label class="form-label">Fitness Goal</label>
						<select class="form-control" required>
							<option value="">Select your fitness goal</option>
							<option value="weight-loss">Weight Loss</option>
							<option value="muscle-gain">Muscle Gain</option>
							<option value="strength">Build Strength</option>
							<option value="endurance">Improve Endurance</option>
							<option value="flexibility">Improve Flexibility</option>
							<option value="general">General Fitness</option>
						</select>
					</div>

					<div class="form-group password-toggle">
						<label class="form-label">Password</label>
						<input type="password" class="form-control" placeholder="Create a password" required>
						<button type="button" class="toggle-password" onclick="togglePassword(this)">
							<i class="fa fa-eye"></i>
						</button>
					</div>

					<div class="form-group password-toggle">
						<label class="form-label">Confirm Password</label>
						<input type="password" class="form-control" placeholder="Confirm your password" required>
						<button type="button" class="toggle-password" onclick="togglePassword(this)">
							<i class="fa fa-eye"></i>
						</button>
					</div>

					<div class="form-check d-flex align-items-start">
						<input class="form-check-input" type="checkbox" id="agreeTerms" required>
						<label class="form-check-label" for="agreeTerms">
							I agree to the <a href="#" style="color: var(--primary);">Terms & Conditions</a> and <a href="#" style="color: var(--primary);">Privacy Policy</a>
						</label>
					</div>

					<button type="submit" class="btn btn-primary mt-3">Create Account</button>
				</form>

				<div class="divider">
					<span>Or sign up with</span>
				</div>

				<div class="social-login">
					<button type="button" class="social-btn">
						<i class="fab fa-google me-2"></i> Google
					</button>
					<button type="button" class="social-btn">
						<i class="fab fa-facebook-f me-2"></i> Facebook
					</button>
				</div>

				<div class="toggle-form">
					Already have an account? 
					<a onclick="switchToLogin()">Login here</a>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Authentication Modal Scripts -->
<script>
	function togglePassword(button) {
		const input = button.previousElementSibling;
		const icon = button.querySelector('i');
		
		if (input.type === 'password') {
			input.type = 'text';
			icon.classList.remove('fa-eye');
			icon.classList.add('fa-eye-slash');
		} else {
			input.type = 'password';
			icon.classList.remove('fa-eye-slash');
			icon.classList.add('fa-eye');
		}
	}

	function switchToLogin() {
		const registerModal = bootstrap.Modal.getInstance(document.getElementById('registerModal'));
		const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
		registerModal.hide();
		setTimeout(() => loginModal.show(), 300);
	}

	function switchToRegister() {
		const loginModal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
		const registerModal = new bootstrap.Modal(document.getElementById('registerModal'));
		loginModal.hide();
		setTimeout(() => registerModal.show(), 300);
	}

	// Form submission handlers
	document.getElementById('loginForm')?.addEventListener('submit', function(e) {
		e.preventDefault();
		alert('Login functionality would be implemented here');
		// Reset form
		this.reset();
	});

	document.getElementById('registerForm')?.addEventListener('submit', function(e) {
		e.preventDefault();
		alert('Registration functionality would be implemented here');
		// Reset form
		this.reset();
	});
</script>

</div>
</body>
</html>