/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 29 2025 | 09:49:44 */
/** Back to top button fade in **/

.back-to-top {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.back-to-top.visible {
  opacity: 1;
}

/** Normalizer **/
:root {
  --box-title: 18px;
}
@media screen and (max-width: 767px) {
  :root {
    --box-title: 20px;
  }
}

/** Home hero section particle **/
.particles-js-canvas-el {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}

/** Clear Header Website **/
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.stickyHeader {
  background-color: #000022 !important;
  position: fixed;
  width: 100%;
  top: 0;
  transition: all 0.3s ease-in-out;
}

/** Header logo **/
.elementor-icon {
  display: flex;
}

/** Remove orphan collumn **/

/* Default layout for small screens (up to 767px) */
.orphan-column-container {
  display: grid;
  grid-template-columns: 1fr;
}

/* Layout for medium screens (between 767px and 1024px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .orphan-column-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Layout for large screens (over 1024px) */
@media screen and (min-width: 1024px) {
  .orphan-column-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Min-height based on screen size 
@media (max-width: 767px) {
 .orphan-column-section {
        min-height: 213px;
         Alternatively, use aspect-ratio or vw if needed
         aspect-ratio: 1 / 1;
         min-height: calc(100vw - 20px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
 .orphan-column-section {
        min-height: 204px;
    }
}

@media (min-width: 1024px) {
 .orphan-column-section {
        min-height: 268px;
    }
} */

/** overlay menu mobile **/
.elementskit-menu-overlay {
  background-color: #00002233 !important;
}

/** font items menu mobile **/
#menu-primary-menu a {
  font-size: var(--box-title);
}

@media screen and (max-width: 767px) {
  #menu-primary-menu a {
    font-weight: 500;
  }
  #menu-primary-menu a.dropdown-item {
    font-size: 18px;
    font-weight: 400;
  }
}

/** sub menu indicator menu mobile **/
#menu-primary-menu .elementskit-submenu-indicator {
  border: 0;
}

/** remove gap at the bottom of text editor widget **/
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0px;
}

/** make buttons inside the group .button-link-group align left  **/
.button-link-group .elementor-widget-button * {
  text-align: left;
  width: 100%;
}

/**Cursor

body {
  cursor: none;
}

.cursor, .cursor2 {
  z-index: 9999;
}

.cursor{
  position: fixed;
  width: 45px;
  height: 45px;
  border: 1px solid #2869F6;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: .1s;
}

.cursor2{
  position: fixed;
  width: 10px;
  height: 10px;
  background-color: #2869F6;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: .15s;
}

.content:hover ~ .cursor{
  transform: translate(-50%, -50%) scale(1.5);
  background-color: #2869F6;
  opacity: .5;
}

.content:hover ~ .cursor2{
  opacity: 0;
}
**/

/** Recent projects home **/
.mini-container {
  background: linear-gradient(to top, #000022b3, rgba(0, 0, 34, 0) 100%);
  transition: all 0.3s ease-in-out;
}

.mini-container:hover {
  background: linear-gradient(to top, #000022b3, rgba(0, 0, 34, 0));
}

.reveal {
  transform: scale(0);
  opacity: 0;
  transition: all 0.3s ease-in-out;
  width: 0;
}

.container:hover .reveal {
  opacity: 1;
  transform: scale(1);
  width: 14%;
}

.visible {
  transition: all 0.3s ease-in-out;
  width: 100% !important;
}

.container:hover .visible {
  width: 86% !important;
}

/* The vertical reveal effect 👇 */

.revealvertical {
  transition: all 0.4s ease-in-out;
  max-height: 0 !important;
}

.container:hover .revealvertical {
  max-height: 230px !important;
}

/* Disable the vertical reveal effect on mobile by making it always revealed */
@media only screen and (max-width: 767px) {
  .revealvertical {
    max-height: 230px !important;
  }
}

/* Adjust the vertical reveal effect for tablets */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
  .revealvertical {
    max-height: 150px !important;
  }
}

/* Tuturial: https://www.youtube.com/watch?v=55kbL7iyNCw&ab_channel=Reialesa */

/** Roadland app images **/
@media (max-width: 767px) {
  .roadland-screen {
    width: 100%;
    height: 128px;
    overflow: hidden;
  }
}

/** Background lottie 1 */
@media (max-width: 767px) {
  #devbox .background-lottie-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    z-index: 0;
    padding: 10px;
  }
  #devbox .background-lottie-1 * {
    height: 100%;
    position: relative;
  }
  #devbox svg {
    position: absolute;
    height: calc(100% - 40px) !important;
  }
  #devbox svg * {
    fill: #749fff;
  }
}

/** Background lottie home */
@media (max-width: 767px) {
  #devboxhome .background-lottie-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: 0;
  }
  #devboxhome .background-lottie-2 * {
    height: 100%;
    position: relative;
  }
  #devboxhome .ekit_lottie svg {
    position: absolute;
    height: 100% !important;
    width: 200% !important;
  }
  #devboxhome .ekit_lottie svg * {
    fill: #749fff;
  }
}

/** Background lottie e-commerce */
@media (max-width: 767px) {
  #devbox-ecommerce .background-lottie-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: 0;
  }
  #devbox-ecommerce .background-lottie-3 * {
    height: 100%;
    position: relative;
  }
  #devbox-ecommerce .ekit_lottie svg {
    position: absolute;
    height: 100% !important;
    width: 200% !important;
  }

}

/** Secondary button **/
.elementor-element.custom-secondary-button
  .elementor-button-wrapper
  a.elementor-button {
  background-color: #02010100;
  border-color: var(--e-global-color-accent);
  color: var(--e-global-color-accent);
}
.elementor-element.custom-secondary-button
  .elementor-button-wrapper
  a.elementor-button:hover {
  background-color: #d9e5ff;
}

/* Cookie banner */
#ra-cookie-banner {
  position: fixed;
  bottom: -40vh;
  left: 0;
  width: 100%;
  transition: bottom 0.8s ease-in-out;
}
body:not(.elementor-editor-active) #ra-cookie-banner.active {
  bottom: 0;
}

/* Website dev project cards - remove default underlined text */
#website-project-cards a {
  text-decoration: none;
}

/* Course program accordion icons */
.ra-courses-accordion .fas,
.fab {
  size: 20px;
  padding-right: 16px;
  padding-left: 4px;
}

/* Template e-commerce website */

.ra-template-desktop-parent {
  height: 600px;
  overflow: hidden;
}
.ra-template-desktop-container {
  overflow-y: scroll; /* Enables vertical scrolling */
}
.ra-template-mobile-parent {
  height: 400px;
  position: absolute;
  bottom: 0;
  right: 20px;
}

.ra-template-overlay {
  opacity: 0;
  transition-duration: 2s;
}

@media screen and (min-width: 1024px) {
  .ra-template-overlay:hover {
    opacity: 1;
  }
}

@media screen and (max-width: 1024px) {
  .ra-template-overlay {
    z-index: -1;
  }
}

/* Text link without style ecommerce */
.page-content a.ra-remove-text-decor {
  text-decoration: none;
}