:root {
          --primary: #0056b3;
          --secondary: #f8f9fa;
          --accent: #ff6b6b;
          --dark: #333;
          --light: #fff;
          --gray: #6c757d;
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
          background-color: var(--secondary);
          color: var(--dark);
          line-height: 1.6;
      }

      .container {
          width: 90%;
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 15px;
      }

      /* --- STYLE DLA OKNA MODALNEGO --- */
      #message-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.3s ease, visibility 0.3s ease;
      }

      #message-modal.show {
          opacity: 1;
          visibility: visible;
      }

      .modal-content {
          background-color: #ffffff;
          padding: 40px;
          border-radius: 8px;
          text-align: center;
          max-width: 500px;
          width: 90%;
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
          transform: scale(0.8);
          transition: transform 0.3s ease;
      }

      #message-modal.show .modal-content {
          transform: scale(1);
      }

      .modal-icon {
          font-size: 48px;
          color: #28a745;
          /* Zielony kolor dla sukcesu */
          margin-bottom: 20px;
      }

      .modal-message {
          font-size: 20px;
          color: #333;
          margin-bottom: 30px;
      }

      .modal-close-btn {
          background-color: #007bff;
          color: white;
          border: none;
          padding: 12px 25px;
          border-radius: 5px;
          cursor: pointer;
          font-size: 16px;
          transition: background-color 0.3s ease;
      }

      .modal-close-btn:hover {
          background-color: #0056b3;
      }

      /* Header */
      header {
          background-color: var(--light);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          position: sticky;
          top: 0;
          z-index: 100;
      }

      .logo {
          display: flex;
          align-items: center;
          font-size: 1.8rem;
          font-weight: bold;
          color: var(--primary);
      }

      .logo i {
          margin-right: 10px;
          color: var(--accent);
      }

      .nav-menu {
          display: flex;
      }

      .nav-menu a {
          text-decoration: none;
          color: var(--dark);
          font-weight: 600;
          font-size: 1.1rem;
          position: relative;
          transition: color 0.3s;
      }

      .nav-menu a:hover {
          color: var(--primary);
      }

      .nav-menu a::after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: -5px;
          left: 0;
          background-color: var(--accent);
          transition: width 0.3s;
      }

      .nav-menu a:hover::after {
          width: 100%;
      }

      .nav-menu a.active {
          color: var(--primary);
      }

      .nav-menu a.active::after {
          width: 100%;
      }

      .nav-buttons {
          display: flex;
          gap: 15px;
      }

      /* .btn {
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .btn-primary {
            background-color: var(--primary);
            color: var(--light);
        }
            #btn-send{
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            background-color: var(--primary);
            color: var(--light);
        }

        .btn-primary:hover,#btn-send:hover {
            background-color: #003d82;
        }

        .btn-outline {
            background-color: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }

        .btn-outline:hover {
            background-color: var(--primary);
            color: var(--light);
        }

        .social-icons {
            display: flex;
            gap: 15px;
        }

        .social-icons a {
            color: var(--primary);
            font-size: 1.2rem;
            transition: color 0.3s;
        }

        .social-icons a:hover {
            color: var(--accent);
        } */

      /* Page Title Section */
      .page-title {
          background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/zdj/laptop.webp') center/cover no-repeat;
          color: var(--light);
          padding: 60px 0;
          text-align: center;
      }

      .page-title h1 {
          font-size: 2.5rem;
          margin-bottom: 15px;
      }

      .page-title p {
          font-size: 1.2rem;
          max-width: 800px;
          margin: 0 auto;
      }

      /* Contact Section */
      .contact {
          padding: 80px 0;
      }

      .contact-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 40px;
      }

      .contact-info {
          display: flex;
          flex-direction: column;
          gap: 30px;
      }

      .contact-card {
          background-color: var(--light);
          border-radius: 10px;
          padding: 30px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      }

      .contact-card h3 {
          font-size: 1.5rem;
          color: var(--primary);
          margin-bottom: 20px;
          display: flex;
          align-items: center;
      }

      .contact-card h3 i {
          margin-right: 15px;
          color: var(--accent);
          font-size: 1.8rem;
      }

      .contact-card p {
          margin-bottom: 10px;
          display: flex;
          align-items: flex-start;
      }

      .contact-card p i {
          margin-right: 15px;
          color: var(--primary);
          width: 20px;
          text-align: center;
      }

      .contact-card .contact-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 15px;
      }

      .contact-card .contact-item i {
          margin-right: 15px;
          color: var(--primary);
          width: 20px;
          text-align: center;
      }

      .contact-card .contact-item .label {
          font-weight: 600;
          margin-right: 10px;
          min-width: 100px;
      }

      .map-container {
          height: 500px;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      }

      .map-container iframe {
          width: 100%;
          height: 100%;
          border: none;
      }

      #contact-form {
          background-color: var(--light);
          border-radius: 10px;
          padding: 30px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          margin-top: 40px;
          scroll-margin-top: 70px;
      }

      .contact-form h3 {
          font-size: 1.5rem;
          color: var(--primary);
          margin-bottom: 20px;
          text-align: center;
      }

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

      .form-group label {
          display: block;
          margin-bottom: 8px;
          font-weight: 600;
      }

      .form-group input,
      .form-group textarea {
          width: 100%;
          padding: 12px;
          border: 1px solid #ddd;
          border-radius: 5px;
          font-size: 1rem;
      }

      .form-group textarea {
          resize: vertical;
          min-height: 150px;
      }

      .form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
      }

      .file-upload {
          position: relative;
          display: inline-block;
          cursor: pointer;
          width: 100%;
      }

      .file-upload input[type=file] {
          position: absolute;
          opacity: 0;
          width: 100%;
          height: 100%;
          cursor: pointer;
      }

      .file-upload-label {
          display: block;
          padding: 12px;
          background-color: var(--secondary);
          border: 2px dashed var(--primary);
          border-radius: 5px;
          text-align: center;
          color: var(--primary);
          font-weight: 600;
          transition: all 0.3s ease;
      }

      .file-upload:hover .file-upload-label {
          background-color: var(--primary);
          color: var(--light);
      }

      .file-name {
          margin-top: 10px;
          font-size: 0.9rem;
          color: var(--gray);
      }


      /* Footer */
      footer {
          background-color: var(--dark);
          color: var(--light);
          padding: 60px 0 20px;
      }

      .btn-send {
          background-color: var(--primary);
          color: var(--light);
          padding: 20px;
          border-radius: 5px;
          font-size: 1.1rem;
      }

      .btn-send:hover {
          background-color: #004494;
          cursor: pointer;
      }

      .footer-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 40px;
          margin-bottom: 40px;
      }

      .footer-col h3 {
          font-size: 1.3rem;
          margin-bottom: 20px;
          color: var(--accent);
      }

      .footer-col ul {
          list-style: none;
      }

      .footer-col ul li {
          margin-bottom: 10px;
      }

      .footer-col ul li a {
          color: #ccc;
          text-decoration: none;
          transition: color 0.3s;
      }

      .footer-col ul li a:hover {
          color: var(--accent);
      }

      .footer-bottom {
          text-align: center;
          padding-top: 20px;
          border-top: 1px solid #444;
          font-size: 0.9rem;
          color: #aaa;
      }


      /* Responsive */
      @media (max-width: 992px) {
          .contact-container {
              grid-template-columns: 1fr;
          }

          .map-container {
              height: 400px;
          }
      }

      @media (max-width: 768px) {


          .nav-menu {
              flex-wrap: wrap;
              justify-content: center;
          }

          .page-title h1 {
              font-size: 2.2rem;
          }

          .form-row {
              grid-template-columns: 1fr;
          }
      }

      .rodo-consent-container {
          display: flex;
          align-items: center;
          justify-content: center;
          /* Wyrównaj do góry */
          gap: 10px;
          /* Odstęp między checkboxem a tekstem */
          flex-wrap: nowrap;
          width: 100%;
      }

      .rodo-consent-container input[type="checkbox"] {
          /* Lekkie przesunięcie checkboxa w dół dla lepszej wyrównania */
          flex-shrink: 0;
          /* Zapobiegnie kurczeniu się checkboxa */
          width: 30px;
          height: 30px;
      }

      .rodo-consent-container label {
          font-size: 0.9em;
          line-height: 1.5;
          width: 85%;
      }