:root{
	--bg:#0f1724;
	--muted: #b0bac5;;
	--accent:#ff6b35;
	--accent-2:#ff9a66;
	--card:#0b1220;
	--text:#e6eef8;
	--glass: rgba(255,255,255,0.04);
	--container:1200px;
	--radius:12px;
	--gap:24px;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html {
	scroll-behavior: smooth;
}

*{box-sizing:border-box}

html,body{min-height:100%}

body {
  margin: 0;
  color: var(--text);
  background: linear-gradient(10deg, #695c5c, #0b2a5a);
  background-size: 100% 100%;
  min-height: 100vh;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  transition: background-position 20s ease-in-out;
}


@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 20px 20px;
}

.centered {text-align: center;}

a:link {
	color : var(--accent);
	text-decoration: none;
}
a:visited {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-2);
}

a:active {
	color: orange;
	text-decoration: none;
}

.event .btn-sm:link {
	color: #fff;
	text-decoration: none;
}

.event .btn-sm:visited {
	color: #fff;
	text-decoration: none;
}

.event .btn-sm:hover {
	color: #fff;
	text-decoration: underline;

}
.event .btn-sm:active{
	color: #fff;
	text-decoration: underline;	
} 

.site-header {
	position: sticky;
	top: 0;
	padding-top: 4px; 
	z-index: 40;
	background: rgba(8 12 20 / 0.03);
	backdrop-filter: blur(2px); /* doesnt work in firefox */	
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.logoText {display:block; padding-left: calc(15px);}

@media(max-width:600px) {
	.logoTextPC {display: none;}
	
} 

.nav{display: flex; gap: 18px; align-items: center; padding-right: calc(8px + 1.5vw); }
.nav a{color: var(--text); text-decoration: none; padding: 10px; border-radius: 8px;}
.nav a:hover{background: var(--glass);}
.btn-outline{border: 1px solid rgba(255,255,255,0.06); padding: 8px 12px; border-radius: 8px;}
#langToggle{cursor: pointer; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 8px; font-weight: 500; border: none; transition: 0.2s;}
#langToggle:hover{background: var(--accent-2);}


.hamburger{display: none; background: none; border: 0; color: var(--text); font-size: 30px;}
@media(max-width: 600px){
	.hamburger{display: block;}
	.nav{display: none; position: absolute; top: 56px; right: 12px; left: 12px; background: rgba(11,18,32,0.95); padding: 12px; border-radius: 10px; flex-direction:column; gap:8px; box-shadow: 0 8px 24px rgba(2,6,23,0.55); z-index:50 }
	.nav a {padding: 12px 10px; border-radius: 8px;}
}

.slideshow-container {position: relative; right: 50px; width: 100%; max-width: 100%;  overflow: hidden; border-radius: 12px; box-shadow: 0 6px 18px rgba(0 0 0/0.2);}
.slides {display: flex; transition: transform 0.8s ease-in-out;}
.slides img {width: 100%; border-radius: 12px; object-fit: cover;}

@media(max-width: 600px) {
	.slideshow-container{position: relative; right: 0; left: calc((var(--widthpx) * 22) / 414 )  ; width: calc((var(--widthpx) * 370) / 414); overflow: hidden; border-radius: 12px; box-shadow: 0 6px 18px rgba(0 0 0/0.2);}
	
}

.hero { display: grid; grid-template-columns: 1fr 420px; column-gap: 10px; align-items: center; gap: 36px; padding: 20px 0;}
.hero-content h1 {font-size: 34px; margin: 0 0 12px;}
.hero-content p {color: var(--muted); margin: 0 0 18px;}
.hero-actions {display: flex; gap: 12px;}
.btn {background: linear-gradient(90deg,var(--accent), var(--accent-2)); color: #fff; padding: 12px 18px; border-radius: 10px; text-decoration: none;}
.btn-secondary {background: transparent; border: 1px solid rgba(255 255 255 / 0.06); color: var(--text);}
.bullets{padding-left: 18px; color: var(--muted);}
@media(max-width:600px){
	.hero{grid-template-columns: 1fr; padding: 0; gap: 0;}
	.hero-content h1{text-align: center;}
	.hero-actions {justify-content: space-evenly;}
	.hero-image{height: 220px;}
	.events-grid{grid-template-columns: 1fr;}
	.about .grid, .contacts .grid{grid-template-columns: 1fr;}	
}

.grid {display: grid; grid-template-columns:calc(var(--widthpx)/7) 1fr calc(var(--widthpx)/7); align-items: start;}
.events-grid{display: grid; grid-template-columns: repeat(2,1fr); gap:18px;}
.event{background: var(--card); padding: 18px; border-radius: 10px;}
.event .meta{color: var(--muted); margin-bottom: 10px;}
.btn-wrapper{text-align: center;margin-top:20px;}
.btn-sm{display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--accent); color:  #fff; text-decoration: none; cursor:pointer; }
@media(max-width:600px) {
	[data-key="events1"] { text-align: center;}
}
[data-key="gallery1"] {text-align: center;}
[data-key="gallery2"] { text-align: center;}
.gallery-grid{display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;}
.gallery-grid img{width: 100%; height: 200px; object-fit: cover; border-radius: 10px; cursor: pointer; transition:transform .18s;}
.gallery-grid img:hover{transform: translateY(-6px);}

@media(max-width:600px) {
	.gallery-grid {display:grid; grid-template-columns: 1fr;}
	.gallery-grid img {border-radius: 10px; transition:transform .18s; object-fit: cover;}
}
.contact-grid {display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; align-items: center;}
.label {text-align: right; font-weight: bold;}
.value {text-align: left;}
.contact-form{display: flex; flex-direction: column; gap: 12px; background: var(--card); padding: 16px; border-radius: 10px;}
.contact-form input[type="text"], .contact-form input[type="email"], 
.contact-form textarea{ background: transparent; border: 1px solid rgba(255 255 255 / 0.06); color: var(--text); padding: 10px; border-radius: 8px;}
.contacts span{margin-right: 5px;}
.contact-row{display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.contact-row a:hover{text-decoration: underline;}


.site-footer{background: #131d2e; color: var(--muted); padding: 30px 20px; margin-top: 60px;}
.footer-inner{max-width: var(--container); margin-right: 10vw; display: flex; justify-content: flex-start;  align-items: center; flex-wrap: wrap; gap: 16px}
.footer-inner p{margin: 0; font-size: 14px;}
.footer-nav{display: flex; gap: 20px;}
.footer-nav a{color: var(--text); text-decoration: none; font-size: 14px; transition: color 0.2s;}
.footer-nav a:hover{color: var(--accent);}


@media(max-width: 600px) {
	.footer-inner {flex-direction: column; text-align: center; margin:0;}
	.footer-nav {justify-content: center}
}

.lightbox { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;}
.lightbox[aria-hidden="false"] { opacity: 1; pointer-events: auto;}
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: block;}
.lb-close { position: absolute; right: 20px; top: 20px; font-size: 26px; background: transparent; border: none; color: #fff; cursor: pointer; transition: opacity 0.2s;}
.lb-close:hover { opacity: 0.8;}
@media (max-width: 600px) {
	.lightbox {padding: 0;}

	.lightbox img { width: 92vw; height: auto; max-height: 85vh; object-fit: contain; margin: 0 auto;}
}