Files
caf-academy/program-muaythai.html
2026-08-18 22:58:59 +03:00

814 lines
51 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>المواي تاي للأطفال والناشئين — أكاديمية الكاف الرياضية</title>
<meta name="description" content="برنامج المواي تاي (الملاكمة التايلندية) للأطفال والناشئين من 7 إلى 16 سنة في أكاديمية الكاف الرياضية بالرياض، بإشراف مدربين متخصصين. احجز حصة تجريبية مجانية.">
<link rel="icon" type="image/png" href="caf-logo.png">
<meta property="og:type" content="website">
<meta property="og:locale" content="ar_SA">
<meta property="og:title" content="المواي تاي للأطفال والناشئين — أكاديمية الكاف الرياضية">
<meta property="og:description" content="برنامج المواي تاي (الملاكمة التايلندية) للأطفال والناشئين من 7 إلى 16 سنة في أكاديمية الكاف الرياضية بالرياض، بإشراف مدربين متخصصين. احجز حصة تجريبية مجانية.">
<meta property="og:image" content="caf-logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
--navy:#18253A; /* navy blue — sampled from the new logo */
--navy-deep:#071A38; /* deepest navy — from the new logo shield fill */
--orange:#B8923E; /* refined antique gold — brightened from logo for UI legibility */
--gold:#8F703A; /* raw brand gold — exact logo sample */
--gold-light:#E8D6A8; /* light gold tint for subtle fills */
--bg:#F7F5F1; /* warm off-white, echoes the gold warmth */
--surface:#EFEBE3;
--text:#221C33;
--gray:#6E6579;
--green:#B8923E; /* CTA color now uses brand gold, not an invented green */
--white:#FFFFFF;
--black:#0A0A0C;
--radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
font-family:'Cairo',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.7;
overflow-x:hidden;
}
.num{font-family:'Poppins',sans-serif;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img,svg{display:block;max-width:100%;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);display:inline-block;}
h1,h2,h3{font-family:'Cairo',sans-serif;font-weight:800;color:var(--navy);}
.section-title{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px;}
.section-lead{color:var(--gray);font-size:16px;max-width:620px;margin-bottom:44px;}
.btn{
display:inline-flex;align-items:center;gap:10px;
font-family:'Cairo',sans-serif;font-weight:700;font-size:15px;
padding:15px 30px;border-radius:100px;border:none;cursor:pointer;
transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 24px -8px rgba(46,204,113,.55);}
.btn-primary:hover{box-shadow:0 14px 30px -8px rgba(46,204,113,.7);}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-navy{background:var(--navy);color:#fff;}
/* ===== HEADER ===== */
header{
position:sticky;top:0;z-index:50;
background:rgba(24,37,58,.82);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;color:#fff;}
.logo-badge{
width:60px;height:60px;border-radius:12px;
background:transparent;
display:flex;align-items:center;justify-content:center;overflow:hidden;
flex-shrink:0;
}
.logo-badge img{width:100%;height:100%;object-fit:contain;padding:2px;}
nav ul{display:flex;gap:34px;font-weight:600;font-size:15px;}
nav a{position:relative;color:#fff;transition:color .2s;}
nav a:hover{color:var(--orange);}
.header-cta{display:flex;align-items:center;gap:14px;}
.burger{display:none;}
/* ===== HERO ===== */
.hero{
position:relative;color:#fff;overflow:hidden;
background:
radial-gradient(1100px 500px at 85% -10%, rgba(255,107,53,.35), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(255,193,69,.22), transparent 60%),
linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, #2E4468 100%);
padding:96px 0 110px;
}
.hero::after{
content:"";position:absolute;inset:0;opacity:.10;
background-image:
repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 34px);
pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;}
.hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
padding:8px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:22px;
}
.hero-eyebrow span.dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;}
.hero h1{
font-size:clamp(34px,4.6vw,56px);color:#fff;line-height:1.28;font-weight:900;margin-bottom:20px;
}
.hero h1 em{font-style:normal;color:var(--gold);}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.78);max-width:520px;margin-bottom:34px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px;}
.hero-meta{display:flex;gap:30px;flex-wrap:wrap;}
.hero-meta div{display:flex;flex-direction:column;gap:2px;}
.hero-meta .n{font-family:'Poppins';font-weight:800;font-size:26px;color:var(--gold);}
.hero-meta .l{font-size:12.5px;color:rgba(255,255,255,.65);}
/* Hero visual: signature element = the real crest, glowing, with a couple of orbiting sport marks */
.hero-visual{position:relative;height:420px;display:flex;align-items:center;justify-content:center;}
.crest-glow{
position:absolute;width:360px;height:360px;border-radius:50%;
background:radial-gradient(circle, rgba(184,146,62,.30), transparent 68%);
filter:blur(4px);
}
.crest-main{
position:relative;width:300px;height:300px;object-fit:contain;
filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
animation:crestFloat 7s ease-in-out infinite;
}
@keyframes crestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion: reduce){.crest-main{animation:none;}}
.badge-orbit{position:absolute;inset:0;}
.sport-badge{
position:absolute;width:96px;height:96px;border-radius:26px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;
box-shadow:0 20px 40px -18px rgba(0,0,0,.5);
animation:float 6s ease-in-out infinite;
}
.sport-badge svg{width:44px;height:44px;}
.sport-badge.b1{top:6%;right:8%;animation-delay:0s;background:rgba(255,107,53,.18);border-color:rgba(255,107,53,.4);}
.sport-badge.b2{top:34%;right:46%;animation-delay:.6s;background:rgba(255,193,69,.18);border-color:rgba(255,193,69,.4);width:120px;height:120px;}
.sport-badge.b2 svg{width:56px;height:56px;}
.sport-badge.b3{top:2%;right:52%;animation-delay:1.1s;}
.sport-badge.b4{bottom:12%;right:4%;animation-delay:1.6s;}
.sport-badge.b5{bottom:2%;right:38%;animation-delay:2.1s;}
.sport-badge.b6{top:52%;right:2%;animation-delay:2.6s;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion: reduce){.sport-badge{animation:none;}}
/* ===== TRUST BAR ===== */
.trust{background:var(--navy);padding:22px 0;}
.trust .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;color:rgba(255,255,255,.85);}
.trust-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;}
.trust-item svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;}
section{padding:96px 0;}
.alt{background:var(--surface);}
/* ===== ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.about-visual{
aspect-ratio:1/1;border-radius:28px;
background:linear-gradient(160deg,var(--navy) 0%, #2E4468 100%);
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.about-visual .quote{color:#fff;text-align:center;padding:40px;font-weight:800;font-size:24px;position:relative;z-index:2;}
.about-visual::before{
content:"";position:absolute;width:340px;height:340px;border-radius:50%;
border:1px dashed rgba(255,255,255,.25);top:50%;left:50%;transform:translate(-50%,-50%);
}
.about-visual::after{
content:"";position:absolute;width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle, rgba(255,193,69,.35), transparent 70%);
top:20%;right:-40px;
}
.about-list{margin-top:26px;display:grid;gap:14px;}
.about-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text);}
.about-list svg{width:22px;height:22px;color:var(--green);flex-shrink:0;margin-top:2px;}
/* ===== PROGRAMS ===== */
.programs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.program-card{
background:#fff;border-radius:var(--radius);padding:30px 26px;
border:1px solid rgba(11,36,71,.07);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
cursor:pointer;position:relative;overflow:hidden;
}
.program-card::before{
content:"";position:absolute;top:0;right:0;width:100%;height:4px;
background:var(--accent,var(--orange));
}
.program-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(11,36,71,.35);border-color:transparent;}
.program-icon{
width:58px;height:58px;border-radius:16px;margin-bottom:18px;
display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb, var(--accent,var(--orange)) 14%, white);
}
.program-icon svg{width:30px;height:30px;color:var(--accent,var(--orange));}
.program-card h3{font-size:19px;margin-bottom:8px;}
.program-card p{font-size:14px;color:var(--gray);margin-bottom:16px;}
.program-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.tag{font-size:11.5px;font-weight:700;background:var(--surface);color:var(--navy);padding:5px 10px;border-radius:100px;}
.program-link{font-size:13.5px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:6px;}
.program-link svg{width:15px;height:15px;transition:transform .2s;}
.program-card:hover .program-link svg{transform:translateX(-4px);}
/* ===== WHY US ===== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 30px;}
.why-item{display:flex;gap:16px;}
.why-icon{
width:52px;height:52px;border-radius:14px;flex-shrink:0;
background:var(--navy);display:flex;align-items:center;justify-content:center;
}
.why-icon svg{width:26px;height:26px;color:var(--gold);}
.why-item h4{font-size:16.5px;margin-bottom:6px;color:var(--navy);}
.why-item p{font-size:13.8px;color:var(--gray);}
/* ===== STATS (signature: badge path) ===== */
.stats-section{
background:linear-gradient(160deg,var(--navy-deep), var(--navy));
position:relative;overflow:hidden;
}
.stats-path{display:flex;justify-content:space-between;align-items:center;position:relative;}
.stats-path::before{
content:"";position:absolute;top:38px;right:8%;left:8%;height:2px;
background:repeating-linear-gradient(90deg, rgba(255,193,69,.5) 0 10px, transparent 10px 20px);
z-index:0;
}
.stat{position:relative;z-index:1;text-align:center;flex:1;}
.stat-badge{
width:76px;height:76px;border-radius:50%;margin:0 auto 18px;
background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--orange) 60%);
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 6px rgba(255,193,69,.15);
}
.stat-badge svg{width:32px;height:32px;color:var(--navy);}
.stat .n{font-family:'Poppins';font-size:38px;font-weight:800;color:#fff;}
.stat .l{font-size:13.5px;color:rgba(255,255,255,.65);margin-top:4px;}
/* ===== TESTIMONIALS ===== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi-card{background:#fff;border-radius:var(--radius);padding:28px;border:1px solid rgba(11,36,71,.07);}
.stars{color:var(--gold);font-size:15px;letter-spacing:2px;margin-bottom:14px;}
.testi-card p.txt{font-size:14.5px;color:var(--text);margin-bottom:20px;}
.testi-person{display:flex;align-items:center;gap:12px;}
.avatar{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Poppins';
}
.testi-person .name{font-weight:700;font-size:14px;color:var(--navy);}
.testi-person .role{font-size:12px;color:var(--gray);}
/* ===== FINAL CTA ===== */
.final-cta{
background:linear-gradient(120deg,var(--black) 0%, var(--navy-deep) 55%, var(--navy) 100%);
border:1px solid rgba(184,146,62,.35);
border-radius:32px;padding:64px 50px;text-align:center;position:relative;overflow:hidden;
margin:0 24px;
}
.final-cta::before{
content:"";position:absolute;width:400px;height:400px;border-radius:50%;
background:radial-gradient(circle, rgba(184,146,62,.18), transparent 70%);top:-180px;left:-100px;
}
.final-cta h2{color:#fff;font-size:clamp(24px,3.2vw,34px);margin-bottom:14px;}
.final-cta p{color:rgba(255,255,255,.72);margin-bottom:30px;font-size:15.5px;}
/* ===== FOOTER ===== */
footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:64px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:48px;}
.footer-col h5{color:#fff;font-size:15px;margin-bottom:16px;}
.footer-col ul{display:grid;gap:10px;font-size:13.5px;}
.footer-col ul a:hover{color:var(--gold);}
.footer-logo{display:block;text-align:right;color:#fff;font-weight:900;font-size:19px;margin-bottom:10px;}
.footer-logo .logo-badge{display:inline-block;width:150px;height:150px;max-width:100%;border-radius:16px;margin-bottom:6px;}
.footer-logo span{display:block;text-align:right;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;font-size:12.5px;flex-wrap:wrap;gap:10px;}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (max-width:920px){
nav, .header-cta .btn-outline{display:none;}
.hero-grid{grid-template-columns:1fr;}
.hero-visual{height:260px;}
.about-grid{grid-template-columns:1fr;}
.programs-grid, .why-grid, .testi-grid{grid-template-columns:1fr 1fr;}
.footer-grid{grid-template-columns:1fr 1fr;}
.stats-path{flex-wrap:wrap;gap:26px;}
.stats-path::before{display:none;}
}
@media (max-width:600px){
.programs-grid, .why-grid, .testi-grid, .footer-grid{grid-template-columns:1fr;}
.hero{padding:64px 0 80px;}
.final-cta{padding:44px 24px;margin:0;}
}
.mobile-sticky{
display:none;position:fixed;bottom:0;right:0;left:0;z-index:60;
background:#fff;box-shadow:0 -8px 24px rgba(11,36,71,.12);padding:12px 18px;
}
@media (max-width:600px){.mobile-sticky{display:flex;}}
.mobile-sticky .btn-primary{width:100%;justify-content:center;}
/* ===== PROGRAM PAGE ADDITIONS ===== */
.breadcrumb{background:var(--surface);padding:16px 0;font-size:13px;color:var(--gray);}
.breadcrumb a{color:var(--gray);}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb .sep{margin:0 8px;opacity:.6;}
.breadcrumb .current{color:var(--navy);font-weight:700;}
.program-banner{
position:relative;color:#fff;overflow:hidden;padding:70px 0 60px;
background:
radial-gradient(900px 420px at 88% -10%, rgba(184,146,62,.28), transparent 60%),
linear-gradient(155deg, var(--black) 0%, var(--navy-deep) 45%, var(--navy) 100%);
}
.program-banner::after{
content:"";position:absolute;inset:0;opacity:.08;
background-image:repeating-linear-gradient(45deg,#fff 0 2px, transparent 2px 34px);
pointer-events:none;
}
.banner-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;position:relative;}
.banner-icon{
width:88px;height:88px;border-radius:24px;margin-bottom:22px;
background:rgba(184,146,62,.16);border:1px solid rgba(184,146,62,.4);
display:flex;align-items:center;justify-content:center;
}
.banner-icon svg{width:44px;height:44px;color:var(--orange);}
.program-banner h1{color:#fff;font-size:clamp(30px,4vw,46px);margin-bottom:16px;}
.program-banner p.lead{color:rgba(255,255,255,.75);font-size:16.5px;max-width:520px;margin-bottom:30px;}
.banner-visual{
aspect-ratio:1/1;border-radius:28px;position:relative;overflow:hidden;
background:radial-gradient(circle at 40% 35%, rgba(184,146,62,.22), transparent 65%), rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.12);
display:flex;align-items:center;justify-content:center;
}
.banner-visual svg{width:46%;height:46%;color:rgba(184,146,62,.55);}
.quickfacts{background:var(--navy-deep);padding:0;}
.quickfacts .container{display:flex;justify-content:space-between;flex-wrap:wrap;}
.qf-item{flex:1;min-width:150px;padding:22px 16px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.08);}
.qf-item:first-child{border-inline-start:none;}
.qf-item .n{font-family:'Poppins';font-weight:800;font-size:20px;color:var(--orange);display:block;margin-bottom:4px;}
.qf-item .l{font-size:12.5px;color:rgba(255,255,255,.6);}
.desc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.desc-visual{
aspect-ratio:3/4;border-radius:24px;
background:linear-gradient(150deg, var(--navy) 0%, #2E4468 100%);
display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.desc-visual svg{width:34%;height:34%;color:rgba(255,255,255,.4);}
.audience-grid{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;}
.audience-pill{
display:flex;align-items:center;gap:8px;background:var(--surface);
padding:10px 16px;border-radius:100px;font-size:13.5px;font-weight:700;color:var(--navy);
}
.audience-pill svg{width:16px;height:16px;color:var(--orange);}
/* Level path timeline */
.level-path{display:flex;justify-content:space-between;position:relative;margin-top:20px;}
.level-path::before{
content:"";position:absolute;top:34px;right:6%;left:6%;height:2px;
background:repeating-linear-gradient(90deg, rgba(184,146,62,.5) 0 10px, transparent 10px 20px);
z-index:0;
}
.level{position:relative;z-index:1;text-align:center;flex:1;padding:0 8px;}
.level-dot{
width:68px;height:68px;border-radius:50%;margin:0 auto 16px;
background:#fff;border:3px solid var(--orange);
display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:800;font-family:'Poppins';
box-shadow:0 10px 24px -12px rgba(11,36,71,.3);
}
.level h4{font-size:14.5px;margin-bottom:4px;color:var(--navy);}
.level p{font-size:12px;color:var(--gray);}
.components-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.component-card{background:#fff;border-radius:16px;padding:22px 16px;text-align:center;border:1px solid rgba(11,36,71,.07);}
.component-card .ci{
width:48px;height:48px;border-radius:14px;margin:0 auto 14px;
background:var(--surface);display:flex;align-items:center;justify-content:center;
}
.component-card .ci svg{width:24px;height:24px;color:var(--orange);}
.component-card h5{font-size:13.5px;margin-bottom:4px;color:var(--navy);}
.component-card p{font-size:12px;color:var(--gray);}
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.skill-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(11,36,71,.07);border-radius:14px;padding:16px 18px;}
.skill-item svg{width:22px;height:22px;color:var(--orange);flex-shrink:0;}
.skill-item span{font-size:14.5px;font-weight:700;color:var(--navy);}
.coach-card{
display:flex;align-items:center;gap:26px;background:#fff;border-radius:24px;padding:30px;
border:1px solid rgba(11,36,71,.07);
}
.coach-avatar{
width:100px;height:100px;border-radius:20px;flex-shrink:0;
background:linear-gradient(150deg,var(--navy),#2E4468);
display:flex;align-items:center;justify-content:center;color:var(--orange);font-family:'Poppins';font-weight:800;font-size:26px;
}
.coach-card h4{font-size:19px;margin-bottom:4px;color:var(--navy);}
.coach-card .role{color:var(--orange);font-size:13.5px;font-weight:700;margin-bottom:10px;}
.coach-card p{font-size:14px;color:var(--gray);}
.faq-item{border-bottom:1px solid rgba(11,36,71,.1);}
.faq-q{
display:flex;justify-content:space-between;align-items:center;
padding:22px 4px;cursor:pointer;font-weight:700;font-size:15.5px;color:var(--navy);
}
.faq-q svg{width:20px;height:20px;color:var(--orange);transition:transform .25s ease;flex-shrink:0;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:220px;}
.faq-a p{padding:0 4px 22px;font-size:14px;color:var(--gray);}
.dual-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;}
.price-chip{
display:inline-flex;align-items:baseline;gap:6px;background:var(--surface);
padding:14px 22px;border-radius:14px;
}
.price-chip .amt{font-family:'Poppins';font-weight:800;font-size:22px;color:var(--navy);}
.price-chip .per{font-size:12.5px;color:var(--gray);}
@media (max-width:920px){
.banner-grid, .desc-grid{grid-template-columns:1fr;}
.quickfacts .container{flex-wrap:wrap;}
.qf-item{flex:1 1 50%;border-inline-start:none;border-top:1px solid rgba(255,255,255,.08);}
.components-grid{grid-template-columns:repeat(2,1fr);}
.level-path{flex-wrap:wrap;gap:20px;}
.level-path::before{display:none;}
}
@media (max-width:600px){
.skills-grid{grid-template-columns:1fr;}
.components-grid{grid-template-columns:1fr 1fr;}
.coach-card{flex-direction:column;text-align:center;}
}
</style>
<!-- prog-slider-css -->
<style>
.prog-slider{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;}
.prog-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1);transition:opacity 1s cubic-bezier(.4,0,.2,1);}
.prog-slider img.active{opacity:1;z-index:1;}
.prog-slider img.kb{animation:progKenBurns 5.5s ease-out forwards;}
@keyframes progKenBurns{from{transform:scale(1);}to{transform:scale(1.08);}}
.prog-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 6px 16px rgba(0,0,0,.2);transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
.prog-nav:hover{transform:translateY(-50%) scale(1.12);background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.28);}
.prog-nav:active{transform:translateY(-50%) scale(.95);}
.prog-nav.prev{right:14px;}
.prog-nav.next{left:14px;}
.prog-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:5;}
.prog-dot{width:8px;height:8px;border-radius:4px;background:#fff;opacity:.5;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:width .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;border:none;padding:0;}
.prog-dot.active{width:24px;opacity:1;}
@media (prefers-reduced-motion: reduce){ .prog-slider img.kb{animation:none;} }
</style>
</head>
<body>
<header>
<div class="container nav-wrap">
<a href="index.html" class="logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span> أكاديمية الكاف الرياضية</a>
<nav>
<ul>
<li><a href="index.html#programs">البرامج</a></li>
<li><a href="page-about.html">من نحن</a></li>
<li><a href="index.html#stats">إنجازاتنا</a></li>
<li><a href="index.html#testimonials">آراء الأهالي</a></li>
<li><a href="#contact">تواصل</a></li>
</ul>
</nav>
<div class="header-cta">
<a href="#contact" class="btn btn-outline">اتصل بنا</a>
<a href="#trial" class="btn btn-primary">حجز حصة تجريبية</a>
</div>
</div>
</header>
<div class="breadcrumb">
<div class="container">
<a href="index.html">الرئيسية</a><span class="sep">/</span><a href="index.html#programs">البرامج</a><span class="sep">/</span><span class="current">المواي تاي</span>
</div>
</div>
<section class="program-banner">
<div class="container banner-grid">
<div>
<div class="banner-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M7 10V7a3 3 0 013-3h1a3 3 0 013 3v1"/><path d="M7 10h9a3 3 0 013 3v2a5 5 0 01-5 5h-2a5 5 0 01-5-5v-3a2 2 0 012-2z"/><path d="M10 10v3M13 10v3"/></svg></div>
<div class="hero-eyebrow"><span class="dot"></span> الفئة العمرية 7–16 سنة</div>
<h1>المواي تاي للأطفال والناشئين</h1>
<p class="lead">رياضة الملاكمة التايلندية بأسلوب تدريبي آمن ومنظم يبني اللياقة البدنية والانضباط الذهني والثقة بالنفس، عبر تمارين تقنية تدريجية بإشراف مدربين متخصصين.</p>
<div class="dual-cta">
<a href="#contact" class="btn btn-primary">احجز حصة تجريبية مجانية</a>
<a href="https://wa.me/966559695266" class="btn btn-outline" target="_blank" rel="noopener">تواصل عبر واتساب</a>
</div>
</div>
<div class="banner-visual" style="background:url(images/muaythai/1.webp) center/contain no-repeat, radial-gradient(circle at 40% 35%, rgba(184,146,62,.22), transparent 65%), var(--navy-deep);"></div>
</div>
</section>
<div class="quickfacts">
<div class="container">
<div class="qf-item"><span class="n">7–16</span><span class="l">الفئة العمرية</span></div><div class="qf-item"><span class="n">60</span><span class="l">دقيقة لكل حصة</span></div><div class="qf-item"><span class="n">2</span><span class="l">حصة أسبوعيًا</span></div><div class="qf-item"><span class="n">5</span><span class="l">مستويات تدرّج</span></div>
</div>
</div>
<section id="desc">
<div class="container desc-grid">
<div class="reveal">
<div class="eyebrow">نظرة عامة</div>
<h2 class="section-title">الهدف من البرنامج</h2>
<p style="color:var(--gray);font-size:15.5px;">برنامج مصمَّم لتعليم أساسيات المواي تاي بطريقة آمنة ومنظمة، يركّز على اللياقة البدنية والتوافق الحركي والانضباط الذهني، مع تمارين تقنية تدريجية تناسب مختلف الأعمار والمستويات.</p>
<div class="audience-grid">
<div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مناسب للمبتدئين والمتقدمين</div><div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مجموعات مقسّمة حسب العمر</div><div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> معدات حماية توفرها الأكاديمية</div>
</div>
</div>
<div class="desc-visual reveal"><div class="prog-slider"><img src="images/muaythai/1.webp" alt="" class="active kb"><img src="images/muaythai/2.webp" alt="" class=""><img src="images/muaythai/3.webp" alt="" class=""><img src="images/muaythai/4.webp" alt="" class=""><img src="images/muaythai/5.webp" alt="" class=""><img src="images/muaythai/6.webp" alt="" class=""><button type="button" class="prog-nav prev" onclick="progSlide(-1)" aria-label="السابق"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg></button><button type="button" class="prog-nav next" onclick="progSlide(1)" aria-label="التالي"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></button><div class="prog-dots"><button type="button" class="prog-dot active" onclick="progSlideTo(0)" aria-label="صورة 1"></button><button type="button" class="prog-dot" onclick="progSlideTo(1)" aria-label="صورة 2"></button><button type="button" class="prog-dot" onclick="progSlideTo(2)" aria-label="صورة 3"></button><button type="button" class="prog-dot" onclick="progSlideTo(3)" aria-label="صورة 4"></button><button type="button" class="prog-dot" onclick="progSlideTo(4)" aria-label="صورة 5"></button><button type="button" class="prog-dot" onclick="progSlideTo(5)" aria-label="صورة 6"></button></div></div></div>
</div>
</section>
<section class="alt" id="levels">
<div class="container">
<div class="eyebrow">رحلة التطور</div>
<h2 class="section-title">من الأساسيات إلى الجاهزية الكاملة</h2>
<p class="section-lead">مسار تدرّجي واضح وآمن ينتقل فيه المتدرب من الوضعيات الأساسية حتى الجاهزية البدنية والتقنية الكاملة.</p>
<div class="level-path">
<div class="level reveal"><div class="level-dot" style="background:#fff;">1</div><h4>المبتدئ</h4><p>الوضعيات الأساسية والحركة</p></div><div class="level reveal"><div class="level-dot" style="background:#F0C9C2;">2</div><h4>المتدرب</h4><p>اللكمات والركلات الأساسية</p></div><div class="level reveal"><div class="level-dot" style="background:#E09A8E;">3</div><h4>المتقدم</h4><p>المرونة والتوافق الحركي</p></div><div class="level reveal"><div class="level-dot" style="background:#C96B5B;">4</div><h4>المحارب</h4><p>التكتيكات والدفاع</p></div><div class="level reveal"><div class="level-dot" style="background:var(--navy);color:#fff;">5</div><h4>البطل</h4><p>الجاهزية البدنية الكاملة</p></div>
</div>
</div>
</section>
<section id="components">
<div class="container">
<div class="eyebrow">مكونات الحصة</div>
<h2 class="section-title">كيف تسير الحصة التدريبية</h2>
<div class="components-grid">
<div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6L9 17l-5-5"/></svg></div>
<h5>إحماء حركي</h5><p>10 دقائق</p>
</div><div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M7 10V7a3 3 0 013-3h1a3 3 0 013 3v1"/><path d="M7 10h9a3 3 0 013 3v2a5 5 0 01-5 5h-2a5 5 0 01-5-5v-3a2 2 0 012-2z"/></svg></div>
<h5>تمارين تقنية (لكمات وركلات)</h5><p>20 دقيقة</p>
</div><div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M8 8l8 8M16 8l-8 8"/></svg></div>
<h5>تمارين على الأكياس والمساند</h5><p>15 دقيقة</p>
</div><div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 3v18M5 8l7-5 7 5M5 16l7 5 7-5"/></svg></div>
<h5>تمارين لياقة ومقاومة</h5><p>10 دقائق</p>
</div><div class="component-card reveal">
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6L9 17l-5-5"/></svg></div>
<h5>تهدئة وتمدد</h5><p>5 دقائق</p>
</div>
</div>
</div>
</section>
<section class="alt" id="skills">
<div class="container">
<div class="eyebrow">المهارات المكتسبة</div>
<h2 class="section-title">ماذا يكتسب طفلك</h2>
<div class="skills-grid">
<div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>تقنيات لكم وركل أساسية</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>التوافق الحركي والتوازن</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>اللياقة البدنية العامة</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>الانضباط والاحترام</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>الثقة بالنفس</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>أساسيات الدفاع عن النفس</span></div>
</div>
</div>
</section>
<section id="coach">
<div class="container">
<div class="eyebrow">المدرب المسؤول</div>
<h2 class="section-title">بإشراف مدرب معتمد</h2>
<div class="coach-card reveal">
<img class="coach-avatar" src="images/coaches/muaythai.webp" alt="الكابتن أحمد حبيب" style="object-fit:cover;">
<div>
<h4>الكابتن أحمد حبيب</h4>
<div class="role">مدرب معتمد دوليًا بدرجة ماستر — المواي تاي</div>
<p>خبرة تزيد عن 10 سنوات في تدريب المواي تاي (الملاكمة التايلندية)، وعضو النقابة العامة للمهن الرياضية.</p>
<div class="audience-grid" style="margin-top:14px;">
<div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> معتمد من الاتحاد الدولي LFMA للمواي تاي</div>
<div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> معتمد من الاتحاد السعودي للملاكمة التايلندية (المواي تاي)</div>
</div>
<a href="page-coaches.html#coach-muaythai" class="program-link" style="margin-top:14px;display:inline-flex;">عرض الملف الكامل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
</div>
</div>
</div>
</section>
<section class="alt" id="faq">
<div class="container" style="max-width:820px;">
<div class="eyebrow">أسئلة شائعة</div>
<h2 class="section-title">أسئلة أولياء الأمور الشائعة</h2>
<div class="faq-list" style="margin-top:20px;">
<div class="faq-item open">
<div class="faq-q">هل المواي تاي مناسب للأطفال؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
<div class="faq-a"><p>نعم، البرنامج مصمَّم خصيصًا للأطفال والناشئين بأسلوب آمن يركّز على التقنية والانضباط قبل القوة، مع إشراف كامل من المدربين.</p></div>
</div><div class="faq-item">
<div class="faq-q">هل يحتاج طفلي لمعدات خاصة؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
<div class="faq-a"><p>الأكاديمية توفر معدات الحماية الأساسية أثناء الحصص؛ يُفضَّل إحضار قفازات شخصية بعد التقدم في المستوى.</p></div>
</div><div class="faq-item">
<div class="faq-q">هل توجد مواجهات (اشتباك) فعلية؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
<div class="faq-a"><p>في المستويات الأولى التدريب على الأكياس والمساند فقط دون تلامس مباشر، ويُقدَّم تلامس خفيف لاحقًا للمستويات المتقدمة تحت إشراف كامل.</p></div>
</div><div class="faq-item">
<div class="faq-q">هل يمكن الجمع بين المواي تاي ورياضة أخرى؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
<div class="faq-a"><p>نعم، عبر باقة الأنشطة المتعددة يمكن الجمع بين المواي تاي ورياضة أخرى ضمن اشتراك واحد.</p></div>
</div>
</div>
</div>
</section>
<section id="trial">
<div class="container">
<div class="final-cta reveal">
<h2>جاهز يبدأ طفلك رحلته؟</h2>
<p>عبّي النموذج التالي وسيتواصل معك فريقنا لتأكيد حصة المواي تاي التجريبية المجانية.</p>
<div class="price-chip" style="margin-top:20px;"><span class="amt">399</span><span class="per">ريال / شهريًا</span></div>
<p style="font-size:12.5px;color:rgba(255,255,255,.6);margin-top:10px;">أو وفّر مع باقات الالتزام (3/6/12 شهر) في <a href="page-pricing.html" style="color:var(--gold);text-decoration:underline;">صفحة الأسعار</a>.</p>
</div>
<div class="reveal" style="max-width:640px;margin:36px auto 0;background:#fff;border-radius:var(--radius);padding:36px 32px;box-shadow:0 20px 50px -30px rgba(11,36,71,.35);">
<form id="trialForm" onsubmit="return sendTrialRequest(event)">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
<div>
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">اسم ولي الأمر *</label>
<input type="text" id="tf-parent" required style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;">
</div>
<div>
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">رقم الجوال (واتساب) *</label>
<input type="tel" id="tf-phone" required placeholder="05xxxxxxxx" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;">
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
<div>
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">اسم الطفل وعمره</label>
<input type="text" id="tf-child" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;">
</div>
<div>
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">الرياضة المطلوبة</label>
<select id="tf-sport" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;background:#fff;">
<option value="كرة القدم">كرة القدم</option>
<option value="السباحة">السباحة</option>
<option value="الكاراتيه">الكاراتيه</option>
<option value="التايكوندو">التايكوندو</option>
<option value="الجمباز">الجمباز</option>
<option value="الكيك بوكسينغ">الكيك بوكسينغ</option>
<option value="المواي تاي" selected>المواي تاي</option>
<option value="كرة السلة">كرة السلة</option>
<option value="تدريب شخصي">تدريب شخصي</option>
<option value="باقة متعددة الأنشطة">باقة متعددة الأنشطة</option>
<option value="ذوي الهمم">ذوي الهمم</option>
</select>
</div>
</div>
<div style="margin-bottom:20px;">
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">ملاحظات (اختياري)</label>
<textarea id="tf-notes" rows="3" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;resize:vertical;"></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">إرسال الطلب عبر واتساب ←</button>
<p style="font-size:12px;color:var(--gray);text-align:center;margin-top:14px;">بالإرسال سيتم فتح واتساب برسالة جاهزة لتأكيد طلبك مباشرة مع الأكاديمية.</p>
</form>
</div>
</div>
</section>
<footer id="contact">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<div class="footer-logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span><span>أكاديمية الكاف الرياضية</span></div>
<p style="font-size:13.5px;">المملكة العربية السعودية، الرياض</p>
<p style="font-size:13.5px;margin-top:6px;">"نصنع أبطال الغد، بخطوة اليوم"</p>
</div>
<div class="footer-col">
<h5>روابط سريعة</h5>
<ul>
<li><a href="index.html#programs">البرامج التدريبية</a></li>
<li><a href="page-about.html">من نحن</a></li>
<li><a href="page-pricing.html">الباقات والأسعار</a></li>
<li><a href="page-blog.html">المدونة</a></li>
<li><a href="page-coaches.html">فريق المدربين</a></li>
<li><a href="page-privacy.html">سياسة الخصوصية</a></li>
</ul>
</div>
<div class="footer-col">
<h5>ساعات العمل</h5>
<ul>
<li>السبت – الخميس</li>
<li>3:00م – 9:00م</li>
</ul>
</div>
<div class="footer-col">
<h5>تواصل معنا</h5>
<ul>
<li><a href="tel:+966559695266">0559695266</a></li>
<li><a href="mailto:Contact@caf-academy.com">Contact@caf-academy.com</a></li>
</ul>
<div style="display:flex;gap:10px;margin-top:16px;">
<a href="https://www.instagram.com/caf_academy_?igsi=aDZmaTlhZmttd3E3" target="_blank" rel="noopener" aria-label="Instagram" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
<a href="https://www.tiktok.com/@caf_academy?_r=1&amp;_t=ZS-98y2YmrQpY8" target="_blank" rel="noopener" aria-label="TikTok" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M16.5 3c.3 2.1 1.7 3.6 3.9 3.9v3c-1.3 0-2.6-.4-3.7-1.2v6.4a5.7 5.7 0 1 1-5.7-5.7c.2 0 .5 0 .7.1v3.1a2.6 2.6 0 1 0 1.8 2.5V3h3z"/></svg></a>
<a href="https://www.snapchat.com/add/alsahari_2025" target="_blank" rel="noopener" aria-label="Snapchat" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 2c3 0 4.7 2.3 4.8 5 0 1 0 2 .1 2.4.2.3.9.4 1.4.2.4-.1.9 0 1 .5.1.5-.2.9-.7 1.1-.3.1-.8.3-.8.6 0 .5.9 1.7 2.4 2.1.3.1.5.4.4.7-.2.7-1.4 1-2.2 1.1-.1.3-.2.7-.3 1-.1.3-.4.4-.7.4-.5 0-1-.1-1.6-.1-.9 0-1.4.6-2.9.6s-2-.6-2.9-.6c-.6 0-1.1.1-1.6.1-.3 0-.6-.1-.7-.4-.1-.3-.2-.7-.3-1-.8-.1-2-.4-2.2-1.1-.1-.3.1-.6.4-.7 1.5-.4 2.4-1.6 2.4-2.1 0-.3-.5-.5-.8-.6-.5-.2-.8-.6-.7-1.1.1-.5.6-.6 1-.5.5.2 1.2.1 1.4-.2.1-.4.1-1.4.1-2.4C7.3 4.3 9 2 12 2z"/></svg></a>
<a href="https://www.facebook.com/share/18RGgydYWL/" target="_blank" rel="noopener" aria-label="Facebook" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a>
<a href="https://www.youtube.com/@cafacademy" target="_blank" rel="noopener" aria-label="YouTube" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg></a>
<a href="https://wa.me/966559695266" target="_blank" rel="noopener" aria-label="WhatsApp" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M17.6 6.32A8.86 8.86 0 0 0 12.05 4a8.94 8.94 0 0 0-7.75 13.4L3 21l3.72-1.24a8.9 8.9 0 0 0 4.33 1.1h0a8.93 8.93 0 0 0 8.94-8.86 8.83 8.83 0 0 0-2.4-6.68zM12.05 19.4a7.4 7.4 0 0 1-3.78-1.04l-.27-.16-2.8.9.9-2.7-.18-.28a7.4 7.4 0 1 1 6.13 3.28zm4.07-5.53c-.22-.11-1.3-.64-1.5-.72s-.35-.11-.5.11-.58.72-.71.86-.26.16-.48.05a6.06 6.06 0 0 1-1.78-1.1 6.64 6.64 0 0 1-1.23-1.53c-.13-.22 0-.34.1-.45s.22-.26.33-.38a1.5 1.5 0 0 0 .22-.37.4.4 0 0 0 0-.38c-.05-.11-.5-1.2-.68-1.64s-.37-.38-.5-.38h-.43a.82.82 0 0 0-.6.28 2.5 2.5 0 0 0-.78 1.86 4.34 4.34 0 0 0 .91 2.3 9.94 9.94 0 0 0 3.8 3.36c.53.23.94.36 1.26.46a3 3 0 0 0 1.39.09 2.27 2.27 0 0 0 1.49-1.05 1.85 1.85 0 0 0 .13-1.05c-.05-.09-.2-.15-.42-.26z"/></svg></a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 أكاديمية الكاف الرياضية — جميع الحقوق محفوظة</span>
<span>تصميم: محمد الشيخ — <a href="https://wa.me/966566785756" target="_blank" rel="noopener" style="text-decoration:underline;">واتساب 0566785756</a></span>
</div>
</div>
</footer>
<div class="mobile-sticky">
<a href="#trial" class="btn btn-primary">احجز حصة تجريبية مجانية</a>
</div>
<script>
// scroll reveal
const reveals = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries)=>{
entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });
},{threshold:.15});
reveals.forEach(r=>io.observe(r));
// counters
const counters = document.querySelectorAll('[data-count]');
const cio = new IntersectionObserver((entries)=>{
entries.forEach(e=>{
if(e.isIntersecting){
const el = e.target;
const target = +el.dataset.count;
let cur = 0;
const step = Math.max(1, Math.ceil(target/40));
const t = setInterval(()=>{
cur += step;
if(cur >= target){ cur = target; clearInterval(t); }
el.textContent = cur;
}, 30);
cio.unobserve(el);
}
});
},{threshold:.6});
counters.forEach(c=>cio.observe(c));
</script>
<script>
function sendTrialRequest(e){
e.preventDefault();
var parent = document.getElementById('tf-parent').value.trim();
var phone = document.getElementById('tf-phone').value.trim();
var child = document.getElementById('tf-child').value.trim();
var sport = document.getElementById('tf-sport').value;
var notes = document.getElementById('tf-notes').value.trim();
var msg = 'مرحبًا أكاديمية الكاف، أرغب بحجز حصة تجريبية مجانية.\n';
msg += 'اسم ولي الأمر: ' + parent + '\n';
msg += 'رقم الجوال: ' + phone + '\n';
if(child) msg += 'الطفل: ' + child + '\n';
msg += 'الرياضة: ' + sport + '\n';
if(notes) msg += 'ملاحظات: ' + notes;
window.open('https://wa.me/966559695266?text=' + encodeURIComponent(msg), '_blank');
return false;
}
</script>
<script>
document.querySelectorAll('.faq-q').forEach(q=>{
q.addEventListener('click', ()=>{
const item = q.parentElement;
const wasOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(i=>i.classList.remove('open'));
if(!wasOpen) item.classList.add('open');
});
});
</script>
<script>
(function(){
const imgs = document.querySelectorAll('.prog-slider img');
const dots = document.querySelectorAll('.prog-dot');
let idx = 0;
function show(i){
imgs.forEach((img,n)=>{
img.classList.toggle('active', n===i);
if(n===i){ img.classList.remove('kb'); void img.offsetWidth; img.classList.add('kb'); }
else{ img.classList.remove('kb'); }
});
dots.forEach((d,n)=> d.classList.toggle('active', n===i));
idx = i;
}
window.progSlide = function(dir){
show((idx + dir + imgs.length) % imgs.length);
};
window.progSlideTo = function(i){ show(i); };
if(imgs.length > 1){
let timer = setInterval(()=>progSlide(1), 5000);
const wrap = document.querySelector('.prog-slider');
wrap.addEventListener('mouseenter', ()=>clearInterval(timer));
wrap.addEventListener('mouseleave', ()=>{ timer = setInterval(()=>progSlide(1), 5000); });
}
})();
</script>
</body>
</html>