@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
/* Font Face Definitions (assuming these TTF files are accessible) */
@font-face {
  font-family: 'Goodbye Reality DEMO-Regular'; /* Ensure this name matches your font file */
  src: url('fonts/GoodbyeRealityDEMO-Regular.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* If you have other fonts, define them here */

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
/*
html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll 
  display: flex; /* Use flexbox to center the scaled content 
  justify-content: center;
  align-items: flex-start; /* Align to the top, so content starts from there 
  background-color: #000; /* Set a background for the body 
}
/* --- Main Content Wrapper for Universal Scaling --- 
.main-content-wrapper {
  /* This defines the "virtual" design width that everything scales from 
  width: 1920px;
  height: auto; /* Let content define height 
  transform-origin: top center; /* Scale from the top-center of the content 
  position: relative; /* Essential for positioning the scaled content correctly 
  /* Apply scaling directly for universal responsiveness 
  transform: scale(calc(100vw / 1920));
  /* Ensure that elements don't get too small on very tiny screens or too large on huge screens 
  /* You might need media queries for min/max font sizes if this scaling is too extreme 
}


*/

/* ... (postojeci CSS kod do ovde) ... */


html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
  background-color: #AFE0E2; /* Remove white background */
  scroll-behavior: smooth;
}


.main-content-wrapper {
  width: 100vw; /* Full viewport width */
  max-height: 1000px;
  transform-origin: top left; /* Adjust origin for full-width scaling */
  position: relative;
  transform: none; /* Remove initial centering transform; JavaScript will handle scaling if needed */
  background-color: #AFE0E2; /* Match the background of .overlap-group-wrapper for consistency */
}



/* --- Original Styles (sa vw jedinicama) --- */
/* Nema potrebe za promenama unutar ovoga, samo proveri da su sve visine definisane u vw */

/* Primer: */
.frame .overlap-wrapper {
  background-color: #c1f0ff;
  overflow: visible;
  width: 100vw;
  height: 241.875vw; /* Keep original virtual height */
}


/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}



/* --- Original Styles (with all pixel values converted to vw) --- */

.frame {
  background-color: #c1f0ff; /* Match the design background */
  width: 100%;
  height: auto;
}


.frame .overlap-wrapper {
  background-color: #ffffff;
  overflow: visible;
  width: 100vw; /* Now 100% of the viewport width */
  height: 241.875vw; /* 4644px / 1920 * 100 = 241.875vw */
}

.frame .overlap {
  position: relative;
  width: 100vw; /* Full width instead of 131.1vw */
  height: 246.927vw;
  top: -4.896vw;
}

.frame .overlap-group-wrapper {
  position: absolute;
  width: 100vw;
  height: 242.031vw;
  top: 4.896vw;
  left: 0;
  background-color: #c1f0ff;
  overflow: hidden;
}

.frame .overlap-group {
  position: relative;
  width: 100vw; /* Full width instead of 359.167vw */
  height: 241.875vw;
  left: 0;
}

.frame .prav-ceo {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 241.875vw; /* 4644px / 1920 * 100 = 241.875vw */
  top: 0;
  left: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
}

.frame .text-frames {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 120.26vw; /* 2309px / 1920 * 100 = 120.26vw */
  left: 0;
}

.frame .div {
  position: relative;
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
}

.frame .img {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 0;
  left: 0;
}

.frame .bg-text {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 0;
  left: 0;
  overflow: hidden;
}

.frame .artboard-copy {
  position: relative;
  height: 56.5vw; /* 1086px / 1920 * 100 = 56.5vw */
  top: -0.26vw; /* -5px / 1920 * 100 = -0.26vw */
}

.frame .grad-wrapper {
  position: relative;
  width: 99.948vw; /* 1919px / 1920 * 100 = 99.948vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 0.26vw; /* 5px / 1920 * 100 = 0.26vw */
  left: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
  background-image: url(./img/grad-2.svg);
  background-size: 100% 100%;
}

.frame .grad {
  position: absolute;
  width: 99.948vw; /* 1919px / 1920 * 100 = 99.948vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 0;
  left: 0;
}

.frame .artboard-copy-2 {
  position: absolute;
  width: 27.708vw; /* 532px / 1920 * 100 = 27.708vw */
  height: 11.771vw; /* 226px / 1920 * 100 = 11.771vw */
  top: 37.708vw; /* 724px / 1920 * 100 = 37.708vw */
  left: 36.146vw; /* 694px / 1920 * 100 = 36.146vw */
  background-image: url(./img/buy-button.svg);
  background-size: 100% 100%;
}

/* Postojeći stilovi + hover efekat */
.frame .buy-blizz-btn {
  position: absolute;
  width: 24.479vw;
  top: 37.969vw;
  left: 37.656vw;
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #414141;
  font-size: 6.25vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  cursor: pointer; /* Pokazuje pointer kursor */
  transition: all 0.3s ease; /* Glatka tranzicija za hover efekat */
  z-index: 10; /* Osigurava da je iznad drugih elemenata */
}

.frame .buy-blizz-btn:hover {
  transform: scale(1.05); /* Povećava se za 5% */
  color: #000000; /* Tamnija boja na hover */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Lagani sjaj */
}

.frame .artboard-copy-3 {
  position: absolute;
  width: 67.188vw; /* 1290px / 1920 * 100 = 67.188vw */
  height: 22.656vw; /* 435px / 1920 * 100 = 22.656vw */
  top: 5vw; /* 96px / 1920 * 100 = 5vw */
  left: 16.406vw; /* 315px / 1920 * 100 = 16.406vw */
  background-image: url(./img/tabele.svg);
  background-size: 100% 100%;
}

.frame .xt {
  position: absolute;
  width: 19.844vw; /* 381px / 1920 * 100 = 19.844vw */
  height: 17.24vw; /* 331px / 1920 * 100 = 17.24vw */
  top: 5.938vw; /* 114px / 1920 * 100 = 5.938vw */
  left: 17.708vw; /* 340px / 1920 * 100 = 17.708vw */
}

.frame .p {
  position: absolute;
  width: 100%; /* Relative to parent .xt */
  top: 0.938vw; /* 134px - 114px = 20px relative to .xt top, then 20/1920*100 = 1.04vw. Or 134/1920*100 = 6.979vw from top of .text-frames */
  left: 0;
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #414141;
  font-size: 1.667vw; /* 32px / 1920 * 100 = 1.667vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  margin-top: 70px;
}

.frame .text-wrapper-2 {
  left: 4.375vw; /* 84px / 1920 * 100 = 4.375vw */
  position: absolute;
  width: 10.833vw; /* 208px / 1920 * 100 = 10.833vw */
  top: -0.052vw; /* -1px / 1920 * 100 = -0.052vw */
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #414141;
  font-size: 2.5vw; /* 48px / 1920 * 100 = 2.5vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text {
  position: absolute;
  width: 19.844vw; /* 381px / 1920 * 100 = 19.844vw */
  height: 17.292vw; /* 332px / 1920 * 100 = 17.292vw */
  top: 5.938vw; /* 114px / 1920 * 100 = 5.938vw */
  left: 40.052vw; /* 769px / 1920 * 100 = 40.052vw */
}

.frame .text-wrapper-3 {
  left: 4.531vw; /* 87px / 1920 * 100 = 4.531vw */
  position: absolute;
  width: 10.833vw; /* 208px / 1920 * 100 = 10.833vw */
  top: -0.052vw; /* -1px / 1920 * 100 = -0.052vw */
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #414141;
  font-size: 2.5vw; /* 48px / 1920 * 100 = 2.5vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-2 {
  position: absolute;
  width: 20.052vw; /* 385px / 1920 * 100 = 20.052vw */
  height: 21.094vw; /* 405px / 1920 * 100 = 21.094vw */
  top: 5.938vw; /* 114px / 1920 * 100 = 5.938vw */
  left: 62.344vw; /* 1197px / 1920 * 100 = 62.344vw */
}

.frame .navigate-to-the {
  position: absolute;
  width: 100%; /* Relative to parent .text-2 */
  top: 0.938vw; /* 134px - 114px = 20px relative to .text-2 top, or 134/1920*100 = 6.979vw from top of .text-frames */
  left: 0;
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #414141;
  font-size: 1.667vw; /* 32px / 1920 * 100 = 1.667vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  margin-top: 70px;
}

.frame .text-wrapper-4 {
  left: 4.635vw; /* 89px / 1920 * 100 = 4.635vw */
  position: absolute;
  width: 10.833vw; /* 208px / 1920 * 100 = 10.833vw */
  top: -0.052vw; /* -1px / 1920 * 100 = -0.052vw */
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #414141;
  font-size: 2.5vw; /* 48px / 1920 * 100 = 2.5vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-5 {
  position: absolute;
  width: 65vw; /* 1248px / 1920 * 100 = 65vw */
  top: 28.698vw; /* 551px / 1920 * 100 = 28.698vw */
  left: 18.229vw; /* 350px / 1920 * 100 = 18.229vw */
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #414141;
  font-size: 2.5vw; /* 48px / 1920 * 100 = 2.5vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .about-bg {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 64.01vw; /* 1229px / 1920 * 100 = 64.01vw */
  left: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
  overflow: hidden;
}

.frame .div-wrapper {
  position: relative;
  width: 101.667vw; /* 1952px / 1920 * 100 = 101.667vw */
  height: 56.406vw; /* 1083px / 1920 * 100 = 56.406vw */
  left: -0.052vw; /* -1px / 1920 * 100 = -0.052vw */
}

.frame .overlap-group-2 {
  position: relative;
  width: 101.615vw; /* 1951px / 1920 * 100 = 101.615vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  left: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
}

.frame .about-fox-paralax {
  position: absolute;
  width: 100vw;
  height: 56.25vw;
  top: 0;
  left: 1.615vw;
  z-index: 3; /* Postavlja tekst iznad lisice */
}

.frame .artboard-copy-4 {
  position: absolute;
  width: 17.76vw;
  height: 16.823vw;
  top: 10.99vw;
  left: 62.292vw;
  background-image: url(./img/fox-slide.svg);
  background-size: 100% 100%;
  z-index: 2; /* Postavlja lisicu iznad pozadine */
  transition: transform 0.5s ease-out; /* Daje glatku tranziciju animaciji */
}

.frame .text-wrapper-6 {
  position: absolute;
  width: 67.917vw; /* 1304px / 1920 * 100 = 67.917vw */
  top: 45.521vw; /* 874px / 1920 * 100 = 45.521vw */
  left: 15.104vw; /* 290px / 1920 * 100 = 15.104vw */
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #414141;
  font-size: 2.083vw; /* 40px / 1920 * 100 = 2.083vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .traka_wrapper {
  /* Ensure this wrapper takes full width and positions its content */
  position: absolute;
  width: 100vw;
  height: 7.813vw; /* Same height as traka.svg */
  top: 56.25vw; /* Keep its original vertical position relative to its siblings */
  left: 0.052vw; /* Keep its original horizontal position */
  overflow: hidden; /* Crucial to hide the overflowing text for the scroll effect */
  
}

.frame .traka {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 7.813vw; /* 150px / 1920 * 100 = 7.813vw */
  top: 0; /* Position relative to traka_wrapper */
  left: 0; /* Position relative to traka_wrapper */
}

.frame .text-wrapper-7 {
  position: absolute;
  width: 357.5vw; /* This width is what allows the text to extend far enough to scroll */
  top: 0; /* Position relative to traka_wrapper */
  /* Remove 'left' property as it will be controlled by animation */
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #424242;
  font-size: 5vw; /* 96px / 1920 * 100 = 5vw */
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  animation: scroll-text 30s linear infinite; /* Apply the animation */
  padding-left: 30%; /* Start the text off-screen to the right */
}

/* Keyframe animation for continuous scrolling */
@keyframes scroll-text {
  0% {
    transform: translateX(0); /* Start at the initial position */
  }
  100% {
    transform: translateX(-100%); /* Scroll entirely past its own width */
  }
}
.frame .footer {
  position: absolute;
  bottom: 0;
  top: auto;
  width: 100vw;
  height: 9.219vw;
  margin-top:50px;
 
}

.footer-icons {
  position: absolute;
  bottom: 1vw;              /* koliko gore od dna */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2vw;                 /* razmak između ikonica */

  
}
.footer-icons .icon {
  width: 3.49vw;             /* iste dimenzije kao .div-4 */
  height: 2.969vw;           /* iste dimenzije kao .div-5 */
  background-size: contain;
  background-repeat: no-repeat;
  padding-top:40px;
  
}

/* 4) samo postavi pozadinske slike za svaku ikonicu */
.footer-icons .telegram-icon {

  background-image: url('./img/telegram.svg');
}

.telegram-icon:hover{
  cursor: pointer;
}
.close-icon:hover{
  cursor: pointer;
}
.footer-icons .close-icon {
  background-image: url('./img/x.svg');
}
.frame .home-bg-png {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 0;
  left: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
  background-image: url(./img/pozadina-popunjeno.svg);
  background-size: 100% 100%;
}

.header {
  position: fixed; /* Change from absolute to fixed to stick to the viewport */
  top: 0; /* Align to the top of the viewport */
  left: 0; /* Align to the left of the viewport */
  width: 100vw; /* Full viewport width */
  height: 13.073vw; /* Keep original height */
  background-color: transparent; /* Match the background for consistency */
  z-index: 100; /* Ensure header is above other content */
  display: flex; /* Center content if needed */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
}

.overlap-2 {
  position: relative;
  width: 67.292vw; /* Keep original width */
  height: 11.042vw; /* Keep original height */
  background-image: url(./img/header.svg);
  background-size: 100% 100%;
}

.text-wrapper-8 {
  position: absolute;
  width: 5.625vw;
  top: 1.875vw;
  left: 11.563vw;
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #3b3b3b;
  font-size: 2.5vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  transition: all 0.3s ease; /* Dodajemo transition za glatku animaciju */
}

 .text-wrapper-8:hover {
  transform: scale(1.05); /* Malo uvećanje */
  color: #000000; /* Tamnija boja na hover */
}

.text-wrapper-9 {
  position: absolute;
  width: 3.75vw;
  top: 2.135vw;
  left: 59.0vw;
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #3b3b3b;
  font-size: 2.5vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  transition: all 0.3s ease;
}

 .text-wrapper-9:hover {
  transform: scale(1.05);
  color: #000000;
}

.text-wrapper-10 {
  position: absolute;
  width: 4.635vw;
  top: 1.875vw;
  left: 4.115vw;
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #3b3b3b;
  font-size: 2.5vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.text-wrapper-10:hover {
  transform: scale(1.05);
  color: #000000;
}

.text-wrapper-11 {
  position: absolute;
  width: 8.177vw;
  top: 1.875vw;
  left: 20vw;
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #3b3b3b;
  font-size: 2.5vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.text-wrapper-11:hover {
  transform: scale(1.05);
  color: #000000;
}

.text-wrapper-8,
.text-wrapper-9,
.text-wrapper-10,
.text-wrapper-11 {
  position: absolute;
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #3b3b3b;
  font-size: 2.5vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  transition: all 0.3s ease;
  pointer-events: auto;
}
.text-wrapper-8:hover,
.text-wrapper-9:hover,
.text-wrapper-10:hover,
.text-wrapper-11:hover {
  transform: scale(1.05);
  color: #000000;
  z-index: 10;
}
.div-2 {
  position: absolute;
  width: 2.5vw; /* 48px / 1920 * 100 = 2.5vw */
  height: 2.135vw; /* 41px / 1920 * 100 = 2.135vw */
  top: 2.917vw; /* 56px / 1920 * 100 = 2.917vw */
  left: 45.052vw; /* 865px / 1920 * 100 = 45.052vw */
  background-image: url(./img/Telegram.svg); /* Assuming this is your Twitter icon */
  background-size: 100% 100%;
  /* pointer-events: auto; is redundant here as <a> tags have it by default */
}

.div-3 {
  position: absolute;
  width: 2.292vw; /* 44px / 1920 * 100 = 2.292vw */
  height: 2.135vw; /* 41px / 1920 * 100 = 2.135vw */
  top: 2.917vw; /* 56px / 1920 * 100 = 2.917vw */
  left: 40.625vw; /* 780px / 1920 * 100 = 40.625vw */
  background-image: url(./img/x-2.svg); /* Assuming this is your Discord icon */
  background-size: 100% 100%;
}
.div-2,
.div-3 {
  position: absolute;
  background-size: 100% 100%;
  z-index: 200; /* Dodajte ovo */
    display: block !important;
  pointer-events: auto !important;
}
.frame .div-4 {
  position: absolute;
  width: 3.49vw; /* 67px / 1920 * 100 = 3.49vw */
  height: 2.969vw; /* 57px / 1920 * 100 = 2.969vw */
  /* Adjust the 'top' property to move the social icons with the footer */
  top: 236.874vw; /* Original: 235.833vw + ~1.04vw (20px) = 236.874vw (4548px) */
  left: 17.292vw; /* 332px / 1920 * 100 = 17.292vw */
  background-image: url(./img/telegram.svg);
  background-size: 100% 100%;
  padding-top:65px;
}

.frame .div-5 {
  position: absolute;
  width: 3.177vw; /* 61px / 1920 * 100 = 3.177vw */
  height: 2.969vw; /* 57px / 1920 * 100 = 2.969vw */
  /* Adjust the 'top' property to move the social icons with the footer */
  top: 236.874vw; /* Original: 235.833vw + ~1.04vw (20px) = 236.874vw (4548px) */
  left: 11.146vw; /* 214px / 1920 * 100 = 11.146vw */
  background-image: url(./img/x.svg);
  background-size: 100% 100%;
  padding-top:65px;
}

.frame .iglooonly {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 0;
  left: 31.0vw; /* 597px / 1920 * 100 = 31.0vw */
  overflow: hidden;
}

 .penguin {
  position: relative;
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 4.25vw;     /* 120px / 1920 * 100 = 6.25vw */
  left: -22.479vw; /* -566px / 1920 * 100 = -29.479vw */
  transition: transform 0.3s ease-out;
  z-index: 10;
}

.penguin:hover {
  transform: translateY(-12%);
}

.frame .overlap-group-3 {
  position: relative;
  width: 5.052vw; /* 97px / 1920 * 100 = 5.052vw */
  height: 6.875vw; /* 132px / 1920 * 100 = 6.875vw */
  top: 17.76vw; /* 341px / 1920 * 100 = 17.76vw */
  left: 71.042vw; /* 1364px / 1920 * 100 = 71.042vw */
}

.frame .pingvin {
  position: absolute;
  width: 3.177vw; /* 61px / 1920 * 100 = 3.177vw */
  height: 5.781vw; /* 111px / 1920 * 100 = 5.781vw */
  top: 0.938vw; /* 18px / 1920 * 100 = 0.938vw */
  left: 0.729vw; /* 14px / 1920 * 100 = 0.729vw */
}

.frame .pingvin-2 {
  position: absolute;
  width: 4.896vw; /* 94px / 1920 * 100 = 4.896vw */
  height: 6.458vw; /* 124px / 1920 * 100 = 6.458vw */
  top: 0.26vw; /* 5px / 1920 * 100 = 0.26vw */
  left: 0.104vw; /* 2px / 1920 * 100 = 0.104vw */
}

.frame .pingvin-3 {
  position: absolute;
  width: 5.052vw; /* 97px / 1920 * 100 = 5.052vw */
  height: 6.875vw; /* 132px / 1920 * 100 = 6.875vw */
  top: 0;
  left: 0;
}

.frame .igalo-deo {
  position: absolute;
  width: 19.948vw; /* 383px / 1920 * 100 = 19.948vw */
  height: 12.031vw; /* 231px / 1920 * 100 = 12.031vw */
  top: 18.53vw; /* 448px / 1920 * 100 = 23.333vw */
  left: 73.125vw; /* 1404px / 1920 * 100 = 73.125vw */
  z-index: 11;
}

.frame .artboard-wrapper {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 0.052vw; /* 97px / 1920 * 100 = 5.052vw */
  left: 0.104vw; /* 2px / 1920 * 100 = 0.104vw */
}

.frame .artboard {
  position: relative;
  width: 15.417vw; /* 296px / 1920 * 100 = 15.417vw */
  height: 26.615vw; /* 511px / 1920 * 100 = 26.615vw */
  top: 11.927vw; /* 229px / 1920 * 100 = 11.927vw */
  left: 42.396vw; /* 814px / 1920 * 100 = 42.396vw */
  background-image: url(./img/character.svg);
  background-size: 100% 100%;
}

.frame .artboard-2 {
  position: relative;
  width: 19.688vw; /* 378px / 1920 * 100 = 19.688vw */
  height: 11.406vw; /* 219px / 1920 * 100 = 11.406vw */
  top: 32.063vw;  /*558px / 1920 * 100 = 29.063vw */
  left: 40vw; /* 768px / 1920 * 100 = 40vw */
  background-image: url(./img/novine.svg);
  background-size: 100% 100%;
    /* Opcionalno: dodaj transition za glatkije kretanje (manje trzaja) */
  
}


.frame .home-table-front {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 0.896vw; /* 94px / 1920 * 100 = 4.896vw */
  left: 0;
}

.frame .sto {
  position: relative;
  width: 27.292vw; /* 524px / 1920 * 100 = 27.292vw */
  height: 20vw; /* 384px / 1920 * 100 = 20vw */
  top: 34.167vw; /* 656px / 1920 * 100 = 34.167vw */
  left: 36.292vw; /* 697px / 1920 * 100 = 36.292vw */
}

.frame .overlap-group-4 {
  position: relative;
  height: 20vw; /* 384px / 1920 * 100 = 20vw */
}

.frame .sto-2 {
  position: absolute;
  width: 27.292vw; /* 524px / 1920 * 100 = 27.292vw */
  height: 19.167vw; /* 368px / 1920 * 100 = 19.167vw */
  top: 0;
  left: 0;
}

.frame .sto-senka {
  position: absolute;
  width: 10.417vw; /* 200px / 1920 * 100 = 10.417vw */
  height: 1.458vw; /* 28px / 1920 * 100 = 1.458vw */
  top: 18.542vw; /* 356px / 1920 * 100 = 18.542vw */
  left: 9.375vw; /* 180px / 1920 * 100 = 9.375vw */
}

.frame .sto-senka-2 {
  position: absolute;
  width: 19.635vw; /* 377px / 1920 * 100 = 19.635vw */
  height: 1.042vw; /* 20px / 1920 * 100 = 1.042vw */
  top: 18.438vw; /* 354px / 1920 * 100 = 18.438vw */
  left: 3.073vw; /* 59px / 1920 * 100 = 3.073vw */
}

.frame .gallery-front {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  top: 181.302vw; /* 3481px / 1920 * 100 = 181.302vw */
  left: 0;
  background-color: #c1f0ff;
  overflow: hidden;
}

.frame .footer-2 {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
  top: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  left: 0;
}

.frame .overlap-3 {
  position: absolute;
  width: 100.417vw; /* 1928px / 1920 * 100 = 100.417vw */
  height: 52.708vw; /* 1012px / 1920 * 100 = 52.708vw */
  top: 3.542vw; /* 68px / 1920 * 100 = 3.542vw */
  left: -0.208vw; /* -4px / 1920 * 100 = -0.208vw */
}

/* Hide original carousel images */
.frame .carusel,
.frame .carusel-2,
.frame .carusel-3 {
  display: none;
}

/* NEW: Styles for the carousel container */
.frame .carousel-scroller {
  position: absolute; /* Position within .overlap-3 */
  top: 0; /* Aligns with original .carusel top */
  left: 0;
  width: 100%; /* Take full width of .overlap-3 */
  height: 32.344vw; /* Height of the largest original carousel image */
  overflow-x: scroll; /* Enable horizontal scrolling */
  scroll-snap-type: x mandatory; /* For smooth snapping to items */
  -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
  display: flex; /* Arrange items in a row */
  align-items: center; /* Vertically center items */
  gap: 2vw; /* Spacing between images */
  padding: 0 34vw; /* Add padding to allow first/last item to center */
  box-sizing: border-box; /* Include padding in width calculation */

  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.frame .carousel-scroller::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* NEW: Styles for individual carousel items */
.frame .carusel-item {
  flex-shrink: 0; /* Prevent items from shrinking */
  width: 32.344vw; /* Fixed width for each item (same as largest original) */
  height: 32.344vw; /* Fixed height for each item */
  object-fit: contain; /* Ensure image fits within its box */
  scroll-snap-align: center; /* Snap to the center of the item */
  transition: filter 0.3s ease-out, transform 0.3s ease-out; /* Smooth transition for effects */

  /* Initial state: blurred and scaled down (JavaScript will dynamically change this) */
  filter: blur(5px) grayscale(100%);
  transform: scale(0.8);
}

/* The 'active' class will be added by JavaScript for the centered item */
.frame .carusel-item.active {
  filter: blur(0) grayscale(0);
  transform: scale(1);
}

.frame .fox-wiskey-wrapper {
  position: absolute;
  width: 100.417vw; /* 1928px / 1920 * 100 = 100.417vw */
  height: 32.5vw; /* 624px / 1920 * 100 = 32.5vw */
  top: 20.208vw; /* 388px / 1920 * 100 = 20.208vw */
  left: 0;
}

.frame .fox-wiskey {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 32.5vw; /* 624px / 1920 * 100 = 32.5vw */
  top: 0;
  left: 0.208vw; /* 4px / 1920 * 100 = 0.208vw */
}

.frame .prav-ceo,
.frame .text-frames,
.frame .img,
.frame .bg-text,
.frame .about-bg,
.frame .home-bg-png,
.frame .iglooonly,
.frame .home-table-front,
.frame .gallery-front,
.frame .artboard-wrapper,
.frame .fox-wiskey-wrapper {
  width: 100vw; /* Ensure all major containers are full-width */
}
/* Fix footer positioning to align with new layout */
.frame .footer {
  position: absolute;
  width: 100vw;
  height: 9.219vw;
  top: 232.656vw; /* Adjust based on your design needs */
  left: 0;
  bottom:0;
}

/* Adjust social icons positioning */
.frame .div-4,
.frame .div-5 {
  top: 235.833vw; /* Adjust to align with footer */
  padding-top: 3.385vw; /* 65px / 1920 * 100 = 3.385vw */
}

/* Keep the scrolling text animation */
.frame .text-wrapper-7 {
  width: 357.5vw; /* Keep wide for scrolling effect */
  top: 0;
  font-family: "Goodbye Reality DEMO-Regular", Helvetica;
  font-weight: 400;
  color: #424242;
  font-size: 5vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  animation: scroll-text 30s linear infinite;
  padding-left: 30%;
}
/* Carousel Styles */
      .carousel-scroller {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        padding: 2vw 0;
        gap: 2vw;
        align-items: center;
        scrollbar-width: none;
      }
      
      .carousel-scroller::-webkit-scrollbar {
        display: none;
      }
      
      .carusel-item {
        scroll-snap-align: center;
        flex: 0 0 auto;
        width: 29.427vw;
        height: 29.427vw;
        object-fit: contain;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
      }
      
      .carusel-item:not(.active) {
        filter: blur(2px) grayscale(50%);
        opacity: 0.8;
        transform: scale(0.9);
      }
      
      .carusel-item.active {
        filter: none;
        opacity: 1;
        transform: scale(1);
        z-index: 2;
      }
      
      .carousel-dots {
        display: flex;
        justify-content: center;
        padding: 1vw 0;
      }
      
      .carousel-dot {
        width: 1vw;
        height: 1vw;
        border-radius: 50%;
        background: #C1F0FF;
        margin: 0 0.5vw;
        cursor: pointer;
        transition: background 0.3s ease;
      }
      
      .carousel-dot.active {
        background: #C1F0FF;
      }
      
      /* Existing frame styles */
      .frame {
        background-color: #c1f0ff;
        width: 100%;
        height: auto;
      }
      
      .overlap-wrapper {
        background-color: #ffffff;
        overflow: visible;
        width: 100vw;
        height: 241.875vw;
      }