body {
  background-color: #252526;
  margin: 0px;
}

/* Containers */

.container {
  width:75%;
  margin: auto;
}

.container-hero {
  float: left;
  position: absolute;
  top: 110px;
  left: 50px;
  text-align: center;
}

.hero-video {
  display: block;
  max-width: 900px;
  margin-top: -60px;
  margin-bottom: -90px;
  margin-left: 0px;
  margin-right: 0;
}

.hero-text h4{
  text-align: center
}

.hero-text h5{
  text-align: center
}

.container3 {
  width:auto;
  height: 600px;
  margin: auto;
}

hr {
  margin: 35px 0;
  background-color: #a4cd39;
  height: 5px;
  border: none;
}

/* Hero Images */

.hero-image {
  background: url(/img/Tablet.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 1025px;
  position: relative;
}

.hero-image2 {
  background: url(/img/AboutUs.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}

.hero-image3 {
  background: url(/img/Services.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}

.hero-image4 {
  background: url(/img/WacomHero.webp) no-repeat center;
  background-size: cover;
  width: 70%;
  height: 280px;
  position: relative;
  margin: 0 auto;
}

.hero-image5 {
  background: url(/img/BlogHeader.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}

.hero-image6 {
  background: url(/img/ContactHeader.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 500px;
  position: relative;
}

.hero-image7 {
  background: url(/img/FSPs.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}

.hero-image8 {
  background: url(/img/BBBEE.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}


.hero-image9 {
  background: url(/img/Education.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}

.hero-image10 {
  background: url(/img/BiooHero.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}

.hero-image11 {
  background: url(/img/CaseStudy.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}

.hero-image12 {
  background: url(/img/Glossary.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}


.hero-image13 {
  background: url(/img/Archive.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}

.hero-image14 {
  background: url(/img/Recruitment.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
  position: relative;
}

.hero-image15 {
  background: url(/img/JavaHeader.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 550px;
  position: relative;
}

.hero-image16 {
  background: url(/img/TSHeader.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 550px;
  position: relative;
}

.hero-image17 {
  background: url(/img/CHeader.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 550px;
  position: relative;
}

.hero-image18 {
  background: url(/img/ReactHeader.webp) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 550px;
  position: relative;
}

.wacom-image {
  width: 50%;
  height: auto;
  float: right;
  position: relative;
  top: 75px;
}

.my-video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* centers the video horizontally */
  border-radius: 10px; /* optional styling */
  box-shadow: 0 4px 8px #a4de39(0,0,4,2); /* optional styling */
}

/* Text */

h1 {
  color:#a4cd39;
  font-size: 35px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-display: swap;
}

h2 {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  font-display: swap;
}

h3 {
  font-size: 25px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 300;
  color: #a4cd39;
  font-display: swap;
}

h4 {
  font-size: 50px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 400;
  text-align: center;
  margin-top: 80px;
  font-display: swap;
}

h5 {
  font-size: 70px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  text-align: center;
  margin-top: -40px;
  font-display: swap;
}

p{
  font-size: 20px;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#d3d3d3;
  font-display: swap;
}


ul{
  font-size: 20px;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#d3d3d3;
  font-display: swap;
}

.ul-2{
  font-size: 20px;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#d3d3d3;
  font-display: swap;
}


.p-wacom{
  font-size: 20px;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#d3d3d3;
  width: 48%;
  font-display: swap;
}

/* Links */

.main a {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-decoration: underline;
  text-transform: none;
  font-display: swap;
}

.main a:active,
a:hover,
a:focus {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}


.pages a {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-decoration: underline;
  text-transform: none;
  font-display: swap;
}

.pages a:active {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

.pages a:hover {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

.pages a:focus {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

.column3-footer-blog a {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

/* Blog List Page */

.blog-entry-content a {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-decoration: underline;
  text-transform: none;
  font-display: swap;
}

.blog-entry-content a:active {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

.blog-entry-content a:hover {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

.blog-entry-content a:focus {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

.blog-entry-content2 a {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-decoration: underline;
  text-transform: none;
  font-display: swap;
}

.blog-entry-content2 a:active {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

.blog-entry-content2 a:hover {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

.blog-entry-content2 a:focus {
  font-size: 30px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

/* Sidebar (Blog) */

.sidebar a {
  font-size: 20px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 350;
  color: #a4cd39;
  text-decoration: underline;
  text-transform: none;
  font-display: swap;
}

.sidebar a:active,
a:hover,
a:focus {
  font-size: 20px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 350;
  color: #a4cd39;
  text-transform: none;
  font-display: swap;
}

.sidebarul {
  font-size: 16px;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#d3d3d3;
  font-display: swap;
}

.sidebarli {
  font-size: 16px;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#d3d3d3;
  font-display: swap;
}

/* Navigation bar */
nav {
  font-family: 'Montserrat', Arial, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  padding: 10px 20px;
  font-display: swap;
}

/* Logo */
.logo img {
  height: 60px;
}

/* Menu */
.menu ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  margin: 0 35px;
}

.menu a {
  color: #d3d3d3;
  text-decoration: underline;
  font-size: 16px;
  text-transform: uppercase;
}

.menu a:hover, a:active {
  color: #a4cd39;
  text-decoration: underline;
  font-size: 16px;
}

a.active {
  color: #a4cd39;
  text-decoration: underline;
  font-size: 16px;
  font-weight: bold;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  color: #d3d3d3;
  padding: 0px 16px;
  background-color: inherit;
  text-decoration: underline;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: none;
  color:#ff7a18;
}

.navbar a:active, .dropdown:active .dropbtn {
  background-color: none;
  color:#ff7a18;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #252526;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Social icons */
.social-icons a {
  color: #d3d3d3;
  margin-left: 30px;
  font-size: 30px;
}

/* Social icons */
.social-icons a:hover {
  color: #a4cd39;
  margin-left: 30px;
  font-size: 30px;
}

.social-icons2 {
  display: none;
}

/* Burger menu */
.burger {
  display: none;
  color: #d3d3d3;
}

.button {
  background-color: #a4cd39;
  border: none;
  color: #171515;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-family: 'Kalam', Arial, sans-serif;
  font-weight: 900;
  display: inline-block;
  font-size: 25px;
  margin: 25px 2px;
  border-radius: 24px;
  font-display: swap;
}

.button1 {
  border-radius: 50px;
  width: 50%;
  background-color: #a4cd39;
}

.button2 {
  border-radius: 50px;
  width: 50%;
  background-color: #a4cd39;
}

.button a {
  color: #171515;
  text-decoration: none;
  font-family: 'Kalam', Arial, sans-serif;
  font-weight: 900;
  display: inline-block;
  font-size: 25px;
  font-display: swap;
}

  /* Home left/right text */
.home1 {
  width: 40%;
  text-align: left;
}

.home2 {
  width: 40%;
  float: right;
  text-align: right;
}

.home3 {
  text-align: right;
}

.top-space {
  padding-top: 200px;
}

.top-space2 {
  padding-top: 250px;
}

.top-space3 {
  padding-top: 250px;
}

/* Home Cards */

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 #a4cd39;
  transition: 0.3s;
  width: 90%;
  height: 830px
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 #a4cd39;
}
.card:active {
  box-shadow: 0 8px 16px 0 #a4cd39;
}

.card2 {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 #a4cd39;
  transition: 0.3s;
  width: 90%;
  height: 680px
}

/* On mouse-over, add a deeper shadow */
.card2:hover {
  box-shadow: 0 8px 16px 0 #a4cd39;
}
.card2:active {
  box-shadow: 0 8px 16px 0 #a4cd39;
}

.card3 {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 #a4cd39;
  transition: 0.3s;
  width: 90%;
  height: 950px
}

/* On mouse-over, add a deeper shadow */
.card3:hover {
  box-shadow: 0 8px 16px 0 #a4cd39;
}
.card3:active {
  box-shadow: 0 8px 16px 0 #a4cd39;
}

.card4 {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 #a4cd39;
  transition: 0.3s;
  width: 90%;
  height: 650px;
  display: flex;
  align-items: center;
  border-radius: 25px;
}

/* On mouse-over, add a deeper shadow */
.card4:hover {
  box-shadow: 0 8px 16px 0 #a4cd39;
}
.card4:active {
  box-shadow: 0 8px 16px 0 #a4cd39;
}

/* Add some padding inside the card container */
.container-card {
  padding: 2px 16px;
}

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  border: 3px solid #a4cd39;
  border-radius: 25px;
  margin: 10px auto;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateX(-180deg);
}

.flip-card:active .flip-card-inner {
  transform: rotateX(-180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #d3d3d3;
  border-radius: 21px;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #252526;
  color: white;
  border-radius: 21px;
  transform: rotateX(-180deg);
}

.flip-card2 {
  background-color: transparent;
  width: 310px;
  height: 470px;
  border: 3px solid #a4cd39;
  border-radius: 25px;
  margin: 20px auto;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card2-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card2:hover .flip-card2-inner {
  transform: rotateX(-180deg);
}

.flip-card2:active .flip-card2-inner {
  transform: rotateX(-180deg);
}

/* Position the front and back side */
.flip-card2-front, .flip-card2-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card2-front {
  background-color: #d3d3d3;
  border-radius: 21px;
  color: black;
}

/* Style the back side */
.flip-card2-back {
  background-color: #252526;
  color: white;
  border-radius: 21px;
  transform: rotateX(-180deg);
  padding: 0px 25px;
}

/* Columns */

.column3 {
  float: left;
  width: 33.33%;
  text-align: center;
  margin: 0 auto;
}

.column2 {
  float: left;
  width: 50%;
  text-align: left;
  margin: 0 auto;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slideshow-container2 {
  max-width: 1920px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
  text-align: center;
  margin: 0 auto;
}

/* Content wrapper for each slide */
.content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Content on the left side */
.content {
  width: 50%;
  text-align: left;
  padding: 0 20px;
}

/* Image on the right side */
.mySlides img {
  width: 700px;
  height: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #171515;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  right: 80px;
  width: 100%;
  text-align: right;
  font-display: swap;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #171515;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  left: 80px;
  font-display: swap;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #a4cd39;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#all::after {
  content: "";
  display: table;
  clear: both;
}

/* Blog Listing Content */

.main{
  float: left;
  width: 60%;
}

.sidebar{
  float: right;
  background-color: #252526;
  width: 25%;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 #a4cd39;
}

.search-container {
  text-align: right;
  margin-bottom: 20px;
}

#searchInput {
  padding: 10px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.blog-entry {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.blog-entry-image {
  flex: 0 0 auto;
  margin-right: 10px;
  /* Add any other styling for the image here */
}

.blog-entry-content {
  flex: 1 1 auto;
  /* Add any other styling for the content here */
}

.blog-entry2 {
  align-items: center;
  margin: 20px;
}

.blog-entry-image2 {
  margin-right: 10px;
  /* Add any other styling for the image here */
}

.blog-entry-content2 {
  flex: 1 1 auto;
  /* Add any other styling for the content here */
}

.contact-form {
  position: relative;
  width: 70%;
  height: 100%;
  overflow: hidden;
}

/* Footer */

.footer-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
  background-color: #424242;
  text-align: center;
  align-items: flex-start;
}

.footer-column {
  flex: 1;
  padding-right: 20px;
}

.logo2 {
  width: 50%;
  padding-top: 135px;
}

.blog-post {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.post-image {
  width: 150px;
  margin-right: 10px;
}

.footer-copyright {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.latest-post {
  width: 25%;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #a4cd39; /* Set a background color */
  color: #171515; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  opacity: 50%;
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

.empower {
  width: 60%
}

.centered-image {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.lost-image {
  text-align: center;
}

.tabs {
  width: 100%;
  margin-top: 20px;
}
.tabs .tab-headers {
  list-style-type: none;
  padding: 0;
}
.tabs .tab-headers li {
  display: inline-block;
  margin-right: 10px;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #171515;
  border: 1px solid #ccc;
  color: #a4cd39
}
.tabs .tab-headers li.active {
  background-color: #a4cd39;
  border-bottom: none;
  color: #171515
}
.tabs .tab-content {
  border: 1px solid #ccc;
  padding: 20px;
  display: none;
}
.tabs .tab-content.active {
  display: block;
  background-color: #d3d3d3;
  color: #171515
}


@media screen and (max-width: 1632px) {
              
  .container {
    width: 90%;
    margin: auto;
  }
  
  .container-hero {
    float: left;
    position: absolute;
    top: 60px;
    left: 40px;
    text-align: center;
  }

  .hero-video {
    display: block;
    justify-self: left;
    max-width: 43%;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: -8vw;
    padding: 0;
  }

  .hero-text h4{
    text-align: left;
  }

  .hero-text h5{
    text-align: left;
  }
  
  .container3 {
    width:auto;
    height: 600px;
    margin: auto;
  }
  
  hr {
    margin: 35px 0;
    background-color: #a4cd39;
    height: 5px;
    border: none;
  }
  
  /* Hero Images */
  
  .hero-image {
    background: url(/img/Tablet.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 850px;
    position: relative;
  }
  
  .hero-image2 {
    background: url(/img/AboutUs.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 600px;
    position: relative;
  }
  
  .hero-image3 {
    background: url(/img/Services.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 600px;
    position: relative;
  }
  
  .hero-image4 {
    background: url(/img/WacomHero.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 280px;
    position: relative;
    margin: 0 auto;
  }
  
  .hero-image5 {
    background: url(/img/BlogHeader.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 600px;
    position: relative;
  }
  
  .hero-image6 {
    background: url(/img/ContactHeader.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 500px;
    position: relative;
  }
  
  .hero-image7 {
    background: url(/img/FSPs.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 620px;
    position: relative;
  }
  
  .hero-image8 {
    background: url(/img/BBBEE.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 620px;
    position: relative;
  }
  
  
  .hero-image9 {
    background: url(/img/Education.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 620px;
    position: relative;
  }
  
  .hero-image10 {
    background: url(/img/BiooHero.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 620px;
    position: relative;
  }
  
  .hero-image11 {
    background: url(/img/CaseStudy.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 620px;
    position: relative;
  }
  
  .hero-image12 {
    background: url(/img/Glossary.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 620px;
    position: relative;
  }
  
  
  .hero-image13 {
    background: url(/img/Archive.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 620px;
    position: relative;
  }
  
  .hero-image14 {
    background: url(/img/Recruitment.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 620px;
    position: relative;
  }
  
  .hero-image15 {
    background: url(/img/JavaHeader.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 550px;
    position: relative;
  }
  
  .hero-image16 {
    background: url(/img/TSHeader.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 550px;
    position: relative;
  }
  
  .hero-image17 {
    background: url(/img/CHeader.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 550px;
    position: relative;
  }
  
  .hero-image18 {
    background: url(/img/ReactHeader.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 550px;
    position: relative;
  }
  
  .wacom-image {
    width: 50%;
    height: auto;
    float: right;
    position: relative;
    top: 75px;
  }
  
  /* Text */
  
  h1 {
    color:#a4cd39;
    font-size: 30px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-display: swap;
  }
  
  h2 {
    font-size: 30px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    font-display: swap;
  }
  
  h3 {
    font-size: 25px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 300;
    color: #a4cd39;
    font-display: swap;
  }
  
  h4 {
    font-size: 36px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    text-align: center;
    margin-top: 80px;
    font-display: swap;
  }
  
  h5 {
    font-size: 50px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    text-align: center;
    margin-top: -30px;
    font-display: swap;
  }
  
  p{
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    color:#d3d3d3;
    font-display: swap;
  }
  
  
  ul{
    font-size: 20px;
    font-family: 'Montserrat', Arial, sans-serif;
    color:#d3d3d3;
    font-display: swap;
  }
  
  .ul-2{
    font-size: 20px;
    font-family: 'Montserrat', Arial, sans-serif;
    color:#d3d3d3;
    font-display: swap;
  }
  
  
  .p-wacom{
    font-size: 20px;
    font-family: 'Montserrat', Arial, sans-serif;
    color:#d3d3d3;
    width: 48%;
    font-display: swap;
  }
  
  /* Links */
  
  .main a {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-decoration: underline;
    text-transform: none;
    font-display: swap;
  }
  
  .main a:active,
  a:hover,
  a:focus {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  
  .pages a {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-decoration: underline;
    text-transform: none;
    font-display: swap;
  }
  
  .pages a:active {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  .pages a:hover {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  .pages a:focus {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  .column3-footer-blog a {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  /* Blog List Page */
  
  .blog-entry-content a {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-decoration: underline;
    text-transform: none;
    font-display: swap;
  }
  
  .blog-entry-content a:active {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  .blog-entry-content a:hover {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  .blog-entry-content a:focus {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  .blog-entry-content2 a {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-decoration: underline;
    text-transform: none;
    font-display: swap;
  }
  
  .blog-entry-content2 a:active {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  .blog-entry-content2 a:hover {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  .blog-entry-content2 a:focus {
    font-size: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  /* Sidebar (Blog) */
  
  .sidebar a {
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 350;
    color: #a4cd39;
    text-decoration: underline;
    text-transform: none;
    font-display: swap;
  }
  
  .sidebar a:active,
  a:hover,
  a:focus {
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 350;
    color: #a4cd39;
    text-transform: none;
    font-display: swap;
  }
  
  .sidebarul {
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    color:#d3d3d3;
    font-display: swap;
  }
  
  .sidebarli {
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    color:#d3d3d3;
    font-display: swap;
  }
  
  /* Navigation bar */
  nav {
    font-family: 'Montserrat', Arial, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    padding: 20px 10px;
    font-display: swap;
    text-align: center;
  }
  
  /* Logo */
  .logo img {
    height: 50px;
  }
  
  /* Menu */
  .menu ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .menu li {
    margin: 0 10px;
  }
  
  .menu a {
    color: #d3d3d3;
    text-decoration: underline;
    font-size: 16px;
    text-transform: uppercase;
  }
  
  .menu a:hover, a:active {
    color: #a4cd39;
    text-decoration: underline;
    font-size: 16px;
  }
  
  a.active {
    color: #a4cd39;
    text-decoration: underline;
    font-size: 16px;
    font-weight: bold;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    color: #d3d3d3;
    padding: 0px 8px;
    background-color: inherit;
    text-decoration: underline;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: none;
    color:#a4cd39;
  }
  
  .navbar a:active, .dropdown:active .dropbtn {
    background-color: none;
    color:#a4cd39;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #252526;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Social icons */
  .social-icons a {
    color: #d3d3d3;
    margin-left: 20px;
    font-size: 20px;
  }
  
  /* Social icons */
  .social-icons a:hover {
    color: #a4cd39;
    margin-left: 20px;
    font-size: 20px;
  }
  
  .social-icons2 {
    display: none;
  }
  
  /* Burger menu */
  .burger {
    display: none;
    color: #d3d3d3;
  }
  
  .button {
    background-color: #a4cd39;
    border: none;
    color: #171515;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-family: 'Kalam', Arial, sans-serif;
    font-weight: 900;
    display: inline-block;
    font-size: 25px;
    margin: 25px 2px;
    border-radius: 24px;
    font-display: swap;
  }
  
  .button1 {
    border-radius: 50px;
    width: 50%;
    background-color: #a4cd39;
  }

  .button2 {
    border-radius: 50px;
    width: 40%;
    background-color: #a4cd39;
    position: relative;
    left: -350px;
  }
  
  .button a {
    color: #171515;
    text-decoration: none;
    font-family: 'Kalam', Arial, sans-serif;
    font-weight: 900;
    display: inline-block;
    font-size: 25px;
    font-display: swap;
  }
  
    /* Home left/right text */
  .home1 {
    width: 40%;
    text-align: left;
  }
  
  .home2 {
    width: 40%;
    float: right;
    text-align: right;
  }
  
  .home3 {
    text-align: right;
  }
  
  .top-space {
    padding-top: 200px;
  }
  
  .top-space2 {
    padding-top: 250px;
  }
  
  .top-space3 {
    padding-top: 250px;
  }
  
  /* Home Cards */
  
  .card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 #a4cd39;
    transition: 0.3s;
    width: 90%;
    height: 700px
  }
  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  .card:active {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  
  .card2 {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 #a4cd39;
    transition: 0.3s;
    width: 90%;
    height: 680px
  }
  
  /* On mouse-over, add a deeper shadow */
  .card2:hover {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  .card2:active {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  
  .card3 {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 #a4cd39;
    transition: 0.3s;
    width: 90%;
    height: 850px
  }
  
  /* On mouse-over, add a deeper shadow */
  .card3:hover {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  .card3:active {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  
  .card4 {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 #a4cd39;
    transition: 0.3s;
    width: 90%;
    height: 650px;
    display: flex;
    align-items: center;
    border-radius: 25px;
  }
  
  /* On mouse-over, add a deeper shadow */
  .card4:hover {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  .card4:active {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  
  /* Add some padding inside the card container */
  .container-card {
    padding: 2px 16px;
  }
  
    /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    border: 3px solid #a4cd39;
    border-radius: 25px;
    margin: 10px auto;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateX(-180deg);
  }
  
  .flip-card:active .flip-card-inner {
    transform: rotateX(-180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #d3d3d3;
    border-radius: 21px;
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: #252526;
    color: white;
    border-radius: 21px;
    transform: rotateX(-180deg);
  }
  
  .flip-card2 {
    background-color: transparent;
    width: 310px;
    height: 470px;
    border: 3px solid #a4cd39;
    border-radius: 25px;
    margin: 20px auto;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card2-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card2:hover .flip-card2-inner {
    transform: rotateX(-180deg);
  }
  
  .flip-card2:active .flip-card2-inner {
    transform: rotateX(-180deg);
  }
  
  /* Position the front and back side */
  .flip-card2-front, .flip-card2-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card2-front {
    background-color: #d3d3d3;
    border-radius: 21px;
    color: black;
  }
  
  /* Style the back side */
  .flip-card2-back {
    background-color: #252526;
    color: white;
    border-radius: 21px;
    transform: rotateX(-180deg);
    padding: 0px 25px;
  }
  
  /* Columns */
  
  .column3 {
    float: left;
    width: 33.33%;
    text-align: center;
    margin: 0 auto;
  }
  
  .column2 {
    float: left;
    width: 50%;
    text-align: left;
    margin: 0 auto;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  * {box-sizing:border-box}
  
  /* Slideshow container */
  .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
  }
  
  .slideshow-container2 {
    max-width: 1920px;
    position: relative;
    margin: auto;
  }
  
  /* Hide the images by default */
  .mySlides {
    display: none;
    text-align: center;
    margin: 0 auto;
  }
  
  /* Content wrapper for each slide */
  .content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  /* Content on the left side */
  .content {
    width: 50%;
    text-align: left;
    padding: 0 20px;
  }
  
  /* Image on the right side */
  .mySlides img {
    width: 700px;
    height: auto;
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  
  /* Caption text */
  .text {
    color: #171515;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    right: 80px;
    width: 100%;
    text-align: right;
    font-display: swap;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #171515;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    left: 80px;
    font-display: swap;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #a4cd39;
  }
  
  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  
  #all::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Blog Listing Content */
  
  .main{
    float: left;
    width: 60%;
  }
  
  .sidebar{
    float: right;
    background-color: #252526;
    width: 25%;
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 #a4cd39;
  }
  
  .search-container {
    text-align: right;
    margin-bottom: 20px;
  }
  
  #searchInput {
    padding: 10px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
  }
  
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  .blog-entry {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .blog-entry-image {
    flex: 0 0 auto;
    margin-right: 10px;
    /* Add any other styling for the image here */
  }
  
  .blog-entry-content {
    flex: 1 1 auto;
    /* Add any other styling for the content here */
  }
  
  .blog-entry2 {
    align-items: center;
    margin: 20px;
  }
  
  .blog-entry-image2 {
    margin-right: 10px;
    /* Add any other styling for the image here */
  }
  
  .blog-entry-content2 {
    flex: 1 1 auto;
    /* Add any other styling for the content here */
  }
  
  .contact-form {
    position: relative;
    width: 70%;
    height: 100%;
    overflow: hidden;
  }
  
  /* Footer */
  
  .footer-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    background-color: #424242;
    text-align: center;
    align-items: flex-start;
  }
  
  .footer-column {
    flex: 1;
    padding-right: 20px;
  }
  
  .logo2 {
    width: 50%;
    padding-top: 135px;
  }
  
  .blog-post {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .post-image {
    width: 150px;
    margin-right: 10px;
  }
  
  .footer-copyright {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .latest-post {
    width: 25%;
  }
  
  #myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #a4cd39; /* Set a background color */
    color: #171515; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    opacity: 50%;
  }
  
  #myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
  }
  
  .empower {
    width: 60%
  }
  
  .centered-image {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  
  .lost-image {
    text-align: center;
  }
  
  .tabs {
    width: 100%;
    margin-top: 20px;
  }
  .tabs .tab-headers {
    list-style-type: none;
    padding: 0;
  }
  .tabs .tab-headers li {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #171515;
    border: 1px solid #ccc;
    color: #a4cd39
  }
  .tabs .tab-headers li.active {
    background-color: #a4cd39;
    border-bottom: none;
    color: #171515
  }
  .tabs .tab-content {
    border: 1px solid #ccc;
    padding: 20px;
    display: none;
  }
  .tabs .tab-content.active {
    display: block;
    background-color: #d3d3d3;
    color: #171515
  }
}




@media screen and (max-width: 1021px) {
              
  .container-hero {
    float: none;
    position: static;
    margin: 0 auto;
  }

  .hero-video {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .hero-text h4{
    text-align: center;
  }

  .hero-text h5{
    text-align: center
  }

  .container {
    width:90%;
    margin: auto;
  }
  
  .container3 {
    width:auto;
    height: 800px;
    margin: auto;
    background-image: url('/img/Connecting People.webp');
    background-position: center;
  }

  hr {
    margin: 20px 0;
    background-color: #a4cd39;
    height: 5px;
    border: none;
  }

  .hero-image {
    background: none;
    background-size: cover;
    width: 100%;
    height: 650px;
    position: relative;
  }

  .hero-image2 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/AboutUs.webp');
  }

  .hero-image3 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/Services.webp');
    background-position: center;
  }

  .hero-image4 {
    background: url(/img/WacomHero.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100px;
    position: relative;
  }

  .hero-image5 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/BlogHeader.webp');
    background-position: center;
    margin-top: -50px;
  }

  .hero-image6 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/ContactHeader.webp');
    background-position: center;
    margin-top: -30px;
  }

  .hero-image7 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/FSPs.webp');
    background-position: center;
    margin-top: -20px;
  }

  .hero-image8 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/BBBEE.webp');
    background-position: center;
    margin-top: -20px;
  }
    
  .hero-image9 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/Education.webp');
    background-position: center;
    margin-top: -20px;
  }
      
  .hero-image10 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/BiooHero.webp');
    background-position: center;
    margin-top: -20px;
  }
        
  .hero-image11 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/CaseStudy.webp');
    background-position: center;
    margin-top: -20px;
  }
        
  .hero-image12 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/Glossary.webp');
    background-position: center;
    margin-top: -20px;
  }

  
  .hero-image13 {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-image: url('/img/Archive.webp');
    background-position: center;
    margin-top: -50px;
  }
    
  .hero-image14 {
    width: 100%;
    height: 220px;
    margin: 0 auto;
    background-image: url('/img/Recruitment.webp');
    background-position: center;
    margin-top: -50px;
  }
      
  .hero-image15 {
    width: 100%;
    height: 220px;
    margin: 0 auto;
    background-image: url('/img/JavaHeader.webp');
    background-position: center;
    margin-top: -50px;
  }
      
  .hero-image16 {
    width: 100%;
    height: 220px;
    margin: 0 auto;
    background-image: url('/img/TSHeader.webp');
    background-position: center;
    margin-top: -50px;
  }
      
  .hero-image17 {
    width: 100%;
    height: 220px;
    margin: 0 auto;
    background-image: url('/img/CHeader.webp');
    background-position: center;
    margin-top: -50px;
  }
      
  .hero-image18 {
    width: 100%;
    height: 220px;
    margin: 0 auto;
    background-image: url('/img/ReactHeader.webp');
    background-position: center;
    margin-top: -50px;
  }

  .wacom-image {
    width: 100%;
    height: auto;
    top: 0px;
  }

  .button1 {
    border-radius: 50px;
    width: 100%;
    background-color: #a4cd39;
  }

  .button2 {
    border-radius: 50px;
    width: 95%;
    background-color: #a4cd39;
    position: relative;
    left: 0px;
  }

  h1{
    text-align: center;
    font-size: 30px;
  }

  h2 {
    font-size: 25px;
    text-align: center;
  }

  h3{
    text-align: center;
    font-size: 20px;
    color: #a4cd39;
  }

  h4 {
    font-size: 25px;
    margin: 20px 0 0 0;
  }

  h5 {
    font-size: 35px;
    margin: 0 0 100px 0;
  }

  p {
    font-size: 16px;
    margin: 0 0 0 0;
    text-align: center;
  }
  
  ul {
    font-size: 16px;
    margin: 0 0 0 0;
    text-align: center;
  }

  .ul-2 {
    font-size: 16px;
    margin: 0 0 0 0;
    text-align: left;
  }

  .p-wacom{
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    color:#d3d3d3;
    width: 100%;
    margin-top: 280px;
    font-display: swap;
  }

  .main a {
    font-size: 20px;
    text-align: center;
  }

  .main a:active {
    font-size: 20px;
    text-align: center;
  }

  .main a:hover {
    font-size: 20px;
    text-align: center;
  }

  .sidebar a {
    font-size: 16px;
    text-align: center;
  }

  .sidebar a:active {
    font-size: 16px;
    text-align: center;
  }

  .pages a {
    font-size: 20px;
    text-align: center;
  }

  .pages a:active {
    font-size: 20px;
    text-align: center;
  }

  .pages a:hover {
    font-size: 20px;
    text-align: center;
  }

  /* Burger menu */
  .burger {
    display: block;
    color: #d3d3d3;
  }

  .burger a{
    display: block;
    color: #d3d3d3;
    font-size: 20px;
  }

  /* Logo */
  .logo {
    order: 0;
    margin-right: auto;
  }

  /* Menu */
  .menu {
    order: 0;
    width: 100%;
    display: none;
    text-align: center;
    margin: 10px 0;
  }

  .menu ul {
    flex-direction: column;
  }

  .menu li {
    margin: 10px 0;
  }

  li {
    text-align: left;
  }

  /* Show menu when burger icon is clicked */
  .menu.show {
    display: block;
  }

  /* Social icons */
  .social-icons {
    order: 3;
    margin-left: auto;
    display: none;
  }

  .social-icons a{
    font-size: 20px;
    margin-left: 20px;
    display: none;
  }

  .social-icons2 {
    display: block;
    font-size: 30px;
  }

  .home1 {
    width: 100%;
    text-align: center;
  }

  .home2 {
    width: 100%;
    float: none;
    text-align: center;
  }

  .home3 {
    text-align: center;
  }

  .top-space {
    padding-top: 100px;
  }
  
  .top-space2 {
    padding-top: 120px;
  }

  .top-space3 {
    padding-top: 80px;
  }
  
  .column3 {
    width: 100%;
  }
  .column2 {
    width: 100%;
  }

  .card {
    box-shadow: 0 4px 8px 0 #a4cd39;
    transition: 0.3s;
    width: 100%;
    height: fit-content;
    text-align: center;
    margin: 20px auto;
  }
  .card:hover {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  .card:active {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  .container-card {
    padding: 20px 16px;
  }

  .card2 {
    box-shadow: 0 4px 8px 0 #a4cd39;
    transition: 0.3s;
    width: 100%;
    height: fit-content;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .card2:hover {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }

  .card2:active {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }

  
  .card3 {
    box-shadow: 0 4px 8px 0 #a4cd39;
    transition: 0.3s;
    width: 100%;
    height: fit-content;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .card3:hover {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }

  .card3:active {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }

  .card4 {
    box-shadow: 0 4px 8px 0 #a4cd39;
    transition: 0.3s;
    width: 100%;
    height: fit-content;
    text-align: center;
    margin: 20px auto;
    display: flex;
    align-items: center;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .card4:hover {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  
  .card4:active {
    box-shadow: 0 8px 16px 0 #a4cd39;
  }
  
  /* Media query for mobile */
  /* Content wrapper for mobile */
  .content-wrapper {
    flex-direction: column;
  }

  /* Content on the left side */
.content {
  width: 100%;
  text-align: center;
  padding: 0 20px;
}

  /* Image width for mobile */
  .mySlides img {
    width: 360px;
    height: auto;
  }

  .text {
    color: #171515;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    right: 0px;
    width: 100%;
    text-align: right;
    font-display: swap;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #171515;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    left: 0px;
    font-display: swap;
  }
  
  .sidebar{
    display: none;
  }

  .main{
    width: 100%;
  }
 
  .search-container {
    text-align: center;
    margin-bottom: 20px;
  }

  #searchInput {
    padding: 10px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
  }
    
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }

  .blog-entry {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-entry-image {
    margin: 0 auto;
  }
  
  .contact-form {
    width: 100%;
    text-align: center;
  }

  .footer-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    background-color: #424242;
    text-align: center;
    align-items: flex-start;
  }
  
  .footer-column {
    flex: 1;
    padding: 20px;
  }

  .column3-footer-image{
    display: none
  }

  .column3-footer-blog{
    display: none;
  }
  
  .logo2 {
    display: none;
    width: 50%;
  }
  
  .blog-post {
    display: none;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .post-image {
    display: none;
    width: 150px;
    margin-right: 10px;
  }
  
  .footer-copyright {
    width: 100%;
    text-align: center;
    padding-bottom: 15px;
  }

  .latest-post {
    display: none;
  }

  .empower {
    width: 100%
  }

  
.centered-image {
  width: 100%;
  text-align: center;
}

.lost-image {
  max-width: 100%;
  height: auto;
}
}


/* ==== Home Cards Carousel (namespaced to avoid conflicts) ==== */
.hc-carousel {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

.hc-viewport {
  overflow: hidden;
  position: relative;
}

.hc-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform 450ms ease;
  will-change: transform;
}

.hc-slide {
  padding: 10px 0;
  opacity: 0;
  transform: translateY(12px) scale(0.995);
  transition: opacity 300ms ease, transform 300ms ease;
}
.hc-slide[aria-hidden="true"] { pointer-events: none; }
.hc-slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hc-slide-inner {
  display: grid;
  gap: 24px;
  align-items: center;
  background: #2b2b2b; /* complement your dark theme */
  border-radius: 18px;
  padding: 20px;
}

/* Desktop: media left, text right */
@media (min-width: 900px) {
  .hc-slide-inner {
    grid-template-columns: 1fr 1fr;
    padding: 26px;
  }
}

.hc-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Copy */
.hc-copy h2 {
  margin: 0 0 10px 0;
  text-align: center; /* replaces inline center for this section */
}
.hc-copy p {
  margin: 10px 0;
}

/* Arrows */
.hc-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(0,0,0,0.35);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.hc-arrow:hover { background: rgba(0,0,0,0.5); }
.hc-prev { left: -8px; }
.hc-next { right: -8px; }

/* Mobile adjustments: place arrows next to the image instead of overlapping text */
@media (max-width: 899px) {
  .hc-slide-inner {
    grid-template-columns: 1fr;
    position: relative; /* allows arrows to anchor inside each slide */
  }

  .hc-arrow {
    position: absolute;
    display: block ;
    top: 20%; /* roughly vertically aligned with the image */
    transform: translateY(-50%);
    background: rgba(0,0,0,0.35);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    z-index: 3;
  }

  .hc-arrow:hover {
    background: rgba(0,0,0,0.55);
  }

  .hc-prev { left: 8px; }
  .hc-next { right: 8px; }
}

/* Dots */
.hc-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.hc-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: #666;
  opacity: 0.7;
  cursor: pointer;
}
.hc-dots button[aria-selected="true"] {
  background: #a4cd39; /* your brand green */
  opacity: 1;
}

/* Mobile stacking: image top, text below */
@media (max-width: 899px) {
  .hc-slide-inner {
    grid-template-columns: 1fr;
  }
}

/* === Desktop-only reveal transitions for scroll-stepping === */
@media (min-width: 900px) {
  .hc-slide .hc-media,
  .hc-slide .hc-copy {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 350ms ease, transform 350ms ease;
  }
  .hc-slide .hc-media.is-shown,
  .hc-slide .hc-copy.is-shown {
    opacity: 1;
    transform: none;
  }
}


/* ===========================
   Wacom Carousel Navigation
   =========================== */
.wacom-nav {
  text-align: center;
  margin: 0 0 18px 0;
  justify-content: center;
}
.wacom-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.wacom-nav li { display: inline-block; }
.wacom-nav button {
  background: #2b2b2b;
  color: #fff;
  border: 1px solid #444;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.wacom-nav button:hover {
  background: #ff7a18;
  color: #111;
}
.wacom-nav button[aria-selected="true"] {
  background: #ff7a18;
  color: #111;
  font-weight: 600;
}

.wc-nav-btn.is-active,
.wc-nav-btn[aria-current="true"] {
  color: #111;               /* highlight */
  opacity: 1;
  background-color: #ff7a18;
  font-weight: 600;
}

/* ===========================
   Wacom Carousel (wc-*)
   =========================== */
.wc-carousel {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

.wc-viewport {
  overflow: hidden;
  position: relative;
}

.wc-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform 450ms ease;
  will-change: transform;
}

.wc-slide {
  padding: 10px 0;
  opacity: 0;
  transform: translateY(12px) scale(0.995);
  transition: opacity 300ms ease, transform 300ms ease;
}
.wc-slide[aria-hidden="true"] { pointer-events: none; }
.wc-slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wc-slide-inner {
  display: grid;
  gap: 24px;
  align-items: center;
  background: #2b2b2b; /* match theme */
  border-radius: 18px;
  padding: 20px;
}
@media (min-width: 900px) {
  .wc-slide-inner {
    grid-template-columns: 1fr 1fr; /* image + text */
    padding: 26px;
  }
}

/* Media */
.wc-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Copy */
.wc-copy h2 {
  margin: 0 0 10px 0;
  text-align: left;
}
.wc-copy p { margin: 10px 0; }

/* Arrows */
.wc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(0,0,0,0.35);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.wc-arrow:hover { background: rgba(0,0,0,0.5); }
.wc-prev { left: -8px; }
.wc-next { right: -8px; }

@media (max-width: 600px) {
  .wc-prev { left: 4px; }
  .wc-next { right: 4px; }
  .wc-copy h2 {
  margin: 0 0 10px 0;
  text-align: center;
}
}

/* Dots */
.wc-dots {
  display: none;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.wc-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: #666;
  opacity: 0.7;
  cursor: pointer;
}
.wc-dots button[aria-selected="true"] {
  background: #a4cd39;
  opacity: 1;
}

/* Mobile stack (image top, text below) */
@media (max-width: 899px) {
  .wc-slide-inner { grid-template-columns: 1fr; }
}

/* === Wacom carousel: better arrow placement on mobile === */
@media (max-width: 899px) {
  /* Ensure we have a positioning context if you ever move arrows inside the slide later */
  .wc-slide-inner { position: relative; }

  /* Raise arrows so they sit around the middle of the image area */
  .wc-arrow {
    top: clamp(90px, 32vw, 200px); /* tweak middle value to move up/down */
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    z-index: 3;
  }

  /* Keep them tight to the edges on mobile */
  .wc-prev { left: 8px; }
  .wc-next { right: 8px; }
}

/* On very small phones, nudge a touch lower to stay centered on the image */
@media (max-width: 480px) {
  .wc-arrow { top: clamp(110px, 38vw, 240px); }
}

/* === Services page CTA button (scoped) === */
.svc-btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 28px;
  background: #a4cd39;          /* brand green */
  color: #111;                   /* readable on green */
  font-family: 'Kalam', Arial, sans-serif;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1;
  transition: background 180ms ease, color 180ms ease, transform 80ms ease, box-shadow 180ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.svc-btn:hover {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 28px;
  background: #a4cd39;          /* brand green */
  color: #111;                   /* readable on green */
  font-family: 'Kalam', Arial, sans-serif;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1;
  transition: background 180ms ease, color 180ms ease, transform 80ms ease, box-shadow 180ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.svc-btn:active {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 28px;
  background: #a4cd39;          /* brand green */
  color: #111;                   /* readable on green */
  font-family: 'Kalam', Arial, sans-serif;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1;
  transition: background 180ms ease, color 180ms ease, transform 80ms ease, box-shadow 180ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Optional: full-width on small screens inside carousels or narrow columns */
@media (max-width: 600px) {
  .svc-btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================
   HALLOWEEN THEME (scoped)
   Enable by adding .theme-halloween on <body>
   ============================ */
.theme-halloween {
  --hal-orange: #ff7a18;
  --hal-orange-2: #ff9a3c;
  --hal-purple: #4b2a7a;
  --hal-ink: #0f0f0f;
  --hal-ink-2: #151515;
  --hal-cream: #fff3e0;
  --hal-muted: #666;
}

/* Background: keep your dark vibe, add subtle vignette */
.theme-halloween body {
  background:
    radial-gradient(1000px 500px at 110% -10%, rgba(255,122,24,0.08), transparent 60%),
    radial-gradient(700px 400px at -10% -10%, rgba(75,42,122,0.12), transparent 55%),
    #252526;
}

/* Links (only subtle color shift on hover) */
.theme-halloween a {
  transition: color .2s ease, text-shadow .2s ease;
}
.theme-halloween a:hover {
  color: var(--hal-orange);
  text-shadow: 0 0 0 transparent;
}

/* ===== Buttons ===== */
/* Your global button pair without touching non-themed pages */
.theme-halloween .button.button1 {
  background: var(--hal-orange);
  color: #111;
  border: 1px solid transparent;
  transition: background .18s ease, transform .08s ease, box-shadow .18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.theme-halloween .button.button1:hover {
  background: var(--hal-orange-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.theme-halloween .button.button1 a { color: #111; }

.theme-halloween .button.button2 {
  background: var(--hal-orange);
  color: #111;
  border: 1px solid transparent;
  transition: background .18s ease, transform .08s ease, box-shadow .18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.theme-halloween .button.button2:hover {
  background: var(--hal-orange-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.theme-halloween .button.button2 a { color: #111; }

.theme-halloween .button {
  background: var(--hal-orange);
  color: #111;
  border: 1px solid transparent;
  transition: background .18s ease, transform .08s ease, box-shadow .18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.theme-halloween .button:hover {
  background: var(--hal-orange-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.theme-halloween .button a { color: #111; }

/* Services page custom CTA (from earlier work) */
.theme-halloween .svc-btn {
  background: var(--hal-orange);
  color: #111;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.theme-halloween .svc-btn:hover,
.theme-halloween .svc-btn:focus-visible {
  background: var(--hal-orange-2);
  color: #111;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

/* ===== Cards / blocks ===== */
.theme-halloween .card,
.theme-halloween .card2,
.theme-halloween .container-card,
.theme-halloween .hc-slide-inner {
  /* keep your dark blocks, add a thin glow */
  box-shadow:
    0 0 0 1px rgba(255,122,24,0.18) inset,
    0 10px 24px rgba(0,0,0,.35);
}

/* Headings accent */
.theme-halloween h1, 
.theme-halloween h2, 
.theme-halloween h3 {
  color: #fff; /* keep readable */
}
.theme-halloween h2 b,
.theme-halloween h3 b {
  color: var(--hal-orange);
}

/* ===== Carousel (home + wacom + services reuse) ===== */
/* Arrows */
.theme-halloween .hc-arrow {
  background: rgba(0,0,0,0.45);
  color: var(--hal-orange);
  border: 1px solid rgba(255,122,24,0.25);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.theme-halloween .hc-arrow:hover {
  background: rgba(0,0,0,0.6);
  color: var(--hal-orange-2);
}

/* Dots */
.theme-halloween .hc-dots button {
  background: #555;
}
.theme-halloween .hc-dots button[aria-selected="true"] {
  background: var(--hal-orange);
}

/* Wacom nav bar (if present) */
.theme-halloween .wacom-nav .wacom-tab[aria-selected="true"] {
  color: var(--hal-orange);
  border-color: var(--hal-orange);
}
.theme-halloween .wacom-nav .wacom-tab:hover {
  color: var(--hal-orange-2);
}

/* Services nav (if present) */
.theme-halloween .svc-nav .svc-tab[aria-selected="true"] {
  color: var(--hal-orange);
  border-color: var(--hal-orange);
}
.theme-halloween .svc-nav .svc-tab:hover {
  color: var(--hal-orange-2);
}

/* ===== Hero images: add a subtle corner "web" ===== */
/* ===== Enhanced visible spider web overlay for hero images ===== */
/* Make sure hero wrappers can host the corner image */
[class^="hero-image"],
[class*=" hero-image"] {
  position: relative;
  overflow: hidden; /* keeps the corner art inside the hero */
}

/* === Corner image (desktop) === */
.theme-halloween [class^="hero-image"]::before,
.theme-halloween [class*=" hero-image"]::before {
  content: "";
  position: absolute;
  top: 0;              /* adjust as you like */
  right: 0;            /* adjust as you like */
  width: 280px;        /* set to your artwork size */
  height: 280px;       /* set to your artwork size */
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;        /* tweak if you want it subtler */
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;

  /* Use your own file(s) here; image-set serves @2x on retina */
  background-image: image-set(
    url("/img/HalloweenIcon.webp") 1x,
    url("/img/HalloweenIcon.webp") 2x
  );
  /* If you prefer PNG/SVG, just replace the URLs above */
}

/* === Mobile/tablet scaling === */
@media (max-width: 899px) {
  .theme-halloween [class^="hero-image"]::before,
  .theme-halloween [class*=" hero-image"]::before {
    width: 160px;
    height: 160px;
    top: 10px;
    right: 10px;
    opacity: 0.85;
  }
}
@media (max-width: 480px) {
  .theme-halloween [class^="hero-image"]::before,
  .theme-halloween [class*=" hero-image"]::before {
    width: 120px;
    height: 120px;
    top: 8px;
    right: 8px;
    opacity: 0.8;
  }
}
/* Ultra-small: hide if it crowds content */
@media (max-width: 340px) {
  .theme-halloween [class^="hero-image"]::before,
  .theme-halloween [class*=" hero-image"]::before {
    display: none;
  }
}

/* ===== Subtle pulse on important CTAs (reduced-motion safe) ===== */
@media (prefers-reduced-motion: no-preference) {
  .theme-halloween .button.button1,
  .theme-halloween .svc-btn {
    animation: hal-pulse 3.6s ease-in-out infinite;
  }
  @keyframes hal-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 0 0 0 rgba(255,122,24,.0); }
    50%      { box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 6px rgba(255,122,24,.12); }
  }
}

/* ===== Minor UX touches ===== */
.theme-halloween hr {
  border: 0;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,122,24,.5), transparent);
}

/* Keep copy readable on dark blocks that might use lighter text */
.theme-halloween .container-card p,
.theme-halloween .hc-copy p {
  color: #e7e7e7;
}