@charset "utf-8";
/* CSS Document */
body, html {
	font-size: 10px;
	font-family: "Google Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
	color:#424143;
}

body {
	/* padding-top: 100px; */
}

p {
	margin-top: 0;
	margin-bottom: 2rem
}

/* Maybe? 
@media (max-width:575.98px) {
	body, html {
		font-size: 8px;
	}
}
*/

a:link, a:visited, a:hover, a:active {
	text-decoration: none;
}

.news-sm a, .events-sm a, .aktivnosti-sm a {
    color: inherit;
    text-decoration: none;
    display: block; /* Ensures the link fills the entire container */
}

/* Scroll to top */
#toTopBTN {
	display: none;
  	position: fixed;
  	bottom: 12px;
  	right: 12px;
  	z-index: 99;
  	border: none;
  	outline: none;
  	cursor: pointer;
  	font-size: 1.8rem;
	background:none;
}

/* Colors */
.color-default {
	color: #424143;
}

.color-white {
	color: #FFFFFF;
}

.color-green {
	color: #92B665;
}

.color-red {
	color: #BD4F5B;
}

.color-blue {
	color: #68A1D6;
}

/* Fonts */
.text-content {
	font-family: "Google Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
  	font-weight: 400;
	letter-spacing: .05rem;
}

.text-title {
	font-family: "Space Grotesk", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
	letter-spacing: normal;
}

.text-light {
	font-weight: 300;
}

.text-regular {
	font-weight: 400;
}

.text-bold {
	font-weight: 700;
}

.text-12 {
	font-size: 1.2rem;
	line-height: 2.2rem;
}

.text-14 {
	font-size: 1.4rem;
	line-height: 2.4rem;
}

.text-16  {
	font-size: 1.6rem;
	line-height: 2.6rem;
}

.text-18 {
	font-size: 1.8rem;
	line-height: 2.8rem;
}

.text-28 {
	font-size: 2.8rem;
	line-height: 3.4rem;
}

.text-32 {
	font-size: 3.2rem;
	line-height: 3.8rem;
}

.text-36 {
	font-size: 3.6rem;
	line-height: 4.2rem;
}

.text-48 {
	font-size: 4.8rem;
	line-height: 5.4rem;
}

.text-64 {
	font-size: 6.4rem;
	line-height: 7.0rem;
}

.text-96 {
	font-size: 9.6rem;
	line-height: 10.2rem;
}

.text-link-news {
    color: #424143;
    background: url(../images/text-link-bg-news.png) no-repeat;
    background-size: 0% 100%;
    background-position: left center;
    display: inline;
    transition: color 0.4s ease; 
	pointer-events: none;
}

.news-sm:hover .text-link-news {
    animation: highlight-swipe 0.7s forwards ease-in-out;
    color: #92B665; 
    transition: color 0.3s ease 0.35s; 
}

.text-link-aktivnosti {
    color: #424143;
    background: url(../images/text-link-bg-aktivnosti.png) no-repeat;
    background-size: 0% 100%;
    background-position: left center;
    display: inline;
    transition: color 0.4s ease; 
	pointer-events: none;
}

.aktivnosti-sm:hover .text-link-aktivnosti {
    animation: highlight-swipe 0.7s forwards ease-in-out;
    color: #BD4F5B; 
    transition: color 0.3s ease 0.35s; 
}

.text-link-events {
    color: #FFFFFF;
    background: url(../images/text-link-bg-events.png) no-repeat;
    background-size: 0% 100%;
    background-position: left center;
    display: inline;
    transition: color 0.4s ease; 
	pointer-events: none;
}

.events-sm:hover .text-link-events {
    animation: highlight-swipe 0.7s forwards ease-in-out;
    color: #68A1D6; 
    transition: color 0.3s ease 0.35s; 
}

@keyframes highlight-swipe {
    0% {
        background-size: 0% 100%;
        background-position: left center;
    }
    45% {
        background-size: 100% 100%;
        background-position: left center;
    }
    55% {
        background-size: 100% 100%;
        background-position: right center;
    }
    100% {
        background-size: 0% 100%;
        background-position: right center;
    }
}

.news-sm, .aktivnosti-sm, .events-sm {
	cursor: pointer;
}

.space-30, .hero-space-30 {
	margin-bottom: 3rem;
}

.space-40, .hero-space-40 {
	margin-bottom: 4rem;
}

.space-50 {
	margin-bottom: 5rem;
}

/* Header */
.header-BG {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 100px; /* Starting height */
    background: url(../images/_gradient_bg_flipped.png) repeat-x bottom, #2D2C2E;
    transition: height 0.3s ease-in-out;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.header-BG.scrolled {
    height: 70px;
}

.header-container {
	display: grid;
    grid-template-columns: auto auto; 
    justify-content: space-between; 
    align-items: center; 
    height: 100%;
}

/*Header Menu */
@keyframes dotPulse {
    0% { transform: scale(1); }
    50% { transform: scale(2); opacity: 0.8; }
    100% { transform: scale(1); }
}

.dot-item a:hover::after {
    animation: dotPulse 0.3s ease-in-out;
}

.menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 3.5rem;
    font-size: 12px;
    letter-spacing: .05rem;
    font-variation-settings: "GRAD" 600;
	-webkit-font-smoothing: antialiased;
}

.menu a {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 500;
    transition: color 0.3s;
}

.menu li:not(.dot-item) a:hover {
    color: #FAA421;
}

.dot-item a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dot-item a::after {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--dot-color);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.3s; 
}

.event-dot { --dot-color: #68A1D6; }
.activity-dot { --dot-color: #BD4F5B; }
.news-dot { --dot-color: #92B665; } 

.dot-item a:hover {
    color: var(--dot-color) !important;
}

/* Hamburger Menu */
.menu-checkbox {
    display: none;
}

/* Hamburger Icon Styling */
.hamburger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 2000;
    position: relative;
}

.hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #FFFFFF;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Mobile Nav Overlay */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen to the right */
    width: 100%;
    height: 100vh;
    background: url(../images/_gradient_bg.png) repeat-x top, url(../images/_lines_bg02.png) bottom right no-repeat, #424143;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
    z-index: 1500;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    text-align: left;
	display: inline-block;
}

.mobile-nav ul li {
    margin: 1.5rem 0; /* Vertical spacing for mobile links */
	padding-left: 37px; /* Matches your alignment perfectly across all items */
}

.mobile-nav .logo-animation {
    /* Remove the 37px padding for the logo itself 
       so the logo image starts at 0, and the text 
       inside the logo naturally aligns with the 37px-padded links below */
    padding-left: 0 !important;
    margin-bottom: 4rem;
}

.mobile-nav ul li a {
    font-size: 16px;
    letter-spacing: .05rem;
    font-variation-settings: "GRAD" 0;
	-webkit-font-smoothing: antialiased;
    color: white;
	display: flex;
    align-items: center;
}

.mobile-nav .logo-animation {
    /* Forces GPU rendering to prevent sub-pixel shifting */
    transform: translateZ(0); 
    backface-visibility: hidden;
    /* Ensure it doesn't inherit margins that might be pushing it */
    margin-right: auto;
    margin-left: auto;
    display: block;
}

/* THE MAGIC: When checkbox is checked, slide the menu in */
.menu-checkbox:checked ~ .mobile-nav {
    right: 0;
}

/* Transform Hamburger into an 'X' when open */
.menu-checkbox:checked + .hamburger span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-checkbox:checked + .hamburger span:nth-child(2) {
    opacity: 0;
}
.menu-checkbox:checked + .hamburger span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Vijesti */
.vijesti-BG {
	padding-top:10rem;
	padding-bottom:10rem;
	background: url(../images/_gradient_bg.png) repeat-x top, #EBEBEB;
}

.vijesti-BG-in {
	padding-top:20rem;
	padding-bottom:10rem;
	background: url(../images/_gradient_bg.png) repeat-x top, #EBEBEB;
}

.vijesti-date {
	font-size: 1.8rem;
	letter-spacing: .1rem;
    font-weight: 700;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 3px solid #92B665;
	display:inline-block;
	align-self: flex-start;
}

.vijesti-ribbon, .aktivnosti-ribbon, .events-ribbon {
	position:absolute;
	right:0;
	top:1.3rem;
	width:280px;
	height:44px;
	display:flex;
	align-items: center;
	background-color:transparent;
	color: #FFFFFF;
	font-size:2rem;
	padding-left:2rem;
	z-index: 1;
	transition: color 0.3s ease, transform 0.3s ease;
	border-left: 3px solid #92B665;
	overflow:hidden;
}

.vijesti-ribbon::before, .aktivnosti-ribbon::before, .events-ribbon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Start at 0% */
    height: 100%;
    background-color: #92B665;
    transition: width 0.3s ease;
    z-index: -1; /* Place it behind the text */
}

/* The Hover State */
.vijesti-ribbon:hover, .aktivnosti-ribbon:hover, .events-ribbon:hover {
    color: #92B665;
	transform: translateX(-10px); /* Subtle nudge to the left */
}

.vijesti-ribbon:hover::before, .aktivnosti-ribbon:hover::before, .events-ribbon:hover::before {
    width: 0%; /* Fill to 100% */
}

.aktivnosti-ribbon {
	border-left: 3px solid #BD4F5B;
}

.aktivnosti-ribbon::before {
	background-color: #BD4F5B;
}

.aktivnosti-ribbon:hover {
	color: #BD4F5B;
}

.events-ribbon {
	border-left: 3px solid #68A1D6;
}

.events-ribbon::before {
	background-color: #68A1D6;
}

.events-ribbon:hover {
	color: #68A1D6;
}

.vijesti-latest-image {
	aspect-ratio: 16 / 9;
	margin:3.5rem 0 5rem 0;
	margin-right: 3.5rem;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
	background-origin: content-box;
	display: block;
	width:calc(50% - 3.5rem);
}

.vijesti-latest-image-sm {
	aspect-ratio: 16 / 9;
	margin:0 0 3rem -2rem;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
	background-origin: content-box;
	display: block;
	width:calc(100% + 4rem);
}

/*
@media (max-width: 575.98px) {
	.vijesti-latest-image-sm {
		aspect-ratio: 16 / 9;
		margin:0 0 2rem 0;
		background-repeat: no-repeat;
		background-size:cover;
		background-position: center;
		background-origin: content-box;
		display: block;
		width:100%;
	}
}
*/

.vijesti-image {
	aspect-ratio: 16 / 9;
	margin:0 0 0 -1rem;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
	background-origin: content-box;
	display: block;
	width:calc(100% + 1.7rem);
}

@media (max-width: 575.98px) {
	.vijesti-image {
		width:calc(100% + 2rem);
	}
}

.vijesti-image-lg {
	aspect-ratio: 16 / 9;
	margin:0 0 0 0;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
	background-origin: content-box;
	display: block;
	width:100%;
}

.vijesti-image-description {
	border-left: 2px solid #92B665;
	padding-left: 1.5rem;
}

.btn-vijesti {
    display: inline-flex;
    align-items: center;
    padding: .6rem 2rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .05rem;
    text-transform: uppercase;
    color: #424143;
    background: transparent;
    border: 1px solid #424143;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1; /* Ensures text stays visible */
    transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* The Green Ground Layer */
.btn-vijesti::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* Start at 0% */
    height: 100%;
    background-color: #92B665;
    transition: width 0.3s ease;
    z-index: -1; /* Place it behind the text */
}

/* The Hover State */
.btn-vijesti:hover {
    color: #FFFFFF;
    border-color: #92B665;
}

.btn-vijesti:hover::before {
    width: 100%; /* Fill to 100% */
}

.news-image {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden; /* Frames the zoom */
    display: block;
    width: 100%;
    /* Keep the background-image from HTML, but make it invisible on the parent */
    background-size: 0; 
}

/* The Zoomable Layer */
.news-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Pulls the URL from your <div style="background-image:..."> */
    background-image: inherit; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
    /* Smooth, slow cinematic zoom */
    transition: transform 1.2s cubic-bezier(0.15, 0.45, 0.35, 1);
    z-index: 1;
}

/* Trigger: Zoom when the whole card is hovered */
.news-sm:hover .news-image::before {
    transform: scale(1.1);
}

@media (max-width: 768px) {
	.news-image {
		aspect-ratio: 16 / 9;
	}
}

/* Aktivnosti */
.aktivnosti-BG {
	padding-top:10rem;
	padding-bottom:10rem;
	background: url(../images/_gradient_bg.png) repeat-x top, url(../images/_lines_bg01.png) top right no-repeat, #FFFFFF;
}

.aktivnosti-date {
	font-size: 1.8rem;
	letter-spacing: .1rem;
    font-weight: 700;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 3px solid #BD4F5B;
	display:inline-block;
	align-self: flex-start;
}

.aktivnosti-image {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    background-size: 0; 
}

/* The Label Styling */
.aktivnosti-label {
    position: absolute;
    top: 0;            /* Pins to top */
    left: 0;           /* Pins to left */
    font-size: 1.6rem;
    font-weight: 700;
    background: #BD4F5B;
    letter-spacing: .1rem;
    color: #FFFFFF;
    padding: .8rem 1.5rem;
    z-index: 2;        /* Sits ABOVE the image zoom (which is z-index 1) */
    pointer-events: none; /* Mouse goes "through" it to trigger the zoom */
}

/* The Zoomable Background Layer */
.aktivnosti-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.15, 0.45, 0.35, 1);
    z-index: 1; /* Sits BELOW the label */
}

/* Trigger zoom when the parent card is hovered */
.aktivnosti-sm:hover .aktivnosti-image::before {
    transform: scale(1.1);
}

@media (max-width: 992px) {
    .aktivnosti-image {
        aspect-ratio: 16 / 9;
    }
}

.aktivnosti-label {
	font-size:1.6rem;
	font-weight: 700;
	background: #BD4F5B;
	letter-spacing: .1rem;
	color: #FFFFFF;
	display:inline-block;
	padding:.5rem 1.5rem .3rem 1.5rem;
}

/* Događanja */
.events-BG {
	padding-top:10rem;
	padding-bottom:10rem;
	background: url(../images/_gradient_bg.png) repeat-x top, url(../images/_lines_bg03.png) top right no-repeat, #424143;
}

.events-image {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden; /* Frames the zoom */
    display: block;
    width: 100%;
    /* Keep the background-image from HTML, but make it invisible on the parent */
    background-size: 0; 
}

/* The Zoomable Layer */
.events-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Pulls the URL from your <div style="background-image:..."> */
    background-image: inherit; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
    /* Smooth, slow cinematic zoom */
    transition: transform 1.2s cubic-bezier(0.15, 0.45, 0.35, 1);
    z-index: 1;
}

/* Trigger: Zoom when the whole card is hovered */
.events-sm:hover .events-image::before {
    transform: scale(1.1);
}

.events-date {
	font-size: 1.8rem;
	letter-spacing: .1rem;
    font-weight: 700;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 3px solid #68A1D6;
	display:inline-block;
	align-self: flex-start;
	color: #FFFFFF;
}

.events-description {
	font-size: 1.8rem;
	letter-spacing: .1rem;
    font-weight: 700;
	color: #68A1D6;
}

@media (max-width: 768px) {
	.events-image {
		aspect-ratio: 16 / 9;
		background-position: top center;
	}
}

/* Hero */
#parallax-section {
    /* Path might need adjusting depending on your folder structure */
    background-position: center 0px; 
    background-size: cover; /* 'cover' usually looks better for parallax than 'contain' */
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100%;
}

.hero-BG {
	background:url(../images/_hero_gradient_bg.png) repeat-x bottom;
}

.hero-container {
	min-height:100vh;
	padding-top:15rem;
	padding-bottom:15rem;
}

.hero-sm {
    cursor: pointer;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    padding: 1rem 3rem;
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: .05rem;
    text-transform: uppercase;
    color: #424143;
    background: #FFFFFF;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
	box-shadow:0 5px 20px rgba(0,0,0,0.3);
    transition: color 0.3s ease, transform 0.3s ease;
}

/* The Orange Ground Layer */
.btn-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0; 
    height: 100%;
    background-color: #FAA421;
    transition: width 0.3s ease;
    z-index: -1; 
}

/* 1. Trigger text color change when parent hero-sm is hovered */
.hero-sm:hover .btn-hero {
    color: #FFFFFF;
    transform: translateY(-3px); /* Subtle lift effect */
}

/* 2. Trigger orange fill when parent hero-sm is hovered */
.hero-sm:hover .btn-hero::before {
    width: 100%; 
}

/* 3. Ensure the link covers the whole container without blocking z-index */
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2; /* Sits above content to make it clickable */
    content: "";
}

.text-hero-title {
	font-size: 9.6rem;
	line-height: 10.2rem;
}

.text-hero-date {
	font-size: 3.2rem;
	line-height: 3.8rem;
	letter-spacing: .25rem;
	position:relative;
	padding-left:15rem;
}

.text-hero-date-line {
	position: absolute;
	top:1.6rem;
	left:-12rem;
	height:5px;
	background:#FFFFFF;
	width:24rem;
	box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

.text-hero-shadow {
	text-shadow: 0px 5px 20px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
	.btn-hero {
		padding: .8rem 2.8rem;
    	font-size: 2.6rem;
	}
	.text-hero-title {
		font-size: 8rem;
		line-height: 8.6rem;
	}
	.text-hero-date {
		font-size: 2.6rem;
		line-height: 3.2rem;
		letter-spacing: .15rem;
		padding-left:10rem;
	}
	.text-hero-date-line {
		top:1.4rem;
		height:4px;
		left:-16rem;
	}
}

/* Footer */
.footer-BG {
	padding-top:10rem;
	padding-bottom:10rem;
	background: url(../images/_gradient_bg.png) repeat-x top, url(../images/_lines_bg02.png) bottom right no-repeat, #424143;
}

.footer-link, .footer-text {
	font-size: 1.3rem;
	line-height: 2rem;
	padding-left:none;
	letter-spacing: 0.05rem;
	font-weight: 300;
}

.footer-link {
	display:inline;
	color: #FFFFFF;
	transition: color .3s ease;
}

.footer-link:hover {
	color: #FAA421;
	cursor: pointer;
}

@media (max-width: 768px) {
		.footer-text {
		padding-left:5rem;
	}
}

/* Logo Styling */
.logo-animation {
    width: 160px;
    height: 40px;
    background: url(../images/logo-animation.png) no-repeat;
	background-size: 1920px 40px;
    background-position: 0px;
    cursor: pointer;
    background-origin: content-box;
    /* Sharp rendering & Jump prevention */
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0); 
    backface-visibility: hidden;
    display: block;
}

/* Ensure the logo in mobile nav is centered but respects your layout */
.mobile-nav .logo-animation {
    margin-bottom: 3rem; /* Replaces mb-5 for consistency */
    /* If you need it centered in the mobile UL: */
    margin-left: auto;
    margin-right: auto;
}

/* Optional: Smooth the background-position transitions if you want it less 'snappy' 
   (Remove this if you prefer the instant frame-jump look) */
/* .logo-animation { transition: background-position 0.05s steps(1); } */

/* Mobile Padding Overrides */
@media (max-width: 575.98px) {
    .container, 
    .container-fluid, 
    .container-mega,
	.footer-BG
			{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
	
    .header-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
	
	.text-28 {
		font-size: 2.4rem;
		line-height: 3.0rem;
	}
	.text-32 {
		font-size: 2.8rem;
		line-height: 3.4rem;
	}
	.text-48 {
		font-size: 4.2rem;
		line-height: 4.8rem;
	}
	.text-64 {
		font-size: 5.8rem;
		line-height: 6.4rem;
	}
	.text-96 {
		font-size: 5.8rem;
		line-height: 6.4rem;
	}
	.btn-hero {
		padding: .8rem 2.8rem;
    	font-size: 2rem;
	}
	.text-hero-title {
		font-size: 5rem;
		line-height: 5.6rem;
	}
	.text-hero-date {
		font-size: 2rem;
		line-height: 2.6rem;
		letter-spacing: .15rem;
		padding-left:7rem;
	}
	.text-hero-date-line {
		top:1rem;
		height:3px;
		left:-19rem;
	}
	.hero-space-30 {
		margin-bottom: 2rem;
	}
	.hero-space-40 {
		margin-bottom: 3rem;
	}
	.vijesti-BG, .aktivnosti-BG, .events-BG {
		padding-top:5rem;
		padding-bottom:5rem;
	}
	
	.vijesti-BG-in {
		padding-top:15rem;
		padding-bottom:5rem;
	}
	.hero-container {
		min-height: 100vh;
		min-height: 100svh;
		padding-top:11rem;
		padding-bottom:11rem;
	}
}

.reveal-item, 
.reveal-from-left {
    opacity: 0;
    filter: blur(4px);
    /* translateY is slightly increased to 30px for more "travel" distance */
    transform: translateY(50px); 
    
    /* Using the dramatic Cubic Bezier */
    transition: 
        opacity 0.8s cubic-bezier(0.3, 0, 0.1, 1), 
        transform 0.8s cubic-bezier(0.3, 0, 0.1, 1), 
        filter 0.8s cubic-bezier(0.3, 0, 0.1, 1);
    
    will-change: opacity, transform, filter;
}

/* Adjusting reveal-from-left starting position */
.reveal-from-left {
    transform: translateX(-50px) !important;
}

.reveal-item.is-visible,
.reveal-from-left.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) !important;
}

.delay-0 { transition-delay: 0s; }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }