@font-face {      
      src: url('fonts/Roboto-Medium.woff2') format('woff2');
      font-display: swap;  
      font-family: 'Roboto Medium';

  }   
    @font-face {      
      src: url('fonts/Rubik-Medium.woff2') format('woff2');  
      font-display: swap;
      font-family: 'Rubik Medium';

  }  
    @font-face {      
      src: url('fonts/Roboto-Medium.woff2') format('woff2');
      font-display: swap;  
      font-family: 'Carito Medium';

  }  
    @font-face {      
      src: url('fonts/Swiss 721 Bold.woff2') format('woff2');  
      font-display: swap;
      font-family: 'Swiss';

  }  
  .rubik{font-family: 'Rubik Medium';}
  .roboto{font-family: 'Roboto Medium';}
  .carito{font-family: 'Carito Medium';}
  .swiss{font-family: 'Swiss';}

   html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
	  background-color: #363636;
    }



.nav-bar{
  position: fixed;
  top: 12px;
  right: 18px;
  display: flex;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.312);
  padding: 8px 14px;
  border-radius: 2px;
}

.nav-bar a{
  color: #dcdada;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  margin-left: 22px; /* zamiast gap */
}

.nav-bar a:first-child {
  margin-left: 0; /* pierwszy element nie potrzebuje marginesu */
}

.nav-bar a:hover{
  opacity: 0.5;
}

/* Hamburger ukryty na desktopie */
.nav-toggle {
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}


.hig10 {height: 10px; width: auto;}
.hig33 {height: 33px; width: auto;}
.hig66 {height: 66px; width: auto;}
.hig100{height: 100px; width: auto;}


.full { width: 57%;
  height: auto;}

.w90{
  width: 65%;
  height: auto;
}

/* big ass text */
.rem5{font-size: 5rem;}  
/* chapter */
.rem3{font-size: 3rem;}
/* title */
.rem16{font-size: 1.6rem;}
.rem15{font-size: 1.5rem;}
/* undertitle */
.rem12{font-size: 1.2rem;}
/* normal */
.rem1{font-size: 1.15rem;}

.col0{color:white;}
.col1{color:#2f2f2f;}
.col2{color:#ba44f4;}
.col3{color:#b7ceda;}
.col4{color:#61666c;}
.col5{color:#131313;}

.bol {
     display: contents; /* "usuwa" box, pozostawia tylko tekst inline */
  font-weight: bold;
  font-family: inherit; /* zachowuje Twój font */
}

.bg_col0{background-color:white;}
.bg_col1{background-color:#2f2f2f;}
.bg_col2{background-color:#ba44f4;}
.bg_col3{background-color:#b7ceda;}
.bg_col4{background-color:#61666c;}
.bg_col5{background-color:#131313;}
.bg_col6{background-color:#363636;}


.lef05{margin-left: 0.5rem;}
.lef1{margin-left: 1rem;}
.lef2{margin-left: 2rem;}
.lef4{margin-left: 4rem;}

.rig1{margin-right: 1rem;}
.rig2{margin-right: 2rem;}
.rig4{margin-right: 4rem;}

.top8{margin-top: 8rem;}
.top4{margin-top: 4rem;}
.top2{margin-top: 2rem;}
.top1{margin-top: 1rem;}
.top05{margin-top: 0.5rem;}
.top025{margin-top: 0.25rem;}
.top-01{margin-top: -0.1rem;}

.bot1{margin-bottom: 1rem;}
.bot2{margin-bottom: 2rem;}
.bot4{margin-bottom: 4rem;}

.pad1{padding: 1em;}
.pad05{padding: 0.5em;}
.padl05{padding-left: 0.5em;}

.grad{
  background: linear-gradient(to right, #5286FD 6%, #FDD4EE 44%, #FDB270 50%, #ff9500 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradbg{background-color: rgba(152, 0, 117, 1);
background-image: linear-gradient(90deg, rgba(152, 0, 117, 1) 0%, rgba(185, 68, 173, 1) 100%);}

.break{
  border: none;
  height: 2px;
  background-color: rgb(61, 61, 61);
  width: 60%;
  margin: 4rem 0rem; /* 20px górny i dolny margines */
}

.dir_col{
display: flex; flex-direction: column;}
.dir_row{display: flex; flex-direction: row;}

.ali_start{
align-items: flex-start;
}
.center{align-items: center;}
/* 
.dir_col_rewrite{
  flex-direction: column !important;
}
.dir_row_rewrite{
  flex-direction: row !important;
} */

.top_bg{background-image: url("images/prism_back.webp"); background-size: cover; }

.con{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}


h1, h2, h3, h4, h5, h6 { all: unset; display: block; }

.hauto{
  height: auto;
}

.win{
  display: flex;
  min-width: 50%;
  max-width: 60%;
  /* align-items: center;
  justify-content: center; */
}
.con13{
  position: relative;    /* kotwica dla absolute */
  display: flex;
  width: 100%;
  height: 66%;
  background-color: #131313;
  /* align-items: center;
  justify-content: center; */
}
.foot{
  display: flex;
  width: 100%;
  height: 5%;
  align-items: center;
  justify-content: center;
}
.sqr300{
  width: 300px;
  height: 300px;
  aspect-ratio: 1/1;
  background-color: #2f2f2f;
    border-radius: 6px;
}

.sqr300 a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sqr300 img {
  width: 95%;
  height: 95%;
  object-fit: contain; /* zachowuje proporcje obrazka */
}

/* for container */
.cut{  
 overflow: hidden;
}
.nowrap{white-space: nowrap;}
.wrap{ flex-wrap: wrap;}

/* works only on container childs no imgs or text */
.justI{  align-items: center;}
.justI0{  align-items: flex-end;}
.justI1{  align-items: flex-start;}

.just_{  justify-content: center;}
.just_0{  justify-content: flex-end;}
.just_1{  justify-content: flex-start;}
.just__{  justify-content: space-between;}

.just_I{ align-items: center; justify-content: center}
.justI_{align-items: center; justify-content: center}

.justxt_0{text-align: right !important;}
.justxt_1{text-align: left !important;}
.justxt_{text-align: center !important;}

.ico{ width: 30px; height: 30px;}
.ico12{ width: 15.5px; height: 30px;}
/* works with flex only */
.JustEle_0{
  display: flex;
  margin-left: auto;
}
.JustEle_1{
  display: flex;
  margin-right: auto;
}

.ite1{width: 99%; height: auto; display: flex; 
}

.ite12{  
  min-width: 50%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.ite13{
  min-width: 33%;
  height: auto;
  flex-wrap: wrap;
}
.ite31{
  min-width: 66%;
  height: auto;
  flex-wrap: wrap;
}
.iteh13{ height: 33%;}


.ite14{
  min-width: 25%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.ite41{
  min-width: 75%;
  height: auto;
  flex-wrap: wrap;
}
.ite15{
  min-width: 20%;
  height: auto;
  flex-wrap: wrap;
}
.ite51{
  min-width: 80%;
  height: auto;
  flex-wrap: wrap;
}
.ite16{
  min-width: 15%;
  height: auto;
  flex-wrap: wrap;
}
.ite61{
  min-width: 85%;
  height: auto;
  flex-wrap: wrap;
}




  /* #region Form  */
    .form-container {
      min-width: 75%;
      max-width: 100%;
      margin: auto;
      padding: 30px;
    }

    .form-container h2 {
      text-align: center;
      margin-bottom: 24px;
    }

    .form-group {
      position: relative;
      margin-bottom: 20px;
    }

    /* .form-group input[type=text] {
   color: #1c1c1c;
} */


    .form-group input,
    .form-group textarea {
      font-family: Carito Medium;
      width: 100%;
      padding: 10px 10px 8px;
      border: none;
      border-bottom: 2px solid #ccc;
      color: #cdcdcd;
      caret-color: #838383;
      outline: none;
      background: transparent;
      font-size: 16px;
      transition: border-color 0.3s;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 80px;
      max-height: 300px;
    }

    button {
      font-family: Carito Medium;
      display: flex;
      justify-content: flex-end;
      /* width: 100%; */
      padding: 12px;
      /* background-color: #007bff; */
      color: white;
      font-size: 18px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      /* transition: background-color 0.3s; */
        background-color: #04aa6d00; 
    }

    /* #endregion form */

.CleanLin a,
.CleanLin a:hover,  
.CleanLin a:visited,
.CleanLin a:link,
.CleanLin a:active {
    text-decoration: none !important;
  color: #ffffff !important;
}


.CleanLinBl a,
.CleanLinBl a:hover,  
.CleanLinBl a:visited,
.CleanLinBl a:link,
.CleanLinBl a:active {
    text-decoration: none !important;
  color: #2f2f2f !important;
}

.omnie{width: 200px;
  height: auto;}
.autominwidth{min-width: auto !important;}
.min14with{min-width: 25% !important;}


.mailtop{
  margin-top: 0.1rem;
}

#sendBtn {
  transition: opacity 0.4s ease-in-out;
}

#sendBtn.fade-out {
  opacity: 0;
}

#sendBtn.fade-in {
  opacity: 1;
}

.nosel {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}



@media (max-width: 600px) and (orientation: portrait) {
.win{
 display: flex;
min-width: 90%;
max-width: 95%;
}

.rem5{font-size: 3rem;}

.prism{max-width: 90%; max-height: auto;}
.omnie{width: 0%; flex: 0;overflow: hidden;}
.ite14{
  min-width: 90%;
  height: auto;
  flex-wrap: wrap;
}
.min14with{min-width: 90% !important;}

.dir_col_m{
display: flex; flex-direction: column;}
.dir_row_m{display: flex; flex-direction: row;}


.ite12 {
min-width: 45%;
}

.lef06_m{margin-left: 0.6rem !important;}

.ite15 {
max-width: 50%;
min-width: 1%;
}
.ite16 {
min-width: 4%;
}

.rem1{font-size: 1rem;}
.rem12{font-size: 0.9rem;}
.fsize{max-width: 66px;}

.con_omnie{
  display: flex;
  width: 100%;
  height: 250%;
  align-items: center;
  justify-content: center;
}
.break{
  border: none;
  height: 2px;
  background-color: rgb(61, 61, 61);
  width: 95%;
  margin: 4rem 0rem; /* 20px górny i dolny margines */
}

.disp{
  width: 0% !important; 
  height: 0% !important;
  font-size: 0px;
}

.sqr300{
  width: 150px;
  height: 150px;
  aspect-ratio: 1/1;
  background-color: #2f2f2f;
}

.sqr300 a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sqr300 img {
  width: 90%;
  height: 90%;
  object-fit: contain; /* zachowuje proporcje obrazka */
}

  .nowrap {
    white-space: normal;
    word-break: break-word;
  }


.top8 {
margin-top: 3rem;
}
.top-01 {
margin-top: -0.4rem;
line-height: 2rem;

}

.lef2_foot {
margin-left: 1rem;
font-size: 0.7rem;
}

.top2_m{margin-top: 2rem;}
.lef2_m{margin-left: 2rem;}
.lef05 {
margin-left: 0.25rem;
 min-width: 0;
}

.ico{ width: 20px; height: 20px;}
.ico12{ width: 15.5px; height: 20px;}
.rig2{
  font-size: 0.7rem;
  margin-right: 0.5rem;
}
.piraleft{
left: -4% !important;
}

.ite12_mrek{
min-width: 98% !important;
}
.justxt_mrek{
  text-align: center !important;
}

.full { width: 99%;
  height: auto;
  
}


.w90{
  width: 95%;
  height: auto;
}
    .form-container {
      min-width: 75%;
      max-width: 100%;
      margin: 0;
      padding: 30px;
    }
    br.mobile-hide {
        display: none;
    }
 .rem3{ font-size: 2.7rem;}

.mailtop{
  margin-top: 0.0rem;
}
/*HAMBURGER BUTTON*/
.nav-toggle {
    display: block;
  }
.nav-links {
  position: absolute;
  top: 53px;       /* pod przyciskiem */
  right: 0;        /* przy prawej krawędzi */
  background: #111;
  display: none;
  flex-direction: column;
  white-space: nowrap;  /* nie łamie słów */
  border-radius: 4px;
  text-align: right;    /* tekst wyrównany do prawej */
  z-index: 9999;
}
/* Pokaż menu po kliknięciu */
.nav-links.active {
  display: flex;
}
/* Linki w menu */
.nav-links a {
  padding: 15px 20px;
  border-top: 1px solid #222;
}
.nav-bar a {  margin-left: 0px;}


.ctrlh{}
}
@media (min-width: 768px) and (orientation: landscape) and (hover: none){ 

.con {
height: 229%;
}
.omnie{width: 0%; flex: 0;overflow: hidden;}

.win{
max-width: 84%;
}
.con13{
  height: 147%;
}
.foot{height: 9%;}
.w90{width: 79%;}

}

/* Telefony w poziomie (max 768px landscape) */
@media (max-width: 768px) and (orientation: landscape) and (hover: none){
  .win { min-width: 80%; max-width: 90%; }
  .rem5 { font-size: 3.5rem; }
  .ite14 { min-width: 80%; }
  .w90 { width: 85%; }
}

/* Tablety w pionie (601px–1024px portrait) */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) and (hover: none){
  .win { min-width: 70%; max-width: 80%; }
  .rem5 { font-size: 4rem; }
  .ite14 { min-width: 70%; }
  .w90 { width: 75%; }
  

  /*HAMBURGER BUTTON*/
.nav-toggle {
    display: block;
  }
.nav-links {
  position: absolute;
  top: 53px;       /* pod przyciskiem */
  right: 0;        /* przy prawej krawędzi */
  background: #111;
  display: none;
  flex-direction: column;
  white-space: nowrap;  /* nie łamie słów */
  border-radius: 4px;
  text-align: right;    /* tekst wyrównany do prawej */
  z-index: 9999;
}
/* Pokaż menu po kliknięciu */
.nav-links.active {
  display: flex;
}
/* Linki w menu */
.nav-links a {
  padding: 15px 20px;
  border-top: 1px solid #222;
}
.nav-bar a {  margin-left: 0px;}
}

/* Tablety w poziomie (769px–1024px landscape) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (hover: none){
  .win { min-width: 65%; max-width: 75%; }
  .rem5 { font-size: 4.2rem; }
  .ite14 { min-width: 65%; }
  .w90 { width: 70%; }
  
}