/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/*BIRO HEADER TRANSITION*/

.sticky-header {
    background-color: rgba(0, 0, 0, 0.6);
    transition: background-color 1.5s ease, opacity 1.5s ease, transform 0.5s ease;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    opacity: 1;
}

.sticky-header.transparent {
    transform: translateY(-100%); /* Skrije header navzgor */
    opacity: 0; /* Za dodatno gladkost */
    pointer-events: none; /* Prepreči klik */
}

.sticky-header.scrolled {
    transform: translateY(0); /* Prikaže header */
    opacity: 1;
    pointer-events: auto; /* Omogoči klik */
}

/*BIRO HEADER ARROW BOUNCE*/

.bouncing-arrow {
    bottom: 20px;
animation: smooth-bounce 2s ease-in-out infinite; /* Smooth and continuous bounce */
    color: white; /* Change the color as necessary */
}

@keyframes smooth-bounce {
    0%, 100% {
        transform: translateY(0); /* Arrow at rest position */
    }
    50% {
        transform: translateY(-20px); /* Arrow moves up smoothly */
    }
}

/*BIRO SLIDING ELEMENTS*/

.parent-biro {
    overflow-x: hidden;
}

.left-column-1 {
    transition: transform 0.5s ease-in-out;
}

.right-column-1 {
    transform: translateX(100%); /* Start out of sight */
    transition: transform 0.5s ease-in-out;
}

.left-column-1.slide-out {
    transform: translateX(-100%); /* Move left column out of view */
}

.right-column-1.slide-in {
    transform: translateX(-100%); /* Bring right column into view */
}

.left-column-2 {
    transition: transform 0.5s ease-in-out;
}

.right-column-2 {
    transform: translateX(100%); /* Start out of sight */
    transition: transform 0.5s ease-in-out;
}

.left-column-2.slide-out {
    transform: translateX(-100%); /* Move left column out of view */
}

.right-column-2.slide-in {
    transform: translateX(-100%); /* Bring right column into view */
}

/*BIRO HOME PAGE PROJECT IMAGES AND TEXT

.home-project {
    position: relative;
    overflow: hidden;
}

.home-project::before {
    content: "";
    position: absolute;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    transition: transform 0.4s ease, filter 0.4s ease;
    z-index: 0;
}

.home-project:hover::before {
    transform: scale(1.2);
    filter: brightness(70%);
}

.text-project {
    transition: transform 0.4s ease;
}

.home-project:hover .text-project {
    transform: translateX(20px);
}

*/

/*BIRO HOME PAGE PROJECT ELEMENT*/

.biro-square:hover .biro-text-square {
    color: #fff;
}

.biro-square:hover .biro-icon-square svg {
	color: #fff !important;
}

.biro-text-square {
	transition: transform 0.4s ease;
}

.biro-square:hover .biro-text-square {
	transform: translateX(20px);
}

.biro-icon-square svg {
	transition: transform 0.6s ease;
}

.biro-square:hover .biro-icon-square svg {
	transform: translateX(30px);
}

.biro-text-square-bottom  {
	transition: transform 0.4s ease;
}

.biro-square:hover .biro-text-square-bottom {
	transform: translateX(20px);
}

/*BIRO HOME PAGE PROJECT ELEMENT ASPECT RATIO SQUARE FOR SAFARI*/

/*SCROLL SNAP CONTAINER*/

.scroll-snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh; /* Ensure the outer container takes up the full viewport height */
}

.snap-child {
    scroll-snap-align: start;
    height: 100vh; /* Each child container takes up the full viewport height */
}

/*TESTING*/

/* Basic styling for the column */
.dynamic-bg-column {
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out; /* Smooth transition for opacity */
    width: 100%;
    height: 100%; /* Ensure the height is set to visualize the background */
    opacity: 1; /* Ensure the column is fully visible initially */
}

/* Define the fade-out effect */
.dynamic-bg-column.fade {
    opacity: 0; /* Make the column fade out */
    transition: opacity 1s ease-in-out; /* Smooth transition for fading */
}

/*ANIMACIJA DOTS BLACK / WHITE by MARIO*/
.text-dynamic, .text-static {
  display: inline-block;
  font-size: 32px;
  font-weight: 600;
  transition: color 0.5s ease;
}

.text-dynamic {
  opacity: 0;
  position: absolute;
  animation: fadeInUpOut 4s linear infinite;
}

@keyframes fadeInUpOut {
  0% {
    opacity: 0;
    transform: translateY(10px); /* Začetek - spodaj */
  }
  25% {
    opacity: 1;
    transform: translateY(0); /* Vidno in na pravem mestu */
  }
  50% {
    opacity: 1; /* Vidno */
    transform: translateY(0); /* Brez gibanja */
  }
  75% {
    opacity: 0; /* Začne izginjati */
    transform: translateY(-10px); /* Premik navzgor */
  }
  100% {
    opacity: 0; /* Skrito */
    transform: translateY(-10px); /* Ostane navzgor */
  }
}

.animated-container {
  background-color: #FFFFFF; 
  background-image: none;
  transition: background-color 0.5s ease-in-out, background-image 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.animated-container.with-dots {
  background-image: radial-gradient(circle, black 15%, transparent 16%);
  background-size: 20px 20px;
  background-repeat: repeat;
}

.animated-container.dark-mode {
  background-color: #000;
  background-image: radial-gradient(circle, white 15%, transparent 16%);
  background-size: 20px 20px;
  background-repeat: repeat;
}

.animated-container.dark-mode .text-static,
.animated-container.dark-mode .text-dynamic {
  color: #fff;
}