/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 25 2025 | 22:25:17 */
html {
  overflow-x: hidden;
}

.cursor {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 99999;
}

.cursor-small {
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  border-radius: 50%;
	border:3px solid  #fff;
  
  transform-origin: center center;
  transition: transform 0.15s ease;
}

.cursor-big {
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 10px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: color 0.3s ease;
}

@media (max-width: 768px) {
  .cursor-small,
  .cursor-big {
    display: none !important;
  }
}


 .mysection {
  background-color: #1e1e1e;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.section-scroll-text h1 {
  font-size: 25vw;
  margin: 0;
  white-space: nowrap;
  color: #fff;
}

.heading-links h1 a,
.heading-links h2 a,
.heading-links h3 a,
.heading-links h4 a,
.heading-links h5 a,
.heading-links h6 a {
  position: relative;
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
  z-index: 1;
}

/* background animation */
.heading-links h1 a::before,
.heading-links h2 a::before,
.heading-links h3 a::before,
.heading-links h4 a::before,
.heading-links h5 a::before,
.heading-links h6 a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #00FFCC; /* your background color */
	
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: -1;
  border-radius: 6px; /* optional */
	
}

/* on hover */
.heading-links h1 a:hover::before,
.heading-links h2 a:hover::before,
.heading-links h3 a:hover::before,
.heading-links h4 a:hover::before,
.heading-links h5 a:hover::before,
.heading-links h6 a:hover::before {
  transform: scaleX(1);
	color:#000 !important;
}

.heading-links h1 a:hover,
.heading-links h2 a:hover,
.heading-links h3 a:hover,
.heading-links h4 a:hover,
.heading-links h5 a:hover,
.heading-links h6 a:hover {
  color: #fff; /* optional: keep text white on hover */
}

.portfolio-image {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  background-color: #0f2c29; /* dark base to match theme */
}

.portfolio-image img {
  width: 100%;
  height: auto;
  transition: transform 0.6s ease, filter 0.6s ease;
  border-radius: 20px;
}

/* dark overlay + teal glow on hover */
.portfolio-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(0, 191, 166, 0.3) 0%,
    rgba(0, 0, 0, 0.8) 80%
  );
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.6s ease;
  border-radius: 20px;
}

/* subtle outer glow */
.portfolio-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0, 191, 166, 0.4);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* hover effects */
.portfolio-image:hover img {
  transform: scale(1.08);
  filter: brightness(1.15);
}

.portfolio-image:hover::after {
  opacity: 1;
  transform: scale(1);
}

.portfolio-image:hover::before {
  opacity: 1;
}

  .marquee-container {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
   

    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .marquee {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
  }

  .marquee h1 {
    display: inline-block;
    padding-right: 2rem;
  }

  @keyframes marquee-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  @keyframes marquee-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }


#hero-text {
      
      
      color: #ffffff;
      text-transform: uppercase;
  
      overflow: hidden;
    }

    #hero-text .static-text {
   
    }

    #dynamic-text {
      color: #fff; /* dynamic text color */
      border-right: 3px solid #fff; /* cursor effect */
      padding-left: 5px;
		font-weight: 700;
		font-size: 100px;
		text-align:center;
    }



.hover-animate-list {
    --hover-background-color: #ffffff;
    --hover-background-speed: 500;
    --letter-animation-difference: 40;
}

.hover-animate-list {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.hover-animate-list .elementor-icon-list-item,
.hover-animate-list .elementor-icon-list-item a {
    flex-direction: column;
    padding-bottom: 0 !important;
}

.hover-animate-list .elementor-icon-list-item a {
    -webkit-tap-highlight-color: transparent;
}

.hover-animate-list .elementor-icon-list-text {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.hover-animate-list .elementor-icon-list-text:after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hover-background-color);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform calc(var(--hover-background-speed)*1ms) cubic-bezier(1, 0, 0.5, 1);
}

.hover-animate-list .elementor-icon-list-item:hover .elementor-icon-list-text:after {
    transform: scaleX(100%);
    transform-origin: left;
}

.hover-animate-list .elementor-icon-list-item span.word {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hover-animate-list .elementor-icon-list-item span.word-up,
.hover-animate-list .elementor-icon-list-item span.word-down {
    display: flex;
    flex-direction: row;
}

.hover-animate-list .elementor-icon-list-item span.letter {
    display: inline-block;
    transition: transform 0.4s ease calc(var(--letter-delay));
}

.hover-animate-list .elementor-icon-list-item:hover span.letter {
    transform: translateY(-100%);
}