{"id":32,"date":"2024-09-19T11:16:06","date_gmt":"2024-09-19T11:16:06","guid":{"rendered":"https:\/\/www.ictallin.co.za\/?page_id=32"},"modified":"2026-05-25T10:15:12","modified_gmt":"2026-05-25T08:15:12","slug":"services","status":"publish","type":"page","link":"https:\/\/www.ictallin.co.za\/?page_id=32","title":{"rendered":"Services"},"content":{"rendered":"\n<section class=\"hero-intro\">\n  <h1>\n    <span>Empowering<\/span>\n    <span>Your<\/span>\n    <span>Digital<\/span>\n    <span>Journey<\/span>\n    <span>and<\/span>\n    <span>Maximising<\/span>\n    <span>Your<\/span>\n    <span>Business<\/span>\n    <span>Solutions.<\/span>\n  <\/h1>\n<\/section>\n\n<style>\n.hero-intro {\n  text-align: center;\n  padding: 60px 20px;\n  margin-bottom: 80px;\n}\n\n.hero-intro h1 {\n  font-size: 2.5em;\n  color: #D71920;\n  margin-bottom: 48px;\n  display: inline-block;\n  line-height: 1.2em;\n  font-weight: bold;\n  font-family: 'Montserrat', sans-serif;\n}\n\n.hero-intro h1 span {\n  display: inline-block;\n  opacity: 0;\n  transform: translateY(40px);\n}\n\n\/* Animation class applied on scroll *\/\n.hero-intro h1 span.animate {\n  animation: wordFadeIn 0.8s forwards;\n  animation-timing-function: ease-out;\n}\n\n\/* Stagger each word with nth-child *\/\n.hero-intro h1 span.animate:nth-child(1) { animation-delay: 0s; }\n.hero-intro h1 span.animate:nth-child(2) { animation-delay: 0.3s; }\n.hero-intro h1 span.animate:nth-child(3) { animation-delay: 0.6s; }\n.hero-intro h1 span.animate:nth-child(4) { animation-delay: 0.9s; }\n.hero-intro h1 span.animate:nth-child(5) { animation-delay: 1.2s; }\n.hero-intro h1 span.animate:nth-child(6) { animation-delay: 1.5s; }\n.hero-intro h1 span.animate:nth-child(7) { animation-delay: 1.8s; }\n.hero-intro h1 span.animate:nth-child(8) { animation-delay: 2.1s; }\n.hero-intro h1 span.animate:nth-child(9) { animation-delay: 2.4s; }\n\n@keyframes wordFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateY(40px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const heroSpans = document.querySelectorAll(\".hero-intro h1 span\");\n\n  const observer = new IntersectionObserver((entries, observer) => {\n    entries.forEach(entry => {\n      if(entry.isIntersecting) {\n        heroSpans.forEach(span => span.classList.add(\"animate\"));\n        observer.unobserve(entry.target); \/\/ run once\n      }\n    });\n  }, { threshold: 0.3 }); \/\/ trigger when 30% visible\n\n  observer.observe(document.querySelector(\".hero-intro\"));\n});\n<\/script>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n<title>ICT All In &#8211; Product Tile<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n  body {\n    margin: 0;\n    font-family: \"Montserrat\", sans-serif;\n    background: transparent;\n    color: #111;\n  }\n\n  .product-tile {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: #fff;\n    border-radius: 12px;\n    padding: 40px 30px;\n    max-width: 900px;\n    margin: 60px auto;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.15);\n    gap: 30px;\n  }\n\n  .tile-content {\n    flex: 1;\n    text-align: left;\n  }\n\n  .tile-heading {\n    font-size: 1.8em;\n    color: #D71920;\n    font-weight: 700;\n    margin-bottom: 25px;\n    position: relative;\n  }\n\n  .tile-heading::after {\n    content: '';\n    display: block;\n    width: 50%;\n    height: 3px;\n    background: linear-gradient(90deg, #D71920, #FF6F61, #D71920);\n    margin-top: 10px;\n    border-radius: 2px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n  }\n\n  .button-wrapper {\n    text-align: left;\n    margin-top: 15px;\n  }\n\n  .tile-button {\n    display: inline-block;\n    background: #D71920;\n    color: #fff;\n    font-weight: 700;\n    padding: 12px 28px;\n    font-size: 1em;\n    border-radius: 8px;\n    text-decoration: none;\n    transition: all 0.3s ease;\n  }\n\n  .tile-button:hover {\n    background: #FF6F61;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.2);\n    transform: scale(1.05);\n  }\n\n  \/* Rotating 3D Cube *\/\n  .tile-image {\n    flex: 1;\n    perspective: 1000px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .cube {\n    position: relative;\n    width: 260px;\n    height: 260px;\n    transform-style: preserve-3d;\n    animation: rotateCube 12s infinite linear;\n  }\n\n  .cube img {\n    position: absolute;\n    width: 260px;\n    height: 260px;\n    border-radius: 12px;\n    object-fit: cover;\n    backface-visibility: hidden;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.25);\n  }\n\n  \/* Define cube faces *\/\n  .front  { transform: rotateY(0deg) translateZ(130px); }\n  .right  { transform: rotateY(90deg) translateZ(130px); }\n  .back   { transform: rotateY(180deg) translateZ(130px); }\n  .left   { transform: rotateY(-90deg) translateZ(130px); }\n\n  @keyframes rotateCube {\n    0%   { transform: rotateY(0deg); }\n    25%  { transform: rotateY(90deg); }\n    50%  { transform: rotateY(180deg); }\n    75%  { transform: rotateY(270deg); }\n    100% { transform: rotateY(360deg); }\n  }\n\n  @media (max-width: 768px) {\n    .product-tile {\n      flex-direction: column;\n      text-align: center;\n    }\n    .tile-content {\n      text-align: center;\n    }\n    .button-wrapper {\n      text-align: center;\n    }\n  }\n<\/style>\n<\/head>\n\n<body>\n  <div class=\"product-tile\">\n    <div class=\"tile-content\">\n      <h3 class=\"tile-heading\">Shop Our Top Products!<\/h3>\n      <div class=\"button-wrapper\">\n        <a class=\"tile-button\" href=\"https:\/\/www.ictallin.co.za\/?post_type=product\" target=\"_blank\">Shop<\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"tile-image\">\n      <div class=\"cube\">\n        <img decoding=\"async\" class=\"front\" src=\"https:\/\/www.ictallin.co.za\/wp-content\/uploads\/2025\/09\/ep2-06635-office-software-52899714498927.webp\" alt=\"Product 1\">\n        <img decoding=\"async\" class=\"right\" src=\"https:\/\/www.ictallin.co.za\/wp-content\/uploads\/2025\/09\/08_printer_poseidon_basalt_530_packaging_530_ecommerce_353c.webp\" alt=\"Product 2\">\n        <img decoding=\"async\" class=\"back\" src=\"https:\/\/www.ictallin.co.za\/wp-content\/uploads\/2025\/10\/84158d55-bf5d-4d57-81a5-3942283164c7-1.webp\" alt=\"Product 3\">\n        <img decoding=\"async\" class=\"left\" src=\"https:\/\/www.ictallin.co.za\/wp-content\/uploads\/2025\/09\/82lx00chsa-windows-laptops-1161023820.webp\" alt=\"Product 4\">\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n<title>ICT All In &#8211; Tagline<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n  body {\n    margin: 0;\n    font-family: \"Montserrat\", sans-serif;\n    background: transparent; \/* clear background *\/\n    color: #111; \/* black text *\/\n    text-align: center;\n  }\n\n  .tagline {\n    font-size: 1.8rem;\n    font-weight: 500;\n    color: #111;\n    margin: 80px auto;\n    line-height: 1.6;\n  }\n\n  .tagline span {\n    color: #D71920; \/* red highlight *\/\n    font-weight: 700;\n  }\n\n  @media (max-width: 768px) {\n    .tagline {\n      font-size: 1.3rem;\n      margin: 40px 10px;\n    }\n  }\n<\/style>\n<\/head>\n\n<body>\n  <p class=\"tagline\">\n    ICT All In delivers <span>Scalable<\/span>, <span>Strategic<\/span>, and <span>Innovative<\/span> IT solutions.\n  <\/p>\n<\/body>\n<\/html>\n\n\n<style>\n.tagline {<br \/>\n  font-size: 1.4em;<br \/>\n  font-weight: 500;<br \/>\n  color: #333;<br \/>\n  max-width: 800px;<br \/>\n  margin: 20px auto 60px auto;<br \/>\n  line-height: 1.8em;<br \/>\n  text-align: center;<br \/>\n  position: relative;<br \/>\n}<\/p>\n<p>.tagline span {<br \/>\n  color: #D71920;<br \/>\n  font-weight: 700;<br \/>\n  position: relative;<br \/>\n}<\/p>\n<p>.tagline span::after {<br \/>\n  content: \"\";<br \/>\n  position: absolute;<br \/>\n  bottom: -4px;<br \/>\n  left: 0;<br \/>\n  width: 100%;<br \/>\n  height: 3px;<br \/>\n  background: rgba(215, 25, 32, 0.5);<br \/>\n  border-radius: 2px;<br \/>\n}<br \/>\n<\/style>\n\n\n<p class=\"wp-block-paragraph\"><!-- Product Showcase & 3D Image Carousel --><\/p>\n\n\n\n<section class=\"brand-showcase\">\n  <div class=\"brand-content\">\n    <!-- Heading -->\n    <h2>\n      <span class=\"highlight\">Branded<\/span> Proof of Creativity\n    <\/h2>\n\n    <!-- Description -->\n    <p>\n      From concept to reality \u2014 \n      <span class=\"keywords\">mugs<\/span>, \n      <span class=\"keywords\">caps<\/span>, \n      <span class=\"keywords\">keyholders<\/span>, \n      <span class=\"keywords\">duffle bags<\/span>, and \n      <span class=\"keywords\">sleek hardcovers<\/span> that make your brand unforgettable.\n    <\/p>\n  <\/div>\n<\/section>\n\n<!-- Example CSS -->\n<style>\n.brand-showcase {\n  width: 100%;\n  padding: 80px 20px;\n  background: #f5f5f5;\n  text-align: center;\n}\n\n.brand-content {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.brand-showcase h2 {\n  font-size: 2.8em;\n  font-weight: 700;\n  color: #222;\n  margin-bottom: 30px;\n}\n\n.brand-showcase h2 .highlight {\n  color: #D71920;\n  position: relative;\n}\n\n.brand-showcase h2 .highlight::after {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 4px;\n  background: #D71920;\n  border-radius: 2px;\n  margin-top: 6px;\n}\n\n.brand-showcase p {\n  font-size: 1.25em;\n  line-height: 1.7em;\n  color: #444;\n}\n\n.brand-showcase p .keywords {\n  color: #D71920;\n  font-weight: 600;\n}\n\n\/* Responsive *\/\n@media (max-width: 768px) {\n  .brand-showcase h2 {\n    font-size: 2em;\n  }\n\n  .brand-showcase p {\n    font-size: 1.1em;\n  }\n}\n<\/style>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Our Services &#8211; ICT All In<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\" \/>\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" \/>\n  <style>\n    body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; background: #fff; color: #000; }\n\n    .services-section { width: 100%; max-width: 1200px; margin: auto; padding: 80px 20px; box-sizing: border-box; }\n\n    .services-header { text-align: center; margin-bottom: 60px; }\n    .services-header h2 { font-size: 2.4em; color: #D71920; margin-bottom: 15px; }\n    .services-header p { font-size: 1.1em; color: #555; }\n\n    .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; perspective: 1000px; }\n\n    .service-block {\n      background: #f5f5f5;\n      border-radius: 12px;\n      padding: 30px;\n      text-align: center;\n      transition: transform 0.6s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;\n      transform-style: preserve-3d;\n      opacity: 0;\n      transform: translateY(50px);\n      position: relative;\n      overflow: hidden;\n      box-sizing: border-box;\n      animation: fadeInUp 0.8s ease forwards;\n      animation-play-state: paused; \/* pause until scrolled *\/\n    }\n\n    \/* Animate each block with delay *\/\n    .service-block:nth-child(1) { animation-delay: 0.2s; }\n    .service-block:nth-child(2) { animation-delay: 0.4s; }\n    .service-block:nth-child(3) { animation-delay: 0.6s; }\n    .service-block:nth-child(4) { animation-delay: 0.8s; }\n    .service-block:nth-child(5) { animation-delay: 1s; }\n    .service-block:nth-child(6) { animation-delay: 1.2s; }\n\n    @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }\n\n    .service-block::before {\n      content: '';\n      position: absolute;\n      top: -2px; left: -2px; right: -2px; bottom: -2px;\n      background: linear-gradient(45deg, #D71920, #ff6f61, #D71920);\n      z-index: -1;\n      filter: blur(8px);\n      opacity: 0;\n      transition: opacity 0.4s ease;\n    }\n\n    .service-block:hover {\n      background: #D71920;\n      color: #fff;\n      transform: rotateY(10deg) scale(1.03);\n      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);\n    }\n\n    .service-block:hover::before { opacity: 0.6; }\n    .service-block:hover i, .service-block:hover h3, .service-block:hover p { color: #fff; }\n\n    .service-block i {\n      font-size: 2.6em;\n      color: #D71920;\n      margin-bottom: 18px;\n      animation: pulseIcon 2s infinite ease-in-out;\n      transition: color 0.3s ease;\n    }\n\n    @keyframes pulseIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }\n\n    .service-block h3 { font-size: 1.4em; margin-bottom: 12px; color: #000; transition: color 0.3s ease; }\n    .service-block p { font-size: 1em; color: #333; transition: color 0.3s ease; }\n\n    .side-panel {\n      position: fixed;\n      top: 100px;\n      right: 20px;\n      background: #D71920;\n      color: #fff;\n      padding: 20px;\n      border-radius: 12px;\n      box-shadow: 0 6px 12px rgba(0,0,0,0.2);\n      font-size: 0.9em;\n      z-index: 1000;\n    }\n\n    .side-panel h4 { margin-top: 0; }\n    .side-panel ul { list-style: none; padding: 0; }\n    .side-panel li { margin-bottom: 10px; }\n\n    .cta-banner {\n      text-align: center;\n      background: #D71920;\n      color: #fff;\n      padding: 40px 20px;\n      margin-top: 60px;\n      animation: fadeInUp 1s ease forwards;\n      animation-fill-mode: forwards;\n    }\n\n    .cta-banner h3 { color: #fff; font-size: 1.6em; }\n    .cta-banner a { text-decoration: none; }\n    .cta-banner button {\n      background: #fff;\n      color: #D71920;\n      border: none;\n      padding: 12px 24px;\n      font-weight: bold;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: background 0.3s ease, color 0.3s ease;\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      font-size: 1em;\n    }\n\n    .cta-banner button:hover { background: #D71920; color: #fff; }\n    .cta-banner button::after {\n      content: '';\n      position: absolute;\n      top: 0; left: -100%;\n      width: 100%; height: 100%;\n      background: rgba(215, 25, 32, 0.2);\n      transition: left 0.4s ease;\n    }\n\n    .cta-banner button:hover::after { left: 0; }\n\n    @media (max-width: 768px) { .side-panel { display: none; } }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"side-panel\">\n    <h4>Why ICT All In?<\/h4>\n    <ul>\n      <li>Scalable Tech<\/li>\n      <li>Strategic Support<\/li>\n      <li>Innovative Design<\/li>\n    <\/ul>\n  <\/div>\n\n  <section class=\"services-section\">\n    <div class=\"services-header\">\n      <h2>Our Services<\/h2>\n      <p>Explore how ICT All In supports your business with professional IT solutions.<\/p>\n    <\/div>\n\n    <div class=\"services-grid\">\n      <div class=\"service-block\">\n        <i class=\"fas fa-laptop-code\"><\/i>\n        <h3>Digital Solutions<\/h3>\n        <p>Web design, hosting, email solutions, and cloud services tailored to your needs.<\/p>\n      <\/div>\n\n      <div class=\"service-block\">\n        <i class=\"fas fa-network-wired\"><\/i>\n        <h3>Networking<\/h3>\n        <p>LAN, WAN, and Wi-Fi setup to keep your business connected and secure.<\/p>\n      <\/div>\n\n      <div class=\"service-block\">\n        <i class=\"fas fa-headset\"><\/i>\n        <h3>Onsite Support<\/h3>\n        <p>Hands-on IT support and Service Level Agreements for long-term business care.<\/p>\n      <\/div>\n\n      <div class=\"service-block\">\n        <i class=\"fas fa-cogs\"><\/i>\n        <h3>IT Management<\/h3>\n        <p>Comprehensive IT management services to streamline operations and efficiency.<\/p>\n      <\/div>\n\n      <div class=\"service-block\">\n        <i class=\"fas fa-shopping-cart\"><\/i>\n        <h3>Products &#038; Sales<\/h3>\n        <p>Computers, printers, TVs, and consumables through trusted supplier partnerships.<\/p>\n      <\/div>\n\n      <div class=\"service-block\">\n        <i class=\"fas fa-plus-circle\"><\/i>\n        <h3>Value-Added Services<\/h3>\n        <p>Antivirus, Microsoft 365, internet connectivity, and hardware warranties.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"cta-banner\">\n      <h3>Ready to elevate your IT strategy?<\/h3>\n      <a href=\"mailto:info@ictallin.co.za?subject=Service Inquiry&#038;body=Hi ICT All In team, I\u2019d like to learn more about your services.\">\n        <button>Get in Touch<\/button>\n      <\/a>\n    <\/div>\n  <\/section>\n\n  <script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n      const serviceBlocks = document.querySelectorAll(\".service-block\");\n\n      const observer = new IntersectionObserver((entries, observer) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            entry.target.style.animationPlayState = \"running\"; \/\/ start animation on scroll\n            observer.unobserve(entry.target); \/\/ animate only once\n          }\n        });\n      }, { threshold: 0.3 });\n\n      serviceBlocks.forEach(block => observer.observe(block));\n    });\n  <\/script>\n\n<\/body>\n<\/html>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><!-- Hero Intro Section --><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><script><br \/>\ndocument.addEventListener('DOMContentLoaded', () => {<br \/>\n  const heading = document.getElementById('hero-heading');<br \/>\n  const words = heading.innerText.split(' ');<br \/>\n  heading.innerHTML = words.map(word => `<span>${word}<\/span>`).join(' ');<\/p>\n<p>  const spans = heading.querySelectorAll('span');<br \/>\n  spans.forEach((span, i) => {<br \/>\n    span.style.animationDelay = `${i * 0.5}s`; \/\/ stagger each word by 0.5s<br \/>\n  });<br \/>\n});<br \/>\n<\/script><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><!-- Product Tile with Laptop --><\/p>\n\n\n\n<style>\n\/* Tile container *\/<br \/>\n.product-tile {<br \/>\n  display: flex;<br \/>\n  align-items: center;<br \/>\n  justify-content: space-between;<br \/>\n  background: #ffffff; \/* clean white background *\/<br \/>\n  border-radius: 12px;<br \/>\n  padding: 40px 30px;<br \/>\n  max-width: 800px;<br \/>\n  margin: 40px auto;<br \/>\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);<br \/>\n  transition: transform 0.3s ease, box-shadow 0.3s ease;<br \/>\n  gap: 30px;<br \/>\n}<\/p>\n<p>.product-tile:hover {<br \/>\n  transform: translateY(-10px);<br \/>\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);<br \/>\n}<\/p>\n<p>\/* Left content *\/<br \/>\n.tile-content {<br \/>\n  flex: 1;<br \/>\n  text-align: left;<br \/>\n}<\/p>\n<p>.tile-heading {<br \/>\n  font-size: 1.8em;<br \/>\n  color: #000000; \/* changed from red to black *\/<br \/>\n  font-weight: 700;<br \/>\n  margin-bottom: 25px;<br \/>\n  position: relative;<br \/>\n}<\/p>\n<p>.tile-heading::after {<br \/>\n  content: '';<br \/>\n  display: block;<br \/>\n  width: 50%;<br \/>\n  height: 3px;<br \/>\n  background: linear-gradient(90deg, #D71920, #FF6F61, #D71920);<br \/>\n  margin-top: 10px;<br \/>\n  border-radius: 2px;<br \/>\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);<br \/>\n}<\/p>\n<p>\/* Center button *\/<br \/>\n.button-wrapper {<br \/>\n  text-align: center;<br \/>\n}<\/p>\n<p>\/* Button styling *\/<br \/>\n.tile-button {<br \/>\n  display: inline-block;<br \/>\n  background: #D71920;<br \/>\n  color: #fff;<br \/>\n  font-weight: 700;<br \/>\n  padding: 12px 28px;<br \/>\n  font-size: 1em;<br \/>\n  border-radius: 8px;<br \/>\n  text-decoration: none;<br \/>\n  perspective: 1000px;<br \/>\n  transition: transform 0.6s ease, background 0.3s ease;<br \/>\n}<\/p>\n<p>\/* Spin animation on hover *\/<br \/>\n.tile-button:hover {<br \/>\n  animation: spin 0.6s linear forwards;<br \/>\n  background: #FF6F61;<br \/>\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);<br \/>\n}<\/p>\n<p>@keyframes spin {<br \/>\n  0% { transform: rotateY(0deg); }<br \/>\n  100% { transform: rotateY(360deg); }<br \/>\n}<\/p>\n<p>\/* Right image *\/<br \/>\n.tile-image {<br \/>\n  flex: 1;<br \/>\n  text-align: center;<br \/>\n}<\/p>\n<p>.tile-image img {<br \/>\n  max-width: 100%;<br \/>\n  border-radius: 12px;<br \/>\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);<br \/>\n  transition: transform 0.5s ease;<br \/>\n}<\/p>\n<p>.tile-image img:hover {<br \/>\n  transform: scale(1.05);<br \/>\n}<\/p>\n<p>\/* Responsive *\/<br \/>\n@media (max-width: 768px) {<br \/>\n  .product-tile {<br \/>\n    flex-direction: column;<br \/>\n    text-align: center;<br \/>\n    gap: 20px;<br \/>\n  }<\/p>\n<p>  .tile-content {<br \/>\n    text-align: center;<br \/>\n  }<br \/>\n}<br \/>\n<\/style>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Empowering Your Digital Journey and Maximising Your Business Solutions. ICT All In &#8211; Product Tile Shop Our Top Products! Shop ICT All In &#8211; Tagline ICT All In delivers Scalable, Strategic, and Innovative IT solutions. Branded Proof of Creativity From<\/p>\n<p><a href=\"https:\/\/www.ictallin.co.za\/?page_id=32\" class=\"awp-btn awp-btn-secondary awp-btn-bubble\">Continue Reading<span class=\"screen-reader-text\">Services<\/span><i class=\"fa fa-arrow-right\"><\/i><span class=\"bubble_effect\"><span class=\"circle top-left\"><\/span><span class=\"circle top-left\"><\/span><span class=\"circle top-left\"><\/span>\t<span class=\"button effect-button\"><\/span><span class=\"circle bottom-right\"><\/span>\t<span class=\"circle bottom-right\"><\/span><span class=\"circle bottom-right\"><\/span><\/span><\/a><\/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-32","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ictallin.co.za\/index.php?rest_route=\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ictallin.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ictallin.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ictallin.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ictallin.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":152,"href":"https:\/\/www.ictallin.co.za\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":3044,"href":"https:\/\/www.ictallin.co.za\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions\/3044"}],"wp:attachment":[{"href":"https:\/\/www.ictallin.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}