{"id":35,"date":"2026-07-22T05:43:14","date_gmt":"2026-07-22T05:43:14","guid":{"rendered":"https:\/\/bakar.ssrmovies.news\/?page_id=35"},"modified":"2026-07-22T06:36:05","modified_gmt":"2026-07-22T06:36:05","slug":"home-1","status":"publish","type":"page","link":"https:\/\/bakar.ssrmovies.news\/index.php\/home-1\/","title":{"rendered":"Home 1"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nApex Athletic \u2014 Premium Gym & Fitness Header<\/title>\r\n<meta name=\"description\" content=\"Apex Athletic \u2014 a premium strength and conditioning club. Explore programs, trainers, membership plans and pricing.\">\r\n\r\n<!-- Google Font: Poppins -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Font Awesome -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\">\r\n\r\n<style>\r\n\/* ==========================================================================\r\n APEX ATHLETIC \u2014 PREMIUM GYM HEADER\r\n Design tokens\r\n ========================================================================== *\/\r\n:root{\r\n --c-red: #FF3B30;\r\n --c-red-dark: #C4271D;\r\n --c-black: #111111;\r\n --c-charcoal: #1B1B1B;\r\n --c-white: #FFFFFF;\r\n --c-white-60: rgba(255,255,255,.6);\r\n --c-white-10: rgba(255,255,255,.1);\r\n --c-glass: rgba(17,17,17,.55);\r\n\r\n --radius: 12px;\r\n --ease: .4s cubic-bezier(.25,.8,.25,1);\r\n\r\n --header-h: 88px;\r\n --topbar-h: 42px;\r\n}\r\n\r\n*,*::before,*::after{ box-sizing: border-box; }\r\nhtml{ scroll-behavior: smooth; }\r\n\r\nbody{\r\n margin:0;\r\n font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background:#0b0b0b;\r\n color:var(--c-white);\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\na{ color:inherit; text-decoration:none; }\r\nbutton{ font-family:inherit; cursor:pointer; }\r\nul{ list-style:none; margin:0; padding:0; }\r\nimg{ max-width:100%; display:block; }\r\n\r\n\/* Visually-hidden utility for accessibility labels *\/\r\n.visually-hidden{\r\n position:absolute; width:1px; height:1px; padding:0; margin:-1px;\r\n overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;\r\n}\r\n\r\n\/* Skip link for keyboard users *\/\r\n.skip-link{\r\n position:absolute; left:-999px; top:0; z-index:1200;\r\n background:var(--c-red); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;\r\n}\r\n.skip-link:focus{ left:0; }\r\n\r\n\/* ==========================================================================\r\n SITE HEADER WRAPPER (sticky)\r\n ========================================================================== *\/\r\n.site-header{\r\n position: sticky;\r\n top: 0;\r\n z-index: 1000;\r\n width: 100%;\r\n transition: background var(--ease), box-shadow var(--ease), backdrop-filter var(--ease);\r\n background: transparent;\r\n}\r\n\r\n.site-header.is-scrolled{\r\n background: rgba(10,10,10,.78);\r\n backdrop-filter: blur(16px) saturate(140%);\r\n -webkit-backdrop-filter: blur(16px) saturate(140%);\r\n box-shadow: 0 8px 30px rgba(0,0,0,.45);\r\n}\r\n\r\n\/* ==========================================================================\r\n TOP BAR\r\n ========================================================================== *\/\r\n.topbar{\r\n height: var(--topbar-h);\r\n background: var(--c-black);\r\n border-bottom: 1px solid var(--c-white-10);\r\n font-size: 13px;\r\n overflow: hidden;\r\n transition: max-height var(--ease), opacity var(--ease);\r\n}\r\n\r\n.site-header.is-scrolled .topbar{\r\n max-height: 0;\r\n opacity: 0;\r\n border-bottom: 0;\r\n}\r\n\r\n.topbar-inner{\r\n max-width: 1360px;\r\n margin: 0 auto;\r\n height: 100%;\r\n padding: 0 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 24px;\r\n}\r\n\r\n.topbar-info{\r\n display: flex;\r\n align-items: center;\r\n gap: 26px;\r\n color: var(--c-white-60);\r\n}\r\n\r\n.topbar-info li{ display:flex; align-items:center; gap:8px; white-space:nowrap; }\r\n.topbar-info i{ color: var(--c-red); font-size: 13px; }\r\n.topbar-info a{ color: inherit; transition: color var(--ease); }\r\n.topbar-info a:hover{ color: var(--c-white); }\r\n\r\n.topbar-social{ display:flex; align-items:center; gap:10px; }\r\n\r\n.topbar-social a{\r\n width: 30px; height: 30px;\r\n display:flex; align-items:center; justify-content:center;\r\n border-radius: 50%;\r\n border: 1px solid var(--c-white-10);\r\n color: var(--c-white-60);\r\n font-size: 13px;\r\n transition: all var(--ease);\r\n}\r\n\r\n.topbar-social a:hover{\r\n background: var(--c-red);\r\n border-color: var(--c-red);\r\n color: #fff;\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 16px rgba(255,59,48,.4);\r\n}\r\n\r\n\/* ==========================================================================\r\n MAIN HEADER\r\n ========================================================================== *\/\r\n.main-header{\r\n max-width: 1360px;\r\n margin: 0 auto;\r\n height: var(--header-h);\r\n padding: 0 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n transition: height var(--ease);\r\n}\r\n\r\n.site-header.is-scrolled .main-header{ height: 74px; }\r\n\r\n\/* Logo *\/\r\n.brand{\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.brand-mark{\r\n width: 46px; height: 46px;\r\n border-radius: 10px;\r\n background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%);\r\n display:flex; align-items:center; justify-content:center;\r\n box-shadow: 0 6px 18px rgba(255,59,48,.35);\r\n flex-shrink: 0;\r\n}\r\n.brand-mark i{ font-size: 20px; color:#fff; }\r\n\r\n.brand-text{ display:flex; flex-direction:column; line-height:1; }\r\n.brand-text .name{ font-size:19px; font-weight:800; letter-spacing:.5px; }\r\n.brand-text .name span{ color: var(--c-red); }\r\n.brand-text .tagline{ font-size:10px; letter-spacing:3px; color:var(--c-white-60); margin-top:4px; text-transform:uppercase; }\r\n\r\n\/* Main navigation *\/\r\n.main-nav{ flex:1; display:flex; justify-content:center; }\r\n.main-nav > ul{ display:flex; align-items:center; gap:6px; }\r\n\r\n.main-nav > ul > li{ position:relative; }\r\n\r\n.main-nav a.nav-link{\r\n display:flex; align-items:center; gap:6px;\r\n padding: 10px 16px;\r\n font-size: 14.5px;\r\n font-weight: 500;\r\n color: var(--c-white-60);\r\n border-radius: var(--radius);\r\n transition: color var(--ease);\r\n position:relative;\r\n}\r\n\r\n.main-nav a.nav-link::after{\r\n content:'';\r\n position:absolute;\r\n left:16px; right:16px; bottom:6px;\r\n height:2px;\r\n background: var(--c-red);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform var(--ease);\r\n border-radius: 2px;\r\n}\r\n\r\n.main-nav a.nav-link:hover,\r\n.main-nav a.nav-link:focus-visible,\r\n.main-nav li.active > a.nav-link{\r\n color: var(--c-white);\r\n}\r\n.main-nav a.nav-link:hover::after,\r\n.main-nav a.nav-link:focus-visible::after,\r\n.main-nav li.active > a.nav-link::after{\r\n transform: scaleX(1);\r\n}\r\n\r\n.nav-link .caret{ font-size:10px; transition: transform var(--ease); }\r\n.has-dropdown:hover .caret,\r\n.has-dropdown:focus-within .caret{ transform: rotate(180deg); }\r\n\r\n\/* Dropdown *\/\r\n.dropdown{\r\n position:absolute;\r\n top: calc(100% + 10px);\r\n left: 50%;\r\n transform: translateX(-50%) translateY(8px);\r\n min-width: 240px;\r\n background: rgba(20,20,20,.92);\r\n backdrop-filter: blur(18px) saturate(140%);\r\n -webkit-backdrop-filter: blur(18px) saturate(140%);\r\n border: 1px solid var(--c-white-10);\r\n border-radius: var(--radius);\r\n padding: 10px;\r\n opacity: 0;\r\n visibility: hidden;\r\n pointer-events: none;\r\n transition: opacity var(--ease), transform var(--ease), visibility var(--ease);\r\n box-shadow: 0 20px 45px rgba(0,0,0,.5);\r\n}\r\n\r\n.has-dropdown:hover .dropdown,\r\n.has-dropdown:focus-within .dropdown{\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: auto;\r\n transform: translateX(-50%) translateY(0);\r\n}\r\n\r\n.dropdown li a{\r\n display:flex; align-items:center; gap:10px;\r\n padding: 10px 14px;\r\n font-size: 13.5px;\r\n font-weight: 400;\r\n color: var(--c-white-60);\r\n border-radius: 8px;\r\n transition: all var(--ease);\r\n}\r\n.dropdown li a i{ color: var(--c-red); width:16px; text-align:center; font-size:13px; }\r\n.dropdown li a:hover{\r\n background: var(--c-white-10);\r\n color: #fff;\r\n padding-left: 18px;\r\n}\r\n\r\n\/* Right side actions *\/\r\n.header-actions{\r\n display:flex; align-items:center; gap:6px;\r\n flex-shrink:0;\r\n}\r\n\r\n.icon-btn{\r\n position:relative;\r\n width: 42px; height: 42px;\r\n display:flex; align-items:center; justify-content:center;\r\n border-radius: 50%;\r\n color: var(--c-white);\r\n background: transparent;\r\n border: 1px solid transparent;\r\n font-size: 16px;\r\n transition: all var(--ease);\r\n}\r\n.icon-btn:hover, .icon-btn:focus-visible{\r\n background: var(--c-white-10);\r\n border-color: var(--c-white-10);\r\n transform: translateY(-2px);\r\n}\r\n\r\n.cart-badge{\r\n position:absolute;\r\n top: 2px; right: 2px;\r\n min-width: 16px; height: 16px;\r\n padding: 0 3px;\r\n background: var(--c-red);\r\n color:#fff;\r\n border-radius: 50%;\r\n font-size: 10px;\r\n font-weight: 700;\r\n display:flex; align-items:center; justify-content:center;\r\n box-shadow: 0 0 0 2px var(--c-black);\r\n}\r\n\r\n\/* CTA Button *\/\r\n.btn-cta{\r\n display:flex; align-items:center; gap:8px;\r\n margin-left: 8px;\r\n padding: 12px 26px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n letter-spacing: .3px;\r\n color: #fff;\r\n border: none;\r\n border-radius: var(--radius);\r\n background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%);\r\n box-shadow: 0 8px 20px rgba(255,59,48,.35);\r\n transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);\r\n white-space: nowrap;\r\n}\r\n.btn-cta:hover, .btn-cta:focus-visible{\r\n transform: translateY(-3px);\r\n box-shadow: 0 14px 30px rgba(255,59,48,.5);\r\n filter: brightness(1.08);\r\n}\r\n.btn-cta:active{ transform: translateY(-1px); }\r\n\r\n\/* Hamburger (hidden on desktop) *\/\r\n.hamburger{\r\n display:none;\r\n width: 44px; height: 44px;\r\n border: 1px solid var(--c-white-10);\r\n border-radius: 10px;\r\n background: var(--c-white-10);\r\n align-items:center; justify-content:center;\r\n flex-direction:column;\r\n gap: 5px;\r\n}\r\n.hamburger span{\r\n width: 20px; height: 2px;\r\n background: #fff;\r\n border-radius: 2px;\r\n transition: all var(--ease);\r\n}\r\n.hamburger.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }\r\n.hamburger.is-active span:nth-child(2){ opacity: 0; }\r\n.hamburger.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }\r\n\r\n\/* ==========================================================================\r\n SEARCH POPUP\r\n ========================================================================== *\/\r\n.search-overlay{\r\n position: fixed; inset: 0;\r\n background: rgba(5,5,5,.9);\r\n backdrop-filter: blur(10px);\r\n display:flex; align-items:flex-start; justify-content:center;\r\n padding-top: 14vh;\r\n opacity: 0; visibility: hidden;\r\n transition: opacity var(--ease), visibility var(--ease);\r\n z-index: 1300;\r\n}\r\n.search-overlay.is-open{ opacity:1; visibility:visible; }\r\n\r\n.search-box{\r\n width: min(640px, 90vw);\r\n transform: translateY(-16px);\r\n transition: transform var(--ease);\r\n}\r\n.search-overlay.is-open .search-box{ transform: translateY(0); }\r\n\r\n.search-box form{\r\n display:flex; align-items:center; gap:14px;\r\n background: var(--c-charcoal);\r\n border: 1px solid var(--c-white-10);\r\n border-radius: var(--radius);\r\n padding: 10px 10px 10px 22px;\r\n box-shadow: 0 30px 60px rgba(0,0,0,.5);\r\n}\r\n.search-box i.fa-magnifying-glass{ color: var(--c-red); font-size: 18px; }\r\n.search-box input{\r\n flex:1;\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n color:#fff;\r\n font-size: 17px;\r\n font-family: inherit;\r\n padding: 10px 0;\r\n}\r\n.search-box input::placeholder{ color: var(--c-white-60); }\r\n.search-box .search-submit{\r\n background: var(--c-red);\r\n color:#fff; border:none;\r\n width: 44px; height:44px;\r\n border-radius: 8px;\r\n display:flex; align-items:center; justify-content:center;\r\n transition: background var(--ease);\r\n}\r\n.search-box .search-submit:hover{ background: var(--c-red-dark); }\r\n.search-close{\r\n position:absolute; top: 8vh; right: 5vw;\r\n width: 46px; height: 46px;\r\n border-radius:50%;\r\n border: 1px solid var(--c-white-10);\r\n color:#fff; background: transparent;\r\n font-size: 18px;\r\n transition: all var(--ease);\r\n}\r\n.search-close:hover{ background: var(--c-red); border-color: var(--c-red); transform: rotate(90deg); }\r\n\r\n\/* ==========================================================================\r\n MOBILE MENU (full-screen slide)\r\n ========================================================================== *\/\r\n.mobile-menu{\r\n position: fixed;\r\n top: 0; right: 0;\r\n width: min(400px, 100%);\r\n height: 100vh;\r\n background: rgba(12,12,12,.98);\r\n backdrop-filter: blur(18px);\r\n border-left: 1px solid var(--c-white-10);\r\n transform: translateX(100%);\r\n transition: transform .45s cubic-bezier(.25,.8,.25,1);\r\n z-index: 1250;\r\n overflow-y: auto;\r\n padding: 28px 26px 60px;\r\n}\r\n.mobile-menu.is-open{ transform: translateX(0); }\r\n\r\n.mobile-menu-head{\r\n display:flex; align-items:center; justify-content:space-between;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.mobile-close{\r\n width: 42px; height: 42px;\r\n border-radius: 50%;\r\n border: 1px solid var(--c-white-10);\r\n background: transparent;\r\n color:#fff;\r\n font-size: 18px;\r\n transition: all var(--ease);\r\n}\r\n.mobile-close:hover{ background: var(--c-red); border-color: var(--c-red); transform: rotate(90deg); }\r\n\r\n.mobile-nav > li{ border-bottom: 1px solid var(--c-white-10); }\r\n.mobile-nav a.nav-link{\r\n display:flex; align-items:center; justify-content:space-between;\r\n padding: 16px 4px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: var(--c-white);\r\n}\r\n.mobile-nav a.nav-link i{ color: var(--c-white-60); }\r\n.mobile-nav li.active > a.nav-link{ color: var(--c-red); }\r\n\r\n.mobile-dropdown{\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height var(--ease);\r\n}\r\n.mobile-has-dropdown.is-open .mobile-dropdown{ max-height: 400px; }\r\n.mobile-has-dropdown.is-open > a.nav-link .caret{ transform: rotate(180deg); }\r\n.mobile-dropdown li a{\r\n display:flex; align-items:center; gap:10px;\r\n padding: 12px 4px 12px 14px;\r\n font-size: 14px;\r\n color: var(--c-white-60);\r\n}\r\n.mobile-dropdown li a i{ color: var(--c-red); width:16px; }\r\n.mobile-dropdown li a:hover{ color:#fff; }\r\n\r\n.mobile-menu-foot{ margin-top: 30px; }\r\n.mobile-menu-foot .btn-cta{ width:100%; justify-content:center; margin-left:0; margin-bottom:20px; }\r\n\r\n.mobile-contact{ color: var(--c-white-60); font-size: 13.5px; display:flex; flex-direction:column; gap:10px; margin-bottom: 20px; }\r\n.mobile-contact li{ display:flex; align-items:center; gap:10px; }\r\n.mobile-contact i{ color: var(--c-red); width:16px; }\r\n\r\n.mobile-social{ display:flex; gap:10px; }\r\n.mobile-social a{\r\n width: 38px; height: 38px;\r\n border-radius: 50%;\r\n border: 1px solid var(--c-white-10);\r\n display:flex; align-items:center; justify-content:center;\r\n color: var(--c-white-60);\r\n transition: all var(--ease);\r\n}\r\n.mobile-social a:hover{ background: var(--c-red); border-color: var(--c-red); color:#fff; }\r\n\r\n.menu-backdrop{\r\n position: fixed; inset:0;\r\n background: rgba(0,0,0,.6);\r\n opacity: 0; visibility: hidden;\r\n transition: opacity var(--ease), visibility var(--ease);\r\n z-index: 1240;\r\n}\r\n.menu-backdrop.is-open{ opacity:1; visibility:visible; }\r\n\r\n\/* ==========================================================================\r\n RESPONSIVE BREAKPOINTS\r\n ========================================================================== *\/\r\n@media (max-width: 1180px){\r\n .main-nav a.nav-link{ padding: 10px 12px; font-size: 14px; }\r\n .topbar-info li:nth-child(3){ display:none; } \/* hide email on smaller desktops *\/\r\n}\r\n\r\n@media (max-width: 992px){\r\n .main-nav{ display:none; }\r\n .hamburger{ display:flex; }\r\n .header-actions .icon-btn.login-icon{ display:none; }\r\n .btn-cta span{ display:none; }\r\n .btn-cta{ padding: 12px 16px; }\r\n .topbar-info li:nth-child(2),\r\n .topbar-info li:nth-child(3){ display:none; }\r\n}\r\n\r\n@media (max-width: 768px){\r\n .main-header, .topbar-inner{ padding: 0 20px; }\r\n .brand-text .tagline{ display:none; }\r\n .topbar-social a:nth-child(4),\r\n .topbar-social a:nth-child(5){ display:none; }\r\n .btn-cta{ display:none; } \/* CTA lives in mobile menu footer *\/\r\n}\r\n\r\n@media (max-width: 480px){\r\n .brand-mark{ width:40px; height:40px; }\r\n .brand-text .name{ font-size:16px; }\r\n .topbar-info li span.label{ display:none; }\r\n .search-close{ top: 6vh; right: 6vw; }\r\n}\r\n\r\n\/* Reduced motion *\/\r\n@media (prefers-reduced-motion: reduce){\r\n *{ transition-duration: .001ms !important; animation-duration: .001ms !important; }\r\n html{ scroll-behavior:auto; }\r\n}\r\n\r\n\/* Focus visibility for accessibility *\/\r\na:focus-visible, button:focus-visible, input:focus-visible{\r\n outline: 2px solid var(--c-red);\r\n outline-offset: 2px;\r\n}\r\n\r\n\/* Demo page filler (not part of the header component) *\/\r\n.demo-hero{\r\n min-height: 100vh;\r\n display:flex; flex-direction:column; align-items:center; justify-content:center;\r\n text-align:center; padding: 40px 20px;\r\n background:\r\n radial-gradient(ellipse at 50% 0%, rgba(255,59,48,.15), transparent 60%),\r\n linear-gradient(180deg, #0b0b0b 0%, #111111 100%);\r\n}\r\n.demo-hero h1{ font-size: clamp(32px,6vw,64px); font-weight:800; margin:0 0 16px; }\r\n.demo-hero h1 span{ color: var(--c-red); }\r\n.demo-hero p{ color: var(--c-white-60); max-width:560px; margin:0 auto; font-size:16px; line-height:1.7; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<a href=\"#main-content\" class=\"skip-link\">Skip to main content<\/a>\r\n\r\n<!-- ==========================================================================\r\n HEADER\r\n ========================================================================== -->\r\n<header class=\"site-header\" id=\"siteHeader\">\r\n\r\n <!-- TOP BAR -->\r\n <div class=\"topbar\">\r\n <div class=\"topbar-inner\">\r\n <ul class=\"topbar-info\">\r\n <li><i class=\"fa-regular fa-clock\" aria-hidden=\"true\"><\/i><span class=\"label\">Mon\u2013Sat:<\/span> 6:00 AM \u2013 10:00 PM<\/li>\r\n <li><a href=\"tel:+15551234567\"><i class=\"fa-solid fa-phone\" aria-hidden=\"true\"><\/i> +1 (555) 123-4567<\/a><\/li>\r\n <li><a href=\"mailto:info@apexathletic.com\"><i class=\"fa-regular fa-envelope\" aria-hidden=\"true\"><\/i> info@apexathletic.com<\/a><\/li>\r\n <\/ul>\r\n\r\n <ul class=\"topbar-social\" aria-label=\"Social media links\">\r\n <li><a href=\"#\" aria-label=\"Facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a><\/li>\r\n <li><a href=\"#\" aria-label=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a><\/li>\r\n <li><a href=\"#\" aria-label=\"YouTube\"><i class=\"fa-brands fa-youtube\"><\/i><\/a><\/li>\r\n <li><a href=\"#\" aria-label=\"TikTok\"><i class=\"fa-brands fa-tiktok\"><\/i><\/a><\/li>\r\n <li><a href=\"#\" aria-label=\"WhatsApp\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MAIN HEADER -->\r\n <div class=\"main-header\">\r\n\r\n <!-- LOGO -->\r\n <a href=\"\/\" class=\"brand\" aria-label=\"Apex Athletic \u2014 Home\">\r\n <span class=\"brand-mark\"><i class=\"fa-solid fa-dumbbell\" aria-hidden=\"true\"><\/i><\/span>\r\n <span class=\"brand-text\">\r\n <span class=\"name\">APEX <span>ATHLETIC<\/span><\/span>\r\n <span class=\"tagline\">Premium Fitness Club<\/span>\r\n <\/span>\r\n <\/a>\r\n\r\n <!-- MAIN NAV -->\r\n <nav class=\"main-nav\" aria-label=\"Primary navigation\">\r\n <ul id=\"primaryNav\">\r\n <li class=\"active\"><a href=\"#home\" class=\"nav-link\">Home<\/a><\/li>\r\n <li><a href=\"#about\" class=\"nav-link\">About<\/a><\/li>\r\n\r\n <li class=\"has-dropdown\">\r\n <a href=\"#programs\" class=\"nav-link\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n Programs <i class=\"fa-solid fa-chevron-down caret\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <ul class=\"dropdown\">\r\n <li><a href=\"#weight-loss\"><i class=\"fa-solid fa-fire\"><\/i> Weight Loss<\/a><\/li>\r\n <li><a href=\"#body-building\"><i class=\"fa-solid fa-dumbbell\"><\/i> Body Building<\/a><\/li>\r\n <li><a href=\"#cardio\"><i class=\"fa-solid fa-heart-pulse\"><\/i> Cardio Training<\/a><\/li>\r\n <li><a href=\"#crossfit\"><i class=\"fa-solid fa-bolt\"><\/i> CrossFit<\/a><\/li>\r\n <li><a href=\"#personal-training\"><i class=\"fa-solid fa-user-tie\"><\/i> Personal Training<\/a><\/li>\r\n <li><a href=\"#yoga\"><i class=\"fa-solid fa-spa\"><\/i> Yoga<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n\r\n <li><a href=\"#trainers\" class=\"nav-link\">Trainers<\/a><\/li>\r\n <li><a href=\"#membership\" class=\"nav-link\">Membership<\/a><\/li>\r\n <li><a href=\"#pricing\" class=\"nav-link\">Pricing<\/a><\/li>\r\n <li><a href=\"#gallery\" class=\"nav-link\">Gallery<\/a><\/li>\r\n <li><a href=\"#blog\" class=\"nav-link\">Blog<\/a><\/li>\r\n <li><a href=\"#contact\" class=\"nav-link\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <!-- RIGHT ACTIONS -->\r\n <div class=\"header-actions\">\r\n <button class=\"icon-btn search-icon\" id=\"searchToggle\" aria-label=\"Open search\">\r\n <i class=\"fa-solid fa-magnifying-glass\"><\/i>\r\n <\/button>\r\n <a href=\"#login\" class=\"icon-btn login-icon\" aria-label=\"Login\">\r\n <i class=\"fa-regular fa-user\"><\/i>\r\n <\/a>\r\n <a href=\"#cart\" class=\"icon-btn cart-icon\" aria-label=\"Shopping cart, 3 items\">\r\n <i class=\"fa-solid fa-cart-shopping\"><\/i>\r\n <span class=\"cart-badge\">3<\/span>\r\n <\/a>\r\n <a href=\"#join\" class=\"btn-cta\">\r\n <i class=\"fa-solid fa-bolt\" aria-hidden=\"true\"><\/i> <span>Join Now<\/span>\r\n <\/a>\r\n\r\n <button class=\"hamburger\" id=\"hamburgerBtn\" aria-label=\"Open menu\" aria-expanded=\"false\" aria-controls=\"mobileMenu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/header>\r\n\r\n<!-- SEARCH POPUP -->\r\n<div class=\"search-overlay\" id=\"searchOverlay\">\r\n <button class=\"search-close\" id=\"searchClose\" aria-label=\"Close search\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\r\n <div class=\"search-box\">\r\n <form role=\"search\" action=\"#\" method=\"get\" onsubmit=\"return false;\">\r\n <i class=\"fa-solid fa-magnifying-glass\"><\/i>\r\n <input type=\"search\" id=\"searchInput\" placeholder=\"Search programs, trainers, classes\u2026\" aria-label=\"Search the site\">\r\n <button type=\"submit\" class=\"search-submit\" aria-label=\"Submit search\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/button>\r\n <\/form>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- MOBILE MENU -->\r\n<div class=\"menu-backdrop\" id=\"menuBackdrop\"><\/div>\r\n<aside class=\"mobile-menu\" id=\"mobileMenu\" aria-label=\"Mobile navigation\">\r\n <div class=\"mobile-menu-head\">\r\n <a href=\"\/\" class=\"brand\" aria-label=\"Apex Athletic \u2014 Home\">\r\n <span class=\"brand-mark\"><i class=\"fa-solid fa-dumbbell\"><\/i><\/span>\r\n <span class=\"brand-text\"><span class=\"name\">APEX <span>ATHLETIC<\/span><\/span><\/span>\r\n <\/a>\r\n <button class=\"mobile-close\" id=\"mobileCloseBtn\" aria-label=\"Close menu\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\r\n <\/div>\r\n\r\n <ul class=\"mobile-nav\">\r\n <li class=\"active\"><a href=\"#home\" class=\"nav-link\">Home<\/a><\/li>\r\n <li><a href=\"#about\" class=\"nav-link\">About<\/a><\/li>\r\n\r\n <li class=\"mobile-has-dropdown\">\r\n <a href=\"#programs\" class=\"nav-link\" id=\"mobileDropdownToggle\">\r\n Programs <i class=\"fa-solid fa-chevron-down caret\"><\/i>\r\n <\/a>\r\n <ul class=\"mobile-dropdown\">\r\n <li><a href=\"#weight-loss\"><i class=\"fa-solid fa-fire\"><\/i> Weight Loss<\/a><\/li>\r\n <li><a href=\"#body-building\"><i class=\"fa-solid fa-dumbbell\"><\/i> Body Building<\/a><\/li>\r\n <li><a href=\"#cardio\"><i class=\"fa-solid fa-heart-pulse\"><\/i> Cardio Training<\/a><\/li>\r\n <li><a href=\"#crossfit\"><i class=\"fa-solid fa-bolt\"><\/i> CrossFit<\/a><\/li>\r\n <li><a href=\"#personal-training\"><i class=\"fa-solid fa-user-tie\"><\/i> Personal Training<\/a><\/li>\r\n <li><a href=\"#yoga\"><i class=\"fa-solid fa-spa\"><\/i> Yoga<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n\r\n <li><a href=\"#trainers\" class=\"nav-link\">Trainers<\/a><\/li>\r\n <li><a href=\"#membership\" class=\"nav-link\">Membership<\/a><\/li>\r\n <li><a href=\"#pricing\" class=\"nav-link\">Pricing<\/a><\/li>\r\n <li><a href=\"#gallery\" class=\"nav-link\">Gallery<\/a><\/li>\r\n <li><a href=\"#blog\" class=\"nav-link\">Blog<\/a><\/li>\r\n <li><a href=\"#contact\" class=\"nav-link\">Contact<\/a><\/li>\r\n <\/ul>\r\n\r\n <div class=\"mobile-menu-foot\">\r\n <a href=\"#join\" class=\"btn-cta\"><i class=\"fa-solid fa-bolt\"><\/i> <span>Join Now<\/span><\/a>\r\n\r\n <ul class=\"mobile-contact\">\r\n <li><i class=\"fa-regular fa-clock\"><\/i> Mon\u2013Sat: 6:00 AM \u2013 10:00 PM<\/li>\r\n <li><i class=\"fa-solid fa-phone\"><\/i> +1 (555) 123-4567<\/li>\r\n <li><i class=\"fa-regular fa-envelope\"><\/i> info@apexathletic.com<\/li>\r\n <\/ul>\r\n\r\n <div class=\"mobile-social\" aria-label=\"Social media links\">\r\n <a href=\"#\" aria-label=\"Facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"YouTube\"><i class=\"fa-brands fa-youtube\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"TikTok\"><i class=\"fa-brands fa-tiktok\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"WhatsApp\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n<\/aside>\r\n\r\n<!-- Demo content so scroll\/sticky behavior is visible -->\r\n<main id=\"main-content\">\r\n <section class=\"demo-hero\" id=\"home\">\r\n <h1>Train Like <span>Apex.<\/span><\/h1>\r\n <p>Scroll down to see the header turn solid with a blurred glass background. Resize the window to test the tablet and mobile layouts, or tap the hamburger menu on smaller screens.<\/p>\r\n <\/section>\r\n <section class=\"demo-hero\" style=\"min-height:60vh;\">\r\n <p style=\"color:rgba(255,255,255,.4);\">\u2014 more page content \u2014<\/p>\r\n <\/section>\r\n<\/main>\r\n\r\n<script>\r\n\/* ==========================================================================\r\n APEX ATHLETIC HEADER \u2014 VANILLA JS\r\n No jQuery, no frameworks.\r\n ========================================================================== *\/\r\n(function(){\r\n 'use strict';\r\n\r\n var header = document.getElementById('siteHeader');\r\n var hamburgerBtn = document.getElementById('hamburgerBtn');\r\n var mobileMenu = document.getElementById('mobileMenu');\r\n var menuBackdrop = document.getElementById('menuBackdrop');\r\n var mobileCloseBtn = document.getElementById('mobileCloseBtn');\r\n var mobileDropdownToggle = document.getElementById('mobileDropdownToggle');\r\n var searchToggle = document.getElementById('searchToggle');\r\n var searchOverlay = document.getElementById('searchOverlay');\r\n var searchClose = document.getElementById('searchClose');\r\n var searchInput = document.getElementById('searchInput');\r\n\r\n \/* ---- Sticky header: solid + blur on scroll -------------------------- *\/\r\n var SCROLL_THRESHOLD = 40;\r\n function onScroll(){\r\n if (window.scrollY > SCROLL_THRESHOLD) {\r\n header.classList.add('is-scrolled');\r\n } else {\r\n header.classList.remove('is-scrolled');\r\n }\r\n }\r\n window.addEventListener('scroll', onScroll, { passive: true });\r\n onScroll();\r\n\r\n \/* ---- Mobile menu open\/close ------------------------------------------ *\/\r\n function openMobileMenu(){\r\n mobileMenu.classList.add('is-open');\r\n menuBackdrop.classList.add('is-open');\r\n hamburgerBtn.classList.add('is-active');\r\n hamburgerBtn.setAttribute('aria-expanded', 'true');\r\n document.body.style.overflow = 'hidden';\r\n mobileCloseBtn.focus();\r\n }\r\n function closeMobileMenu(){\r\n mobileMenu.classList.remove('is-open');\r\n menuBackdrop.classList.remove('is-open');\r\n hamburgerBtn.classList.remove('is-active');\r\n hamburgerBtn.setAttribute('aria-expanded', 'false');\r\n document.body.style.overflow = '';\r\n hamburgerBtn.focus();\r\n }\r\n hamburgerBtn.addEventListener('click', function(){\r\n var isOpen = mobileMenu.classList.contains('is-open');\r\n isOpen ? closeMobileMenu() : openMobileMenu();\r\n });\r\n mobileCloseBtn.addEventListener('click', closeMobileMenu);\r\n menuBackdrop.addEventListener('click', closeMobileMenu);\r\n\r\n \/* Close mobile menu with Escape key *\/\r\n document.addEventListener('keydown', function(e){\r\n if (e.key === 'Escape') {\r\n if (mobileMenu.classList.contains('is-open')) closeMobileMenu();\r\n if (searchOverlay.classList.contains('is-open')) closeSearch();\r\n }\r\n });\r\n\r\n \/* ---- Mobile \"Programs\" dropdown accordion ----------------------------- *\/\r\n mobileDropdownToggle.addEventListener('click', function(e){\r\n e.preventDefault();\r\n this.parentElement.classList.toggle('is-open');\r\n });\r\n\r\n \/* ---- Search popup ------------------------------------------------------ *\/\r\n function openSearch(){\r\n searchOverlay.classList.add('is-open');\r\n document.body.style.overflow = 'hidden';\r\n setTimeout(function(){ searchInput.focus(); }, 250);\r\n }\r\n function closeSearch(){\r\n searchOverlay.classList.remove('is-open');\r\n document.body.style.overflow = '';\r\n searchToggle.focus();\r\n }\r\n searchToggle.addEventListener('click', openSearch);\r\n searchClose.addEventListener('click', closeSearch);\r\n searchOverlay.addEventListener('click', function(e){\r\n if (e.target === searchOverlay) closeSearch();\r\n });\r\n\r\n \/* ---- Active link highlight on click (mobile + desktop) ---------------- *\/\r\n var allNavLinks = document.querySelectorAll('.main-nav .nav-link, .mobile-nav .nav-link');\r\n allNavLinks.forEach(function(link){\r\n link.addEventListener('click', function(){\r\n if (this.getAttribute('href') === '#programs') return; \/\/ dropdown parent, skip\r\n document.querySelectorAll('.main-nav li, .mobile-nav li').forEach(function(li){\r\n li.classList.remove('active');\r\n });\r\n var li = this.closest('li');\r\n if (li) li.classList.add('active');\r\n \/\/ Close mobile menu on navigation\r\n if (mobileMenu.classList.contains('is-open')) closeMobileMenu();\r\n });\r\n });\r\n\r\n \/* ---- Collapse mobile menu automatically on resize to desktop ---------- *\/\r\n var resizeTimer;\r\n window.addEventListener('resize', function(){\r\n clearTimeout(resizeTimer);\r\n resizeTimer = setTimeout(function(){\r\n if (window.innerWidth > 992 && mobileMenu.classList.contains('is-open')) {\r\n closeMobileMenu();\r\n }\r\n }, 150);\r\n });\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0998f07 e-con e-atomic-element e-flexbox-base e-8723108 \" data-id=\"0998f07\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0998f07\">\n \t\t<div class=\"elementor-element elementor-element-d9c6a0b elementor-widget elementor-widget-html\" data-id=\"d9c6a0b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Premium Gym & Fitness Hero Section<\/title>\r\n<meta name=\"description\" content=\"Transform your body and your life with certified coaches, world-class equipment and personalized fitness programs.\">\r\n\r\n<!-- Google Font: Poppins -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* ==========================================================================\r\n 1. ROOT VARIABLES \u2014 edit these to re-theme the whole section\r\n ========================================================================== *\/\r\n:root{\r\n --color-primary:#FF3B30;\r\n --color-primary-dark:#E53935;\r\n --color-black:#111111;\r\n --color-dark-gray:#1C1C1C;\r\n --color-white:#FFFFFF;\r\n --color-accent:#FFD54F;\r\n\r\n --overlay:rgba(0,0,0,0.55);\r\n --radius-lg:20px;\r\n --radius-pill:50px;\r\n\r\n --font-main:'Poppins', sans-serif;\r\n\r\n --transition-fast:0.3s cubic-bezier(.4,0,.2,1);\r\n --transition-slow:0.8s cubic-bezier(.4,0,.2,1);\r\n}\r\n\r\n\/* ==========================================================================\r\n 2. RESET \/ BASE\r\n ========================================================================== *\/\r\n*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }\r\n\r\n.gym-hero-wrapper{\r\n font-family:var(--font-main);\r\n color:var(--color-white);\r\n background:var(--color-black);\r\n overflow:hidden;\r\n -webkit-font-smoothing:antialiased;\r\n}\r\n\r\n.gym-hero-wrapper img{ max-width:100%; display:block; }\r\n.gym-hero-wrapper a{ text-decoration:none; color:inherit; }\r\n.gym-hero-wrapper button{ font-family:var(--font-main); cursor:pointer; border:none; background:none; }\r\n.gym-hero-wrapper ul{ list-style:none; }\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n .gym-hero-wrapper *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }\r\n}\r\n\r\n\/* ==========================================================================\r\n 3. HERO SLIDER\r\n ========================================================================== *\/\r\n.hero-slider{\r\n position:relative;\r\n width:100%;\r\n height:100vh;\r\n min-height:640px;\r\n overflow:hidden;\r\n}\r\n\r\n.hero-slide{\r\n position:absolute;\r\n inset:0;\r\n opacity:0;\r\n visibility:hidden;\r\n transition:opacity 1.1s ease, visibility 1.1s ease;\r\n z-index:1;\r\n}\r\n\r\n.hero-slide.is-active{\r\n opacity:1;\r\n visibility:visible;\r\n z-index:2;\r\n}\r\n\r\n.hero-slide__bg{\r\n position:absolute;\r\n inset:0;\r\n background-size:cover;\r\n background-position:center;\r\n transform:scale(1);\r\n animation:kenburns 12s ease-in-out infinite alternate;\r\n will-change:transform;\r\n}\r\n\r\n@keyframes kenburns{\r\n 0%{ transform:scale(1) translate(0,0); }\r\n 100%{ transform:scale(1.12) translate(-1.5%, -1%); }\r\n}\r\n\r\n.hero-slide__overlay{\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(180deg, rgba(0,0,0,0.35) 0%, var(--overlay) 55%, rgba(0,0,0,0.85) 100%),\r\n linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.55) 100%);\r\n}\r\n\r\n\/* Slide inner content grid *\/\r\n.hero-slide__inner{\r\n position:relative;\r\n z-index:3;\r\n height:100%;\r\n max-width:1320px;\r\n margin:0 auto;\r\n padding:0 40px;\r\n display:grid;\r\n grid-template-columns:1.1fr 0.9fr;\r\n align-items:center;\r\n gap:40px;\r\n}\r\n\r\n\/* ---- Text column ---- *\/\r\n.hero-slide__text{ max-width:640px; padding-top:40px; }\r\n\r\n.hero-slide__tag{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:8px 20px;\r\n border:1px solid rgba(255,255,255,0.35);\r\n border-radius:var(--radius-pill);\r\n background:rgba(255,255,255,0.08);\r\n backdrop-filter:blur(6px);\r\n font-size:14px;\r\n font-weight:600;\r\n letter-spacing:0.5px;\r\n text-transform:uppercase;\r\n opacity:0;\r\n transform:translateY(30px);\r\n}\r\n\r\n.hero-slide__title{\r\n font-size:72px;\r\n font-weight:800;\r\n line-height:1.08;\r\n letter-spacing:-1px;\r\n margin:24px 0 22px;\r\n opacity:0;\r\n transform:translateX(-60px);\r\n}\r\n\r\n.hero-slide__title span{\r\n display:block;\r\n background:linear-gradient(90deg, var(--color-white) 0%, var(--color-accent) 100%);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n}\r\n\r\n.hero-slide__desc{\r\n font-size:20px;\r\n line-height:1.6;\r\n font-weight:300;\r\n color:rgba(255,255,255,0.85);\r\n margin-bottom:38px;\r\n max-width:540px;\r\n opacity:0;\r\n transform:scale(0.92);\r\n}\r\n\r\n.hero-slide__buttons{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:18px;\r\n opacity:0;\r\n transform:translateY(30px);\r\n}\r\n\r\n\/* Animate content in when slide is active *\/\r\n.hero-slide.is-active .hero-slide__tag{ animation:fadeUp .8s ease forwards .3s; }\r\n.hero-slide.is-active .hero-slide__title{ animation:slideLeft .9s ease forwards .5s; }\r\n.hero-slide.is-active .hero-slide__desc{ animation:zoomIn .8s ease forwards .8s; }\r\n.hero-slide.is-active .hero-slide__buttons{ animation:fadeUp .8s ease forwards 1.05s; }\r\n\r\n@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }\r\n@keyframes slideLeft{ to{ opacity:1; transform:translateX(0); } }\r\n@keyframes zoomIn{ to{ opacity:1; transform:scale(1); } }\r\n\r\n\/* ---- Buttons ---- *\/\r\n.btn{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n padding:17px 38px;\r\n border-radius:var(--radius-pill);\r\n font-size:16px;\r\n font-weight:600;\r\n letter-spacing:0.3px;\r\n transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);\r\n white-space:nowrap;\r\n}\r\n\r\n.btn--primary{\r\n background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);\r\n color:var(--color-white);\r\n box-shadow:0 8px 24px rgba(255,59,48,0.35);\r\n}\r\n.btn--primary:hover{\r\n transform:translateY(-4px) scale(1.04);\r\n box-shadow:0 14px 34px rgba(255,59,48,0.55);\r\n}\r\n\r\n.btn--secondary{\r\n background:transparent;\r\n color:var(--color-white);\r\n border:2px solid rgba(255,255,255,0.7);\r\n}\r\n.btn--secondary:hover{\r\n transform:translateY(-4px) scale(1.04);\r\n background:rgba(255,255,255,0.12);\r\n border-color:var(--color-white);\r\n box-shadow:0 10px 30px rgba(255,255,255,0.15);\r\n}\r\n\r\n\/* ---- Right visual column ---- *\/\r\n.hero-slide__visual{\r\n position:relative;\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n height:100%;\r\n}\r\n\r\n.hero-slide__visual-img{\r\n width:80%;\r\n max-width:420px;\r\n border-radius:var(--radius-lg);\r\n object-fit:cover;\r\n aspect-ratio:3\/4;\r\n box-shadow:0 30px 60px rgba(0,0,0,0.5);\r\n animation:floatY 5s ease-in-out infinite;\r\n border:1px solid rgba(255,255,255,0.15);\r\n}\r\n\r\n@keyframes floatY{\r\n 0%,100%{ transform:translateY(0); }\r\n 50%{ transform:translateY(-22px); }\r\n}\r\n\r\n.glass-card{\r\n position:absolute;\r\n bottom:8%;\r\n left:0;\r\n background:rgba(255,255,255,0.09);\r\n backdrop-filter:blur(16px);\r\n -webkit-backdrop-filter:blur(16px);\r\n border:1px solid rgba(255,255,255,0.25);\r\n border-radius:var(--radius-lg);\r\n padding:20px 24px;\r\n box-shadow:0 20px 40px rgba(0,0,0,0.35);\r\n min-width:230px;\r\n animation:floatY 5s ease-in-out infinite;\r\n animation-delay:0.3s;\r\n}\r\n\r\n.glass-card__rating{\r\n color:var(--color-accent);\r\n font-size:15px;\r\n letter-spacing:2px;\r\n margin-bottom:6px;\r\n}\r\n.glass-card__rating b{ color:var(--color-white); margin-left:6px; font-size:14px; }\r\n\r\n.glass-card ul{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }\r\n.glass-card li{\r\n font-size:13px;\r\n font-weight:400;\r\n color:rgba(255,255,255,0.85);\r\n display:flex;\r\n align-items:center;\r\n gap:8px;\r\n}\r\n.glass-card li::before{\r\n content:\"\";\r\n width:6px; height:6px;\r\n border-radius:50%;\r\n background:var(--color-primary);\r\n flex-shrink:0;\r\n}\r\n\r\n\/* ==========================================================================\r\n 4. SLIDER CONTROLS \u2014 arrows \/ dots\r\n ========================================================================== *\/\r\n.slider-arrow{\r\n position:absolute;\r\n top:50%;\r\n transform:translateY(-50%);\r\n z-index:10;\r\n width:54px; height:54px;\r\n border-radius:50%;\r\n background:rgba(255,255,255,0.08);\r\n border:1px solid rgba(255,255,255,0.3);\r\n backdrop-filter:blur(8px);\r\n color:var(--color-white);\r\n display:flex; align-items:center; justify-content:center;\r\n transition:background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);\r\n}\r\n.slider-arrow:hover{\r\n background:var(--color-primary);\r\n border-color:var(--color-primary);\r\n transform:translateY(-50%) scale(1.08);\r\n}\r\n.slider-arrow svg{ width:20px; height:20px; }\r\n.slider-arrow--prev{ left:28px; }\r\n.slider-arrow--next{ right:28px; }\r\n\r\n.slider-dots{\r\n position:absolute;\r\n bottom:34px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n z-index:10;\r\n display:flex;\r\n gap:12px;\r\n}\r\n.slider-dot{\r\n width:12px; height:12px;\r\n border-radius:50%;\r\n background:rgba(255,255,255,0.35);\r\n transition:all var(--transition-fast);\r\n}\r\n.slider-dot.is-active{\r\n width:34px;\r\n border-radius:var(--radius-pill);\r\n background:linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);\r\n}\r\n\r\n\/* Progress bar under dots area (visual feedback for 5s autoplay) *\/\r\n.slider-progress{\r\n position:absolute;\r\n bottom:0; left:0;\r\n height:3px;\r\n width:0%;\r\n background:linear-gradient(90deg, var(--color-primary), var(--color-accent));\r\n z-index:10;\r\n}\r\n.slider-progress.is-running{ animation:progressGrow 5s linear forwards; }\r\n@keyframes progressGrow{ from{ width:0%; } to{ width:100%; } }\r\n\r\n\/* ==========================================================================\r\n 5. SCROLL INDICATOR\r\n ========================================================================== *\/\r\n.scroll-indicator{\r\n position:absolute;\r\n bottom:70px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n z-index:10;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n gap:10px;\r\n color:rgba(255,255,255,0.75);\r\n font-size:12px;\r\n letter-spacing:2px;\r\n text-transform:uppercase;\r\n}\r\n.scroll-indicator__mouse{\r\n width:26px; height:42px;\r\n border:2px solid rgba(255,255,255,0.6);\r\n border-radius:14px;\r\n position:relative;\r\n}\r\n.scroll-indicator__mouse::before{\r\n content:\"\";\r\n position:absolute;\r\n top:8px; left:50%;\r\n width:4px; height:8px;\r\n margin-left:-2px;\r\n background:var(--color-white);\r\n border-radius:2px;\r\n animation:scrollDot 1.8s infinite;\r\n}\r\n@keyframes scrollDot{\r\n 0%{ opacity:1; transform:translateY(0); }\r\n 70%{ opacity:0; transform:translateY(12px); }\r\n 100%{ opacity:0; transform:translateY(0); }\r\n}\r\n\r\n\/* ==========================================================================\r\n 6. BOTTOM FEATURE CARDS\r\n ========================================================================== *\/\r\n.hero-features{\r\n position:relative;\r\n z-index:5;\r\n background:var(--color-dark-gray);\r\n padding:60px 40px 70px;\r\n}\r\n\r\n.hero-features__grid{\r\n max-width:1320px;\r\n margin:0 auto;\r\n display:grid;\r\n grid-template-columns:repeat(4, 1fr);\r\n gap:26px;\r\n}\r\n\r\n.feature-card{\r\n background:rgba(255,255,255,0.04);\r\n border:1px solid rgba(255,255,255,0.08);\r\n border-radius:var(--radius-lg);\r\n padding:32px 26px;\r\n transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);\r\n opacity:0;\r\n transform:translateY(40px);\r\n}\r\n.feature-card.is-visible{\r\n animation:fadeUp .7s ease forwards;\r\n}\r\n\r\n.feature-card:hover{\r\n transform:translateY(-10px);\r\n background:rgba(255,255,255,0.07);\r\n border-color:rgba(255,59,48,0.4);\r\n box-shadow:0 20px 40px rgba(0,0,0,0.4);\r\n}\r\n\r\n.feature-card__icon{\r\n width:56px; height:56px;\r\n border-radius:16px;\r\n background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);\r\n display:flex; align-items:center; justify-content:center;\r\n margin-bottom:20px;\r\n box-shadow:0 10px 24px rgba(255,59,48,0.35);\r\n}\r\n.feature-card__icon svg{ width:26px; height:26px; color:var(--color-white); }\r\n\r\n.feature-card__title{\r\n font-size:19px;\r\n font-weight:600;\r\n margin-bottom:8px;\r\n}\r\n.feature-card__desc{\r\n font-size:14.5px;\r\n font-weight:300;\r\n line-height:1.6;\r\n color:rgba(255,255,255,0.65);\r\n}\r\n\r\n\/* ==========================================================================\r\n 7. RESPONSIVE\r\n ========================================================================== *\/\r\n@media (max-width:1100px){\r\n .hero-slide__title{ font-size:58px; }\r\n .hero-slide__inner{ grid-template-columns:1fr; }\r\n .hero-slide__visual{ display:none; }\r\n .hero-slide__text{ padding-top:0; max-width:100%; }\r\n .hero-features__grid{ grid-template-columns:repeat(2, 1fr); }\r\n}\r\n\r\n@media (max-width:768px){\r\n .hero-slider{ min-height:560px; }\r\n .hero-slide__title{ font-size:52px; }\r\n .hero-slide__desc{ font-size:18px; }\r\n .hero-slide__inner{ padding:0 24px; }\r\n .slider-arrow{ width:44px; height:44px; }\r\n .slider-arrow--prev{ left:14px; }\r\n .slider-arrow--next{ right:14px; }\r\n .scroll-indicator{ display:none; }\r\n}\r\n\r\n@media (max-width:560px){\r\n .hero-slide__title{ font-size:36px; letter-spacing:-0.5px; }\r\n .hero-slide__desc{ font-size:16px; margin-bottom:28px; }\r\n .hero-slide__tag{ font-size:12px; padding:6px 16px; }\r\n .btn{ padding:14px 28px; font-size:14px; }\r\n .hero-slide__buttons{ gap:12px; }\r\n .hero-features{ padding:44px 20px 50px; }\r\n .hero-features__grid{ grid-template-columns:1fr; gap:18px; }\r\n .slider-arrow{ display:none; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ==========================================================================\r\n GYM & FITNESS HERO SECTION\r\n Paste this entire block (including <style> and <script>) into a WordPress\r\n Custom HTML block, or split the <style> into your theme stylesheet and\r\n the markup into the block \u2014 both work identically.\r\n ========================================================================== -->\r\n<div class=\"gym-hero-wrapper\">\r\n\r\n <section class=\"hero-slider\" id=\"heroSlider\" aria-roledescription=\"carousel\" aria-label=\"Gym promotional hero slider\">\r\n\r\n <!-- ================= SLIDE 1 ================= -->\r\n <div class=\"hero-slide is-active\" data-slide=\"0\">\r\n <div class=\"hero-slide__bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1583454110551-21f2fa2afe61?auto=format&fit=crop&w=1920&q=80');\" role=\"img\" aria-label=\"Muscular athlete lifting a heavy barbell in a luxury modern gym\"><\/div>\r\n <div class=\"hero-slide__overlay\"><\/div>\r\n <div class=\"hero-slide__inner\">\r\n <div class=\"hero-slide__text\">\r\n <span class=\"hero-slide__tag\">\ud83c\udfc6 Premium Fitness Club<\/span>\r\n <h1 class=\"hero-slide__title\">Transform Your Body,<span>Transform Your Life<\/span><\/h1>\r\n <p class=\"hero-slide__desc\">Train with certified coaches using world-class equipment and personalized fitness programs designed to help you reach your goals faster.<\/p>\r\n <div class=\"hero-slide__buttons\">\r\n <a href=\"#join\" class=\"btn btn--primary\">Join Now<\/a>\r\n <a href=\"#trial\" class=\"btn btn--secondary\">Book Free Trial<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-slide__visual\">\r\n <img decoding=\"async\" class=\"hero-slide__visual-img\" src=\"https:\/\/images.unsplash.com\/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=900&q=80\" alt=\"Premium gym athlete training\" loading=\"eager\">\r\n <div class=\"glass-card\">\r\n <div class=\"glass-card__rating\">\u2605\u2605\u2605\u2605\u2605 <b>5.0 Rating<\/b><\/div>\r\n <ul>\r\n <li>10,000+ Happy Members<\/li>\r\n <li>Certified Trainers<\/li>\r\n <li>Open 6AM \u2013 10PM<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ================= SLIDE 2 ================= -->\r\n <div class=\"hero-slide\" data-slide=\"1\">\r\n <div class=\"hero-slide__bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1571902943202-507ec2618e8f?auto=format&fit=crop&w=1920&q=80');\" role=\"img\" aria-label=\"Professional personal trainer helping a client with weight training\"><\/div>\r\n <div class=\"hero-slide__overlay\"><\/div>\r\n <div class=\"hero-slide__inner\">\r\n <div class=\"hero-slide__text\">\r\n <span class=\"hero-slide__tag\">\ud83d\udd25 Personal Coaching<\/span>\r\n <h1 class=\"hero-slide__title\">Train Smarter,<span>Become Stronger<\/span><\/h1>\r\n <p class=\"hero-slide__desc\">Experience one-on-one coaching, customized workout plans, nutrition guidance, and measurable progress every week.<\/p>\r\n <div class=\"hero-slide__buttons\">\r\n <a href=\"#programs\" class=\"btn btn--primary\">Explore Programs<\/a>\r\n <a href=\"#contact\" class=\"btn btn--secondary\">Contact Us<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-slide__visual\">\r\n <img decoding=\"async\" class=\"hero-slide__visual-img\" src=\"https:\/\/images.unsplash.com\/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=900&q=80\" alt=\"Personal trainer coaching a client\" loading=\"lazy\">\r\n <div class=\"glass-card\">\r\n <div class=\"glass-card__rating\">\u2605\u2605\u2605\u2605\u2605 <b>5.0 Rating<\/b><\/div>\r\n <ul>\r\n <li>10,000+ Happy Members<\/li>\r\n <li>Certified Trainers<\/li>\r\n <li>Open 6AM \u2013 10PM<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ================= SLIDE 3 ================= -->\r\n <div class=\"hero-slide\" data-slide=\"2\">\r\n <div class=\"hero-slide__bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1920&q=80');\" role=\"img\" aria-label=\"Luxury fitness club interior with modern equipment\"><\/div>\r\n <div class=\"hero-slide__overlay\"><\/div>\r\n <div class=\"hero-slide__inner\">\r\n <div class=\"hero-slide__text\">\r\n <span class=\"hero-slide__tag\">\ud83d\udcaa Elite Gym Experience<\/span>\r\n <h1 class=\"hero-slide__title\">Your Fitness Journey<span>Starts Today<\/span><\/h1>\r\n <p class=\"hero-slide__desc\">Premium equipment, group classes, yoga sessions, CrossFit, cardio zones, and expert trainers\u2014all under one roof.<\/p>\r\n <div class=\"hero-slide__buttons\">\r\n <a href=\"#membership\" class=\"btn btn--primary\">View Membership<\/a>\r\n <a href=\"#start\" class=\"btn btn--secondary\">Get Started<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-slide__visual\">\r\n <img decoding=\"async\" class=\"hero-slide__visual-img\" src=\"https:\/\/images.unsplash.com\/photo-1600965962102-9d260a71890d?auto=format&fit=crop&w=900&q=80\" alt=\"Modern luxury gym interior\" loading=\"lazy\">\r\n <div class=\"glass-card\">\r\n <div class=\"glass-card__rating\">\u2605\u2605\u2605\u2605\u2605 <b>5.0 Rating<\/b><\/div>\r\n <ul>\r\n <li>10,000+ Happy Members<\/li>\r\n <li>Certified Trainers<\/li>\r\n <li>Open 6AM \u2013 10PM<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Arrows -->\r\n <button class=\"slider-arrow slider-arrow--prev\" id=\"prevArrow\" aria-label=\"Previous slide\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\r\n <\/button>\r\n <button class=\"slider-arrow slider-arrow--next\" id=\"nextArrow\" aria-label=\"Next slide\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\r\n <\/button>\r\n\r\n <!-- Dots -->\r\n <div class=\"slider-dots\" id=\"sliderDots\" role=\"tablist\" aria-label=\"Slide navigation\"><\/div>\r\n\r\n <!-- Autoplay progress bar -->\r\n <div class=\"slider-progress\" id=\"sliderProgress\"><\/div>\r\n\r\n <!-- Scroll indicator -->\r\n <div class=\"scroll-indicator\">\r\n <span>Scroll<\/span>\r\n <div class=\"scroll-indicator__mouse\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ================= BOTTOM FEATURE CARDS ================= -->\r\n <section class=\"hero-features\" aria-label=\"Gym highlights\">\r\n <div class=\"hero-features__grid\">\r\n\r\n <div class=\"feature-card\">\r\n <div class=\"feature-card__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6.5 6.5L17.5 17.5\"><\/path><path d=\"M4 4l3 3\"><\/path><path d=\"M17 17l3 3\"><\/path><rect x=\"2\" y=\"2\" width=\"4\" height=\"4\" rx=\"1\"><\/rect><rect x=\"18\" y=\"18\" width=\"4\" height=\"4\" rx=\"1\"><\/rect><path d=\"M9 4l-2 2\"><\/path><path d=\"M20 15l-2 2\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"feature-card__title\">Certified Trainers<\/h3>\r\n <p class=\"feature-card__desc\">Learn from industry-certified coaches who tailor every session to your goals.<\/p>\r\n <\/div>\r\n\r\n <div class=\"feature-card\">\r\n <div class=\"feature-card__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4v16\"><\/path><path d=\"M18 4v16\"><\/path><path d=\"M2 9h4\"><\/path><path d=\"M2 15h4\"><\/path><path d=\"M18 9h4\"><\/path><path d=\"M18 15h4\"><\/path><path d=\"M6 12h12\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"feature-card__title\">Modern Equipment<\/h3>\r\n <p class=\"feature-card__desc\">Train on premium, retina-ready equipment imported for performance and safety.<\/p>\r\n <\/div>\r\n\r\n <div class=\"feature-card\">\r\n <div class=\"feature-card__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z\"><\/path><circle cx=\"12\" cy=\"9\" r=\"2.5\"><\/circle><\/svg>\r\n <\/div>\r\n <h3 class=\"feature-card__title\">Nutrition Plans<\/h3>\r\n <p class=\"feature-card__desc\">Get a personalized nutrition roadmap built around your training schedule.<\/p>\r\n <\/div>\r\n\r\n <div class=\"feature-card\">\r\n <div class=\"feature-card__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"3\"><\/rect><path d=\"M16 2v4\"><\/path><path d=\"M8 2v4\"><\/path><path d=\"M3 10h18\"><\/path><path d=\"M8 15h.01\"><\/path><path d=\"M12 15h.01\"><\/path><path d=\"M16 15h.01\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"feature-card__title\">Flexible Membership<\/h3>\r\n <p class=\"feature-card__desc\">Choose monthly, quarterly, or annual plans with zero long-term lock-in.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\/* ==========================================================================\r\n GYM HERO SLIDER \u2014 Vanilla JS\r\n No dependencies. Self-contained inside an IIFE so it is safe to paste\r\n directly into WordPress without colliding with theme scripts.\r\n ========================================================================== *\/\r\n(function () {\r\n 'use strict';\r\n\r\n var slider = document.getElementById('heroSlider');\r\n if (!slider) return;\r\n\r\n var slides = Array.prototype.slice.call(slider.querySelectorAll('.hero-slide'));\r\n var dotsWrap = document.getElementById('sliderDots');\r\n var prevArrow = document.getElementById('prevArrow');\r\n var nextArrow = document.getElementById('nextArrow');\r\n var progressBar = document.getElementById('sliderProgress');\r\n\r\n var total = slides.length;\r\n var current = 0;\r\n var AUTOPLAY_MS = 5000;\r\n var timer = null;\r\n var isHovering = false;\r\n\r\n \/* ---- Build dots dynamically ---- *\/\r\n slides.forEach(function (slide, i) {\r\n var dot = document.createElement('button');\r\n dot.className = 'slider-dot' + (i === 0 ? ' is-active' : '');\r\n dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));\r\n dot.setAttribute('role', 'tab');\r\n dot.addEventListener('click', function () { goToSlide(i); restartAutoplay(); });\r\n dotsWrap.appendChild(dot);\r\n });\r\n var dots = Array.prototype.slice.call(dotsWrap.querySelectorAll('.slider-dot'));\r\n\r\n \/* ---- Core navigation ---- *\/\r\n function goToSlide(index) {\r\n index = (index + total) % total; \/\/ infinite loop wrap-around\r\n if (index === current) return;\r\n\r\n slides[current].classList.remove('is-active');\r\n dots[current].classList.remove('is-active');\r\n\r\n current = index;\r\n\r\n slides[current].classList.add('is-active');\r\n dots[current].classList.add('is-active');\r\n\r\n restartProgress();\r\n }\r\n\r\n function nextSlide() { goToSlide(current + 1); }\r\n function prevSlide() { goToSlide(current - 1); }\r\n\r\n \/* ---- Autoplay ---- *\/\r\n function startAutoplay() {\r\n stopAutoplay();\r\n timer = setInterval(function () {\r\n if (!isHovering) nextSlide();\r\n }, AUTOPLAY_MS);\r\n }\r\n function stopAutoplay() {\r\n if (timer) { clearInterval(timer); timer = null; }\r\n }\r\n function restartAutoplay() { stopAutoplay(); startAutoplay(); restartProgress(); }\r\n\r\n function restartProgress() {\r\n progressBar.classList.remove('is-running');\r\n \/\/ force reflow so the animation can restart\r\n void progressBar.offsetWidth;\r\n progressBar.classList.add('is-running');\r\n }\r\n\r\n \/* ---- Pause on hover ---- *\/\r\n slider.addEventListener('mouseenter', function () {\r\n isHovering = true;\r\n progressBar.style.animationPlayState = 'paused';\r\n });\r\n slider.addEventListener('mouseleave', function () {\r\n isHovering = false;\r\n progressBar.style.animationPlayState = 'running';\r\n });\r\n\r\n \/* ---- Arrow controls ---- *\/\r\n nextArrow.addEventListener('click', function () { nextSlide(); restartAutoplay(); });\r\n prevArrow.addEventListener('click', function () { prevSlide(); restartAutoplay(); });\r\n\r\n \/* ---- Keyboard navigation ---- *\/\r\n slider.setAttribute('tabindex', '0');\r\n slider.addEventListener('keydown', function (e) {\r\n if (e.key === 'ArrowRight') { nextSlide(); restartAutoplay(); }\r\n if (e.key === 'ArrowLeft') { prevSlide(); restartAutoplay(); }\r\n });\r\n\r\n \/* ---- Touch swipe support ---- *\/\r\n var touchStartX = 0;\r\n var touchEndX = 0;\r\n var SWIPE_THRESHOLD = 50;\r\n\r\n slider.addEventListener('touchstart', function (e) {\r\n touchStartX = e.changedTouches[0].screenX;\r\n }, { passive: true });\r\n\r\n slider.addEventListener('touchend', function (e) {\r\n touchEndX = e.changedTouches[0].screenX;\r\n var diff = touchEndX - touchStartX;\r\n if (Math.abs(diff) > SWIPE_THRESHOLD) {\r\n if (diff < 0) { nextSlide(); } else { prevSlide(); }\r\n restartAutoplay();\r\n }\r\n }, { passive: true });\r\n\r\n \/* ---- Init ---- *\/\r\n startAutoplay();\r\n restartProgress();\r\n\r\n \/* ==========================================================================\r\n SCROLL REVEAL \u2014 bottom feature cards fade up when they enter viewport\r\n ========================================================================== *\/\r\n var cards = document.querySelectorAll('.feature-card');\r\n if ('IntersectionObserver' in window) {\r\n var observer = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (entry, idx) {\r\n if (entry.isIntersecting) {\r\n entry.target.style.animationDelay = (idx * 0.12) + 's';\r\n entry.target.classList.add('is-visible');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.2 });\r\n\r\n cards.forEach(function (card) { observer.observe(card); });\r\n } else {\r\n \/\/ Fallback: just show them\r\n cards.forEach(function (card) { card.classList.add('is-visible'); });\r\n }\r\n\r\n \/* ---- Smooth scroll for in-page anchor links ---- *\/\r\n document.querySelectorAll('.gym-hero-wrapper a[href^=\"#\"]').forEach(function (link) {\r\n link.addEventListener('click', function (e) {\r\n var targetId = this.getAttribute('href');\r\n var targetEl = targetId.length > 1 ? document.querySelector(targetId) : null;\r\n if (targetEl) {\r\n e.preventDefault();\r\n targetEl.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n });\r\n });\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>g\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Apex Athletic \u2014 Premium Gym & Fitness Header Skip to main content Mon\u2013Sat: 6:00 AM \u2013 10:00 PM +1 (555) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":7,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":46,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions\/46"}],"wp:attachment":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}