/*===== VARIABLES CSS =====*/
:root {
    --header-height: 3rem;


    /*========== Colors ==========*/
    --first-color: #DA2535;


}


/*========== Layout ==========*/


* {
  font-family: 'Nunito', sans-serif !important;
}

.logo {
  text-align: center;
}

.x-kom-logo {
  max-width: 260px;
}

.x-kom-logo:hover {
  opacity: 0.6;
}

.btn-blue {
  display: inline-block;
  text-decoration: none;
  color: white;
  background-color: #0082fa;
  color: white;
  padding: 10px 35px;
  border-radius: 50px;
  border: 1px solid #0082fa;
}

.btn-blue:hover {
  background-color: transparent;
  color: #0082fa;
}

.btn-white {
  display: inline-block;
  text-decoration: none;
  color: white;
  background-color: white;
  color: black;
  padding: 15px 35px;
  border-radius: 50px;
  border: 1px solid white;
}

.btn-white:hover {
  background-color: transparent;
  color: white;
}

@media(max-width: 850px) {
  .btn-blue {
    margin-bottom: 25px;
  }
}

@media(max-width: 480px) {
  .x-kom-logo {
    max-width: 160px;
  }
}

@media(max-width: 320px) {
  #mainWID .modele .modele__box img {
    width: 200px !important;
  }
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh !important;
  background: #000 !important;
  font-display: swap !important;
  margin: 0 !important;
}

#mainWID {
  color: #fff !important;
}

#mainWID  .gradientBorder {
  background: rgb(1,173,255);
  background: -moz-linear-gradient(90deg, rgba(1,173,255,1) 0%, rgba(0,214,235,1) 50%, rgba(29,249,211,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(1,173,255,1) 0%, rgba(0,214,235,1) 50%, rgba(29,249,211,1) 100%);
  background: linear-gradient(90deg, rgba(1,173,255,1) 0%, rgba(0,214,235,1) 50%, rgba(29,249,211,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01adff",endColorstr="#1df9d3",GradientType=1);
  height: 8px !important;
  width: 100% !important;
  position: absolute !important; 
  bottom: 2px !important;
  z-index: -1 !important;
}


/*========== Header ==========*/

#mainWID .headerTOP > img {
  width: 100% !important;
}

#mainWID .headerTOP {
  text-align: center !important;
}

#mainWID .headerTOP .headerTOP__info {
  margin-bottom: 60px;
}

#mainWID .headerTOP .headerTOP__info h1{
  font-size: 50px !important;
  position: relative !important;
  z-index: 99 !important;
  width: 790px !important;
  margin: 80px auto 5px auto !important;
}


#mainWID .headerTOP .headerTOP__info .headerTOP__info-main {
  width: 850px !important;
  margin: 0 auto !important;
  font-size: 18px !important;
  line-height: 25px !important;
}

#mainWID .headerTOP .headerTOP__info .headerTOP__info-footer {
  font-size: 13px !important;
  margin-top: 40px !important;
}


/*========== Jak skorzystać z promocji ==========*/

#mainWID .jakskorzystac {
  text-align: center !important;
  padding: 50px 0 !important;
  background: url(../img/jakskorzystac.webp) no-repeat !important;
  background-size: cover !important;
  z-index: -1 !important;
  font-size: 17px !important;
}

#mainWID .jakskorzystac h2 {
  position: relative !important;
  font-size: 36px !important;
  width: 700px !important;
  margin: 0 auto !important;
  z-index: 0 !important;
}

#mainWID .jakskorzystac .gradientBorder {
  height: 8px !important;
}

#mainWID .jakskorzystac .jakskorzystać__flex {
  display: grid !important;
  grid-template-columns: 20% 80%;
  align-items: center !important;
  width: 1000px !important;
  margin: 20px auto !important;
  text-align: left !important;
}

#mainWID .jakskorzystac .jakskorzystać__flex p {
  width: 85% !important;
}

#mainWID .jakskorzystac .jakskorzystać__flex a {
  color: #fff !important;
}

#mainWID .jakskorzystac .jakskorzystać__flex:nth-child(2) {
  margin-top: 40px !important;
}

#mainWID .jakskorzystac .jakskorzystać__flex .jakskorzystać__flex-number {
  width: 65px !important;
  margin: 0 auto !important;
  display: block !important;
}


#mainWID .jakskorzystac .jakskorzystac__btn {
  width: 700px !important;
  margin: 0 auto 50px auto !important;
  display: grid !important;
  grid-template-columns: repeat(2,1fr) !important;
}


#mainWID .jakskorzystac .jakskorzystac__btn .btnSkew {
  color: #fff !important;
  background: rgb(1,173,255);
  background: -moz-linear-gradient(90deg, rgba(1,173,255,1) 0%, rgba(0,214,235,1) 50%, rgba(29,249,211,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(1,173,255,1) 0%, rgba(0,214,235,1) 50%, rgba(29,249,211,1) 100%);
  background: linear-gradient(90deg, rgba(1,173,255,1) 0%, rgba(0,214,235,1) 50%, rgba(29,249,211,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01adff",endColorstr="#1df9d3",GradientType=1);
  padding: 10px 20px !important;
  text-decoration: none !important;
  margin: 90px auto 0 auto !important;
  display: block !important;
  border:none !important;
  text-align: center !important;
  font-weight: bold !important;
  font-size: 14px !important;
  width: 300px !important;
  transition: 0.15s !important;
  clip-path: polygon(9% 0, 100% 0%, 91% 100%, 0% 100%) !important;
}


#mainWID .jakskorzystac .jakskorzystac__btn .btnSkew:hover {
  transform: scale(0.95);
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%) !important;
  border-radius: 5px;
  cursor: pointer;
}

#mainWID .jakskorzystac .jakskorzystac__btn .btnSkew-white {
  color: #000 !important;
  background: #fff;
  width: 200px !important;
}


/*========== Modele  ==========*/


#mainWID .modele {
  text-align: center !important;
  margin: 0 auto !important;
  padding-bottom: 80px !important;

}

#mainWID .modeleWID {
  width: 1100px !important;
  margin: 0 auto !important;
}

#mainWID .modele__flara-blue img {
  width: 30%;
  position: absolute;
  top: 0;
  left: 10px;
}

#mainWID .modele__flara-pink img {
  width: 25%;
  position: absolute;
  bottom: 5px;
  right: 10px;
}

#mainWID .modele h2 {
  position: relative !important;
  font-size: 36px !important;
  z-index: 0 !important;
  width: 800px !important;
  margin: 80px auto 0 auto !important;
}

#mainWID .modele .modele__box img {
  width: 300px;
}

#mainWID .modele .modele__box h3 {
  font-size: 26px !important;
}

#mainWID .modele .modele__box h4 {
font-size: 16px !important;
line-height: 24px !important;
}

#mainWID .modele .modele__box h4  span {
  font-size: 19px !important;
}

#mainWID .modele .modele__box p {
  line-height: 5px !important;
}

#mainWID .modele .modele__flex {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 80px 100px !important;
  margin-top: 80px !important;
}





/*========== Media queries ==========*/
@media screen and (max-width: 1101px) {

#mainWID .modeleWID {
  width: 90% !important;
}


}

@media screen and (max-width: 1001px) {

#mainWID .jakskorzystac .jakskorzystać__flex {
  width: 90% !important;
}

}

@media screen and (max-width: 850px) {
    
  #mainWID .headerTOP .headerTOP__info h1,
  #mainWID .jakskorzystac h2 {
    width: 90% !important;
    font-size: 30px !important;
  }
  #mainWID  .gradientBorder  {
    bottom: 0 !important;
  }

  #mainWID .headerTOP .headerTOP__info .headerTOP__info-main,
  #mainWID .modeleWID  {
    width: 90% !important;
  }

  #mainWID .jakskorzystac .jakskorzystać__flex p {
    width: 100% !important;
    margin: 20px auto !important;
    text-align: center;
  }

  #mainWID .jakskorzystac .jakskorzystac__btn {
    display: block !important;
    width: 85% !important;
  }

  #mainWID .jakskorzystac .jakskorzystac__btn .btnSkew-white {
    margin: 20px auto 0 auto !important;
  }


  #mainWID .jakskorzystac .jakskorzystać__flex {
    display: block !important;
    margin: 45px auto !important;
  }
  

  #mainWID .jakskorzystac .jakskorzystac__btn .btnSkew-white,
  #mainWID .jakskorzystac .jakskorzystac__btn .btnSkew {
    width: 80% !important;
    font-size: 13px !important;
  }
  
  #mainWID .modele  {
    width: 90% !important;
    padding-bottom: 20px !important;
  }

  #mainWID .modele .modele__flex {
    display: block !important;
  }
  
  #mainWID .modele .modele__flex .modele__box {
    margin: 60px 0 !important;
  }

  #mainWID .modele__flara-pink,
  #mainWID .modele__flara-blue {
    display: none;
  }
  
  #mainWID .modele h2 {
    width: 90% !important;
    font-size: 22px !important;
  }

}