:root {
    --ultra-thin: 100;
    --thin: 200;
    --light: 300;
    --roman: 400;
    --medium: 500;
    --bold: 700;
}

html {overflow-x: hidden;}

body {
    padding: 0;
    margin: 0;
    background-color: #000;
    overflow-x: hidden;
    font-family: "helvetica-neue-lt-pro", sans-serif;
}

#container #bg {
    position: absolute;
    left: 0;
    top: 9.375vw;
    width: 100%;
    background-image: url('../images/bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 2560/1199;
}

#container {position: relative; display: flex; flex-direction: column; padding-left: 4.414vw; padding-top: 3.516vw;}

#container #content {position: relative;}

#container #logo {position: relative; display: flex; color: #999999; font-size: 2.08vw; line-height: 2.08vw; font-weight: var(--thin); align-items: end; gap: 1.563vw;}
#container #logo #txt {position: relative; top: -1.563vw;}
#container #logo img {width: 20.664vw;}

#container #przepraszamy {margin-top: 5.469vw; letter-spacing: 0.391vw;}
#container #przepraszamy .line1 {color: #595959; font-size: 2.344vw; line-height: 2.344vw; font-weight: var(--light);}
#container #przepraszamy .line2 {color: #999999; font-size: 3.113vw; line-height: 3.113vw; font-weight: var(--light); border-bottom: 0.195vw solid #5185c5; display: inline-block; padding-bottom: 0.391vw;}

#container #main {margin-top: 4.055vw; display: flex; gap: 1.172vw;}
#container #main #txt {color: #666666; font-size: 1.25vw; line-height: 1.45vw; width: 28.32vw; text-align: justify; font-weight: var(--light); flex-shrink: 0;}
#container #main #txt strong {font-weight: var(--roman); color: #cccccc;}
#container #main #txt #dolacz {margin-top: 3.516vw; color: #ffffff}
#container #main #txt #dolacz .line1 {font-size: 1.941vw; line-height: 2.241vw;}
#container #main #txt #dolacz .line2 {font-size: 1.25vw; line-height: 1.25vw;}

#container #copyright {position: relative; margin-top: 3.711vw; margin-bottom: 0.977vw; color: #595959; font-size: 1.098vw; line-height: 1.098vw; text-align: right; padding-right: 1.758vw;}

#footer {position: relative; background-color: #000; width: 100%; height: 5.469vw; font-size: 1.563vw; line-height: 1.563vw; color: #999999; display: flex; align-items: center; padding-left: 4.414vw; margin-left: -4.414vw}
#footer img {width: 1.367vw; margin-left: 0.781vw; margin-right: 0.586vw;}
#footer a {color: #595959; text-decoration: none; transition: color 0.2s linear;}
#footer a:hover {color: #5185c5;}

.slider-wrapper { display: grid; grid-template-columns: 3.281vw 1fr 3.281vw; width: 100%; height: 19.219vw; background: #000; }
.slider-arrow { background: #222c39; border: none; color: #fff; font-size: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 100%; transition: background 0.2s; }
.slider-arrow img { width: 2.114vw; }
.slider-arrow:hover { background: #222c39; }
.slider { overflow: hidden; height: 100%;}
.slider-track { display: flex; height: 100%; gap: 0.391vw; transition: transform 0.5s ease; }
.slide { flex: 0 0 calc((100% - 0.782vw) / 3); height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-arrow.left { margin-right: 0.391vw; }
.slider-arrow.right { margin-left: 0.391vw; }

/* === MOBILE === */
@media (max-width: 768px) {
    #container {padding-top: 9.259vw; padding-left: 0;;}
    #container #logo {font-size: 3.798vw; line-height: 3.798vw; font-weight: var(--thin); align-items: center; gap: 3.221vw; flex-direction: column;}
    #container #logo #txt {position: relative; top: -1.563vw;}
    #container #logo img {width: 55.556vw;}

    #container #przepraszamy {margin-top: 9.259vw; letter-spacing: 0.391vw; justify-content: center; align-items: center; display: flex; flex-direction: column; text-align: center;}
    #container #przepraszamy .line1 {color: #595959; font-size: 5.785vw; line-height: 5.785vw; font-weight: var(--light); width: 55.314vw;}
    #container #przepraszamy .line2 {color: #999999; font-size: 7.258vw; line-height: 7.258vw; font-weight: var(--light); border-bottom: 0.403vw solid #5185c5; display: inline-block; padding-bottom: 0.391vw; width: 55.314vw;}

    #container #main {margin-top: 8.052vw; display: flex; gap: 1.172vw; flex-direction: column;align-items: center;}
    #container #main #txt {color: #666666; font-size: 2.576vw; line-height: 2.976vw; width: 58.314vw; text-align: justify; font-weight: var(--light); flex-shrink: 0; }
    #container #main #txt strong {font-weight: var(--roman); color: #cccccc;}
    #container #main #txt #dolacz {margin-top: 6.039vw; color: #ffffff; text-align: center;}
    #container #main #txt #dolacz .line1 {font-size: 4.001vw; line-height: 4.301vw;}
    #container #main #txt #dolacz .line2 {font-size: 2.576vw; line-height: 2.576vw;}
    
    .slider-wrapper {margin-top: 6.039vw; display: grid; grid-template-columns: 1fr; width: 100%; height: 39.614vw; background: #000; }
    .slider-arrow {position: absolute; height: 39.614vw; width: 6.763vw; opacity: 0.6; z-index: 999}
    .slider-arrow.left {left: 0;}
    .slider-arrow.right {right: 0;}

    #container #copyright {position: relative; margin-top: 5.233vw; margin-bottom: 0.977vw; color: #595959; font-size: 2.738vw; line-height: 2.738vw; text-align: right; padding-right: 2.818vw;}

    #footer {position: relative; background-color: #000; width: 100%; height: 15.298vw; font-size: 3.623vw; line-height: 3.623vw; color: #999999; display: flex; align-items: center; padding-left: 4.831vw; margin-left: 0;}
    #footer img {width: 3.462vw; margin-left: 1.208vw; margin-right: 1.208vw;}
    #footer a {color: #595959; text-decoration: none; transition: color 0.2s linear;}
    #footer a:hover {color: #5185c5;}

}