body{
	margin:0;
	font-family:Arial;
	
	
	
	}
	
#page{
	/*background-color: #011842;*/

	background: linear-gradient(
        180deg,
        #011842 50%,
        #000022 100%
    );
}

.hero{
	height:100vh;
	background:url('../img/banner.jpg') center/cover no-repeat;
	position:relative;
	color:#fff;
	}
	
.overlay{
	position:absolute;
	left:8%;top:30%;
	}
	
.cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.0417vw;
	padding:1.0417vw;
	}
	





/* PANEL SOCIALI */
/* Główny kontener przyklejony do lewej krawędzi */
.dark-browser-sidebar {
  position: absolute;
  top: 28vw;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  background-color: #1a1a1a; 
  border-right: 0.0521vw solid #2d2d2d;
  box-shadow: 0.1042vw 0 0.625vw rgba(0, 0, 0, 0.4);
  z-index: 99999;

}

/* Styl pojedynczego linku - szerokość wyjściowa to 2.6042vw */
.sidebar-dark-icon {
  display: flex;
  align-items: center;
  width: 3vw;
  height: 3vw;
  text-decoration: none;
  overflow: hidden; 
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
  white-space: nowrap; 
}

/* Kontener na samą ikonę (zawsze zablokowany na 2.6042vw) */
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3vw;
  height: 3vw;
}

/* 1. Obsługa ikon wektorowych (Social Media) */
.icon-wrapper svg.svg-vector {
  width: 2vw;
  height: 2vw;
  fill: #8e8e8e; 
  transition: fill 0.2s ease;
}

/* 2. Obsługa ikon obrazkowych (Kino, Hangar, BIP) */
.icon-wrapper svg.svg-image {
  width: 2vw;
  height: 2vw;
  opacity: 0.7; /* Przyciemnienie do koloru szarego w spoczynku */
  filter: brightness(0.7); /* Dopasowanie jasności */
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Ukryty/schowany tekst */
.sidebar-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.5vw;
  font-weight: 500;
  color: #8e8e8e;
  margin-left: 0.5208vw;
  opacity: 0; 
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Linia oddzielająca sekcje */
.sidebar-divider {
  height: 0.0521vw;
  background-color: #2d2d2d;
  margin: 0.2604vw 0.5208vw;
}

/* EFEKT NAJECHANIA (HOVER) */
.sidebar-dark-icon:hover {
  width: 17vw; 
  background-color: #2a2a2a; 
}

/* Podświetlenie ikon społecznościowych */
.sidebar-dark-icon:hover .icon-wrapper svg.svg-vector {
  fill: #ffffff;
}

/* Podświetlenie ikon z grafikami szkoły */
.sidebar-dark-icon:hover .icon-wrapper svg.svg-image {
  opacity: 1; /* Pełna widoczność (oryginalny biały) po najechaniu */
  filter: brightness(1);
}

/* Podświetlenie tekstu */
.sidebar-dark-icon:hover .sidebar-text {
  opacity: 1; 
  color: #ffffff;
}

/* WERSJA MOBILNA */
@media (max-width: 40.0vw) {
  .dark-browser-sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    flex-direction: row;
    border-right: none;
    border-top: 0.0521vw solid #2d2d2d;
    box-shadow: 0 -0.1042vw 0.5208vw rgba(0, 0, 0, 0.4);
  }

  .sidebar-dark-icon {
    flex: 1;
    width: auto !important; 
    height: 2.8646vw;
    justify-content: center;
  }
  
  .icon-wrapper {
    min-width: auto;
    height: 2.8646vw;
  }

  .sidebar-text, .sidebar-divider {
    display: none !important; 
  }
}