/*pole enam sticky ara muudetud et piltide peal pusiks*/
/* Main header container */
.header {
    position: sticky;
    top: 0;
    padding: 10px 16px;
    background: black;
    color: black;
    display: flex; /* Enables flexbox for horizontal alignment */
    align-items: center; /* Aligns items vertically in the center */
    gap: 10px; /* Adds space between the GIF and text */
    z-index: 1000; /* Ensures the header stays on top */
}

/* Typewriter effect for header text */
.typewriter {
    display: inline-block;
    font-family: 'neue-haas-grotesk-display', sans-serif; /* Use a monospace font */
    font-weight: 900;
    font-style: normal;
    font-size: 6vh; /* Adjust text size */
    color: white;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid white; /* Simulate the typing cursor */
    width: 0;
    animation: typing 2s steps(30) 1s forwards, blink-caret 0.75s step-end;
}


/* Keyframe animation for typing effect */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100vh;
    }
}

/* Cursor blinking animation */
@keyframes blink-caret {
    50% {
        border-color: transparent;
    }
}



/*box ja text jms marginid padding*/
/* Define variables for easy customization */
:root {
    --padding: 20px;   /* Adjust padding */
    --margin: 20px;    /* Adjust margin */
    --border: 2px solid black; /* Adjust border */
}

.grid-container {
    display: grid;
    grid-template-columns: 5fr 4fr; /* Two equal columns */
    gap: 20px; /* Space between boxes */
    padding: 20px;
}

.grid-container2 {
    display: grid;
    grid-template-columns: 4fr 5fr; /* Two equal columns */
    gap: 20px; /* Space between boxes */
    padding: 20px;
}

/* Style the text box */
.custom-box {
	flex: 0; /* Makes both boxes equal width */
    padding: var(--padding);
    margin: var(--margin);
    border: var(--border);
    background-color: #000; /* Light gray background */
    color: #333; /* Dark text */
    font-size: 20px;
    max-width: 100%; /* Limit width */
    max-height: 100%;
    text-align: left;
    border-radius: 10px; /* Optional: rounded corners */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2); /* Optional: shadow effect */
}

.custom-box2 {
	flex: 0; /* Makes both boxes equal width */
    padding: var(--padding);
    margin: var(--margin);
    border: var(--border);
    background-color: #000; /* Light gray background */
    color: #333; /* Dark text */
    font-size: 20px;
    max-width: 100%; /* Limit width */
    max-height: 100%;
    text-align: left;
    border-radius: 10px; /* Optional: rounded corners */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2); /* Optional: shadow effect */
    
}

.custom-box3 {
	flex: 0; /* Makes both boxes equal width */
    padding: var(--padding);
    margin: var(--margin);
    border: var(--border);
    background-color: #000; /* Light gray background */
    color: #333; /* Dark text */
    font-size: 20px;
    max-width: 100%; /* Limit width */
    max-height: 100%;
    text-align: left;
    border-radius: 10px; /* Optional: rounded corners */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2); /* Optional: shadow effect */
  
}

.custom-box4 {
	flex: 0; /* Makes both boxes equal width */
    padding: var(--padding);
    margin: var(--margin);
    border: var(--border);
    background-color: #000; /* Light gray background */
    color: #333; /* Dark text */
    font-size: 20px;
    max-width: 100%; /* Limit width */
    max-height: 100%;
    text-align: left;
    border-radius: 10px; /* Optional: rounded corners */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2); /* Optional: shadow effect */
  
}




/* Responsive adjustments */
@media (max-width: 300px) {
    :root {
        --padding: 10px;
        --margin: 10px;
        --border: 1px solid black;
    }
    .custom-box {
        font-size: 20px;
    }
}










/* Adds space before the first image */
.spacer {
    height: 0vh; /* Creates scrolling space before first image appears */
}

/* Container for first sticky image */
.sticky-container {
    position: relative;
    top height: 50vh;
    height: 180vh; /* Full screen height */
    display: center;
    align-items: center;
    justify-content: center;
}

/* First image that stays in place */
.sticky-image {
    position: sticky;
    top: 10vh;
    width: 100%; /* Adjust size */
    max-height: 80vh;
    object-fit: cover;
    z-index: 1;
}

/* Container for second image */
.overlay-container {
    position: relative;
    height: 120vh; /* Full screen height */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -100vh; /* Pull it up so it overlaps */
}

/* Second image that scrolls over the first */
.overlay-image {
    width: 100%;
    max-height: 80vh;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

/* Extra content after the images */
.content {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}





* {
	box-sizing: border-box;
}



.bg {
  /* The image used */
  background-image: url("pikk.jpeg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

h2 {
	font-size:30px;
	margin-bottom: 2px;
	color: white;
	border: black;
	stroke: 2px;
	 -webkit-text-stroke: 1px black;
}

h1 {
	font-size:20px;
	margin-bottom: 2px;
	color: black;
	border: ;
	stroke: 0px;
	 -webkit-text-stroke: 0px black;
}

p{
	font-family: neue-haas-grotesk-text, sans-serif;
font-weight: 400;
font-style: normal;
	font-size: 20px;
	color: white;

}

.grid {
	overflow: hidden; /*clearfix*/
}

.box {
	position: left;
	top:0;
	left:50%;
	width:75%;
	height:scale;
	border:80px solid #0f0;
	padding:200px solid #f00
	margin:200px;
}

.footer {
  background-color: #232323;
  text-align: center;
  padding: 75px;
}

body {
	
}

h1 {
	font-size: 100px;
}


/*kerivad pildid*/

/* Main slider container */
.slider {
    overflow: hidden;
    width: 100%;
    background: #000; /* Optional background color */
    padding: 0px 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

/* The track that moves images */
.slider-track {
    display: flex;
    width: calc(400px * 10); /* 5 images + 5 duplicates for smooth loop */
    animation: scroll 20s linear infinite; /* Smooth infinite animation */
}

/* Style for images */
.slider-track img {
    width: 400px; /* Adjust image width */
    height: auto;
}

/* Keyframes for infinite seamless scroll */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-400px * 5)); /* Move by 5 images */
    }
}

.slider:hover .slider-track {
    animation-play-state: paused;
}