{"id":9,"date":"2026-04-03T13:37:27","date_gmt":"2026-04-03T13:37:27","guid":{"rendered":"https:\/\/swingexpert.sa\/?page_id=9"},"modified":"2026-06-30T14:23:22","modified_gmt":"2026-06-30T14:23:22","slug":"home","status":"publish","type":"page","link":"https:\/\/swingexpert.sa\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n \r\n Swing Expert | Professional Rope Access Services<\/title>\r\n \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=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600&family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* ============================================\r\n DESIGN SYSTEM & CSS VARIABLES\r\n ============================================ *\/\r\n :root {\r\n --orange: #FF6B00;\r\n --orange-deep: #E55A00;\r\n --orange-light: rgba(255, 107, 0, 0.12);\r\n --orange-glow: rgba(255, 107, 0, 0.35);\r\n --dark: #111111;\r\n --dark-2: #1A1A1A;\r\n --dark-3: #2D2D2D;\r\n --grey: #9E9E9E;\r\n --light-grey: #F5F5F5;\r\n --white: #FFFFFF;\r\n --border: rgba(255,255,255,0.08);\r\n --card-shadow: 0 4px 24px rgba(0,0,0,0.08);\r\n --card-hover-shadow: 0 20px 60px rgba(255,107,0,0.18), 0 4px 20px rgba(0,0,0,0.12);\r\n --btn-glow: 0 0 28px rgba(255,107,0,0.5);\r\n --radius: 8px;\r\n --radius-lg: 14px;\r\n --transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);\r\n --nav-h: 80px;\r\n }\r\n\r\n \/* ============================================\r\n RESET & BASE\r\n ============================================ *\/\r\n *, *::before, *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html, body {\r\n scroll-behavior: smooth;\r\n font-size: 16px;\r\n font-family: 'Inter', sans-serif;\r\n background: var(--white);\r\n color: var(--dark-2);\r\n \/* Absolute prevention of horizontal scrolling *\/\r\n overflow-x: hidden;\r\n max-width: 100vw;\r\n line-height: 1.65;\r\n position: relative;\r\n }\r\n\r\n img { \r\n max-width: 100%; \r\n height: auto; \r\n display: block;\r\n }\r\n\r\n a { \r\n text-decoration: none; \r\n color: inherit;\r\n }\r\n\r\n ul { list-style: none; }\r\n\r\n .container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 48px;\r\n width: 100%;\r\n }\r\n\r\n .section-pad {\r\n padding: 120px 0;\r\n }\r\n\r\n .section-pad-sm {\r\n padding: 80px 0;\r\n }\r\n\r\n \/* ============================================\r\n TYPOGRAPHY UTILITIES\r\n ============================================ *\/\r\n .overline {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n background: var(--orange-light);\r\n border: 1px solid rgba(255,107,0,0.3);\r\n padding: 6px 16px;\r\n border-radius: 20px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .overline::before {\r\n content: '';\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--orange);\r\n flex-shrink: 0;\r\n }\r\n\r\n .section-title {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: clamp(36px, 5vw, 56px);\r\n font-weight: 800;\r\n line-height: 1.0;\r\n letter-spacing: -0.5px;\r\n color: var(--dark-2);\r\n margin-bottom: 18px;\r\n }\r\n\r\n .section-title.light { color: var(--white); }\r\n\r\n .section-title span {\r\n color: var(--orange);\r\n }\r\n\r\n .section-sub {\r\n font-size: 17px;\r\n color: var(--grey);\r\n line-height: 1.75;\r\n max-width: 580px;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 70px;\r\n }\r\n\r\n .section-header .section-sub {\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ============================================\r\n BUTTONS\r\n ============================================ *\/\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 16px 36px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n border: none;\r\n transition: var(--transition);\r\n position: relative;\r\n overflow: hidden;\r\n text-align: center;\r\n }\r\n\r\n .btn::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(255,255,255,0.12);\r\n opacity: 0;\r\n transition: opacity 0.25s;\r\n }\r\n\r\n .btn:hover::after { opacity: 1; }\r\n\r\n .btn-primary {\r\n background: var(--orange);\r\n color: var(--white);\r\n }\r\n\r\n .btn-primary:hover {\r\n background: var(--orange-deep);\r\n box-shadow: var(--btn-glow);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-outline {\r\n background: transparent;\r\n color: var(--white);\r\n border: 1.5px solid rgba(255,255,255,0.6);\r\n }\r\n\r\n .btn-outline:hover {\r\n background: var(--white);\r\n color: var(--dark-2);\r\n border-color: var(--white);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-outline-orange {\r\n background: transparent;\r\n color: var(--orange);\r\n border: 1.5px solid var(--orange);\r\n }\r\n\r\n .btn-outline-orange:hover {\r\n background: var(--orange);\r\n color: var(--white);\r\n box-shadow: var(--btn-glow);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-arrow::after {\r\n content: '\u2192';\r\n background: none;\r\n opacity: 1;\r\n position: relative;\r\n inset: auto;\r\n transition: transform 0.25s;\r\n }\r\n\r\n .btn-arrow:hover::after {\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* ============================================\r\n SCROLL ANIMATIONS\r\n ============================================ *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(45px);\r\n transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),\r\n transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);\r\n }\r\n\r\n .reveal.from-left {\r\n transform: translateX(-60px);\r\n }\r\n\r\n .reveal.from-right {\r\n transform: translateX(60px);\r\n }\r\n\r\n .reveal.scale-in {\r\n transform: scale(0.88);\r\n }\r\n\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: translate(0) scale(1);\r\n }\r\n\r\n .reveal-delay-1 { transition-delay: 0.1s; }\r\n .reveal-delay-2 { transition-delay: 0.2s; }\r\n .reveal-delay-3 { transition-delay: 0.3s; }\r\n .reveal-delay-4 { transition-delay: 0.4s; }\r\n .reveal-delay-5 { transition-delay: 0.5s; }\r\n .reveal-delay-6 { transition-delay: 0.6s; }\r\n\r\n \/* ============================================\r\n NAVIGATION\r\n ============================================ *\/\r\n #navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 0 48px; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; transition: all 0.4s ease; background: rgba(255, 255, 255, 0.95); \/* Light background *\/ backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }\r\n\r\n \r\n#navbar.scrolled { background: rgba(255, 255, 255, 0.98); \/* Light frosted glass instead of dark *\/ backdrop-filter: blur(20px); box-shadow: 0 4px 30px rgba(0,0,0,0.08); \/* Soft shadow *\/ border-bottom: 1px solid rgba(255,107,0,0.15); }\r\n\r\n\/* Ensure links stay readable when scrolled *\/ \r\n#navbar.scrolled .nav-links a { \r\n color: var(--dark-2); \r\n} \r\n\r\n\/* 1. Normal State (Top of page): Forces the hamburger to be Dark *\/ .hamburger span { display: block; width: 26px; height: 2px; background: var(--dark-2) !important; transition: var(--transition); transform-origin: center; } \r\n\r\n* 2. Scrolled State: ALSO Forces the hamburger to be Dark (because the navbar stays light) *\/ #navbar.scrolled .hamburger span { background: var(--dark-2) !important; }\r\n\r\n .nav-logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n.nav-logo-img { max-height: 50px; width: auto; mix-blend-mode: multiply; \/* This magically hides the white background of the JPG against the light navbar! *\/ } \r\n\r\n .nav-logo-icon {\r\n width: 44px;\r\n height: 44px;\r\n background: var(--orange);\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-weight: 900;\r\n font-size: 20px;\r\n color: white;\r\n letter-spacing: -1px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .nav-logo-text {\r\n display: flex;\r\n flex-direction: column;\r\n line-height: 1;\r\n }\r\n\r\n .nav-logo-text .brand {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: 22px;\r\n font-weight: 800;\r\n color: var(--white);\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .nav-logo-text .tagline-nav {\r\n font-size: 9px;\r\n font-weight: 500;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 36px;\r\n }\r\n\r\n .nav-links a { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark-2); \/* Dark text *\/ position: relative; padding-bottom: 4px; transition: color 0.25s; }\r\n\r\n .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--orange);\r\n transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);\r\n }\r\n\r\n \r\n.nav-links a:hover { color: var(--orange); }\r\n\r\n .nav-links a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n .nav-right {\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n }\r\n\r\n .nav-phone {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--orange);\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-phone svg {\r\n width: 15px;\r\n height: 15px;\r\n }\r\n\r\n .hamburger {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n cursor: pointer;\r\n padding: 10px;\r\n z-index: 1100;\r\n }\r\n\r\n .hamburger span {\r\n display: block;\r\n width: 26px;\r\n height: 2px;\r\n background: var(--white);\r\n transition: var(--transition);\r\n transform-origin: center;\r\n }\r\n\r\n .hamburger.open span:nth-child(1) {\r\n transform: translateY(7px) rotate(45deg);\r\n }\r\n\r\n .hamburger.open span:nth-child(2) {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n\r\n .hamburger.open span:nth-child(3) {\r\n transform: translateY(-7px) rotate(-45deg);\r\n }\r\n\r\n \/* Mobile Menu *\/\r\n .mobile-menu {\r\n position: fixed;\r\n inset: 0;\r\n background: var(--dark-2);\r\n z-index: 999;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n .mobile-menu.open {\r\n opacity: 1;\r\n pointer-events: all;\r\n }\r\n\r\n .mobile-menu a {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: 42px;\r\n font-weight: 700;\r\n color: var(--white);\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n transition: color 0.25s;\r\n padding: 8px 0;\r\n border-bottom: 1px solid rgba(255,255,255,0.06);\r\n width: 260px;\r\n text-align: center;\r\n }\r\n\r\n .mobile-menu a:hover {\r\n color: var(--orange);\r\n }\r\n\r\n .mobile-menu .mob-cta {\r\n margin-top: 24px;\r\n }\r\n\r\n \/* ============================================\r\n HERO SECTION\r\n ============================================ *\/\r\n #hero {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n padding-top: calc(var(--nav-h) + 60px);\r\n padding-bottom: 80px;\r\n background-image: url('https:\/\/www.accessropes.com\/wp-content\/uploads\/2023\/08\/Rope-Access-Techniques_.jpg');\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n .hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: \r\n linear-gradient(105deg, rgba(17,17,17,0.96) 0%, rgba(17,17,17,0.75) 50%, rgba(17,17,17,0.25) 100%),\r\n linear-gradient(to top, rgba(17,17,17,0.9) 0%, transparent 35%);\r\n z-index: 1;\r\n }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 60px;\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 40px 48px;\r\n }\r\n\r\n .hero-text {\r\n max-width: 640px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(255,107,0,0.12);\r\n border: 1px solid rgba(255,107,0,0.4);\r\n border-radius: 24px;\r\n padding: 8px 18px;\r\n margin-bottom: 28px;\r\n animation: fadeSlideUp 0.8s 0.2s both;\r\n }\r\n\r\n .hero-badge .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: var(--orange);\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.6); }\r\n 50% { box-shadow: 0 0 0 6px rgba(255,107,0,0); }\r\n }\r\n\r\n .hero-badge span {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n }\r\n\r\n .hero-h1 {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: clamp(48px, 7.5vw, 96px);\r\n font-weight: 900;\r\n line-height: 0.92;\r\n letter-spacing: -1px;\r\n color: var(--white);\r\n margin-bottom: 24px;\r\n animation: fadeSlideUp 0.8s 0.4s both;\r\n }\r\n\r\n .hero-h1 .orange-text {\r\n background: linear-gradient(135deg, #FF6B00, #FF9A40);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .hero-sub {\r\n font-size: 17px;\r\n color: rgba(255,255,255,0.75);\r\n line-height: 1.75;\r\n max-width: 500px;\r\n margin-bottom: 36px;\r\n animation: fadeSlideUp 0.8s 0.6s both;\r\n }\r\n\r\n .hero-stats {\r\n display: flex;\r\n gap: 0;\r\n margin-bottom: 40px;\r\n animation: fadeSlideUp 0.8s 0.7s both;\r\n }\r\n\r\n .hero-stat {\r\n padding: 0 28px 0 0;\r\n margin-right: 28px;\r\n border-right: 1px solid rgba(255,255,255,0.15);\r\n }\r\n\r\n .hero-stat:last-child {\r\n border-right: none;\r\n margin-right: 0;\r\n padding-right: 0;\r\n }\r\n\r\n .hero-stat-number {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: 36px;\r\n font-weight: 800;\r\n color: var(--orange);\r\n line-height: 1;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .hero-stat-label {\r\n font-size: 11px;\r\n font-weight: 500;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.5);\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n animation: fadeSlideUp 0.8s 0.9s both;\r\n }\r\n\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 36px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 2;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n color: rgba(255,255,255,0.4);\r\n font-size: 10px;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n animation: fadeSlideUp 1s 1.2s both;\r\n }\r\n\r\n .scroll-line {\r\n width: 1px;\r\n height: 50px;\r\n background: linear-gradient(to bottom, rgba(255,107,0,0.8), transparent);\r\n animation: scrollPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes scrollPulse {\r\n 0%, 100% { opacity: 0.3; transform: scaleY(0.8); }\r\n 50% { opacity: 1; transform: scaleY(1); }\r\n }\r\n\r\n @keyframes fadeSlideUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* ============================================\r\n SERVICES SECTION\r\n ============================================ *\/\r\n #services {\r\n background: var(--light-grey);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n #services::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image: \r\n repeating-linear-gradient(\r\n 45deg,\r\n rgba(0,0,0,0.015) 0px,\r\n rgba(0,0,0,0.015) 1px,\r\n transparent 1px,\r\n transparent 40px\r\n );\r\n }\r\n\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .service-card {\r\n background: var(--white);\r\n border-radius: var(--radius-lg);\r\n padding: 36px 32px;\r\n box-shadow: var(--card-shadow);\r\n position: relative;\r\n overflow: hidden;\r\n transition: var(--transition);\r\n cursor: pointer;\r\n border-bottom: 3px solid transparent;\r\n }\r\n\r\n .service-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: var(--orange);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);\r\n }\r\n\r\n .service-card::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -40px;\r\n right: -40px;\r\n width: 120px;\r\n height: 120px;\r\n background: radial-gradient(circle, rgba(255,107,0,0.07) 0%, transparent 70%);\r\n transition: var(--transition);\r\n border-radius: 50%;\r\n }\r\n\r\n .service-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: var(--card-hover-shadow);\r\n border-bottom-color: var(--orange);\r\n }\r\n\r\n .service-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .service-card:hover::after {\r\n bottom: -20px;\r\n right: -20px;\r\n width: 160px;\r\n height: 160px;\r\n }\r\n\r\n .service-icon-wrap {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 12px;\r\n background: var(--orange-light);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 24px;\r\n transition: var(--transition);\r\n }\r\n\r\n .service-card:hover .service-icon-wrap {\r\n background: var(--orange);\r\n box-shadow: 0 8px 24px rgba(255,107,0,0.3);\r\n transform: rotate(-5deg) scale(1.05);\r\n }\r\n\r\n .service-icon-wrap svg {\r\n width: 28px;\r\n height: 28px;\r\n stroke: var(--orange);\r\n fill: none;\r\n stroke-width: 1.8;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: stroke 0.3s;\r\n }\r\n\r\n .service-card:hover .service-icon-wrap svg {\r\n stroke: var(--white);\r\n }\r\n\r\n .service-card h3 {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 19px;\r\n font-weight: 700;\r\n color: var(--dark-2);\r\n margin-bottom: 12px;\r\n }\r\n\r\n .service-card p {\r\n font-size: 14.5px;\r\n color: var(--grey);\r\n line-height: 1.7;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .service-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n transition: gap 0.25s;\r\n }\r\n\r\n .service-link:hover {\r\n gap: 14px;\r\n }\r\n\r\n \/* ============================================\r\n WHY CHOOSE US\r\n ============================================ *\/\r\n #why {\r\n background: var(--white);\r\n overflow: hidden;\r\n }\r\n\r\n .why-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n\r\n .why-image-wrap {\r\n position: relative;\r\n }\r\n\r\n .why-image-main {\r\n width: 100%;\r\n height: 580px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n \r\n .why-img-real {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n }\r\n\r\n .why-img-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(0,0,0,0.3);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1;\r\n }\r\n\r\n .why-center-icon {\r\n width: 100px;\r\n height: 100px;\r\n border-radius: 50%;\r\n background: rgba(255,107,0,0.7);\r\n border: 2px solid rgba(255,255,255,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n backdrop-filter: blur(5px);\r\n }\r\n\r\n .why-center-icon svg {\r\n width: 50px;\r\n height: 50px;\r\n stroke: var(--white);\r\n fill: none;\r\n stroke-width: 1.5;\r\n }\r\n\r\n .why-badge {\r\n position: absolute;\r\n bottom: -24px;\r\n right: -24px;\r\n width: 130px;\r\n height: 130px;\r\n background: var(--orange);\r\n border-radius: 50%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 8px 32px rgba(255,107,0,0.4);\r\n animation: badgeSpin 12s linear infinite;\r\n z-index: 2;\r\n }\r\n\r\n @keyframes badgeSpin {\r\n 0%, 100% { transform: rotate(0deg) scale(1); }\r\n 50% { transform: rotate(5deg) scale(1.03); }\r\n }\r\n\r\n .why-badge .badge-num {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: 40px;\r\n font-weight: 900;\r\n color: var(--white);\r\n line-height: 1;\r\n }\r\n\r\n .why-badge .badge-text {\r\n font-size: 9px;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.8);\r\n text-align: center;\r\n }\r\n\r\n .why-exp-badge {\r\n position: absolute;\r\n top: 24px;\r\n left: -20px;\r\n background: var(--dark-2);\r\n border: 1px solid rgba(255,107,0,0.3);\r\n border-radius: var(--radius);\r\n padding: 14px 20px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n box-shadow: 0 8px 32px rgba(0,0,0,0.4);\r\n z-index: 2;\r\n }\r\n\r\n .exp-icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n background: var(--orange-light);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n .exp-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n stroke: var(--orange);\r\n fill: none;\r\n stroke-width: 2;\r\n }\r\n\r\n .exp-text .exp-num {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: 24px;\r\n font-weight: 800;\r\n color: var(--white);\r\n line-height: 1;\r\n }\r\n\r\n .exp-text .exp-label {\r\n font-size: 11px;\r\n color: var(--grey);\r\n letter-spacing: 1px;\r\n }\r\n\r\n .why-benefits {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n margin-top: 40px;\r\n }\r\n\r\n .benefit-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 16px;\r\n padding: 20px 24px;\r\n border-radius: var(--radius);\r\n border: 1px solid #EEEEEE;\r\n transition: var(--transition);\r\n }\r\n\r\n .benefit-item:hover {\r\n background: var(--light-grey);\r\n border-color: rgba(255,107,0,0.3);\r\n transform: translateX(6px);\r\n box-shadow: -4px 0 0 var(--orange);\r\n }\r\n\r\n .benefit-icon {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 10px;\r\n background: var(--orange-light);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: var(--transition);\r\n }\r\n\r\n .benefit-item:hover .benefit-icon {\r\n background: var(--orange);\r\n }\r\n\r\n .benefit-icon svg {\r\n width: 20px;\r\n height: 20px;\r\n stroke: var(--orange);\r\n fill: none;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n transition: stroke 0.3s;\r\n }\r\n\r\n .benefit-item:hover .benefit-icon svg {\r\n stroke: var(--white);\r\n }\r\n\r\n .benefit-text h4 {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: var(--dark-2);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .benefit-text p {\r\n font-size: 13.5px;\r\n color: var(--grey);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* ============================================\r\n STATISTICS SECTION\r\n ============================================ *\/\r\n #stats {\r\n background: linear-gradient(135deg, #111111 0%, #1A1A1A 60%, #2D1500 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n #stats::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image: \r\n radial-gradient(circle at 20% 50%, rgba(255,107,0,0.08) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 50%, rgba(255,107,0,0.05) 0%, transparent 50%);\r\n }\r\n\r\n #stats::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image: \r\n repeating-linear-gradient(\r\n 0deg,\r\n rgba(255,255,255,0.01) 0px,\r\n rgba(255,255,255,0.01) 1px,\r\n transparent 1px,\r\n transparent 80px\r\n );\r\n }\r\n\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 1px;\r\n background: rgba(255,255,255,0.06);\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .stat-item {\r\n padding: 56px 40px;\r\n text-align: center;\r\n background: rgba(255,255,255,0.02);\r\n position: relative;\r\n overflow: hidden;\r\n transition: background 0.35s;\r\n }\r\n\r\n .stat-item::before {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 0;\r\n height: 3px;\r\n background: var(--orange);\r\n transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);\r\n }\r\n\r\n .stat-item:hover {\r\n background: rgba(255,107,0,0.06);\r\n }\r\n\r\n .stat-item:hover::before {\r\n width: 80%;\r\n }\r\n\r\n .stat-icon {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 12px;\r\n background: rgba(255,107,0,0.12);\r\n border: 1px solid rgba(255,107,0,0.25);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n }\r\n\r\n .stat-icon svg {\r\n width: 22px;\r\n height: 22px;\r\n stroke: var(--orange);\r\n fill: none;\r\n stroke-width: 1.8;\r\n }\r\n\r\n .stat-number {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: clamp(48px, 6vw, 72px);\r\n font-weight: 900;\r\n color: var(--orange);\r\n line-height: 1;\r\n margin-bottom: 8px;\r\n display: block;\r\n }\r\n\r\n .stat-suffix {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: 0.7em;\r\n font-weight: 700;\r\n color: var(--orange-deep);\r\n }\r\n\r\n .stat-label {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.5);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .stat-desc {\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.3);\r\n line-height: 1.5;\r\n }\r\n\r\n \/* ============================================\r\n PROCESS SECTION\r\n ============================================ *\/\r\n #process {\r\n background: var(--white);\r\n position: relative;\r\n }\r\n\r\n .process-timeline {\r\n position: relative;\r\n display: flex;\r\n gap: 0;\r\n }\r\n\r\n .process-timeline::before {\r\n content: '';\r\n position: absolute;\r\n top: 52px;\r\n left: 52px;\r\n right: 52px;\r\n height: 2px;\r\n background: linear-gradient(to right, var(--orange), rgba(255,107,0,0.1));\r\n z-index: 0;\r\n }\r\n\r\n .process-step {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n padding: 0 16px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .step-number-wrap {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 50%;\r\n background: var(--white);\r\n border: 2px solid #EEEEEE;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 24px;\r\n position: relative;\r\n transition: var(--transition);\r\n }\r\n\r\n .process-step:hover .step-number-wrap {\r\n border-color: var(--orange);\r\n background: var(--orange);\r\n box-shadow: 0 0 0 8px rgba(255,107,0,0.12);\r\n }\r\n\r\n .step-number {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: 28px;\r\n font-weight: 900;\r\n color: var(--orange);\r\n line-height: 1;\r\n transition: color 0.3s;\r\n }\r\n\r\n .process-step:hover .step-number {\r\n color: var(--white);\r\n }\r\n\r\n .step-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: var(--orange);\r\n position: absolute;\r\n bottom: -5px;\r\n }\r\n\r\n .step-icon-wrap {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 12px;\r\n background: var(--orange-light);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n transition: var(--transition);\r\n }\r\n\r\n .process-step:hover .step-icon-wrap {\r\n background: var(--orange);\r\n }\r\n\r\n .step-icon-wrap svg {\r\n width: 22px;\r\n height: 22px;\r\n stroke: var(--orange);\r\n fill: none;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n transition: stroke 0.3s;\r\n }\r\n\r\n .process-step:hover .step-icon-wrap svg {\r\n stroke: var(--white);\r\n }\r\n\r\n .step-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 16px;\r\n font-weight: 700;\r\n color: var(--dark-2);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .step-desc {\r\n font-size: 13px;\r\n color: var(--grey);\r\n line-height: 1.6;\r\n max-width: 140px;\r\n }\r\n\r\n \/* ============================================\r\n SAFETY SECTION\r\n ============================================ *\/\r\n #safety {\r\n background: var(--dark-2);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n #safety::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse at top right, rgba(255,107,0,0.08) 0%, transparent 60%);\r\n }\r\n\r\n .safety-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n\r\n .safety-content .section-title {\r\n color: var(--white);\r\n }\r\n\r\n .safety-content .section-sub {\r\n color: rgba(255,255,255,0.5);\r\n margin-bottom: 40px;\r\n }\r\n\r\n .cert-cards {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n }\r\n\r\n .cert-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);\r\n padding: 20px;\r\n transition: var(--transition);\r\n }\r\n\r\n .cert-card:hover {\r\n border-color: rgba(255,107,0,0.4);\r\n background: rgba(255,107,0,0.06);\r\n transform: translateY(-4px);\r\n }\r\n\r\n .cert-icon {\r\n font-size: 28px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .cert-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n color: var(--white);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .cert-desc {\r\n font-size: 12px;\r\n color: rgba(255,255,255,0.4);\r\n }\r\n\r\n .safety-visual {\r\n position: relative;\r\n }\r\n\r\n .safety-items-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .safety-item {\r\n background: rgba(255,255,255,0.04);\r\n border: 1px solid rgba(255,255,255,0.07);\r\n border-radius: var(--radius-lg);\r\n padding: 28px 20px;\r\n text-align: center;\r\n transition: var(--transition);\r\n }\r\n\r\n .safety-item:hover {\r\n border-color: rgba(255,107,0,0.35);\r\n background: rgba(255,107,0,0.06);\r\n transform: translateY(-6px);\r\n }\r\n\r\n .safety-item-icon {\r\n font-size: 36px;\r\n margin-bottom: 12px;\r\n display: block;\r\n }\r\n\r\n .safety-item h4 {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n color: var(--white);\r\n margin-bottom: 6px;\r\n }\r\n\r\n .safety-item p {\r\n font-size: 12px;\r\n color: rgba(255,255,255,0.4);\r\n line-height: 1.5;\r\n }\r\n\r\n \/* ============================================\r\n TESTIMONIALS\r\n ============================================ *\/\r\n #testimonials {\r\n background: var(--white);\r\n }\r\n\r\n .testimonials-slider {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .testimonials-track {\r\n display: flex;\r\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);\r\n }\r\n\r\n .testimonial-slide {\r\n min-width: 100%;\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .testimonial-card {\r\n background: var(--light-grey);\r\n border-radius: var(--radius-lg);\r\n padding: 36px 32px;\r\n position: relative;\r\n border: 1px solid transparent;\r\n transition: var(--transition);\r\n }\r\n\r\n .testimonial-card:hover {\r\n border-color: rgba(255,107,0,0.25);\r\n background: var(--white);\r\n box-shadow: var(--card-hover-shadow);\r\n }\r\n\r\n .quote-mark {\r\n font-family: Georgia, serif;\r\n font-size: 80px;\r\n color: var(--orange);\r\n line-height: 0.7;\r\n margin-bottom: 16px;\r\n opacity: 0.6;\r\n }\r\n\r\n .testimonial-text {\r\n font-size: 15px;\r\n color: var(--dark-3);\r\n line-height: 1.75;\r\n margin-bottom: 28px;\r\n font-style: italic;\r\n }\r\n\r\n .testimonial-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n }\r\n\r\n .author-avatar {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--orange), var(--orange-deep));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: 20px;\r\n font-weight: 800;\r\n color: white;\r\n flex-shrink: 0;\r\n }\r\n\r\n .author-info .name {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: var(--dark-2);\r\n }\r\n\r\n .author-info .role {\r\n font-size: 12px;\r\n color: var(--grey);\r\n }\r\n\r\n .star-rating {\r\n display: flex;\r\n gap: 3px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .star {\r\n color: var(--orange);\r\n font-size: 14px;\r\n }\r\n\r\n .slider-controls {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 16px;\r\n margin-top: 48px;\r\n }\r\n\r\n .slider-btn {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n border: 1.5px solid #DDDDDD;\r\n background: white;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: var(--transition);\r\n color: var(--dark-2);\r\n }\r\n\r\n .slider-btn:hover {\r\n border-color: var(--orange);\r\n background: var(--orange);\r\n color: white;\r\n box-shadow: var(--btn-glow);\r\n }\r\n\r\n .slider-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n stroke: currentColor;\r\n fill: none;\r\n stroke-width: 2.5;\r\n }\r\n\r\n .slider-dots {\r\n display: flex;\r\n gap: 8px;\r\n }\r\n\r\n .slider-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #DDDDDD;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n }\r\n\r\n .slider-dot.active {\r\n width: 24px;\r\n border-radius: 4px;\r\n background: var(--orange);\r\n }\r\n\r\n \/* ============================================\r\n CTA SECTION\r\n ============================================ *\/\r\n #cta {\r\n background: linear-gradient(135deg, #FF6B00 0%, #E55A00 40%, #CC4A00 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n #cta::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image: \r\n repeating-linear-gradient(\r\n 45deg,\r\n rgba(255,255,255,0.03) 0px,\r\n rgba(255,255,255,0.03) 1px,\r\n transparent 1px,\r\n transparent 60px\r\n );\r\n }\r\n\r\n #cta::after {\r\n content: '';\r\n position: absolute;\r\n top: -100px;\r\n right: -100px;\r\n width: 400px;\r\n height: 400px;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n\r\n .cta-inner {\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 40px;\r\n }\r\n\r\n .cta-text .section-title {\r\n color: var(--white);\r\n font-size: clamp(38px, 5vw, 60px);\r\n }\r\n\r\n .cta-text p {\r\n font-size: 17px;\r\n color: rgba(255,255,255,0.8);\r\n max-width: 500px;\r\n }\r\n\r\n .cta-actions {\r\n display: flex;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n flex-shrink: 0;\r\n }\r\n\r\n .btn-white {\r\n background: var(--white);\r\n color: var(--orange);\r\n }\r\n\r\n .btn-white:hover {\r\n background: var(--dark-2);\r\n color: var(--white);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 24px rgba(0,0,0,0.3);\r\n }\r\n\r\n .btn-outline-white {\r\n background: transparent;\r\n border: 1.5px solid rgba(255,255,255,0.6);\r\n color: var(--white);\r\n }\r\n\r\n .btn-outline-white:hover {\r\n background: rgba(255,255,255,0.15);\r\n border-color: var(--white);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* ============================================\r\n FOOTER\r\n ============================================ *\/\r\n #footer {\r\n background: #0D0D0D;\r\n position: relative;\r\n }\r\n\r\n .footer-top-line {\r\n height: 4px;\r\n background: linear-gradient(to right, var(--orange), var(--orange-deep), rgba(255,107,0,0.1));\r\n }\r\n\r\n .footer-main {\r\n padding: 80px 0 60px;\r\n border-bottom: 1px solid rgba(255,255,255,0.06);\r\n }\r\n\r\n .footer-grid {\r\n display: grid;\r\n grid-template-columns: 1.5fr 1fr 1fr 1.5fr;\r\n gap: 60px;\r\n }\r\n\r\n .footer-logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .footer-tagline {\r\n font-size: 14px;\r\n color: rgba(255,255,255,0.45);\r\n line-height: 1.7;\r\n margin-bottom: 28px;\r\n max-width: 260px;\r\n }\r\n\r\n .social-links {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n\r\n .social-link {\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 8px;\r\n background: rgba(255,255,255,0.05);\r\n border: 1px solid rgba(255,255,255,0.08);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: var(--transition);\r\n }\r\n\r\n .social-link:hover {\r\n background: var(--orange);\r\n border-color: var(--orange);\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 20px rgba(255,107,0,0.35);\r\n }\r\n\r\n .social-link svg {\r\n width: 16px;\r\n height: 16px;\r\n stroke: rgba(255,255,255,0.6);\r\n fill: none;\r\n stroke-width: 1.8;\r\n transition: stroke 0.3s;\r\n }\r\n\r\n .social-link:hover svg {\r\n stroke: var(--white);\r\n }\r\n\r\n .footer-col h4 {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n margin-bottom: 24px;\r\n }\r\n\r\n .footer-links {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n\r\n .footer-links a {\r\n font-size: 14px;\r\n color: rgba(255,255,255,0.45);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: var(--transition);\r\n }\r\n\r\n .footer-links a::before {\r\n content: '\u2192';\r\n color: var(--orange);\r\n font-size: 12px;\r\n opacity: 0;\r\n transform: translateX(-8px);\r\n transition: var(--transition);\r\n }\r\n\r\n .footer-links a:hover {\r\n color: var(--white);\r\n padding-left: 4px;\r\n }\r\n\r\n .footer-links a:hover::before {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .contact-items {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .contact-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n }\r\n\r\n .contact-item-icon {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 8px;\r\n background: rgba(255,107,0,0.12);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-top: 2px;\r\n }\r\n\r\n .contact-item-icon svg {\r\n width: 14px;\r\n height: 14px;\r\n stroke: var(--orange);\r\n fill: none;\r\n stroke-width: 2;\r\n }\r\n\r\n .contact-item-text {\r\n font-size: 13.5px;\r\n color: rgba(255,255,255,0.5);\r\n line-height: 1.6;\r\n }\r\n\r\n .contact-item-text strong {\r\n display: block;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.35);\r\n margin-bottom: 2px;\r\n }\r\n\r\n .footer-map {\r\n margin-top: 20px;\r\n height: 160px;\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n border: 1px solid rgba(255,255,255,0.08);\r\n background: linear-gradient(135deg, #1a2a1a 0%, #2d3d2d 100%);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n color: rgba(255,255,255,0.3);\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .footer-bottom {\r\n padding: 24px 0;\r\n }\r\n\r\n .footer-bottom-inner {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 20px;\r\n }\r\n\r\n .footer-copy {\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.25);\r\n }\r\n\r\n .footer-legal {\r\n display: flex;\r\n gap: 24px;\r\n }\r\n\r\n .footer-legal a {\r\n font-size: 12px;\r\n color: rgba(255,255,255,0.25);\r\n transition: color 0.25s;\r\n }\r\n\r\n .footer-legal a:hover {\r\n color: var(--orange);\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE \u2014 TABLET (1024px)\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .container { padding: 0 32px; }\r\n .section-pad { padding: 90px 0; }\r\n\r\n #navbar { padding: 0 32px; }\r\n .nav-links { gap: 24px; }\r\n .nav-phone { display: none; }\r\n\r\n .hero-content { padding: 0 32px; padding-top: calc(var(--nav-h) + 80px); gap: 40px; }\r\n .hero-rope-wrap { display: none; }\r\n .hero-h1 { font-size: clamp(44px, 7vw, 72px); }\r\n\r\n .services-grid { grid-template-columns: repeat(2, 1fr); }\r\n .why-grid { gap: 48px; }\r\n .stats-grid { grid-template-columns: repeat(2, 1fr); }\r\n .process-timeline { flex-wrap: wrap; gap: 40px; }\r\n .process-timeline::before { display: none; }\r\n .process-step { flex: 0 0 calc(50% - 20px); }\r\n .testimonial-slide { grid-template-columns: repeat(2, 1fr); }\r\n .safety-grid { grid-template-columns: 1fr; gap: 60px; }\r\n .cta-inner { flex-direction: column; text-align: center; }\r\n .cta-text p { margin: 0 auto; }\r\n .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE \u2014 MOBILE (768px)\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n :root { --nav-h: 68px; }\r\n\r\n .container { padding: 0 20px; width: 100%; }\r\n .section-pad { padding: 60px 0; }\r\n\r\n #navbar { padding: 0 16px; width: 100%; }\r\n .nav-logo-icon { width: 36px; height: 36px; font-size: 16px; }\r\n .nav-logo-text .brand { font-size: 18px; }\r\n .nav-logo-text .tagline-nav { font-size: 8px; }\r\n \r\n .nav-links, .nav-right { display: none; }\r\n .hamburger { display: flex; padding: 8px; }\r\n\r\n #hero {\r\n padding-top: calc(var(--nav-h) + 20px);\r\n justify-content: flex-start; \r\n min-height: auto; \r\n padding-bottom: 100px;\r\n }\r\n\r\n .hero-content {\r\n padding: 0 20px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-top: 20px;\r\n gap: 30px;\r\n }\r\n\r\n .hero-h1 { font-size: clamp(32px, 10vw, 48px); margin-bottom: 16px; line-height: 1.05; }\r\n .hero-sub { font-size: 15px; margin-bottom: 24px; line-height: 1.6; }\r\n \r\n .hero-stats { flex-wrap: wrap; gap: 16px; margin-bottom: 30px; width: 100%; }\r\n .hero-stat { padding: 0; margin-right: 0; border: none; width: 45%; } \r\n .hero-stat-number { font-size: 28px; }\r\n \r\n .hero-buttons { flex-direction: column; width: 100%; gap: 12px; }\r\n .hero-buttons .btn { width: 100%; justify-content: center; padding: 14px 20px; }\r\n\r\n .services-grid { grid-template-columns: 1fr; }\r\n \r\n .why-grid { grid-template-columns: 1fr; gap: 40px; }\r\n .why-image-main { height: 340px; }\r\n .why-exp-badge { left: 10px; top: 10px; }\r\n .why-badge { width: 90px; height: 90px; bottom: 10px; right: 10px; }\r\n .why-badge .badge-num { font-size: 28px; }\r\n .benefit-item { padding: 16px; flex-direction: column; align-items: flex-start; }\r\n\r\n .stats-grid { grid-template-columns: repeat(2, 1fr); }\r\n .stat-item { padding: 30px 16px; }\r\n .stat-number { font-size: 36px; }\r\n\r\n .process-step { flex: 0 0 100%; margin-bottom: 20px; }\r\n\r\n .safety-items-grid { grid-template-columns: 1fr; } \r\n .cert-cards { grid-template-columns: 1fr; }\r\n\r\n .testimonial-slide { grid-template-columns: 1fr; }\r\n .testimonial-card { padding: 24px 20px; }\r\n\r\n .cta-inner { flex-direction: column; text-align: center; gap: 24px; }\r\n .cta-actions { justify-content: center; width: 100%; flex-direction: column; gap: 12px;}\r\n .cta-actions .btn { width: 100%; justify-content: center; }\r\n\r\n .footer-grid { grid-template-columns: 1fr; gap: 40px; }\r\n .footer-bottom-inner { flex-direction: column; text-align: center; gap: 12px; }\r\n \r\n \/* Inline style overrides for the form to fix layout *\/\r\n #contactForm { padding: 24px !important; }\r\n #contactForm > div:nth-of-type(1) { grid-template-columns: 1fr !important; gap: 16px !important; }\r\n }\r\n\r\n \/* ============================================\r\n SECTION DIVIDERS\r\n ============================================ *\/\r\n .rope-divider {\r\n width: 100%;\r\n height: 20px;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .rope-divider-line {\r\n width: 100%;\r\n height: 3px;\r\n background: repeating-linear-gradient(\r\n to right,\r\n #c8a000 0px,\r\n #f0c800 6px,\r\n #c8a000 12px,\r\n transparent 12px,\r\n transparent 18px\r\n );\r\n opacity: 0.08;\r\n }\r\n\r\n \/* ============================================\r\n BACK TO TOP\r\n ============================================ *\/\r\n #back-top {\r\n position: fixed;\r\n bottom: 36px;\r\nleft:36px; \/* \u2190 changed from right: 36px *\/ \r\nright: unset; \/* \u2190 add this to override if right is inherited *\/\r\n\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n background: var(--orange);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: var(--transition);\r\n z-index: 900;\r\n box-shadow: 0 4px 20px rgba(255,107,0,0.4);\r\n border: none;\r\n }\r\n\r\n #back-top.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n #back-top:hover {\r\n background: var(--orange-deep);\r\n box-shadow: var(--btn-glow);\r\n transform: translateY(-4px);\r\n }\r\n\r\n #back-top svg {\r\n width: 20px;\r\n height: 20px;\r\n stroke: white;\r\n fill: none;\r\n stroke-width: 2.5;\r\n }\r\n\r\n \/* ============================================\r\n LOADING SCREEN\r\n ============================================ *\/\r\n #loader {\r\n position: fixed;\r\n inset: 0;\r\n background: var(--dark-2);\r\n z-index: 9999;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n gap: 24px;\r\n transition: opacity 0.5s, visibility 0.5s;\r\n }\r\n\r\n #loader.hidden {\r\n opacity: 0;\r\n visibility: hidden;\r\n }\r\n\r\n .loader-logo {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: 36px;\r\n font-weight: 900;\r\n color: var(--white);\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .loader-logo span {\r\n color: var(--orange);\r\n }\r\n\r\n .loader-bar-wrap {\r\n width: 200px;\r\n height: 3px;\r\n background: rgba(255,255,255,0.08);\r\n border-radius: 2px;\r\n overflow: hidden;\r\n }\r\n\r\n .loader-bar {\r\n height: 100%;\r\n background: var(--orange);\r\n border-radius: 2px;\r\n animation: loaderAnim 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;\r\n }\r\n\r\n @keyframes loaderAnim {\r\n from { width: 0%; }\r\n to { width: 100%; }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"loader\">\r\n <div class=\"loader-logo\">SWING <span>EXPERT<\/span><\/div>\r\n <div class=\"loader-bar-wrap\">\r\n <div class=\"loader-bar\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<button id=\"back-top\" aria-label=\"Back to top\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"18 15 12 9 6 15\"\/><\/svg>\r\n<\/button>\r\n\r\n<div class=\"mobile-menu\" id=\"mobileMenu\">\r\n <a href=\"#hero\" onclick=\"closeMobileMenu()\">Home<\/a>\r\n <a href=\"#services\" onclick=\"closeMobileMenu()\">Services<\/a>\r\n <a href=\"#why\" onclick=\"closeMobileMenu()\">About<\/a>\r\n <a href=\"#contact-section\" onclick=\"closeMobileMenu()\">Contact<\/a>\r\n <a href=\"#contact-section\" class=\"btn btn-primary mob-cta\" onclick=\"closeMobileMenu()\">Get Free Quote<\/a>\r\n<\/div>\r\n\r\n<nav id=\"navbar\">\r\n <div class=\"nav-logo\">\r\n <a href=\"#hero\">\r\n <img decoding=\"async\" src=\"https:\/\/swingexpert.sa\/wp-content\/uploads\/2026\/04\/Untitled-design-2.png\" alt=\"Your Company Logo\" class=\"nav-logo-img\">\r\n <\/a>\r\n <\/div>\r\n\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#hero\">Home<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#why\">About<\/a><\/li>\r\n <li><a href=\"#contact-section\">Contact<\/a><\/li>\r\n <\/ul>\r\n\r\n <div class=\"nav-right\">\r\n <div class=\"nav-phone\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 014.69 12 19.79 19.79 0 011.61 3.4 2 2 0 013.6 1.22h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L7.91 8.91a16 16 0 006.29 6.29l.91-.91a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\"\/>\r\n <\/svg>\r\n 0579034706\r\n <\/div>\r\n <a href=\"#contact-section\" class=\"btn btn-primary\">Get Free Quote<\/a>\r\n <\/div>\r\n\r\n <div class=\"hamburger\" id=\"hamburger\" onclick=\"toggleMobileMenu()\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/div>\r\n<\/nav>\r\n\r\n<section id=\"hero\">\r\n <div class=\"hero-bg\"><\/div>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"hero-text\">\r\n <div class=\"hero-badge\">\r\n <div class=\"dot\"><\/div>\r\n <span>Certified Rope Access Specialists<\/span>\r\n <\/div>\r\n\r\n <h1 class=\"hero-h1\">\r\n PROFESSIONAL<br>\r\n ROPE ACCESS<br>\r\n <span class=\"orange-text\">SOLUTIONS<\/span><br>\r\n FOR HIGH-RISE\r\n <\/h1>\r\n\r\n <p class=\"hero-sub\">\r\n Certified technicians delivering safe, efficient, and cost-effective \r\n access solutions for commercial and industrial structures \u2014 \r\n no scaffolding required.\r\n <\/p>\r\n\r\n <div class=\"hero-stats\">\r\n <div class=\"hero-stat\">\r\n <div class=\"hero-stat-number\">15+<\/div>\r\n <div class=\"hero-stat-label\">Years of Experienced Management Team<\/div>\r\n <\/div>\r\n <div class=\"hero-stat\">\r\n <div class=\"hero-stat-number\">100%<\/div>\r\n <div class=\"hero-stat-label\">Quality & Safety Assured by Specialists<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-buttons\">\r\n <a href=\"#contact-section\" class=\"btn btn-primary btn-arrow\">Get Free Quote <\/a>\r\n <a href=\"#services\" class=\"btn btn-outline\">Our Services<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"scroll-indicator\">\r\n <div class=\"scroll-line\"><\/div>\r\n Scroll Down\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"services\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"overline reveal\">Our Expertise<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">Comprehensive <span>Rope Access<\/span> Services<\/h2>\r\n <p class=\"section-sub reveal reveal-delay-2\">\r\n From high-rise glass cleaning to structural inspections, our certified \r\n technicians handle every job with precision, speed, and zero compromise on safety.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n\r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\r\n <\/div>\r\n <h3>Rope Access Maintenance<\/h3>\r\n <p>Comprehensive building maintenance using professional rope access techniques. Fast, safe, and cost-effective solutions for any high-rise structure.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <\/div>\r\n <h3>Building Inspection<\/h3>\r\n <p>Thorough structural inspections and condition assessments delivered via rope access. Detailed reports and compliance documentation included.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-3\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"\/><line x1=\"4\" y1=\"22\" x2=\"4\" y2=\"15\"\/><\/svg>\r\n <\/div>\r\n <h3>Glass Cleaning<\/h3>\r\n <p>Streak-free high-rise glass and window cleaning using purified water systems. Restoring your building's visual clarity and professional appearance.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M2 20h20M6 20V10M10 20V4M14 20V10M18 20V4\"\/><\/svg>\r\n <\/div>\r\n <h3>Painting & Coating<\/h3>\r\n <p>High-performance exterior painting, protective coatings, and surface treatments applied safely at any height without scaffolding delays.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>\r\n <\/div>\r\n <h3>Fa\u00e7ade Repair<\/h3>\r\n <p>Expert fa\u00e7ade restoration, crack sealing, waterproofing, and cladding repair services. Protecting your building's envelope from environmental damage.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-3\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"\/><polyline points=\"2 17 12 22 22 17\"\/><polyline points=\"2 12 12 17 22 12\"\/><\/svg>\r\n <\/div>\r\n <h3>Industrial Solutions<\/h3>\r\n <p>Rope access solutions for industrial plants, refineries, bridges, towers, and offshore structures. Engineered for complex and hazardous environments.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2.69l5.66 5.66a8 8 0 11-11.31 0z\"\/><\/svg>\r\n <\/div>\r\n <h3>Oil and Gas<\/h3>\r\n <p>Comprehensive rope access for onshore and offshore facilities, ensuring minimal downtime and maximum safety in hazardous environments.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 22v-6l4-3v9\"\/><path d=\"M14 13v9\"\/><path d=\"M21 22v-5l-4-2v7\"\/><path d=\"M8 10l6-4 6 4\"\/><\/svg>\r\n <\/div>\r\n <h3>Civil<\/h3>\r\n <p>Specialized access solutions for bridges, dams, and complex civil engineering structures requiring maintenance and structural inspection.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-3\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9.59 4.59A2 2 0 1111 8H2m10.59 11.41A2 2 0 1014 16H2m15.73-8.27A2.5 2.5 0 1119.5 12H2\"\/><\/svg>\r\n <\/div>\r\n <h3>Wind<\/h3>\r\n <p>Expert blade inspection, composite repairs, and structural tower maintenance for both onshore and offshore wind turbines.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"5\" r=\"3\"\/><line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"8\"\/><path d=\"M5 12H2a10 10 0 0020 0h-3\"\/><\/svg>\r\n <\/div>\r\n <h3>Marine<\/h3>\r\n <p>Confined space entry, non-destructive testing, and at-height works for vessels, shipyards, and demanding offshore marine infrastructure.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M8 3l4 8 5-5 5 15H2L8 3z\"\/><\/svg>\r\n <\/div>\r\n <h3>Geotechnical<\/h3>\r\n <p>Rock fall netting, soil stabilization, and cliff face condition assessments utilizing advanced and safe rope access techniques.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-3\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\r\n <\/div>\r\n <h3>Inspection Services<\/h3>\r\n <p>Including Conventional NDT, Phased Array, ACFM, TOFD, Guided-wave Ultrasound, Magnetic Flux Leakage, and Heat Treatment.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-1\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\r\n <\/div>\r\n <h3>Storage Tank Services<\/h3>\r\n <p>Specialized solutions for Ammonia Tank Inspection, precise Tank Calibration, comprehensive NDT Inspection, and structural Tank Repair.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"service-card reveal reveal-delay-2\">\r\n <div class=\"service-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87\"\/><path d=\"M16 3.13a4 4 0 010 7.75\"\/><\/svg>\r\n <\/div>\r\n <h3>Human Resource Services<\/h3>\r\n <p>Providing specialized manpower supply and highly trained expert teams for seamless operations during industrial shutdowns and turnarounds.<\/p>\r\n <a href=\"#contact-section\" class=\"service-link\">Learn More \u2192<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"rope-divider\"><div class=\"rope-divider-line\"><\/div><\/div>\r\n\r\n<section id=\"why\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"why-grid\">\r\n\r\n <div class=\"why-image-wrap reveal from-left\">\r\n <div class=\"why-image-main\">\r\n <img decoding=\"async\" src=\"https:\/\/bcwnew.bcw2026.com\/wp-content\/uploads\/2026\/03\/Untitled-design-20.png\" alt=\"Industrial rope access worker\" class=\"why-img-real\">\r\n <div class=\"why-img-overlay\">\r\n <div class=\"why-center-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"why-exp-badge\">\r\n <div class=\"exp-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"exp-text\">\r\n <div class=\"exp-num\">15+<\/div>\r\n <div class=\"exp-label\">Years of Experienced Management Team<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"why-badge\">\r\n <div class=\"badge-num\">100%<\/div>\r\n <div class=\"badge-text\">Safe, Reliable Execution by<br>Professionals<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"why-content reveal from-right\">\r\n <div class=\"overline\">Why Choose Us<\/div>\r\n <h2 class=\"section-title\">The <span>Smart Choice<\/span> for High-Rise Access<\/h2>\r\n <p class=\"section-sub\">\r\n Swing Expert combines technical mastery with industrial-grade safety standards \r\n to deliver results that traditional methods can't match \u2014 faster, cheaper, \r\n and with zero disruption to your operations.\r\n <\/p>\r\n\r\n <div class=\"why-benefits\">\r\n\r\n <div class=\"benefit-item\">\r\n <div class=\"benefit-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n <\/div>\r\n <div class=\"benefit-text\">\r\n <h4>Certified IRATA Technicians<\/h4>\r\n <p>All technicians hold internationally recognized IRATA Level 1\u20133 certifications with regular training updates.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"benefit-item\">\r\n <div class=\"benefit-icon\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/><path d=\"M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6\"\/><\/svg>\r\n <\/div>\r\n <div class=\"benefit-text\">\r\n <h4>Cost-Effective Access Solutions<\/h4>\r\n <p>Save up to 60% compared to traditional scaffolding. Faster setup, less disruption, and no permit headaches.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"benefit-item\">\r\n <div class=\"benefit-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"benefit-text\">\r\n <h4>100% Safety Compliance<\/h4>\r\n <p>Full compliance with OSHA, ANSI Z359, and international rope access safety standards on every project.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"benefit-item\">\r\n <div class=\"benefit-icon\">\r\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\r\n <\/div>\r\n <div class=\"benefit-text\">\r\n <h4>Rapid Project Execution<\/h4>\r\n <p>Mobilize within 24\u201348 hours. Our agile teams complete projects significantly faster than scaffolding alternatives.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"benefit-item\">\r\n <div class=\"benefit-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n <\/div>\r\n <div class=\"benefit-text\">\r\n <h4>No Scaffolding Required<\/h4>\r\n <p>Access any point on your structure without ground-level disruption. Ideal for occupied buildings and tight urban environments.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"stats\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"stats-grid\">\r\n\r\n \r\n <div class=\"stat-item reveal scale-in reveal-delay-2\">\r\n <div class=\"stat-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <\/div>\r\n <span class=\"stat-number\" data-target=\"15\" data-suffix=\"+\">0<\/span>\r\n <div class=\"stat-label\">Years of Experienced Management Team<\/div>\r\n <div class=\"stat-desc\">Pioneering rope access solutions with consistent excellence<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-item reveal scale-in reveal-delay-3\">\r\n <div class=\"stat-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n <\/div>\r\n <span class=\"stat-number\" data-target=\"100\" data-suffix=\"%\">0<\/span>\r\n <div class=\"stat-label\">Safe, Reliable Execution by Professionals<\/div>\r\n <div class=\"stat-desc\">Zero lost-time incidents across all project sites and environments<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-item reveal scale-in reveal-delay-4\">\r\n <div class=\"stat-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87\"\/><path d=\"M16 3.13a4 4 0 010 7.75\"\/><\/svg>\r\n <\/div>\r\n <span class=\"stat-number\" data-target=\"250\" data-suffix=\"+\">0<\/span>\r\n <div class=\"stat-label\">Happy Clients<\/div>\r\n <div class=\"stat-desc\">Trusted by property managers, developers, and facility teams worldwide<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"process\" class=\"section-pad\" style=\"background: var(--light-grey);\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"overline reveal\">How We Work<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">Our <span>Proven Process<\/span><\/h2>\r\n <p class=\"section-sub reveal reveal-delay-2\">\r\n From your first call to final sign-off, every step is engineered for efficiency, \r\n transparency, and exceptional results.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"process-timeline\">\r\n\r\n <div class=\"process-step reveal reveal-delay-1\">\r\n <div class=\"step-number-wrap\">\r\n <span class=\"step-number\">01<\/span>\r\n <div class=\"step-dot\"><\/div>\r\n <\/div>\r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <\/div>\r\n <div class=\"step-title\">Site Inspection<\/div>\r\n <p class=\"step-desc\">Detailed site survey and risk assessment by our senior technicians.<\/p>\r\n <\/div>\r\n\r\n <div class=\"process-step reveal reveal-delay-2\">\r\n <div class=\"step-number-wrap\">\r\n <span class=\"step-number\">02<\/span>\r\n <div class=\"step-dot\"><\/div>\r\n <\/div>\r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><polyline points=\"10 9 9 9 8 9\"\/><\/svg>\r\n <\/div>\r\n <div class=\"step-title\">Planning & Proposal<\/div>\r\n <p class=\"step-desc\">Custom method statement, safety plan, and transparent cost proposal.<\/p>\r\n <\/div>\r\n\r\n <div class=\"process-step reveal reveal-delay-3\">\r\n <div class=\"step-number-wrap\">\r\n <span class=\"step-number\">03<\/span>\r\n <div class=\"step-dot\"><\/div>\r\n <\/div>\r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n <\/div>\r\n <div class=\"step-title\">Execution<\/div>\r\n <p class=\"step-desc\">Skilled rope access team executes the work safely and efficiently.<\/p>\r\n <\/div>\r\n\r\n <div class=\"process-step reveal reveal-delay-4\">\r\n <div class=\"step-number-wrap\">\r\n <span class=\"step-number\">04<\/span>\r\n <div class=\"step-dot\"><\/div>\r\n <\/div>\r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"9 11 12 14 22 4\"\/><path d=\"M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11\"\/><\/svg>\r\n <\/div>\r\n <div class=\"step-title\">Quality Check<\/div>\r\n <p class=\"step-desc\">Supervisor-led quality inspection and client walkthrough at every stage.<\/p>\r\n <\/div>\r\n\r\n <div class=\"process-step reveal reveal-delay-5\">\r\n <div class=\"step-number-wrap\">\r\n <span class=\"step-number\">05<\/span>\r\n <div class=\"step-dot\"><\/div>\r\n <\/div>\r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n <\/div>\r\n <div class=\"step-title\">Handover & Report<\/div>\r\n <p class=\"step-desc\">Full project report, certifications, and warranty documentation delivered.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"safety\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"safety-grid\">\r\n\r\n <div class=\"safety-content reveal from-left\">\r\n <div class=\"overline\" style=\"color: var(--orange);\">Safety First<\/div>\r\n <h2 class=\"section-title light\">Our Commitment to <span>Zero Incidents<\/span><\/h2>\r\n <p class=\"section-sub\">\r\n Safety isn't a checklist \u2014 it's our core operating principle. \r\n Every team member, every tool, and every procedure is governed \r\n by the highest international standards.\r\n <\/p>\r\n\r\n <div class=\"cert-cards\">\r\n <div class=\"cert-card\">\r\n <div class=\"cert-icon\">\ud83c\udfc6<\/div>\r\n <div class=\"cert-title\">IRATA Certified<\/div>\r\n <div class=\"cert-desc\">IRATA Certified Rope Access Technicians \u2013 Delivering Safe Access and Professional Solutions at Every Height.<\/div>\r\n <\/div>\r\n <div class=\"cert-card\">\r\n <div class=\"cert-icon\">\u2699\ufe0f<\/div>\r\n <div class=\"cert-title\">OSHA Compliant<\/div>\r\n <div class=\"cert-desc\">Full adherence to OSHA 1926.502 safety standards<\/div>\r\n <\/div>\r\n <div class=\"cert-card\">\r\n <div class=\"cert-icon\">\ud83d\udee1\ufe0f<\/div>\r\n <div class=\"cert-title\">ISO 9001:2015<\/div>\r\n <div class=\"cert-desc\">Quality management systems certified operations<\/div>\r\n <\/div>\r\n <div class=\"cert-card\">\r\n <div class=\"cert-icon\">\u2705<\/div>\r\n <div class=\"cert-title\">ANSI Z359<\/div>\r\n <div class=\"cert-desc\">Fall protection equipment and system standards met<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"safety-visual reveal from-right\">\r\n <div class=\"safety-items-grid\">\r\n <div class=\"safety-item\">\r\n <span class=\"safety-item-icon\">\u26d1\ufe0f<\/span>\r\n <h4>Protective Helmets<\/h4>\r\n <p>EN397 rated impact helmets on every operative<\/p>\r\n <\/div>\r\n <div class=\"safety-item\">\r\n <span class=\"safety-item-icon\">\ud83e\udea2<\/span>\r\n <h4>Dual Rope System<\/h4>\r\n <p>Independent working and safety ropes always deployed<\/p>\r\n <\/div>\r\n <div class=\"safety-item\">\r\n <span class=\"safety-item-icon\">\ud83e\uddba<\/span>\r\n <h4>Full Body Harness<\/h4>\r\n <p>EN361 certified harnesses with regular load testing<\/p>\r\n <\/div>\r\n <div class=\"safety-item\">\r\n <span class=\"safety-item-icon\">\ud83d\udd12<\/span>\r\n <h4>Anchor Systems<\/h4>\r\n <p>Engineered anchor points rated to 10+ kN loading<\/p>\r\n <\/div>\r\n <div class=\"safety-item\">\r\n <span class=\"safety-item-icon\">\ud83d\udccb<\/span>\r\n <h4>Method Statements<\/h4>\r\n <p>Site-specific risk assessments for every project<\/p>\r\n <\/div>\r\n <div class=\"safety-item\">\r\n <span class=\"safety-item-icon\">\ud83d\udea8<\/span>\r\n <h4>Emergency Plans<\/h4>\r\n <p>Full evacuation and rescue procedures always in place<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"testimonials\" class=\"section-pad\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"overline reveal\">Client Feedback<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">What Our <span>Clients Say<\/span><\/h2>\r\n <p class=\"section-sub reveal reveal-delay-2\">\r\n Real feedback from property managers, facility directors, and \r\n project managers who trust Swing Expert for their most critical work.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"testimonials-slider reveal\">\r\n <div class=\"testimonials-track\" id=\"testimonialsTrack\">\r\n\r\n <div class=\"testimonial-slide\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"star-rating\">\r\n <span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span>\r\n <\/div>\r\n <div class=\"quote-mark\">\"<\/div>\r\n <p class=\"testimonial-text\">Swing Expert completed our 32-story facade inspection in just 4 days. Traditional scaffolding would have taken 3 weeks and cost triple. Absolutely professional team \u2014 every safety protocol followed to the letter.<\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">JM<\/div>\r\n <div class=\"author-info\">\r\n <div class=\"name\">James Morrison<\/div>\r\n <div class=\"role\">Facilities Director, Skyline Properties<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-card\">\r\n <div class=\"star-rating\">\r\n <span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span>\r\n <\/div>\r\n <div class=\"quote-mark\">\"<\/div>\r\n <p class=\"testimonial-text\">The glass cleaning results were exceptional. 48 floors, spotless finish, and they worked around our business hours perfectly. Tenants didn't even notice the team was there. We've signed an annual contract.<\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">SL<\/div>\r\n <div class=\"author-info\">\r\n <div class=\"name\">Sarah Lin<\/div>\r\n <div class=\"role\">Property Manager, Metro Commercial<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-card\">\r\n <div class=\"star-rating\">\r\n <span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span>\r\n <\/div>\r\n <div class=\"quote-mark\">\"<\/div>\r\n <p class=\"testimonial-text\">Our industrial chimney needed urgent inspection. Swing Expert mobilized within 24 hours, delivered a comprehensive structural report, and identified issues that saved us from a costly shutdown. Exceptional.<\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">RK<\/div>\r\n <div class=\"author-info\">\r\n <div class=\"name\">Robert Kline<\/div>\r\n <div class=\"role\">Plant Manager, Delta Industrial<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-slide\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"star-rating\">\r\n <span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span>\r\n <\/div>\r\n <div class=\"quote-mark\">\"<\/div>\r\n <p class=\"testimonial-text\">The painting team completed our 20-story residential tower in under 2 weeks. The coating quality is outstanding \u2014 5 years of weather protection guaranteed. Pricing was incredibly competitive.<\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">AT<\/div>\r\n <div class=\"author-info\">\r\n <div class=\"name\">Ahmed Tahir<\/div>\r\n <div class=\"role\">Developer, Pinnacle Real Estate<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-card\">\r\n <div class=\"star-rating\">\r\n <span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span>\r\n <\/div>\r\n <div class=\"quote-mark\">\"<\/div>\r\n <p class=\"testimonial-text\">I was skeptical about rope access vs scaffolding, but after our first project with Swing Expert, I'm a complete convert. Faster, cleaner, safer, and the team communication throughout was outstanding.<\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">MC<\/div>\r\n <div class=\"author-info\">\r\n <div class=\"name\">Maria Chen<\/div>\r\n <div class=\"role\">Operations Manager, Pacific Towers<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-card\">\r\n <div class=\"star-rating\">\r\n <span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span>\r\n <\/div>\r\n <div class=\"quote-mark\">\"<\/div>\r\n <p class=\"testimonial-text\">Swing Expert handled our offshore platform corrosion survey flawlessly. The detailed photographic report and recommendations were exactly what our engineering team needed. Highly recommended.<\/p>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">NB<\/div>\r\n <div class=\"author-info\">\r\n <div class=\"name\">Nils Bergstrom<\/div>\r\n <div class=\"role\">HSE Manager, North Sea Energy<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"slider-controls\">\r\n <button class=\"slider-btn\" id=\"prevBtn\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\r\n <\/button>\r\n <div class=\"slider-dots\">\r\n <div class=\"slider-dot active\" data-slide=\"0\"><\/div>\r\n <div class=\"slider-dot\" data-slide=\"1\"><\/div>\r\n <\/div>\r\n <button class=\"slider-btn\" id=\"nextBtn\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"cta\" class=\"section-pad-sm\">\r\n <div class=\"container\">\r\n <div class=\"cta-inner\">\r\n <div class=\"cta-text reveal from-left\">\r\n <h2 class=\"section-title\" style=\"color: white; font-size: clamp(36px, 4.5vw, 58px);\">\r\n Need Rope Access Experts<br>for Your Building?\r\n <\/h2>\r\n <p style=\"font-size: 17px; color: rgba(255,255,255,0.8); margin-top: 16px;\">\r\n Get a free site assessment and no-obligation quote within 24 hours. \r\n Our team is ready to mobilize anywhere.\r\n <\/p>\r\n <\/div>\r\n <div class=\"cta-actions reveal from-right\">\r\n <a href=\"#contact-section\" class=\"btn btn-white\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 11 12 14 22 4\"\/><path d=\"M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11\"\/><\/svg>\r\n Request Inspection\r\n <\/a>\r\n <a href=\"#contact-section\" class=\"btn btn-outline-white\">Contact Us<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"contact-section\" class=\"section-pad\" style=\"background: var(--light-grey);\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"overline reveal\">Get In Touch<\/div>\r\n <h2 class=\"section-title reveal reveal-delay-1\">Let's Discuss <span>Your Project<\/span><\/h2>\r\n <p class=\"section-sub reveal reveal-delay-2\">\r\n Fill out the form and our team will get back to you within 2 business hours \r\n with a tailored solution for your specific access needs.\r\n <\/p>\r\n <\/div>\r\n\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;\" class=\"contact-layout\">\r\n\r\n <div class=\"reveal from-left\">\r\n <form id=\"contactForm\" style=\"background: white; border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--card-shadow);\">\r\n <h3 style=\"font-family: Montserrat, sans-serif; font-size: 22px; font-weight: 700; color: var(--dark-2); margin-bottom: 32px;\">\r\n Request a Free Quote\r\n <\/h3>\r\n\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">First Name *<\/label>\r\n <input type=\"text\" class=\"form-input\" placeholder=\"John\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Last Name *<\/label>\r\n <input type=\"text\" class=\"form-input\" placeholder=\"Smith\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\" style=\"margin-bottom: 16px;\">\r\n <label class=\"form-label\">Email Address *<\/label>\r\n <input type=\"email\" class=\"form-input\" placeholder=\"info@swingexpert.sa\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\" style=\"margin-bottom: 16px;\">\r\n <label class=\"form-label\">Phone Number<\/label>\r\n <input type=\"tel\" class=\"form-input\" placeholder=\"Contact number;057 903 4706\">\r\n <\/div>\r\n\r\n <div class=\"form-group\" style=\"margin-bottom: 16px;\">\r\n <label class=\"form-label\">Service Required *<\/label>\r\n <select class=\"form-input\" required>\r\n <option value=\"\" disabled selected>Select a service<\/option>\r\n <option>Rope Access Maintenance<\/option>\r\n <option>Building Inspection<\/option>\r\n <option>Glass Cleaning<\/option>\r\n <option>Painting & Coating<\/option>\r\n <option>Fa\u00e7ade Repair<\/option>\r\n <option>Industrial Solutions<\/option>\r\n <option>Oil and Gas<\/option>\r\n <option>Civil<\/option>\r\n <option>Wind<\/option>\r\n <option>Marine<\/option>\r\n <option>Geotechnical<\/option>\r\n <option>Inspection Services<\/option>\r\n <option>Storage Tank Services<\/option>\r\n <option>Human Resource Services<\/option>\r\n <option>Other<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\" style=\"margin-bottom: 28px;\">\r\n <label class=\"form-label\">Project Details<\/label>\r\n <textarea class=\"form-input\" rows=\"4\" placeholder=\"Tell us about your building, number of floors, scope of work, and any specific requirements...\"><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"width: 100%; justify-content: center; font-size: 14px; padding: 18px;\">\r\n Send Quote Request \u2192\r\n <\/button>\r\n\r\n <p style=\"font-size: 12px; color: var(--grey); text-align: center; margin-top: 16px;\">\r\n \ud83d\udd12 Your information is secure and never shared with third parties.\r\n <\/p>\r\n <\/form>\r\n\r\n <div id=\"formSuccess\" style=\"display: none; background: white; border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--card-shadow); text-align: center;\">\r\n <div style=\"width: 72px; height: 72px; border-radius: 50%; background: rgba(34,197,94,0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#22C55E\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <h3 style=\"font-family: Montserrat, sans-serif; font-size: 22px; font-weight: 700; color: var(--dark-2); margin-bottom: 12px;\">Request Sent Successfully!<\/h3>\r\n <p style=\"color: var(--grey); font-size: 15px; line-height: 1.7;\">Our team will review your project details and reach out within 2 business hours with a tailored quote.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal from-right\" style=\"display: flex; flex-direction: column; gap: 24px;\">\r\n\r\n <div style=\"background: var(--dark-2); border-radius: var(--radius-lg); padding: 36px; display: flex; align-items: flex-start; gap: 20px;\">\r\n <div style=\"width: 48px; height: 48px; border-radius: 12px; background: rgba(255,107,0,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF6B00\" stroke-width=\"2\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 014.69 12 19.79 19.79 0 011.61 3.4 2 2 0 013.6 1.22h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L7.91 8.91a16 16 0 006.29 6.29l.91-.91a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <div style=\"font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 6px;\">Call Us<\/div>\r\n <div style=\"font-family: Barlow Condensed, sans-serif; font-size: 26px; font-weight: 700; color: white; margin-bottom: 4px;\"> 057 903 4706 & 0542689183<\/div>\r\n <div style=\"font-size: 13px; color: rgba(255,255,255,0.4);\">Available Mon\u2013Sat, 24\/7<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"background: var(--dark-2); border-radius: var(--radius-lg); padding: 36px; display: flex; align-items: flex-start; gap: 20px;\">\r\n <div style=\"width: 48px; height: 48px; border-radius: 12px; background: rgba(255,107,0,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF6B00\" stroke-width=\"2\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <div style=\"font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 6px;\">Email Us<\/div>\r\n <div style=\"font-family: Barlow Condensed, sans-serif; font-size: 22px; font-weight: 700; color: white; margin-bottom: 4px;\">info@swingexpert.sa<\/div>\r\n <div style=\"font-size: 13px; color: rgba(255,255,255,0.4);\">We reply within 2 business hours<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"background: var(--dark-2); border-radius: var(--radius-lg); padding: 36px; display: flex; align-items: flex-start; gap: 20px;\">\r\n <div style=\"width: 48px; height: 48px; border-radius: 12px; background: rgba(255,107,0,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF6B00\" stroke-width=\"2\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <div style=\"font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 6px;\">Office Address<\/div>\r\n <div style=\"font-family: Barlow Condensed, sans-serif; font-size: 22px; font-weight: 700; color: white; margin-bottom: 4px;\">Makkah Almukarama Street <br>\r\nAl Dana Dist<br>\r\nBuilding No 3883<br>\r\nPostal Code 35514 <br>\r\nAl Jubail <br>\r\nSaudi Arabia\r\n<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"background: linear-gradient(135deg, #1a2530, #2d3d4d); border-radius: var(--radius-lg); height: 200px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,107,0,0.2); position: relative; overflow: hidden; cursor: pointer;\">\r\n <div style=\"text-align: center; z-index: 1;\">\r\n <div style=\"font-size: 32px; margin-bottom: 8px;\">\ud83d\udccd<\/div>\r\n <div style=\"font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.5);\">View on Google Maps<\/div>\r\n <\/div>\r\n <div style=\"position: absolute; inset: 0; background-image: linear-gradient(rgba(255,107,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,107,0,0.05) 1px, transparent 1px); background-size: 40px 40px;\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer id=\"footer\">\r\n <div class=\"footer-top-line\"><\/div>\r\n\r\n <div class=\"footer-main\">\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n\r\n <div class=\"footer-brand\">\r\n <div class=\"footer-logo\">\r\n <div class=\"nav-logo-icon\">SE<\/div>\r\n <div class=\"nav-logo-text\">\r\n <span class=\"brand\">Swing Expert<\/span>\r\n <span class=\"tagline-nav\">Rope Access Services<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"footer-tagline\">\r\n Working at heights. Delivering excellence. \r\n Professional rope access solutions trusted by industry leaders worldwide since 2009.\r\n <\/p>\r\n <div class=\"social-links\">\r\n <a href=\"#\" class=\"social-link\" aria-label=\"LinkedIn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z\"\/><rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"\/><circle cx=\"4\" cy=\"4\" r=\"2\"\/><\/svg>\r\n <\/a>\r\n <a href=\"#\" class=\"social-link\" aria-label=\"Instagram\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg>\r\n <\/a>\r\n <a href=\"#\" class=\"social-link\" aria-label=\"Facebook\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"#\" class=\"social-link\" aria-label=\"YouTube\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22.54 6.42a2.78 2.78 0 00-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 00-1.95 1.96A29 29 0 001 12a29 29 0 00.46 5.58A2.78 2.78 0 003.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 001.95-1.95A29 29 0 0023 12a29 29 0 00-.46-5.58z\"\/><polygon points=\"9.75 15.02 15.5 12 9.75 8.98 9.75 15.02\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n <h4>Navigation<\/h4>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#hero\">Home<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#why\">About Us<\/a><\/li>\r\n <li><a href=\"#safety\">Safety<\/a><\/li>\r\n <li><a href=\"#contact-section\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n <h4>Our Services<\/h4>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#services\">Rope Access Maintenance<\/a><\/li>\r\n <li><a href=\"#services\">Building Inspection<\/a><\/li>\r\n <li><a href=\"#services\">Glass Cleaning<\/a><\/li>\r\n <li><a href=\"#services\">Painting & Coating<\/a><\/li>\r\n <li><a href=\"#services\">Fa\u00e7ade Repair<\/a><\/li>\r\n <li><a href=\"#services\">Industrial Solutions<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n <h4>Contact Details<\/h4>\r\n <div class=\"contact-items\">\r\n <div class=\"contact-item\">\r\n <div class=\"contact-item-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 014.69 12 19.79 19.79 0 011.61 3.4 2 2 0 013.6 1.22h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L7.91 8.91a16 16 0 006.29 6.29l.91-.91a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"contact-item-text\">\r\n <strong>Phone<\/strong>\r\n 05709034706\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-item\">\r\n <div class=\"contact-item-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\r\n <\/div>\r\n <div class=\"contact-item-text\">\r\n <strong>Email<\/strong>\r\n info@swingexpert.sa\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-item\">\r\n <div class=\"contact-item-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n <\/div>\r\n <div class=\"contact-item-text\">\r\n <strong>Address<\/strong>\r\n Makkah Almukarama Street \r\nAl Dana Dist\r\nBuilding No 3883\r\nPostal Code 35514 \r\nAl Jubail \r\nSaudi Arabia\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-map\">\r\n \ud83d\udccd Google Maps Location\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-bottom\">\r\n <div class=\"container\">\r\n <div class=\"footer-bottom-inner\">\r\n <p class=\"footer-copy\">\u00a9 2025 Swing Expert. All Rights Reserved. Designed with precision.<\/p>\r\n <div class=\"footer-legal\">\r\n <a href=\"#\">Privacy Policy<\/a>\r\n <a href=\"#\">Terms of Service<\/a>\r\n <a href=\"#\">Safety Standards<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n.form-group { display: flex; flex-direction: column; }\r\n.form-label {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n color: var(--dark-3);\r\n margin-bottom: 8px;\r\n}\r\n.form-input {\r\n font-family: 'Inter', sans-serif;\r\n font-size: 14px;\r\n color: var(--dark-2);\r\n background: var(--light-grey);\r\n border: 1.5px solid #E8E8E8;\r\n border-radius: 6px;\r\n padding: 13px 16px;\r\n outline: none;\r\n transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;\r\n width: 100%;\r\n resize: vertical;\r\n -webkit-appearance: none;\r\n}\r\n.form-input::placeholder { color: #BBBBBB; }\r\n.form-input:focus {\r\n border-color: var(--orange);\r\n background: #FFFFFF;\r\n box-shadow: 0 0 0 3px rgba(255,107,0,0.1);\r\n}\r\nselect.form-input { cursor: pointer; }\r\n\r\n\/* Contact layout responsive *\/\r\n@media (max-width: 768px) {\r\n .contact-layout {\r\n grid-template-columns: 1fr !important;\r\n gap: 40px !important;\r\n }\r\n}\r\n.nav-logo-img {\r\n max-height: 80px; \/* Adjust this value to make your logo bigger or smaller *\/\r\n width: auto;\r\n object-fit: contain;\r\n }\r\n\r\n \/* Mobile adjustment for the logo *\/\r\n @media (max-width: 768px) {\r\n .nav-logo-img {\r\n max-height: 65px; \r\n }\r\n }\r\n\r\n<\/style>\r\n\r\n<script>\r\n'use strict';\r\n\r\n\/* =============================================\r\n LOADER\r\n============================================= *\/\r\nwindow.addEventListener('load', function() {\r\n setTimeout(function() {\r\n document.getElementById('loader').classList.add('hidden');\r\n }, 1800);\r\n});\r\n\r\n\/* =============================================\r\n NAVBAR SCROLL BEHAVIOR\r\n============================================= *\/\r\nconst navbar = document.getElementById('navbar');\r\nconst backTop = document.getElementById('back-top');\r\n\r\nwindow.addEventListener('scroll', function() {\r\n const scrollY = window.scrollY;\r\n\r\n \/\/ Navbar style\r\n if (scrollY > 80) {\r\n navbar.classList.add('scrolled');\r\n } else {\r\n navbar.classList.remove('scrolled');\r\n }\r\n\r\n \/\/ Back to top\r\n if (scrollY > 600) {\r\n backTop.classList.add('visible');\r\n } else {\r\n backTop.classList.remove('visible');\r\n }\r\n}, { passive: true });\r\n\r\nbackTop.addEventListener('click', function() {\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n});\r\n\r\n\/* =============================================\r\n MOBILE MENU\r\n============================================= *\/\r\nconst hamburger = document.getElementById('hamburger');\r\nconst mobileMenu = document.getElementById('mobileMenu');\r\n\r\nfunction toggleMobileMenu() {\r\n hamburger.classList.toggle('open');\r\n mobileMenu.classList.toggle('open');\r\n document.body.style.overflow = mobileMenu.classList.contains('open') ? 'hidden' : '';\r\n}\r\n\r\nfunction closeMobileMenu() {\r\n hamburger.classList.remove('open');\r\n mobileMenu.classList.remove('open');\r\n document.body.style.overflow = '';\r\n}\r\n\r\n\/* =============================================\r\n SCROLL REVEAL ANIMATIONS\r\n============================================= *\/\r\n(function initReveal() {\r\n const reveals = document.querySelectorAll('.reveal');\r\n\r\n if (!reveals.length) return;\r\n\r\n const observer = new IntersectionObserver(function(entries) {\r\n entries.forEach(function(entry) {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n \/\/ Unobserve after animation to save resources\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, {\r\n threshold: 0.12,\r\n rootMargin: '0px 0px -60px 0px'\r\n });\r\n\r\n reveals.forEach(function(el) {\r\n observer.observe(el);\r\n });\r\n})();\r\n\r\n\/* =============================================\r\n COUNTER ANIMATION\r\n============================================= *\/\r\n(function initCounters() {\r\n const counters = document.querySelectorAll('.stat-number[data-target]');\r\n\r\n if (!counters.length) return;\r\n\r\n function animateCounter(el) {\r\n const target = parseInt(el.getAttribute('data-target'));\r\n const suffix = el.getAttribute('data-suffix') || '';\r\n const duration = 2200;\r\n const startTime = performance.now();\r\n\r\n function update(currentTime) {\r\n const elapsed = currentTime - startTime;\r\n const progress = Math.min(elapsed \/ duration, 1);\r\n \/\/ Easing: easeOutExpo\r\n const eased = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);\r\n const current = Math.floor(eased * target);\r\n\r\n el.textContent = current + suffix;\r\n\r\n if (progress < 1) {\r\n requestAnimationFrame(update);\r\n } else {\r\n el.textContent = target + suffix;\r\n }\r\n }\r\n\r\n requestAnimationFrame(update);\r\n }\r\n\r\n const statsSection = document.getElementById('stats');\r\n if (!statsSection) return;\r\n\r\n let counted = false;\r\n\r\n const statsObserver = new IntersectionObserver(function(entries) {\r\n if (entries[0].isIntersecting && !counted) {\r\n counted = true;\r\n \/\/ Stagger each counter start\r\n counters.forEach(function(counter, i) {\r\n setTimeout(function() {\r\n animateCounter(counter);\r\n }, i * 180);\r\n });\r\n statsObserver.disconnect();\r\n }\r\n }, { threshold: 0.3 });\r\n\r\n statsObserver.observe(statsSection);\r\n})();\r\n\r\n\/* =============================================\r\n PROJECT FILTER\r\n============================================= *\/\r\n(function initFilter() {\r\n const filterBtns = document.querySelectorAll('.filter-btn');\r\n const projectCards = document.querySelectorAll('.project-card');\r\n\r\n filterBtns.forEach(function(btn) {\r\n btn.addEventListener('click', function() {\r\n \/\/ Update active state\r\n filterBtns.forEach(function(b) { b.classList.remove('active'); });\r\n btn.classList.add('active');\r\n\r\n const filter = btn.getAttribute('data-filter');\r\n\r\n projectCards.forEach(function(card) {\r\n const category = card.getAttribute('data-category');\r\n const matches = filter === 'all' || category === filter;\r\n\r\n if (matches) {\r\n card.style.opacity = '0';\r\n card.style.transform = 'scale(0.95)';\r\n card.style.display = 'block';\r\n requestAnimationFrame(function() {\r\n requestAnimationFrame(function() {\r\n card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';\r\n card.style.opacity = '1';\r\n card.style.transform = 'scale(1)';\r\n });\r\n });\r\n } else {\r\n card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\r\n card.style.opacity = '0';\r\n card.style.transform = 'scale(0.95)';\r\n setTimeout(function() {\r\n card.style.display = 'none';\r\n }, 300);\r\n }\r\n });\r\n });\r\n });\r\n})();\r\n\r\n\/* =============================================\r\n TESTIMONIAL SLIDER\r\n============================================= *\/\r\n(function initSlider() {\r\n const track = document.getElementById('testimonialsTrack');\r\n const slides = track ? track.querySelectorAll('.testimonial-slide') : [];\r\n const dots = document.querySelectorAll('.slider-dot');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n\r\n if (!track || slides.length === 0) return;\r\n\r\n let current = 0;\r\n let isAnimating = false;\r\n let autoInterval;\r\n\r\n function goToSlide(index) {\r\n if (isAnimating) return;\r\n isAnimating = true;\r\n\r\n current = (index + slides.length) % slides.length;\r\n track.style.transform = 'translateX(-' + (current * 100) + '%)';\r\n\r\n dots.forEach(function(dot, i) {\r\n dot.classList.toggle('active', i === current);\r\n });\r\n\r\n setTimeout(function() { isAnimating = false; }, 650);\r\n }\r\n\r\n function nextSlide() { goToSlide(current + 1); }\r\n function prevSlide() { goToSlide(current - 1); }\r\n\r\n function startAuto() {\r\n autoInterval = setInterval(nextSlide, 5000);\r\n }\r\n\r\n function resetAuto() {\r\n clearInterval(autoInterval);\r\n startAuto();\r\n }\r\n\r\n if (nextBtn) nextBtn.addEventListener('click', function() { nextSlide(); resetAuto(); });\r\n if (prevBtn) prevBtn.addEventListener('click', function() { prevSlide(); resetAuto(); });\r\n\r\n dots.forEach(function(dot) {\r\n dot.addEventListener('click', function() {\r\n const slideIndex = parseInt(dot.getAttribute('data-slide'));\r\n goToSlide(slideIndex);\r\n resetAuto();\r\n });\r\n });\r\n\r\n \/\/ Touch\/swipe support\r\n let touchStartX = 0;\r\n track.addEventListener('touchstart', function(e) {\r\n touchStartX = e.touches[0].clientX;\r\n }, { passive: true });\r\n\r\n track.addEventListener('touchend', function(e) {\r\n const diff = touchStartX - e.changedTouches[0].clientX;\r\n if (Math.abs(diff) > 50) {\r\n diff > 0 ? nextSlide() : prevSlide();\r\n resetAuto();\r\n }\r\n }, { passive: true });\r\n\r\n startAuto();\r\n})();\r\n\r\n\/* =============================================\r\n CONTACT FORM\r\n============================================= *\/\r\n(function initForm() {\r\n const form = document.getElementById('contactForm');\r\n const success = document.getElementById('formSuccess');\r\n\r\n if (!form) return;\r\n\r\n form.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n\r\n const btn = form.querySelector('button[type=\"submit\"]');\r\n const originalText = btn.innerHTML;\r\n\r\n \/\/ Loading state\r\n btn.innerHTML = '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2.5\" style=\"animation: spin 1s linear infinite;\"><path d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" opacity=\"0.25\"\/><path d=\"M21 12a9 9 0 00-9-9\"\/><\/svg> Sending...';\r\n btn.style.opacity = '0.8';\r\n btn.disabled = true;\r\n\r\n \/\/ Simulate submission\r\n setTimeout(function() {\r\n form.style.opacity = '0';\r\n form.style.transform = 'scale(0.97)';\r\n form.style.transition = 'opacity 0.3s, transform 0.3s';\r\n\r\n setTimeout(function() {\r\n form.style.display = 'none';\r\n success.style.display = 'block';\r\n success.style.opacity = '0';\r\n success.style.transform = 'scale(0.97)';\r\n success.style.transition = 'opacity 0.4s, transform 0.4s';\r\n\r\n requestAnimationFrame(function() {\r\n requestAnimationFrame(function() {\r\n success.style.opacity = '1';\r\n success.style.transform = 'scale(1)';\r\n });\r\n });\r\n }, 300);\r\n }, 1800);\r\n });\r\n})();\r\n\r\n\/* =============================================\r\n SMOOTH ANCHOR SCROLLING\r\n============================================= *\/\r\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(function(anchor) {\r\n anchor.addEventListener('click', function(e) {\r\n const targetId = this.getAttribute('href');\r\n if (targetId === '#') return;\r\n\r\n const target = document.querySelector(targetId);\r\n if (target) {\r\n e.preventDefault();\r\n const navH = parseInt(getComputedStyle(document.documentElement)\r\n .getPropertyValue('--nav-h')) || 80;\r\n\r\n const targetTop = target.getBoundingClientRect().top \r\n + window.pageYOffset - navH;\r\n\r\n window.scrollTo({\r\n top: targetTop,\r\n behavior: 'smooth'\r\n });\r\n }\r\n });\r\n});\r\n\r\n\/* =============================================\r\n PARALLAX HERO\r\n============================================= *\/\r\n(function initParallax() {\r\n const heroVisual = document.querySelector('.hero-visual');\r\n if (!heroVisual || window.matchMedia('(max-width: 768px)').matches) return;\r\n\r\n window.addEventListener('scroll', function() {\r\n const scrolled = window.scrollY;\r\n if (scrolled < window.innerHeight) {\r\n heroVisual.style.transform = 'translateY(' + (scrolled * 0.4) + 'px)';\r\n }\r\n }, { passive: true });\r\n})();\r\n\r\n\/* =============================================\r\n NAVBAR ACTIVE LINK TRACKING\r\n============================================= *\/\r\n(function initActiveNav() {\r\n const sections = document.querySelectorAll('section[id]');\r\n const navLinks = document.querySelectorAll('.nav-links a');\r\n\r\n function updateActive() {\r\n const scrollPos = window.scrollY + 120;\r\n\r\n sections.forEach(function(section) {\r\n const top = section.offsetTop;\r\n const bottom = top + section.offsetHeight;\r\n const id = section.getAttribute('id');\r\n\r\n if (scrollPos >= top && scrollPos < bottom) {\r\n navLinks.forEach(function(link) {\r\n link.style.color = '';\r\n if (link.getAttribute('href') === '#' + id) {\r\n link.style.color = 'var(--orange)';\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n window.addEventListener('scroll', updateActive, { passive: true });\r\n updateActive();\r\n})();\r\n\r\n\/* =============================================\r\n ADD SPIN KEYFRAME FOR LOADER\r\n============================================= *\/\r\nconst spinStyle = document.createElement('style');\r\nspinStyle.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';\r\ndocument.head.appendChild(spinStyle);\r\n\r\n\/* =============================================\r\n CARD TILT EFFECT (subtle 3D on hover)\r\n============================================= *\/\r\n(function initTilt() {\r\n \/\/ Only on desktop\r\n if (window.matchMedia('(max-width: 1024px)').matches) return;\r\n\r\n const cards = document.querySelectorAll('.service-card, .testimonial-card');\r\n\r\n cards.forEach(function(card) {\r\n card.addEventListener('mousemove', function(e) {\r\n const rect = card.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n const centerX = rect.width \/ 2;\r\n const centerY = rect.height \/ 2;\r\n const rotateX = ((y - centerY) \/ centerY) * -4;\r\n const rotateY = ((x - centerX) \/ centerX) * 4;\r\n\r\n card.style.transform = \r\n 'translateY(-8px) perspective(600px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)';\r\n });\r\n\r\n card.addEventListener('mouseleave', function() {\r\n card.style.transform = '';\r\n card.style.transition = 'transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s, border-color 0.35s';\r\n });\r\n });\r\n})();\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f8676ca e-con-full e-flex e-con e-child\" data-id=\"f8676ca\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Swing Expert | Professional Rope Access Services SWING EXPERT Home Services About Contact Get Free Quote Home Services About Contact 0579034706 Get Free Quote Certified Rope Access Specialists PROFESSIONAL ROPE ACCESS SOLUTIONS FOR HIGH-RISE Certified technicians delivering safe, efficient, and cost-effective access solutions for commercial and industrial structures \u2014 no scaffolding required. 15+ Years of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/swingexpert.sa\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swingexpert.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swingexpert.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swingexpert.sa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/swingexpert.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":97,"href":"https:\/\/swingexpert.sa\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/swingexpert.sa\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/135"}],"wp:attachment":[{"href":"https:\/\/swingexpert.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}