:root {
  --primary-bg-color: #fff; /* Change this to your preferred primary color */
  --secondary-bg-color: #eee; /* Change this to your preferred secondary color */

  --hightlight-color:#B20133; 
}

  
  /* Example usage */
  body {
    background-color: var(--secondary-bg-color) !important;
  }

  h1, h2, h3 {
    font-family: 'Gothic A1', sans-serif !important;
    letter-spacing: .7rem; 
    font-weight: 700;

  }

  h4 {
    font-family: 'Gothic A1', sans-serif !important;
    letter-spacing: .5rem; 
    font-weight: 700;
  }
  
  .app-lead {
    font-family: 'Gothic A1', sans-serif !important;
    font-weight: 600;
    letter-spacing: .2rem; 
  }


  .app-bg-primary {
    background-color: var(--primary-bg-color) !important;
  }
  .app-bg-secondary {
    background-color: var(--secondary-bg-color) !important;
  }
  .app-bg-highlight {
    background-color: var(--hightlight-color) !important;
  }

  .app-highlight-border {
    border-left: 2px solid #b20133;
  }

  .app-hightlight-color {
    color: var(--hightlight-color) !important;
  }
  
  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  
  .btn-primary:hover {
    background-color: #0056b3; /* Darken the primary color on hover */
    border-color: #0056b3; /* Darken the border color on hover */
  }

  .hover-highlight {
    transition: color 0.3s ease; /* Adds the transition effect for color */
  }
  
  .hover-highlight:hover,
  .hover-highlight:active {
    color: var(--hightlight-color) !important; 
  }
  


/* ANIMATIONS  */
@keyframes slideInFromLeft {
  from {
      opacity: 0;
      letter-spacing: 2.5rem;
  }
  to {
      opacity: 1;
      letter-spacing: .7rem;
  }
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes slideInFromRight {
  from {
      opacity: 0;
      transform: translateX(50px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}



.animate-title,
.animate-lead,
.animate-text {
  opacity: 0; /* Start hidden */
}

.animate-title {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-overflow: clip; 
  white-space: nowrap;
  text-align: right;

}

.animate-title.visible {
  animation: slideInFromLeft 3s ease forwards;
}

.animate-lead.visible {
  animation: fadeIn 2s ease 1.5s forwards; /* Starts slightly after title */
}

.animate-text.visible {
  animation: slideInFromRight 2s ease 3s forwards; /* Starts after lead */
}


.hover-zoom img {
  transition: transform 0.3s ease-in-out;
}

.hover-zoom:hover img {
  transform: scale(1.1);
}

/* AdBe Text */
#animated-text {
  font-size: 2rem;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 50px;
  transition: all 0.6s ease-in-out;
}

.hidden {
  visibility: hidden;
  opacity: 0;
}


.invisible {
  visibility: hidden;
  width: 0;
  height: 0;
}

.shadow-image {
  box-shadow: 0 6px 12px rgba(0, 0, 0, .6); /* Increased opacity and shadow size */
}

.app-arrow {
  position: relative;
  right: 30px;
  opacity: 0;
  transition: ease .5s;
  color: #eeeeee;
}

  .reactive:hover{
    background-color: #fff;
    border-color: #fff !important;
   

  }

  .reactive:hover .app-arrow {
    right: 0px;
    opacity: 1;
    color: #3a4757;

  }
 :root {
        --letter-size: 30px;
        /* Change this value to adjust letter size */
    }

    .logo-adbe img {
        opacity: 0;
        /* Start hidden */
        visibility: hidden;
        /* Prevent interaction and layout shifting */
        animation-fill-mode: forwards;
        /* Keep the final state of the animation */
    }

    @keyframes right100 {
        0% {
            transform: translateX(0) rotate(-90deg);
            opacity: 0;
            visibility: visible;
            /* Ensure it is visible during animation */
        }

        100% {
            transform: translateX(calc(var(--letter-size) * 1)) rotate(0);
            /* Adjusted for letter size */
            opacity: 1;
            visibility: visible;
            /* Ensure it stays visible */
        }
    }

    @keyframes right200 {
        0% {
            transform: translateX(0) rotate(-180deg);
            opacity: 0;
            visibility: visible;
            /* Ensure it is visible during animation */
        }

        25% {
            opacity: 0;
        }

        100% {
            transform: translateX(calc(var(--letter-size) * 2)) rotate(0);
            /* Adjusted for letter size */
            opacity: 1;
            visibility: visible;
            /* Ensure it stays visible */
        }
    }

    @keyframes right300 {
        0% {
            transform: translateX(0) rotate(-180deg);
            opacity: 0;
            visibility: visible;
            /* Ensure it is visible during animation */

        }

        42% {
            opacity: 0;
        }

        100% {
            transform: translateX(calc(var(--letter-size) * 3)) rotate(0);
            /* Adjusted for letter size */
            opacity: 1;
            visibility: visible;
            /* Ensure it stays visible */

        }
    }

    @keyframes right400 {
        0% {
            transform: translateX(0) rotate(-180deg);
            opacity: 0;
            visibility: visible;
            /* Ensure it is visible during animation */
        }

        55% {
            opacity: 0;
        }

        100% {
            transform: translateX(calc(var(--letter-size) * 4)) rotate(0);
            /* Adjusted for letter size */
            opacity: 1;
            visibility: visible;
            /* Ensure it stays visible */
        }
    }

    .logo-adbe-1 {
        animation: right100 1s forwards;
        animation-delay: 0.2s;
        animation-timing-function: ease-out;
        left: calc(var(--letter-size) * -1);
        top: 30%;
    }

    .logo-adbe-2 {
        animation: right200 2s forwards;
        animation-delay: 0.2s;
        animation-timing-function: ease-out;
        left: calc(var(--letter-size) * -1);
        top: 30%;
    }

    .logo-adbe-3 {
        animation: right300 3s forwards;
        animation-delay: 0.2s;
        animation-timing-function: ease-out;
        left: calc(var(--letter-size) * -1);
        top: 30%;
    }

    .logo-adbe-4 {
        animation: right400 4s forwards;
        animation-delay: 0.2s;
        animation-timing-function: ease-out;
        left: calc(var(--letter-size) * -1);
        top: 30%;

    }



/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/