:root {
  /* colors */
  --pe-color-primary: #e41517;
  --pe-color-white: #fdfdfd;
  --pe-color-grey: #969696;

  --pe-bg: #121212;
  --pe-bg-surface: #1e1e1e;

  /* color text */
  --pe-header-color: #fdfdfd;
  --pe-subheader-color: #fdfdfd;
  --pe-text-color: #bebebe;

  --pe-header-on-primary: #121212;
  --pe-subheader-on-primary: #1e1e1e;
  --pe-text-on-primary: #1e1e1e;

  --pe-btn-bg: #e41517;
  --pe-btn-text: #fdfdfd;
  --pe-btn-bg-hover: #1e1e1e;
  --pe-btn-text-hover: #fdfdfd;

  --btn-bg-on-primary: #121212;
  --btn-text-on-primary: #fdfdfd;
  --btn-bg-on-primary-hover: #1e1e1e;
  --btn-text-on-primary-hover: #fdfdfd;

  --pe-hover-text-state-before: #969696;
  --pe-hover-text-state-after: #fdfdfd;

  /* fonts */
  --pe-header-font: "Montserrat", sans-serif;
  --pe-subheader-font: "Montserrat", sans-serif;
  --pe-text-font: "Montserrat", sans-serif;
  --pe-nav-font: "Montserrat", sans-serif;

  /* fonts size */
  --pe-nav-link-size: 16px;

  --pe-header-size: clamp(24px, 3vw, 24px);
  --pe-subheader-size: clamp(24px, 3vw, 27px);
  --pe-subheader3-size: clamp(55px, 3vw, 57px);
  --pe-subheader4-size: clamp(24px, 3vw, 28px);
  --pe-text-size: clamp(20px, 3vw, 18px);

  --pe-btn-text-size: clamp(14px, 3vw, 14px);

  /* sections spaces */
  --pe-space-sm: 40px;
  --pe-space-md: 80px;
  --pe-space-lg: 150px;
}

/* ============================================== global classes styles ============================================== */

    /* ====== colors ====== */

    /* main colors */
    .pe-color-primary {color: var(--pe-color-primary);}
    .pe-color-white {color: var(--pe-color-white);}
    .pe-color-grey {color: var(--pe-color-grey);}

    /* background color */
    .pe-bg {background-color: var(--pe-bg);}
    .pe-bg-surface {background-color: var(--pe-bg-surface);}

    /* text colors */
    .pe-header-color {color: var(--pe-header-color);}
    .pe-subheader-color {color: var(--pe-subheader-color)}
    .pe-text-color {color: var(--pe-text-color);}

    /* text colors on primary */
    .pe-header-on-primary {color: var(--pe-header-on-primary);}
    .pe-subheader-on-primary {color: var(--pe-subheader-on-primary);}
    .pe-text-on-primary {color: var(--pe-text-on-primary);}

    /* button colors */
    .pe-btn-bg {background-color: var(--pe-btn-bg);}
    .pe-btn-text {color: var(--pe-btn-text);}
    .pe-btn-bg-hover {background-color: var(--pe-btn-bg-hover);}
    .pe-btn-text-hover {color: var(--pe-btn-text-hover);}

    /* button colors on primary */
    .btn-bg-on-primary {background-color: var(--btn-bg-on-primary);}
    .btn-text-on-primary {color: var(--btn-text-on-primary);}
    .btn-bg-on-primary-hover {background-color: var(--btn-bg-on-primary-hover);}
    .btn-text-on-primary-hover {color: var(--btn-text-on-primary-hover);}

    /* hover text state */
    .pe-hover-text-state-before {color: var(--pe-hover-text-state-before);}
    .pe-hover-text-state-after {color: var(--pe-hover-text-state-after);}

    /* ====== fonts family ====== */
    .pe-header-font {font-family: var(--pe-header-font); font-optical-sizing: auto; font-weight: 900; font-style: normal;}

    .pe-subheader-font {font-family: var(--pe-subheader-font); font-optical-sizing: auto; font-weight: 600; font-style: normal;}

    .pe-subheader2-font {font-family: var(--pe-subheader-font); font-size: 32px; font-optical-sizing: auto; font-weight: 900; font-style: normal;}

    .pe-subheader3-font {font-family: var(--pe-subheader-font); font-size: 30px; font-optical-sizing: auto; font-weight: 900; font-style: normal;}

    .pe-subheader4-font {font-family: var(--pe-subheader-font); font-size:clamp(20px, 3vw, 20px); font-optical-sizing: auto; font-weight: 600; font-style: normal; color:var(--pe-header-color)}

    .pe-text-font {font-family: var(--pe-text-font); font-optical-sizing: auto; font-weight: 400; font-style: normal;}

    .pe-nav-font {font-family: var(--pe-nav-font); font-optical-sizing: auto; font-weight: 700; font-style: normal;}

    /* ====== fonts size ====== */
    /* nav link size */
    .pe-nav-link-size {font-size: var(--pe-nav-link-size); text-transform: none;}
    .pe-nav-link-size::first-letter { text-transform: uppercase; }

    /* ATF main sliding headline */
    .pe-main-headline-title-size {font-size: 140px; font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 900; font-style: normal;}
    .pe-main-headline-subtitle-size {font-size: var(--pe-main-headline-subtitle-size);}
    .pe-main-headline-description {color: var(--pe-color-white); font-size: 38px; font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700;}

    /* header size */
    .pe-header-size {font-size: var(--pe-header-size);}
    /* subheader size */
    .pe-subheader-size {font-size: var(--pe-subheader-size);}
    .pe-subheader2-size {font-size: var(--pe-subheader-size);}
    .pe-subheader3-size {font-size: var(--pe-subheader3-size);}
    .pe-subheader4-size {font-size: var(--pe-subheader4-size);}
    /* text size */
    .pe-text-size {font-size: var(--pe-text-size);}
    /* button text size */
    .pe-btn-text-size {font-size: var(--pe-btn-text-size);}

    /* section space */
    .pe-space-sm {padding: var(--pe-space-sm) 0;}
    .pe-space-md {padding: var(--pe-space-md) 0;}
    .pe-space-lg {margin: var(--pe-space-lg) 0;}

    
/* ============================================== end global classes styles ============================================== */

/* ============================================== GLOBAL ANIMATION ============================================== */

.slide-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

.slide-up.animate {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================== END GLOBAL ANIMATION ============================================== */

html {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(21, 21, 21);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="3"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.1"/></svg>');
  background-size: 400px 400px; /* Larger = less stretching */
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: screen;
}

/* ==================================== NAV BAR ====================================*/
#pe-logo {
  color: var(--pe-text-color);
}

#pe-logo:hover {
  color: var(--pe-header-color);
    }

.slide-up-enter {
  transform: translateY(100%);
}

.slide-up-enter-active {
  transition: transform 1.5s ease;
  transform: translateY(50);
}

.slide-up-leave {
  transform: translateY(10);
}

.slide-up-leave-active {
  transition: transform 1.5s ease;
  transform: translateY(-10);
}

    @keyframes scroll {
      0% {
        transform: translateX(0%);
      }

      100% {
        transform: translateX(-50%);
      }
    }

.animate-marquee {
  animation: scroll 30s linear infinite;
}

.fade-mask {
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

    /* In your CSS */
    /* .parallax-wrapper {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax-layer {
  position: absolute;
  transform-style: preserve-3d;
} */

/* ==================================== ABOUT US SECTION ==================================== */
#about-us-small-img {
  transform: translateY(100px);
  opacity: 0;
  transition: all 1s ease;
}

#about-us-small-img.animate {
  transform: translateY(0);
  opacity: 1;
}

/* ==================================== SEPERATOR SECTION (SLOGAN) ==================================== */
    .big-text-left {
      /* color: var(--pe-header-color); */
      font-family: var(--pe-header-font);
      font-size: 100px;
      font-weight: bold;
      color: transparent;
      /* Make text fill transparent */
      -webkit-text-stroke: 1px var(--pe-header-color);
      white-space: nowrap;
      will-change: transform;
    }

    .big-text-right {
      /* color: var(--pe-header-color); */
      font-family: var(--pe-header-font);
      font-size: 120px;
      font-weight: bold;
      color: transparent;
      /* Make text fill transparent */
      -webkit-text-stroke: 1px var(--pe-header-color);
      white-space: nowrap;
      will-change: transform;
    }

    /* new */
    .scrolling-section {
  width: 100%;
  padding: 4rem 0;
}

.scrolling-line {
  white-space: nowrap;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: -50px 0;
}

@media (min-width: 768px) {
  .scrolling-line {
    font-size: 6rem;
  }
}

.word, .star {
  display: inline-block;
  padding: 0 1rem;
  color: white;
  font-size: 8rem;
  font-family: var(--pe-header-font)
}

.star {
  background-image: url("assets/imgs/Proeffect-logo.png");
  width: 120px;
  height: auto;
  color: var(--pe-color-primary);
  margin-top: -50px;
}

    /* ==================================== end of separator section  ==================================== */

    /* services */
    .service-number {
      margin: 0px !important;
      padding: 0px !important;
    }

    
/* ==================================== our values ==================================== */
.value-btns-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}

/* Buttons */
.value-btn {
  font-family: var(--pe-subheader-font);
  font-size: 32px;
  color: var(--pe-text-color);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.3s ease;
  line-height: 1.2;
}

.value-btn:hover {
  color: var(--pe-header-color);
}

.value-btn.pe-active {
  color: var(--pe-header-color);
}

/* Content Area */
.content-area {
  position: relative;
  display: flex;
}

/* Content Cards */
.pe-content {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.pe-content img {
  border-radius: 18px;
}

.pe-content.pe-active {
  opacity: 1;
  pointer-events: auto;
}


/* Value Box */
.pe-value-box {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 70%;
  height: 250px;
  background-color: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 12px;;
  padding: 2rem;
  z-index: 2;
  font-family: var(--pe-text-font, sans-serif);
  color: var(--pe-text-color);
  text-align: left;
  font-size: 1.1rem;
  font-family: var(--pe-text-font);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}


/* ==================================== VISION ALIGNMENT ==================================== */
.pe-vision-container {
  /* min-height: 50px; */
  height: 100px;
  /* max-height: 100px; */
  /* padding:10px; */
  display: flex;
  align-items: top;
  gap: 1rem;
}

.pe-vision-ball-wrapper {
  position: relative;
  width: 40px;
  /* height: 120px; */
  padding: 3px;
  overflow: hidden;
}

.pe-vision-ball {
  position: absolute;
  /* left: 10px; */
  /* width: 20px;
  height: 20px; */
  /* background-color: red; */
  border-radius: 50%;
  transform-origin: center;
}

/* ==================================== 2030 vision ==================================== */
.vision-svg {
  animation: rotate-clockwise 5s linear infinite;
  transform-origin: 50% 50%;
  /* center of the SVG */
}

@keyframes rotate-clockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* anticlockwise */
.vision-svg-anti {
  animation: rotate-anticlockwise 5s linear infinite;
  transform-origin: 50% 50%;
  /* center of the SVG */
}

@keyframes rotate-anticlockwise {
  0% {
    transform: rotate(0deg);
  }

    100% {
      transform: rotate(-360deg);
    }
  }

/* ==================================== FOOTER ==================================== */

.pe-contact-link {
  font-family: var(--pe-text-font);
  font-size: var(--pe-text-size);
  color: var(--pe-text-color);
  text-decoration: none;
}

.pe-contact-link:hover {
  color: var(--pe-header-color);
}