/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/

:root {
  --white-color: #ffffff;
  --light-color: #e6e6e6;
  --dark-color: #03040e;
  --primary-color: #9c64cc;
  --secondary-color: #994cde;
  --section-bg-color: linear-gradient(to bottom right, rgba(32,98,231,1) 0%, rgba(248,72,255,1) 100%);
  --custom-btn-bg-color: linear-gradient(#994cde 0%, rgb(122, 0, 228) 100%);
  --custom-btn-bg-hover-color: linear-gradient(#994cde 0%, rgb(122, 0, 228) 100%);
  --custom-btn-dark-bg-color: linear-gradient(rgb(29, 49, 69) 0%, rgb(12, 33, 54) 100%);
  --custom-btn-dark-bg-hover-color: linear-gradient(rgb(40, 68, 95) 0%, rgb(20, 54, 88) 100%);
  --p-color: #ffffff;
  --border-color: #962cf3;
  --link-hover-color: #c78bfa;
  --ball-dark-blue: #151e26;

  --custom-gradient-1y: linear-gradient(to bottom, rgb(70, 61, 192), rgb(81, 25, 186));
  --custom-border-1y: 2px solid rgb(35, 25, 186);
  --custom-gradient: linear-gradient(to bottom, rgb(62, 53, 129), rgb(27, 21, 43));
  --custom-border: 2px solid rgb(30, 24, 79);
  --custom-gradient-3y: linear-gradient(to bottom, rgb(118, 25, 135), rgb(195, 79, 96));
  --custom-border-3y: 2px solid rgb(123, 10, 55);

  --body-font-family: 'Outfit', sans-serif;

  --h1-font-size: 86px;
  --h2-font-size: 46px;
  --h3-font-size: 32px;
  --h4-font-size: 28px;
  --h5-font-size: 24px;
  --h6-font-size: 22px;
  --p-font-size: 18px;
  --btn-font-size: 14px;
  --copyright-font-size: 16px;

  --border-radius-large: 100px;
  --border-radius-medium: 20px;
  --border-radius-small: 8px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

body {
  background-color: var(--white-color);
  font-family: var(--body-font-family);
}

/*---------------------------------------
  GSAP             
-----------------------------------------*/

/*#target {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 150% 100%);
  background: #42a6e0;
}

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-image: url("https://assets.codepen.io/314556/nebula-stardust.jpg");
  background-size: cover;
}

#mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 10;
}*/

/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/

h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--h1-font-size);
}

h2 {
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  font-size: var(--h5-font-size);
}

h6 {
  font-size: var(--h6-font-size);
}

small {
  background: linear-gradient(to right, #a642fe , #c592f3); 
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: var(--font-weight-bold);
}

span {
  background: linear-gradient(to right, rgb(255, 255, 255) , rgba(153, 76, 222)); 
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: var(--font-weight-bold);
}

#text-path {
  color: white;
}

p {
  color: var(--dark-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

ul li {
  color: var(--dark-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

a,
button,
.icon-box {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

.icon {
  --size: 1em;
  height: var(--size);
  width: var(--size);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

.link-fx-1 .icon circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .2s;
}

.link-fx-1 .icon line {
  transition: transform .4s;
  transform-origin: 13px 15px;
}

.link-fx-1 .icon line:last-child {
  transform-origin: 19px 15px;
}

.text-padding {
  padding-left: 60px;
  padding-right: 60px;
}


/*---------------------------------------
  ANIMATIONS               
-----------------------------------------*/

h2 {
  transform: translateY(40px);
  opacity: 0;
  transition: all 2s ease;
}

h2.animate {
  transform: translateY(0);
  opacity: 1;
}

.image-container-small {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.image-container-small img {
  max-width: 70px;
  width: 100%;
  display: inline-block;
  margin-right: 20px;
}

.image-container {
  width: 100%; /* Set the width of the container to 100% */
  white-space: nowrap; /* Prevent images from wrapping to the next line */
  overflow: hidden; /* Hide the overflowing images */
  position: relative; /* Add position relative to enable absolute positioning of gradient */
}

.image-container::before,
.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px; /* Width of the gradient */
  height: 100%;
  z-index: 1; /* Ensure the gradient is above the images */
}

.image-container::before {
  left: 0;
  background: linear-gradient(to right, var(--dark-color), rgba(0, 0, 0, 0));
}

.image-container::after {
  right: 0;
  background: linear-gradient(to left, var(--dark-color), rgba(0, 0, 0, 0));
}

.image-container img {
  max-width: 300px; /* Set a maximum width for the images */
  width: 100%; /* Make sure each image takes up the full container width */
  display: inline-block; /* Display images inline */
  margin-right: 40px; /* Add margin between images */
  animation: scrollImages 20s linear infinite; /* Set the animation properties */
}

@keyframes scrollImages {
  0% {
    transform: translateX(15px); /* Start with a slight horizontal translation to compensate a offset for the seamless transition */
  }
  100% {
    transform: translateX(calc((-100% - 40px) * 5)); /* Move images to the left by 100% of container width */
  }
}

.inner-headings {
  border: 0px solid #ddd;
  height: 25px;
  line-height: 25px;
  font-size: 20px;
  text-transform: uppercase;
  overflow: hidden;
}

.inner-headings span {
  position: relative;
  font-weight: var(--font-weight-bold);
  animation: animation 7s ease infinite;
}

.inner-headings span i {
  color: linear-gradient(to right, rgb(255, 255, 255) , rgb(134, 186, 215));
}

@keyframes animation {
  0%,
  100% {
    top: 0;
  }
  28% {
    top: 0;
  }
  33% {
    top: -25px;
  }
  62% {
    top: -25px;
  }
  67% {
    top: -50px;
  }
  95% {
    top: -50px;
  }
}

#animated-text {
  white-space: nowrap;
  overflow: hidden;
  height: 25px;
  line-height: 25px;
  font-size: 20px;
  text-transform: uppercase;
}

#cursor {
  border-right: .15em solid white;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.remove-animation {
  animation: none !important;
  border-right: .15em solid red !important;
}

/*---------------------------------------
  IMAGE COMPARISON SLIDER              
-----------------------------------------*/

.wrapper{
  position: relative;
  height: 500px;
  max-width: 900px;
  overflow: hidden;
  background: #fff;
  border: 7px solid #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
}
.wrapper .images{
  height: 100%;
  width: 100%;
  display: flex;
}
.wrapper .slider{
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 8;
}
.wrapper .slider input{
  width: 100%;
  outline: none;
  background: none;
  -webkit-appearance: none;
}
.slider input::-webkit-slider-thumb{
  height: 486px;
  width: 3px;
  background: none;
  -webkit-appearance: none;
  cursor: col-resize;
}
.slider .drag-line{
  width: 3px;
  height: 486px;
  position: absolute;
  left: 49.85%;
  pointer-events: none;
}
.slider .drag-line::before,
.slider .drag-line::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 222px;
  background: #fff;
}
.slider .drag-line::before{
  top: 0;
}
.slider .drag-line::after{
  bottom: 0;
}
.slider .drag-line span{
  height: 42px;
  width: 42px;
  border: 3px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.slider .drag-line span::before,
.slider .drag-line span::after{
  position: absolute;
  content: "";
  top: 50%;
  border: 10px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.slider .drag-line span::before{
  left: 40%;
  border-left-color: #fff;
}
.slider .drag-line span::after{
  left: 60%;
  border-top-color: #fff;
}

/*SMALL WRAPPER*/

.wrapper-small{
  position: relative;
  height: 360px;
  max-width: 700px;
  overflow: hidden;
  background: #fff;
  border: 7px solid #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
}
.wrapper-small .images{
  height: 100%;
  width: 100%;
  display: flex;
}
.wrapper-small .images .img-1{
  height: 100%;
  width: 100%;
  background: url("../images/project_landingpage_hero.jpg") no-repeat;
  background-size: cover; /* Ensures the image covers the entire container */
}
.wrapper-small .images .img-2{
  position: absolute;
  height: 100%;
  width: 50%;
  /* filter: blur(5px); */
  background: url("../images/project_landingpage_old.png") no-repeat;
  background-size: cover;
}
.wrapper-small .slider{
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 8;
}
.wrapper-small .slider input{
  width: 100%;
  outline: none;
  background: none;
  -webkit-appearance: none;
}

/*---------------------------------------
  BOOTSTRAP CARDS               
-----------------------------------------*/

.card-link:hover {
  transform: translateY(-5px); /* Move the card 5 pixels up on hover */
  box-shadow: #6723a2 0px 4px 40px 0px, rgba(0, 0, 0, 0.25) 0px 4px 16px 0px, rgba(255, 255, 255, 0.25) 0px 16px 40px 0px inset, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset;
}

/*---------------------------------------
  SECTIONS               
-----------------------------------------*/
.dark-section {
  background-color: var(--dark-color);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.gradient-section {
  background: var(--custom-gradient);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  border: var(--custom-border);
}

.gradient-section-1y {
  background: var(--custom-gradient-1y);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  border: var(--custom-border-1y);
}

.gradient-section-3y {
  background: var(--custom-gradient-3y);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  border: var(--custom-border-3y);
}

.parallax-section {
  background-image: url('hacker_background.jpg');
  height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  text-shadow: 3px 3px 8px var(--dark-color);

  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-section {
  background-color: var(--dark-color);
  position: relative;
  background: radial-gradient(circle at bottom center, #740ecd 00%, var(--dark-color) 40%);
  min-height: 35em;
}

.privacy-section {
  color: white;
}

.privacy-section h4 {
  color: white;
}

.privacy-section h5 {
  color: white;
}

.privacy-section p {
  color: white;
}

.privacy-section li {
  color: white;
}

.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-bg {
  background-color: var(--ball-dark-blue);
}

.section-overlay {
  background-color: var(--dark-color);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.section-overlay+.container {
  position: relative;
}

.tab-content {
  background-color: var(--white-color);
  border-radius: var(--border-radius-medium);
  padding: 45px;
}

.nav-tabs {
  background-color: var(--dark-color);
  border-radius: var(--border-radius-large);
  border-bottom: 0;
  padding: 15px;
}

.nav-tabs .nav-link {
  border-radius: var(--border-radius-large);
  border: 0;
  padding: 15px 25px;
  transition: all 0.3s;
}

.nav-tabs .nav-link:first-child {
  margin-right: 15px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  background: var(--white-color);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
  color: var(--primary-color);
}

.nav-tabs h5 {
  color: var(--p-color);
  margin-bottom: 0;
}

.nav-tabs .nav-link.active h5,
.nav-tabs .nav-link:focus h5,
.nav-tabs .nav-link:hover h5 {
  color: var(--primary-color);
}


/*---------------------------------------
  CUSTOM PILL BADGE        
-----------------------------------------*/
.custom-badge {
  background: var(--custom-gradient);
  border: var(--custom-border);
  display: inline; 
}

.custom-badge-1y {
  background: var(--custom-gradient-1y);
  border: var(--custom-border-1y);
  display: inline; 
}

.custom-badge-3y {
  background: var(--custom-gradient-3y);
  border: var(--custom-border-3y);
  display: inline; 
}

/*---------------------------------------
  CUSTOM ICON COLOR               
-----------------------------------------*/
.custom-icon {
  color: var(--white-color);
}

/*---------------------------------------
  CUSTOM ICON BOXES           
-----------------------------------------*/

.icon-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  display: flex;
  align-items: center;
}

.selected-icon-box {
  border-radius: 10px;
  padding: 20px;
  box-shadow: #6723a2 0px 4px 40px 0px, rgba(0, 0, 0, 0.25) 0px 4px 16px 0px, rgba(255, 255, 255, 0.25) 0px 16px 40px 0px inset, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset;
  text-align: left;
  display: flex;
  align-items: center;

  color: white;
  background: var(--custom-btn-bg-color);
}

.selected-icon-box .icon-content h3 {
  color: white;
}

.selected-icon-box:hover,
.icon-box:hover {
  box-shadow: #6723a2 0px 4px 40px 0px, rgba(0, 0, 0, 0.25) 0px 4px 16px 0px, rgba(255, 255, 255, 0.25) 0px 16px 40px 0px inset, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset;

}

.icon {
  font-size: 36px;
  margin-right: 20px;
}

.icon-small {
  font-size: 28px;
  margin-right: 18px;
}

.icon-content h3 {
  margin-top: 0;
  font-size: 20px;
}

.icon-content p {
  margin-bottom: 0;
}

/*---------------------------------------
  CUSTOM BUTTON               
-----------------------------------------*/
.custom-btn {
  background: var(--custom-btn-bg-color);
  border: 0;
  border-radius: var(--border-radius-small);
  color: var(--white-color);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  transition: all 0.3s;
  padding: 12px 24px;
  box-shadow: rgba(153, 76, 222, 0.25) 0px 4px 80px 0px, rgba(0, 0, 0, 0.25) 0px 4px 16px 0px, rgba(255, 255, 255, 0.25) 0px 16px 40px 0px inset, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset;
}

.custom-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  color: var(--white-color);
  box-shadow: rgba(153, 76, 222, 1) 0px 4px 80px 0px, rgba(0, 0, 0, 0.25) 0px 4px 16px 0px, rgba(255, 255, 255, 0.25) 0px 16px 40px 0px inset, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset;
}

.custom-btn-dark {
  background: var(--custom-btn-dark-bg-color);
  border: 0;
  border-radius: var(--border-radius-small);
  color: var(--white-color);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  transition: all 0.3s;
  padding: 12px 24px;
  box-shadow: rgba(29, 49, 69, 0.25) 0px 4px 80px 0px, rgba(0, 0, 0, 0.25) 0px 4px 16px 0px, rgba(255, 255, 255, 0.05) 0px 16px 40px 0px inset, rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset;
}

.custom-btn-dark:hover {
  background: var(--custom-btn-dark-bg-hover-color);
  color: var(--white-color);
  box-shadow: rgba(40, 68, 96, 1) 0px 4px 80px 0px, rgba(0, 0, 0, 0.25) 0px 4px 16px 0px, rgba(255, 255, 255, 0.05) 0px 16px 40px 0px inset, rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset;
}

.custom-border-btn {
  background: transparent;
  border: 2px solid var(--custom-btn-bg-color);
  color: var(--custom-btn-bg-color);
}

.navbar-expand-lg .navbar-nav .nav-link.custom-btn:hover,
.custom-border-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  border-color: transparent;
  color: var(--white-color);
}

.custom-btn-bg-white {
  border-color: var(--white-color);
  color: var(--white-color);
}

/* src: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp */
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
}

/*---------------------------------------
  VIDEO              
-----------------------------------------*/
.video-wrap {
  z-index: -100;
}

.custom-video {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}


/*---------------------------------------
  NAVIGATION              
-----------------------------------------*/
.sticky-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin-top: 51px;
}

.logo {
  height: 8vh;
  padding: 10px;
}

.sticky-wrapper.is-sticky .navbar {
  background-color: var(rgba(4, 6, 21, 0.5));
  backdrop-filter: blur(32px);
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 30px, rgba(0,0,0,0.15);
}

.navbar {
  background: transparent;
  z-index: 9;
}

.navbar-brand,
.navbar-brand:hover {
  color: var(--white-color);
  font-size: var(--h5-font-size);
  font-weight: var(--font-weight-bold);
}

.navbar-expand-lg .navbar-nav .nav-link {
  border-radius: var(--border-radius-large);
  margin: 10px;
  padding: 10px 20px;
}

.navbar-nav .nav-link {
  display: inline-block;
  color: var(--white-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: var(--secondary-color);
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 30px;
  height: 35px;
  outline: none;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
  background: var(--white-color);
  transition: background 10ms 300ms ease;
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: var(--white-color);
  width: 30px;
  height: 2px;
  content: '';
}

.navbar-toggler .navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 8px;
}


/*---------------------------------------
  HERO        
-----------------------------------------*/
.hero-section {
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  height: calc(100vh);
}

.hero-section small {
  color: var(--white-color);
  text-transform: uppercase;
}

.hero-section .section-overlay {
  z-index: 2;
  opacity: 0.45;
}

.hero-section .container {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-bottom: 50px;
}

.hero-section .container .row {
  height: 100%;
}

/*---------------------------------------
  VIDEOS       
-----------------------------------------*/

/* Custom CSS for maintaining the 16:9 aspect ratio */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*---------------------------------------
  ABOUT ELEMENTS        
-----------------------------------------*/
.about-image {
  border-radius: var(--border-radius-medium);
  display: block;
}

.about-text-wrap {
  position: relative;
}

/*---------------------------------------
  SITE FOOTER              
-----------------------------------------*/
.site-footer {
  background-color: var(--dark-color);
  position: relative;
  overflow: hidden;
  padding-top: 60px;
  padding-bottom: 30px;

  border-color: rgba(255, 255, 255, 0.1);
  border-style: solid;
  border-top-width: 2px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
}

.site-footer-top {
  background: var(--section-bg-color);
  margin-bottom: 70px;
  padding-top: 30px;
  padding-bottom: 30px;
}

/*.site-footer-bottom {
  border-top: 1px solid #1f1c1c;
  margin-top: 60px;
}*/

.site-footer-title {
  color: var(--white-color);
}

.site-footer-link,
.copyright-text {
  color: var(--white-color);
}

.site-footer-links {
  padding-left: 0;
}

.site-footer-link-item {
  list-style: none;
  display: inline-block;
  margin-right: 15px;
}

.copyright-text {
  font-size: var(--copyright-font-size);
}


/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon {
  margin: 0;
  padding: 0;
}

.social-icon-item {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}

.social-icon-link {
  background: linear-gradient(rgb(29, 49, 69) 0%, rgb(12, 33, 54) 100%);
  box-shadow: rgba(29, 49, 69, 0.25) 0px 4px 80px 0px, rgba(0, 0, 0, 0.25) 0px 4px 16px 0px, rgba(255, 255, 255, 0.05) 0px 16px 40px 0px inset, rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset;

  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--copyright-font-size);
  display: block;
  margin-right: 10px;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 36px;
  transition: background 0.2s, color 0.2s;
}

.social-icon-link:hover {
  background: linear-gradient(rgb(40, 68, 95) 0%, rgb(20, 54, 88) 100%);
  box-shadow: rgb(54, 117, 177) 0px 4px 80px 0px, rgba(0, 0, 0, 0.25) 0px 4px 16px 0px, rgba(255, 255, 255, 0.05) 0px 16px 40px 0px inset, rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset;
  color: var(--white-color);
}

.social-icon-link span {
  display: block;
}


/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/

.custom-column-margin {
  margin-right: 20px;
}

/* Media query for responsiveness */
@media (max-width: 767px) {
  .custom-column-margin {
      margin-right: 0; /* Reset margin for smaller screens */
  }
}

@media screen and (max-width: 991px) {
  .sticky-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin-top: 0;
  }
  h1 {
    font-size: 62px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .navbar {
    background-color: var(--dark-color);
  }

  .navbar-expand-lg .navbar-nav {
    padding-bottom: 30px;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 0;
  }

  .hero-section {
    padding-top: 150px;
  }

  .pricing-thumb {
    padding: 35px;
  }

  .schedule-table h3 {
    font-size: 22px;
  }

  .schedule-table th {
    padding: 20px;
  }

  .schedule-table tr,
  .schedule-table td {
    padding: 25px;
  }
  .info-icon {
    padding-bottom: 0.5rem!important;
  }
  .info-icon-div {
    text-align: left!important;
  }
}

.card-stat {
  margin-bottom:1rem !important;
}
#aboutme-hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid transparent;
  margin: 5px 0;
  padding-right: 50;
}

.logo-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.logo-carousel-inner {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll 25s linear infinite;
}

.logo-carousel img {
  max-width: 300px;
  max-height: 110px;
  margin-right: 40px;
  display: inline-block;
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(calc(-90% + 40vw));
  }
}
.download-button-container {
  position: relative;
  display: inline-block;
}

.download-button-container a {
  text-decoration: none;
  color: #000;
}

.download-image {
  display: block;
  border: 2px solid transparent;
  transition: border 0.3s;
}

.download-button-container .download-text {
  position: absolute;
  bottom: 10px;
  right: 0%;
  background-color: rgba(255, 255, 255, 1);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: bold;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

.download-button-container a .download-image {
  border: 2px solid #b15efa;
}
.download-button-container a:hover .download-image {
  border: 3px solid #b15efa;
}

.download-button-container a .download-text {
  visibility: visible;
  opacity: 1;
}

.download-button-container a:hover {
  cursor: pointer;
}
.card-link{
  transition-duration: .5s;
}
.section-padding{
  padding-top:40px !important; 
  padding-bottom: 40px !important;
}

.achievement-grid {
  display: block;
  column-count: 3;    
}


.achievement-container {
  margin: 1.5em;
  page-break-inside: avoid;           /* Theoretically FF 20+ */
  break-inside: avoid-column; 
}
.custom-collapse {
overflow: hidden;
transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}

.custom-collapsed {
  max-height: 0;
  padding: 0;
}

.expanded {
  max-height: 500px;
  padding: 10px;
}

#section_achievements .card {
  min-height: 38em;
}

#loading{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #515781;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#main-content {
  display: none;
}