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:#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: 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: #a4cd39;
  color: #111;
}
.wacom-nav button[aria-selected="true"] {
  background: #a4cd39;
  color: #111;
  font-weight: 600;
}

.wc-nav-btn.is-active,
.wc-nav-btn[aria-current="true"] {
  color: #111;               /* highlight */
  opacity: 1;
  background-color: #a4cd39;
  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;
  }
}