/* css/style.css */



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Poppins', sans-serif;

  background-color: #000;

  color: #ddd;

  line-height: 1.6;;

  height: 100%;

  display: flex;

  flex-direction: column;

  overflow-y: scroll;

  scrollbar-width: none;

  -ms-overflow-style: none;

}



body::-webkit-scrollbar {

  display: none;

}



.header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 40px;

  background: linear-gradient(90deg, #1a237e, #6a0dad);

  border-bottom-left-radius: 60px 40px;

  border-bottom-right-radius: 60px 40px;

  box-shadow: 0 4px 12px rgba(106, 13, 173, 0.5);

}



.logo {

  height: 70px;

}



.nav-list {

  list-style: none;

  display: flex;

  gap: 25px;

}



.nav-link {

  color: #ddd;

  text-decoration: none;

  font-weight: 600;

  padding: 8px 15px;

  border-radius: 30px;

  transition: background 0.3s;

}



.nav-link:hover,

.nav-link.active {

  background-color: #6a0dad;

  color: #fff;

}



.hero {

  background: linear-gradient(135deg, #6a0dadcc, #1a237ecc);

  border-radius: 80px 40px 80px 40px;

  margin: 40px 60px;

  padding: 60px 40px;

  box-shadow: 0 8px 20px rgba(26, 35, 126, 0.7);

  text-align: center;

}



.hero-content h1 {

  font-size: 2.8rem;

  margin-bottom: 15px;

  color: #eee;

}



.hero-content p {

  font-size: 1.2rem;

  margin-bottom: 25px;

  color: #ccc;

}



.btn-primary {

  background-color: #6a0dad;

  color: #fff;

  padding: 15px 40px;

  font-weight: 600;

  border-radius: 40px;

  text-decoration: none;

  box-shadow: 0 4px 15px #6a0dadcc;

  transition: background-color 0.3s ease;

}



.btn-primary:hover {

  background-color: #4b077d;

  box-shadow: 0 6px 20px #4b077dcc;

}



.services {

  display: flex;

  justify-content: center;

  gap: 40px;

  margin: 60px 40px;

  flex-wrap: wrap;

}



.service-card {

  background: linear-gradient(145deg, #1a237ecc, #6a0dadcc);

  padding: 35px 30px;

  border-radius: 60px 40px 60px 40px;

  width: 280px;

  box-shadow: 0 6px 20px rgba(106, 13, 173, 0.6);

  color: #eee;

  transition: transform 0.3s ease;

}



.service-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 10px 30px rgba(106, 13, 173, 0.8);

}



.service-soon {

  opacity: 0.7;

  font-style: italic;

}



.footer {

  text-align: center;

  padding: 20px;

  color: #666;

  background: #111;

  margin-top: 80px;

}



/* Monitoring */



.products {

  display: flex;

  justify-content: center;

  gap: 40px;

  margin: 60px 40px;

  flex-wrap: wrap;

}



.products .service-card {

  background: linear-gradient(145deg, #1a237ecc, #6a0dadcc);

  padding: 35px 30px;

  border-radius: 60px 40px 60px 40px;

  width: 280px;

  box-shadow: 0 6px 20px rgba(106, 13, 173, 0.6);

  color: #eee;

  transition: transform 0.3s ease;

}



.products .service-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 10px 30px rgba(106, 13, 173, 0.8);

}



/* Kontakt */



.contact-section {

  max-width: 600px;

  margin: 60px auto 100px;

  padding: 40px 30px;

  background: linear-gradient(145deg, #1a237ecc, #6a0dadcc);

  border-radius: 60px 40px 60px 40px;

  box-shadow: 0 6px 20px rgba(106, 13, 173, 0.6);

  color: #eee;

}



.contact-section h1 {

  text-align: center;

  margin-bottom: 30px;

  font-weight: 600;

}



.contact-form label {

  display: block;

  margin-bottom: 8px;

  font-weight: 600;

}



.contact-form input,

.contact-form textarea {

  width: 100%;

  padding: 12px 15px;

  margin-bottom: 20px;

  border-radius: 30px;

  border: none;

  outline: none;

  font-size: 1rem;

  font-family: 'Poppins', sans-serif;

}



.contact-form input:focus,

.contact-form textarea:focus {

  box-shadow: 0 0 6px #6a0dadcc;

}



.contact-form button {

  width: 100%;

  padding: 15px;

  font-weight: 600;

  border-radius: 40px;

  border: none;

  background-color: #6a0dad;

  color: #fff;

  cursor: pointer;

  box-shadow: 0 4px 15px #6a0dadcc;

  transition: background-color 0.3s ease;

}



.contact-form button:hover {

  background-color: #4b077d;

  box-shadow: 0 6px 20px #4b077dcc;

}



.cursor {

  display: inline-block;

  background-color: #6a0dad;

  margin-left: 5px;

  width: 3px;

  animation: blink 1s infinite;

  vertical-align: bottom;

  border-radius: 2px;

}



@keyframes blink {

  0%, 50% {opacity: 1;}

  51%, 100% {opacity: 0;}

}



.why-us {

  margin: 60px 40px;

  text-align: center;

}



.why-us h2 {

  font-weight: 600;

  font-size: 2rem;

  margin-bottom: 40px;

  color: #ddd;

}



.reasons {

  display: flex;

  justify-content: center;

  gap: 50px;

  flex-wrap: wrap;

}



.reason-card {

  background: linear-gradient(145deg, #1a237ecc, #6a0dadcc);

  border-radius: 60px 40px 60px 40px;

  padding: 30px 20px;

  width: 260px;

  box-shadow: 0 6px 20px rgba(106, 13, 173, 0.6);

  color: #eee;

  transition: transform 0.3s ease;

}



.reason-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 10px 30px rgba(106, 13, 173, 0.8);

}



.reason-card img {

  width: 60px;

  margin-bottom: 20px;

  filter: invert(85%) sepia(10%) saturate(700%) hue-rotate(250deg);

}



/* Ukrywamy hamburger na dużych ekranach */

.nav-toggle {

  display: none;

  background: none;

  border: none;

  cursor: pointer;

  padding: 10px;

  position: relative;

  z-index: 999;

}



.hamburger,

.hamburger::before,

.hamburger::after {

  display: block;

  background-color: #f3f3f3;

  height: 3px;

  width: 25px;

  border-radius: 2px;

  position: relative;

  transition: all 0.3s ease;

}



.hamburger::before,

.hamburger::after {

  content: '';

  position: absolute;

  left: 0;

}



.hamburger::before {

  top: -8px;

}



.hamburger::after {

  top: 8px;

}



/* Na małych ekranach */



@media (max-width: 768px) {

  nav {

    position: absolute;

    top: 60px;

    right: 0;

    background: linear-gradient(145deg, #1a237ecc, #6a0dadcc);

    width: 200px;

    border-radius: 20px 0px 0px 20px;

    box-shadow: 0 6px 20px rgba(106, 13, 173, 0.8);

    transform: translateX(100%);

    transition: transform 0.3s ease;

  }

  

  nav.open {

    transform: translateX(0);

  }



  .nav-list {

    display: flex;

    flex-direction: column;

    padding: 20px 0;

  }



  .nav-list li {

    margin-top: 15px;

    margin-bottom: 15px;

    margin-left: 20px;

  }



  .nav-link {

    color: #eee;

    font-weight: 600;

    padding: 0px 0px;

  }



  /* Pokaż hamburger */

  .nav-toggle {

    display: block;

  }

}



.header {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 20px;

  padding-left: 30px;

}



.header img.logo {

  height: 60px;

}



.header h5 {

  font-family: "Michroma", sans-serif;

  font-weight: 700;

  font-size: 30px;

  margin: 0;

  position: relative;

  color: #eee;

  bottom: 4px;

}



.logo-title {

  display: flex;

  align-items: center;

  gap: 20px;

}



main {

    flex: 1;

}



.scrollable {

  overflow-y: scroll; /* lub auto */

  scrollbar-width: none; /* Firefox */

  -ms-overflow-style: none;  /* IE i Edge */

}



.scrollable::-webkit-scrollbar {

  display: none; /* Chrome, Safari, Opera */

}