* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

@keyframes slideIn {
    from {bottom: -1000px; opacity: 0}
    to {bottom: 0; opacity: 1}
  }

  @keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
  }
  @keyframes fadeOut {
    from {opacity: 1} 
    to {opacity: 0}
  }

@keyframes slideInRight {
    from {transform: translateX(200px); opacity: 0; }
    to {transform: translateX(0); opacity: 1;}
}

@keyframes slideInLeft{
    from {transform: translateX(0); opacity:1;}
    to {transform:translateX(200px); opacity: 0;}
}

:root {
    --bg-dark: oklch(0.1 0 264);
    --bg: oklch(0.15 0 264);
    --bg-light: oklch(0.2 0 264);
    --text: oklch(0.96 0 264);
    --text-muted: oklch(0.76 0 264);
    --highlight: oklch(0.5 0 264);
    --border: oklch(0.4 0 264);
    --border-muted: oklch(0.3 0 264);
    --primary: oklch(0.76 0.1 264);
    --secondary: oklch(0.76 0.1 84);
    --danger: oklch(0.7 0.05 30);
    --warning: oklch(0.7 0.05 100);
    --success: oklch(0.7 0.05 160);
    --info: oklch(0.7 0.05 260); 
    --ff: "Montserrat", sans-serif;
  --colorp: #f9f9f9;
  --colorp2: #fff;
  --colora: #ffe537;
  --colora2: #537fe7;
  --colorbody: #1e1e1e;
  --colors: #333;
  --h1: bold 54px/60px var(--ff);
  --h2: bold 36px/48px var(--ff);
  --h3: bold 24px/36px var(--ff);
  --links: 18px/18px var(--ff);
  --p: 18px/30px var(--ff);
  --p1: 24px/30px var(--ff);
  --p2: 36px/48px var(--ff);
  --subtext: 12px/20px var(--ff);
  --transition: 0.3s ease-in-out;
        }
        html, body {
            overflow-x: hidden;
            scroll-behavior: smooth;
            background: var(--bg-dark); 
            background-attachment: fixed;
            background-size: cover;
            color: var(--text);
            margin: 0;
            font-family: 'Manrope', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        }
        

@font-face {
  font-display: swap;
  font-family: 'sk-modernist';
  font-style: normal;

  src: url('../fonts/Sk-Modernist-Regular.otf') format('opentype');
}
        
.main{
   
    margin: 0 auto;
    overflow: hidden;
    max-width: 1920px;
    height: 100vh;
    
}
        .home-wrap {
            box-sizing:border-box;
            position: relative;
            background-color: var(--bg);
            background-size: cover;
            border-radius: 10px;      
            padding: 0 20px;
            border: 4px solid black;
            min-height: 85vh;
            max-width: 1920px;
            width: 95%;
            margin: 50px auto 20px;
            overflow: hidden;
        }
       
        .panel {
            position: relative;
        }
        .media {
           display: flex;
           justify-content: flex-end;
           align-items: center;
           gap: 3%;
            padding: 18px 24px;
        }
        
       
        .brand {
            display: flex;
            align-items: center;
            font-weight: 800;
            letter-spacing: 0.6px;
        }
        .brand img{
            width: 46px;
            height: 46px;
            border-radius: 6px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
            box-shadow: 0 8px 18px rgba(255,106,61,.35);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        .brand img:hover{
            transform:  rotate(2deg);
            background: linear-gradient(135deg, var(--accent) 50%, var(--accent-2) 100%);
            box-shadow: 0 12px 40px rgba(255,106,61,.6), 
                        0 0 20px rgba(255,106,61,.4),
                        inset 0 0 15px rgba(255,255,255,.1);
            filter: brightness(1.15);
        }
       
        .media a {
            font-family: "Limelight", sans-serif;;
            color: var(--text-muted);
            text-decoration: none;
            font-weight: 600;
            transition: color .5s ease;
        }
        .media a:hover { color: var(--text); }

      
        .btn-primary {
            background: var(--accent);
            color: white;
            box-shadow: 0 10px 22px rgba(255,106,61,.35);
            transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
        }
        .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
        .btn-ghost { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.14); }
        .services { color: var(--muted); font-size: 13px; margin-top: 10px; }
        .services li { margin: 6px 0; }

       

       


.statue-container {
       position: absolute;
       height: 110vh;
         
         left: 50%;
         bottom: -20px;
         transform: translateX(-50%);
         z-index: 2;
         overflow: hidden;
         pointer-events: none;
        }
        .statue-container::after{
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0;
            background: var(--bg-dark);
            height: 10vh;
            width: 100%;
            background: linear-gradient(to bottom, rgba(10,10,10,0), var(--bg-dark) 100%);
          
        }
       
       
       .statue-container img{
    width: auto;
          height: 100%;
        object-fit: contain;
      
          mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,1)   0% 60%,
            rgba(0,0,0,0.7) 75%,
            rgba(0,0,0,0.4) 87%,
            rgba(0,0,0,0)  100%
          );
       }
     
     
       
       @media (max-width:1366px){

       }
       @media (max-width: 800px){
        .statue-container img,
        .capture-canvas {
            display: none !important;
        }

       }
       

      .caption-container {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
       
      }
.caption {
    padding-top: 4%;
    opacity: 0.5;
           font-family: "Limelight", sans-serif;
           font-style: normal;
           font-size: clamp(20px, 17vw, 330px );
           font-weight: 700;
           letter-spacing: 0.02em;
           text-transform: uppercase;
           transform: scaleY(2.5);
           background: linear-gradient(
                180deg,
                rgba(140, 140, 140, 0.5) 0%,
                rgba(90, 90, 90, 0.3) 30%,
                rgba(100, 100, 100, 0.35) 50%,
                rgba(70, 70, 70, 0.2) 70%,
                rgba(80, 80, 80, 0.25) 100%
             );
           -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
           pointer-events: none;
        }
        .middle-caption{
            color: var(--text);
            text-transform: uppercase;
            z-index: 2;
            position: absolute;
            top: 55%;
            left: 5%;
            font-size: 7cqw;
            font-family: "sk-modernist", sans-serif;
            font-weight: 900; 
            line-height: 1.2;  
            letter-spacing: 0.2em;  
        }

.contact-btn {
    z-index: 99;
    cursor: pointer;
            position: absolute;
            top: 80%;
            right: 20%;    
          font-family: "sk-modernist", sans-serif;
            font-size: 16px;
           
            padding: 10px 40px;
            border-radius: 10px;
            background: transparent;
            color: var(--colora);
            box-shadow: 0 0 16px var(--colora);
            border: 2px solid var(--colora);
            
          }
          .contact-btn:hover {
            box-shadow: 0 0 24px var(--colora);
            transition: var(--transition);
          }

          @media( max-width: 450px){
    .contact-btn{
        top:72%;
        right: 15%;
    }
    .home-wrap{
       min-height: 60vh;
    }

}

.decline-section {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

.stack-main{
    position: relative;
    margin: 0 auto ;
    overflow: hidden;
    max-width: 1920px;
    margin-bottom: -350px;
    
}
/* ===== TEKST NAD STOSEM ===== */
 .split {
    text-align: center;
    padding: 25px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.split p {
    font-size: clamp(14px, 2vw, 18px);  
    line-height: 1.8;
    font-weight: 100;
    color: var(--text-muted);
}

.text-animation{
 opacity: 0;
 transform: translateY(50%);   
 transition: opacity 1s ease-out, transform 1s ease-out;
 font-family: "sk-modernist", sans-serif;
 text-align: center;
z-index: 1;
}


.is-visible{
    opacity: 1;
    transform: translateY(0);
}

.stack-section {
    padding-top: 30px;
    width: 100%;
    position: relative;
}

.stack-container {
    margin-top: 25px;
    display: flex;
    position: relative;
    height: 70vh;
    z-index: 2;
    justify-content: center;
    top: 20px;
    

}
.stack-item {
    position: absolute; 
    opacity: 0; 
}



#show-up-text{
color: var(--text);
 font-weight: 700;
}

.stack-container-text span{
    position: relative;
    opacity: 0;
}

.stack-container-text span.show {
    animation: fadeIn 3s forwards;
    -webkit-animation: fadeIn 3s forwards;
}

@media(max-width:764px){
    .stack-container-text{
        font-size: 14px;
    }
}
.stack-img {
    width: auto;
    height: 430px;
    border-radius: 20px;
    display: block;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
    .stack-img{
        height: 280px;
    }
}

.card{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    max-height: 620px;
    height: 100%;
    background: transparent;
    border-radius: 8px;
    transition: all 0.3s ease; 
}
.card-spacer{
    height: 160px;
}
.card-content::before{
opacity: 0;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
 background: linear-gradient(135deg, var(--bg-light) 0%, rgba(255, 255, 255, 0.1) 100%);
 border-radius: 8px;
 transition: opacity 0.3s ease;
 z-index: -1;

}

.card:hover .card-content::before{  
   opacity: 1; 
}

.card img {
    border-radius: 0px;
    max-width: 500px;
    height: 420px;
    object-fit: cover;
    flex-shrink: 0;
}

.card-content{
    position: absolute;
    z-index: 1;
    bottom: 0;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.card-paragraph{
    position: relative;
    max-height: 50px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    mask-image: linear-gradient(
    to top,
    transparent 0%,
    rgba(255, 255, 255, 0.733) 10%,
     rgba(255, 255, 255, 0.747) 30%,
      rgba(255, 255, 255, 0.877) 20%,
    rgb(255, 254, 254) 100%
    );
border-bottom: 2px solid var(--colorp2);
}


.card:hover .card-paragraph{
   
    max-height: 200px;
}



.card h3 {
    transition: all 0.3s ease;
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--text);
}
.card p{
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4em;
}
.card-btn{
    position: relative;
    margin-top: 15px;
    display: inline-block;
    cursor: pointer;
    font-family: "sk-modernist", sans-serif;
    font-size: 14px;
    padding: 7px 2px;
    background: transparent;
    color: var(--text);
    box-shadow: 0 4px  px var(--colora);
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
}
.card-btn::after{
    position: absolute;
    content: "";
    width: 40px;
    height: 1px;
    background: var(--colora);
    bottom: 0;
    left: 0;
    transition: all 0.3s ease;
    box-shadow: 0 1px 6px var(--colora);
}
.card-btn:hover::after{
 width: 100%;

 transition: all 0.3s ease;
}


/* comments section */

.comment-section{
    position: relative;
   
}
.comment-container{
    z-index: -10;
    width: 100%;
    height: auto;
    background: transparent;
    overflow: hidden;
}
.comment-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    gap: 5px;
    overflow: hidden;
}

.comments-column {
    display: flex;
    flex-direction: row;
    gap: 5px;
    will-change: transform;
    visibility: hidden;
}

.comments-column .item {
    flex-shrink: 0;
    width: 700px;
    height: 120px;
    display: flex;
    align-items: center;
}

.comments-column .item img {
    width: 100%;
    height: 100%;
    object-fit:fill;
    border-radius: 10px;
}

.event-section {
    margin-top: 0; 
    position: relative; 
}

.event-wrapper{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-bottom: 2px solid var(--border-muted);
    
}

.event-wrapper > .event-section,
.event-wrapper > .contact-container{
    flex: 0 0 100vw;
    height: 100vh;
    width: 100vw;
}
.calendar-container{
    position: relative;
    display: flex;
    height: 100vh;
    width: 100%;
    margin: 0 auto;
    max-width: 1920px; 
     overflow: hidden;
}

.background-video{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  
}


@media(max-width:764px){
   .calendar-container{
    width: 100%;
   }
  
}

.event-section h2 {
    pointer-events: none;
    opacity: 0.7;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)  scaleY(3.0); 
    font-size: 60px;
    text-transform: uppercase;
    color: #000;
    font-family:"Limelight", sans-serif; 
     font-weight: 900;
     letter-spacing: 0.7em;
     z-index: 2;
}

@media(max-width:1280px){
 .event-section h2 {
    font-size: 40px;
   }
}

@media(max-width:764px){
   .event-section h2 {
    font-size: 30px;
   }
}


.open-calendar-btn {
    opacity: 0.7;
    font-family: "sk-modernist", sans-serif;
    letter-spacing: 0.2em;
    position: absolute;
   top: 70%;
   left: 50%;
   transform: translateX(-50%);
overflow: hidden;
   border: 2px solid var(--border-muted);
   border-radius: 28px;
   padding: 13px 28px;
   cursor: pointer;
   z-index: 1;   
   font-size: 15px;
   font-weight: 100;

   background: black;
   color: #ffffff;
  
}


.open-calendar-btn:hover{
    color: black;
}




.contact-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap:10%;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: var(--bg-dark);
}

.informations-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 80px;
}
.information-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 10px;
    min-width: max-content;
   
}
#item-separator{
    border-left: 1px solid oklch(0.76 0 264 / 0.5);
    border-right: 1px solid oklch(0.76 0 264 / 0.5);
}
.information-item h3{
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}
.information-item p{
    font-size: 16px;
    color: var(--text);
}
.map-container {
    border: 3px solid white;
   position: relative;
    height: 70vh;
    width: 70%;
    max-width: 1920px;
 border-radius: 8px;
 transition: 0.3s ease-in-out;
  background: white;
}
.map-container img{
    height: 35%;
    width: auto;
    position: absolute;
    top: 0%;
     right: -7%;
    transform: translateY(-50%);
    z-index: -1;

}
@media (max-width: 1024px){
    .map-container img {
        right: -15%;
    }
    .informations-container{
        width: 100vw;
    }
    .informations-item{
        padding: 0px 30px;

    }
    .information-item p{
        font-size: 14px;

    }

}
@media(max-width: 768px){
    .map-container img {
        display: none;
    }
    .map-container{
        width: 90%;
    }
}
.map-container > iframe{
   
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.map{
    width: 100%;
    height: 100%;
   
  
}

@media(max-width: 800px) {
    .contact-container{
         flex-direction: column;
         padding: 5px;
    }

    .informations-container {
        max-width: 70%;
     font-size: 14px;
     padding: 3%;
     align-items: center;
    }

}


.hover-fill-btn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
  background-color: #ffffff;
  border-radius: 30px;
  visibility: hidden;
  height: 10px;
  width: 10px;
  z-index: -1;
}

.hover-fill-btn:hover::after {
  visibility: visible;
  transform: scale(100) translateX(2px);
}

/* ===== MODALS ===== */
.contact-modal-background{
position: fixed;
 display: none;
 align-items: flex-end;
 justify-content: flex-end;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 
z-index: 10;
 
}

.contact-modal-content{
    position: relative;
    display: flex;
    flex-direction:column;
    align-items: center;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border-left: 2px solid var(--border-muted);
backdrop-filter: blur(25px) saturate(140%);
height: 100vh;
width: 40vw;
max-width: 500px;
min-width: 300px;
gap: 5%;
-webkit-animation-name: slideInRight;
  -webkit-animation-duration: 0.4s;
  animation-name: slideInRight;
  animation-duration: 0.4s;
  
}
.contact-modal-content h2{
    color: var(--text);
    font-family: "sk-modernist", sans-serif;
  font-size: 34px;
    padding: 10px;
    opacity: 0.8;
    
}

.contact-element{
   width: 90%; 
    padding: 20px 5px 2px ;
    border-bottom: 1px solid var(--text-muted);
}
.contact-element{
    display:flex;
}
.contact-element p{
    font-size: 16px;
    font-family: "sk-modernist", sans-serif;
    color: var(--text-muted);
}
.contact-element input{
    background: transparent;
    border: transparent;
    font-size: 14px;
    font-family: "sk-modernist", sans-serif;
    color: var(--text);
    outline: none;
}

/* Chrome/Edge autofill override */
.contact-element input:-webkit-autofill,
.contact-element input:-webkit-autofill:hover,
.contact-element input:-webkit-autofill:focus,
.contact-element input:-webkit-autofill:active{
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
    box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
    transition: background-color 9999s ease-out 0s;
}
.contact-element input:autofill{
    background-color: transparent !important;
    color: var(--text) !important;
}

#contact-message {
    height: 40%;
    display: flex;
    flex-direction: column;
    border: none;
   
}
#contact-message textarea{
    resize: none;
    background: transparent;
    height: 100%;
    width: 100%;
   border: transparent;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    font-family: "sk-modernist", sans-serif;
    color: var(--text);
    outline: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
}
.contact-modal-btn{
    margin-bottom: 10px;
    cursor: pointer;
    color: var(--text-muted);
    width: 90%;
    height: 5%;
    background:linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );;
    border-radius: 8px;
    border: 2px solid var(--border-muted);
}
.contact-modal-btn:hover{
opacity: 0.7;
color: var(--text);
}

  

.contact-modal-exit{
    position: absolute;
    top: 10px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 24px;
}
.exit-slideLeft{
-webkit-animation-name: slideInLeft;
-webkit-animation-duration: 0.4s;
animation-name: slideInLeft;
animation-duration: 0.4s;
}

.contact-modal-exit:hover{
     color: #ff0000;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.modal-background {
    display: none;
    justify-content: center;
    align-items: center;
 position: fixed;
 top: 0;
 left:0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.7);
  
 z-index: 3;
 overflow: auto;
 -webkit-animation-name: fadeIn; 
  -webkit-animation-duration: 0.8s;
 animation-name: fadeIn;
 animation-duration: 0.8s;
}


.modal-content{
    position: fixed;
    width: 80%;
    height: 100%;
    background-color: #e9e9ec;
    border-radius: 20px;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s  
}

.modal-exit{
    font-size: 40px;
    color: #000;
    float: right;
    margin-top: 20px;
    margin-right: 30px;
    font-weight: bold;
    cursor: pointer;
    background: transparent;
    border: none;
}
.modal-exit:hover{
    color: #ff0000;
    text-decoration: none;
    transition: all 0.3s ease;
}


.modal-content-iframe{
    width: 100%;
    height: 70%;
}

.hide{
    opacity: 0;
     animation: fadeOut 3s forwards;
    -webkit-animation: fadeOut 3s forwards;
}

@media(max-width:764px){
    .contact-modal-content{
        width: 100%;
    }
    .modal-content-iframe{
        height: 70%;
    }
}
/* ===== end ===== */


.footer-wrapper{
    position: relative;
    height: 500px;
   
   
}

.footer-container{
    position: fixed;
    bottom: 0;
    height: 500px;
    width: 100%;
}
@media(max-width: 764px){
    
    .footer-wrapper{
        height: 300px;
    }
    .footer-container{
        height: 300px;
    }
    
}

.footer-content{
    
    display:relative;
    height: 100%;
    background: var(--bg-light);
   
}


.footer-header{
    position: absolute;
    left: 5%;
   bottom: 15%;
    opacity: 0.9;
    font-family: "Limelight", sans-serif;
    font-style: normal;
    font-size: clamp(50px, 10vw, 100px );
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    transform: scaleY(2.5);
    background: linear-gradient(
         180deg,
         rgba(140, 140, 140, 0.5) 0%,
         rgba(90, 90, 90, 0.3) 30%,
         rgba(100, 100, 100, 0.35) 50%,
         rgba(70, 70, 70, 0.2) 70%,
         rgba(80, 80, 80, 0.25) 100%
      );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
}

.footer-references{
    position: absolute;
    left: 5%;
    top: 5%;
    display: flex;
    flex-direction: row;
    padding: 20px;
    gap: 40px;
}
.footer-reference{
    font-weight: 100;
    font-size: 14px;
    color: var(--text-muted);
}

.footer-reference p:hover{
    cursor: pointer;
    color: var(--text);
}
.footer-copyright{
    font-size: 12px;
    position: absolute;
    bottom: 6%;
    right: 2%;
}

.show-modal{
    display: flex;
    z-index: 10;
}