{"id":80,"date":"2025-11-15T16:50:23","date_gmt":"2025-11-15T16:50:23","guid":{"rendered":"https:\/\/localhost\/?page_id=80"},"modified":"2025-11-17T00:15:57","modified_gmt":"2025-11-17T00:15:57","slug":"about","status":"publish","type":"page","link":"https:\/\/el-khayalgroup.com\/?page_id=80","title":{"rendered":"About"},"content":{"rendered":"\n<!doctype html>\n<html lang=\"en\" dir=\"ltr\">\n<head>\n  <meta charset=\"utf-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\n  <title>About Us \u2014 4SRV<\/title>\n\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800&#038;display=swap\" rel=\"stylesheet\">\n\n  <style>\n    :root{\n      --bg:#ffffff;\n      --card:#ffffff;\n      --accent: linear-gradient(90deg,#6366f1,#06b6d4);\n      --text:#1f2937;\n      --muted:#6b7280;\n      --radius:16px;\n      --shadow:0 8px 24px rgba(0,0,0,0.08);\n    }\n\n    *{box-sizing:border-box;margin:0;padding:0}\n    body{\n      font-family:'Inter',sans-serif;\n      background:#f7f9fc;\n      color:var(--text);\n      padding:40px 20px;\n      line-height:1.6;\n    }\n\n    .container{\n      max-width:1200px;\n      margin:0 auto;\n      display:grid;\n      grid-template-columns:1fr 380px;\n      gap:28px;\n    }\n\n    .hero{\n      background:var(--card);\n      padding:28px;\n      border-radius:var(--radius);\n      box-shadow:var(--shadow);\n    }\n\n    .heading{display:flex;gap:16px;align-items:center;margin-bottom:12px}\n    .logo-badge{\n      width:72px;height:72px;\n      background:#eef2ff;\n      border-radius:14px;\n      display:flex;align-items:center;justify-content:center;\n      font-size:22px;font-weight:800;color:#4f46e5;\n    }\n\n    h1{font-size:26px;margin-bottom:8px}\n    .lead{color:var(--muted);max-width:80%;margin-bottom:20px}\n\n    .services{\n      display:grid;\n      grid-template-columns:repeat(2,1fr);\n      gap:14px;\n    }\n    .service-card{\n      background:#ffffff;\n      padding:16px;\n      border-radius:14px;\n      box-shadow:0 4px 14px rgba(0,0,0,0.05);\n      display:flex;gap:12px;align-items:flex-start;\n      transition:.3s;\n      cursor:pointer;\n    }\n    .service-card:hover{\n      transform:translateY(-6px);\n      box-shadow:0 10px 30px rgba(0,0,0,0.09);\n    }\n    .service-icon{font-size:26px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:12px}\n    .service-title{font-weight:700;margin-bottom:4px}\n    .service-desc{font-size:14px;color:var(--muted)}\n\n    .mission{margin-top:24px;display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:center}\n    .mission p{color:var(--muted)}\n\n    .hero-image{\n      width:100%;height:160px;border-radius:14px;overflow:hidden;\n      box-shadow:0 8px 24px rgba(0,0,0,0.08);\n    }\n    .hero-image img{width:100%;height:100%;object-fit:cover;transition:.7s}\n    .hero-image:hover img{transform:scale(1.05)}\n\n    .big-services{\n      margin-top:28px;\n      display:grid;\n      grid-template-columns:repeat(4,1fr);\n      gap:16px;\n    }\n    .big-card{\n      background:#ffffff;\n      padding:18px;\n      border-radius:14px;\n      box-shadow:0 6px 20px rgba(0,0,0,0.07);\n      transition:.35s;\n      min-height:150px;\n    }\n    .big-card:hover{transform:translateY(-10px);box-shadow:0 16px 40px rgba(0,0,0,0.12)}\n    .big-card h3{font-size:16px;margin-bottom:6px}\n    .big-card p{font-size:14px;color:var(--muted)}\n    .more{\n      display:inline-block;margin-top:12px;font-weight:600;font-size:14px;\n      background:#eef2ff;\n      padding:8px 12px;\n      border-radius:10px;\n      color:#4f46e5;\n    }\n\n    .footer-note{margin-top:18px;color:var(--muted);font-size:14px}\n\n    .side{display:flex;flex-direction:column;gap:20px}\n    .stats{\n      background:#ffffff;padding:20px;border-radius:16px;box-shadow:var(--shadow);\n    }\n\n    .stats-row{display:flex;flex-wrap:wrap;gap:14px}\n    .stat{\n      flex:1 1 45%;background:#f9fafb;padding:14px;border-radius:12px;text-align:center;\n      transition:.25s;\n    }\n    .stat:hover{transform:translateY(-6px);box-shadow:0 10px 26px rgba(0,0,0,0.08)}\n    .stat .num{font-size:22px;font-weight:800;color:#111827}\n    .stat .label{font-size:13px;color:var(--muted);margin-top:4px}\n\n    a.btn{\n      display:block;text-align:center;\n      padding:12px;border-radius:12px;\n      font-weight:700;text-decoration:none;font-size:14px;\n    }\n    .btn-primary{background:var(--accent);color:white}\n    .btn-outline{border:1px solid #e5e7eb;color:#374151}\n\n    @media(max-width:900px){\n      .container{grid-template-columns:1fr}\n      .big-services{grid-template-columns:repeat(2,1fr)}\n      .mission{grid-template-columns:1fr}\n    }\n    @media(max-width:560px){\n      .big-services{grid-template-columns:1fr}\n      .lead{max-width:100%}\n      .services{grid-template-columns:1fr}\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"container\">\n\n    <main class=\"hero\">\n      <div class=\"heading\">\n        <div class=\"logo-badge\">4S<\/div>\n        <div>\n          <h1>About Us<\/h1>\n          <p class=\"lead\">We are a creative company offering programming courses, project development, horse training, media production, and marketing solutions. We help students, freelancers, and professionals gain strong practical skills and real work experience.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"services\">\n        <div class=\"service-card\">\n          <div class=\"service-icon\">\ud83d\udcbb<\/div>\n          <div>\n            <div class=\"service-title\">Programming \u2014 Courses &#038; Projects<\/div>\n            <div class=\"service-desc\">Hands-on courses, real projects, full mentoring and support.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"service-card\">\n          <div class=\"service-icon\">\ud83d\udc0e<\/div>\n          <div>\n            <div class=\"service-title\">Horse Training<\/div>\n            <div class=\"service-desc\">Professional training, care, and competition preparation.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"service-card\">\n          <div class=\"service-icon\">\ud83c\udfac<\/div>\n          <div>\n            <div class=\"service-title\">Media &#038; Production<\/div>\n            <div class=\"service-desc\">High\u2011quality media, filming, editing, and content creation.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"service-card\">\n          <div class=\"service-icon\">\ud83d\udcc8<\/div>\n          <div>\n            <div class=\"service-title\">Marketing Solutions<\/div>\n            <div class=\"service-desc\">Brand growth strategies, paid ads, and performance analysis.<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"mission\">\n        <div>\n          <h2>Our Mission<\/h2>\n          <p>We deliver educational and professional services designed to develop real skills and help individuals grow. Our programs combine modern learning with real\u2011world project experience.<\/p>\n        <\/div>\n\n        <div class=\"hero-image\">\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1521791136064-7986c2920216?q=80\" alt=\"Team image\">\n        <\/div>\n      <\/div>\n\n      <div class=\"big-services\">\n        <div class=\"big-card\">\n          <h3>Programming Courses<\/h3>\n          <p>From beginner to advanced with real portfolio projects.<\/p>\n          <a class=\"more\" href=\"\/?page_id=93\">Learn More<\/a>\n        <\/div>\n\n        <div class=\"big-card\">\n          <h3>Horse Training<\/h3>\n          <p>Training, care, riding, and competition preparation.<\/p>\n          <a class=\"more\" href=\"\/?page_id=100\">Learn More<\/a>\n        <\/div>\n\n        <div class=\"big-card\">\n          <h3>Media &#038; Production<\/h3>\n          <p>Professional videography, editing, and creative content.<\/p>\n          <a class=\"more\" href=\"\/?page_id=106\">Learn More<\/a>\n        <\/div>\n\n        <div class=\"big-card\">\n          <h3>Marketing Solutions<\/h3>\n          <p>Growth strategies, SEO, targeting, and brand identity.<\/p>\n          <a class=\"more\" href=\"\/?page_id=94\">Learn More<\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"footer-note\">Active in: Programming, Courses, Projects, Horse Training, Media, Marketing.<\/div>\n    <\/main>\n\n    <aside class=\"side\">\n      <div class=\"stats\">\n        <h3 style=\"margin-bottom:10px\">Our Numbers<\/h3>\n        <div class=\"stats-row\">\n          <div class=\"stat\">\n            <div class=\"num\" data-target=\"5\">0+<\/div>\n            <div class=\"label\">Years Experience<\/div>\n          <\/div>\n\n          <div class=\"stat\">\n            <div class=\"num\" data-target=\"100\">0+<\/div>\n            <div class=\"label\">Freelance Projects<\/div>\n          <\/div>\n\n          <div class=\"stat\">\n            <div class=\"num\" data-target=\"200\">0+<\/div>\n            <div class=\"label\">Programming Students<\/div>\n          <\/div>\n\n          <div class=\"stat\">\n            <div class=\"num\" data-target=\"200\">0+<\/div>\n            <div class=\"label\">Horses Trained<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"stats\">\n        <h3 style=\"margin-bottom:10px\">Quick Links<\/h3>\n        <p style=\"color:var(--muted);font-size:14px;margin-bottom:14px\">Contact us anytime for course info, pricing, or project help.<\/p>\n\n        <a class=\"btn btn-primary\" href=\"\/?page_id=86\">Contact Us<\/a>\n        <a class=\"btn btn-outline\" style=\"margin-top:10px\" href=\"\/?page_id=83\">View Projects<\/a>\n      <\/div>\n    <\/aside>\n  <\/div>\n\n<script>\n  const counters=document.querySelectorAll('.num');\n  const observer=new IntersectionObserver(entries=>{\n    entries.forEach(entry=>{\n      if(entry.isIntersecting){\n        const el=entry.target;\n        const target=parseInt(el.dataset.target);\n        let start=0;\n        const duration=1200;\n        const startT=performance.now();\n\n        function step(now){\n          const progress=Math.min((now-startT)\/duration,1);\n          el.textContent=Math.floor(progress*target)+\"+\";\n          if(progress<1) requestAnimationFrame(step);\n        }\n        requestAnimationFrame(step);\n        observer.unobserve(el);\n      }\n    });\n  },{threshold:0.5});\n\n  counters.forEach(c=>observer.observe(c));\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>About Us \u2014 4SRV 4S About Us We are a creative company offering programming courses, project development, horse training, media production, and marketing solutions. We help students, freelancers, and professionals gain strong practical skills and real work experience. \ud83d\udcbb Programming \u2014 Courses &#038; Projects Hands-on courses, real projects, full mentoring and support. \ud83d\udc0e Horse Training [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/el-khayalgroup.com\/index.php?rest_route=\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/el-khayalgroup.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/el-khayalgroup.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/el-khayalgroup.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/el-khayalgroup.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=80"}],"version-history":[{"count":5,"href":"https:\/\/el-khayalgroup.com\/index.php?rest_route=\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":409,"href":"https:\/\/el-khayalgroup.com\/index.php?rest_route=\/wp\/v2\/pages\/80\/revisions\/409"}],"wp:attachment":[{"href":"https:\/\/el-khayalgroup.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}