/*
Theme Name: HRTECH
Theme URI: https://hrtech.live
Author: HR Technologies
Author URI: https://hrtech.live
Description: A custom WordPress theme for HR Technologies
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hrtech
*/

/* Import Tailwind CSS */
@import 'https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';


  body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  background: #000;
}

div, h1, h2, h3, h4, h5, h6 p {
  color: #fff !important;
}

html {
  scroll-behavior: smooth; /* Enables smooth scrolling */
}

.active {
  color: #a236fe; /* Blue color for active menu */
  font-weight: bold;
}

li a:hover {
  color: #a236fe !important;
}

.text-black {
  color: #1E1E1E;
}

h1 {
  font-weight: 700;
  font-size: 3.75rem; /* 60px / 16 = 3.75rem */
  color: #fff;
}

h2 {
  font-weight: 700;
  font-size: 3.25rem; /* 52px / 16 = 3.25rem */
  color: #1E1E1E;
}

h3 {
  font-weight: 700;
  font-size: 3rem; /* 48px / 16 = 3rem */
}

h4 {
  font-weight: 700;
  font-size: 2.25rem; /* 36px / 16 = 2.25rem */
}

h5 {
  font-weight: 700;
  font-size: 2rem; /* 32px / 16 = 2rem */
}

h6 {
  font-weight: 600;
  font-size: 1.5rem; /* 24px / 16 = 1.5rem */
}

.btn {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0.9rem 2rem;
  border-radius: 5px;
  transition: all 0.3s ease-in-out; /* Smooth transition effect */
}
.btn.btn-primary {
  background: #3c4398;
}
.btn.btn-primary:hover {
  background: #2c3273; /* Darker blue on hover */
  box-shadow: 0 4px 10px rgba(18, 34, 157, 0.3); /* Subtle glow effect */
  transform: translateY(-2px); /* Slight lift */
}
.btn.btn-secondary {
  background: #3c4398;
  color: #fff;
  border: 1px solid #3c4398; /* Border for contrast */
}
.btn.btn-secondary:hover {
  background: #3c4398; /* Light gray on hover */
  color: #fff; /* Darker text */
  transform: translateY(-2px); /* Slight lift */
}

nav ul li {
  color: #1E1E1E;
}

.comp-logo {
  height: 48px;
  width: 168px;
}

.trading-experience {
  background-image: url(assets/images/trading.jpg);
  background-size: cover; /* Ensures the image covers the entire section */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  min-height: 100vh; /* Optional: Makes the section take up the full height of the viewport */
  display: flex; /* Ensures content inside the section is flexible */
  position: relative;
  top: -57px;
}

.progress-bar {
  background: #b53cc2;
  top: -3px;
}

.progress-percent {
  color: #535266;
  font-size: 14px;
  font-weight: 700;
  position: relative;
  top: -2px;
}

.progress-line {
  background: #ACACAC;
  height: 2px;
}

.our-vision {
  border-radius: 16px;
  margin: 2rem;
}

.personal-challenge {
  background-size: cover; /* Ensures the image covers the entire section */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  height: auto; /* Optional: Makes the section take up the full height of the viewport */
  display: flex; /* Ensures content inside the section is flexible */
  justify-content: center; /* Centers the content horizontally */
  align-items: center; /* Centers the content vertically */
}

.cutting-edge {
  background-size: cover; /* Ensures the image covers the entire section */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  height: auto; /* Optional: Makes the section take up the full height of the viewport */
  display: flex; /* Ensures content inside the section is flexible */
  justify-content: center; /* Centers the content horizontally */
  align-items: center; /* Centers the content vertically */
}

.cutting-edge img {
  height: 68px;
}

.contact-form {
  background-color: #fff;
  border-radius: 14px;
}
.contact-form .form-group {
  position: relative;
}
.contact-form .form-group input {
  width: 100%;
  background-color: #F4F4F4;
  height: 61px;
  border-radius: 8px;
  color: #090828;
  padding: 20px;
}
.contact-form .form-group textarea {
  width: 100%;
  background-color: #F4F4F4;
  border-radius: 8px;
  height: 192px;
  color: #090828;
  padding: 20px;
}
.contact-form .form-group label {
  position: absolute;
  color: #090828;
  top: 18px;
  left: 20px;
}
.contact-form .form-group label.focus {
  top: 0px;
  font-size: 12px;
}

.text-milestone {
  position: relative;
  left: 18px;
}
.text-milestone::before {
  content: "";
  position: absolute;
  height: 71px;
  width: 3px;
  background-color: #233DFF !important;
  top: 0;
  left: -18px;
}

#navbar {
  transition: all 0.3s ease-in-out; /* Smooth animation */
}

.shrink {
  padding: 10px 1rem; /* Reduce padding */
  background-color: #ddd; /* Slight transparency */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px); /* Optional: Slight movement effect */
}

#navbar {
  transition: all 0.3s ease-in-out;
}

#navbar.shrink {
  padding: 0.5rem 1rem; /* Reduce padding to shrink */
  height: 50px; /* Adjust height */
}

#sidebar {
  width: 250px; /* Ensure fixed width */
  transition: transform 0.3s ease-in-out;
}

#sidebar.open {
  transform: translateX(0); /* Open sidebar */
}

.personal-challenge .top-label,
.personal-challenge .bottom-label {
  color: #fff;
}
.personal-challenge .progress-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}
.personal-challenge .milestone-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}
.personal-challenge .progress-line {
  position: absolute;
  top: 41px;
  left: 53px;
  width: 100%;
  height: 5px;
  background: #4BB1FF;
  z-index: 0;
}
.personal-challenge .progress-line.active {
  background: #4bb1ff;
}
.personal-challenge .milestone {
  width: 20px;
  height: 20px;
  background: #4BB1FF;
  border: 5px solid #4BB1FF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  margin: 10px 0;
  cursor: pointer;
}
.personal-challenge .milestone.gray {
  border-color: #4BB1FF;
  background: #4BB1FF;
}
.personal-challenge .milestone.green {
  border-color: #4bb1ff;
  background: #4bb1ff;
}
.personal-challenge .milestone span {
  position: absolute;
  font-size: 14px;
  white-space: nowrap;
}
.personal-challenge .milestone .top-label {
  top: -30px;
  color: #fff;
}
.personal-challenge .milestone .bottom-label {
  bottom: -30px;
}
.personal-challenge .tooltip-challenge {
  position: absolute;
  background: #4bb1ff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  display: none;
  width: 200px;
  top: 130px;
}
.personal-challenge .progress-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 600px) {
  .personal-challenge .top-label, .personal-challenge .bottom-label {
    font-size: 11px;
    font-weight: 400;
  }
  .personal-challenge .progress-line {
    position: absolute;
    top: 34px !important;
    left: 49px !important;
    width: 100%;
    height: 5px;
    background: #4BB1FF;
    z-index: 0;
  }
  .personal-challenge .bottom-label {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .personal-challenge .tooltip-challenge {
    top: 170px;
  }
}
@media only screen and (max-width: 830px) {
  .personal-challenge .progress-line {
    position: absolute;
    top: 39px;
    left: 43px;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.staking-wrap img {
  animation: slideDown 0.8s ease-out forwards;
  height: 299px;
}

.staking-wrap img:nth-child(1) {
  animation-delay: 0s;
}

.staking-wrap img:nth-child(2) {
  animation-delay: 0.2s;
}

.staking-wrap img:nth-child(3) {
  animation-delay: 0.4s;
}

.staking-wrap img:nth-child(4) {
  animation-delay: 0.6s;
}

.staking-wrap img:nth-child(5) {
  animation-delay: 0.8s;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 2.5rem; /* 52px / 16 = 3.25rem */
  }
  h2 {
    font-size: 2.2rem; /* 52px / 16 = 3.25rem */
  }
  h3 {
    font-size: 1.8rem; /* 52px / 16 = 3.25rem */
  }
  h4 {
    font-size: 1.6rem; /* 52px / 16 = 3.25rem */
  }
  h5 {
    font-size: 1.5rem; /* 52px / 16 = 3.25rem */
  }
  h5 {
    font-size: 1.4rem; /* 52px / 16 = 3.25rem */
  }
  .staking-wrap img {
    animation: slideDown 0.8s ease-out forwards;
    height: 100px;
  }
}
.bar-label {
  text-align: center;
  font-weight: bold;
  background: #323883;
  padding: 2px;
  border-radius: 6px;
  margin: 30px 0 10px;
}

.scale {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 14px;
}

.circle-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0;
}

.circle {
  width: 25px;
  height: 25px;
  background: white;
  border-radius: 50%;
  z-index: 1;
}

.line {
  flex: 1;
  height: 6px;
  background: white;
  z-index: 0;
}

.text-heading {
  color: #682ecc;
}

h1, h3, h2, h5 {
  font-weight: 300;
}

#milestone {
  padding: 0 2rem;
}
#milestone .milestone-wrap {
  background-color: #3c4398;
  border-radius: 10px;
}