:root {
  --primary-dark-color: #003869; /* Niebieski */
  --primary-light-green-color: #61d92f; /* Zielony */
  --primary-white-color: #ffffff;

  --supporting-first-color: #25bc3a;
  --supporting-second-color: #00e617;
  --supporting-third-color: #bcf848;

  --complementary-orange-color: #F46108;
  --complementary-orange-color-hover: #f8792d;
  --complementary-light-color: #ededed;

  --border-radius: 25px;

  --dark-color: #4A4A4A;

}   
        /* General styles for the entire document */
        body {
            font-family: 'Roboto', sans-serif; /* Using Roboto font */
            margin: 0; /* Remove default margins */
            padding: 0; /* Remove default padding */
            box-sizing: border-box; /* Box model for easier layout */
            color: #333; /* Main text color */
            line-height: 1.6; /* Line height for better readability */
            background-color: var(--primary-white-color); /* Light gray page background */
        }

        /* Container to center content */
        .container {
            max-width: 1200px; /* Maximum container width */
            margin: 0 auto; /* Center the container */
            padding: 20px; /* Inner padding */
        }

        /* Header style */
        header {
            background-color: var(--primary-dark-color); /* CUK's main dark blue */
            color: var(--complementary-light-color); /* White text */
            padding: 20px 0; /* Top/bottom inner padding */
            text-align: center; /* Center text */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow */
        }

        header h1 {
            margin: 0; /* Remove header margins */
            font-size: 2.5em; /* Font size */
            letter-spacing: 1px; /* Letter spacing */
        }

        header p {
            font-size: 1.2em; /* Font size */
            margin-top: 10px; /* Top margin */
        }

        header img {
            width: 20%;
        }

        /* Navigation style */
        nav {
            background-color: var(--primary-white-color);
            padding: 10px 0; /* Top/bottom inner padding */
            text-align: center; /* Center text */
        }

        nav ul {
            list-style: none; /* Remove list bullets */
            padding: 0; /* Remove list padding */
            margin: 0; /* Remove list margins */
            display: flex; /* Flexbox layout for list items */
            justify-content: center; /* Center items horizontally */
            flex-wrap: wrap; /* Wrap items on smaller screens */
        }

        nav ul li {
            margin: 0 15px; /* Margins between list items */
        }

        nav ul li a {
            color: var(--primary-dark-color); /* White link text */
            text-decoration: none; /* Remove underline */
            font-weight: bold; /* Bold text */
            padding: 5px 10px; /* Inner link padding */
            transition: background-color 0.3s ease; /* Smooth background color transition */
            border-radius: var(--border-radius); /* Rounded corners */
            border: 1px solid var(--primary-white-color);
        }

        nav ul li a:hover {
            border: 1px solid var(--primary-dark-color)
        }

        /* General style for sections */
        section {
            padding: 40px 0; /* Top/bottom inner padding */
            background-color: var(--complementary-light-color); /* White section background */
            margin-bottom: 20px; /* Bottom margin */
            box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow */
            
        }

        section h2 {
            text-align: center; /* Center heading */
            color: var(--primary-dark-color); /* CUK's main dark blue for section headings */
            font-size: 2em; /* Font size */
            margin-bottom: 30px; /* Bottom margin */
            position: relative; /* Positioning for pseudo-element */
        }

        section h2::after {
            content: ''; /* Empty content for pseudo-element */
            position: absolute; /* Absolute positioning */
            bottom: -10px; /* Position below heading */
            left: 50%; /* Center horizontally */
            transform: translateX(-50%); /* Correction for centering */
            width: 60px; /* Line width */
            height: 3px; /* Line height */
            background-color: var(--supporting-first-color); /* CUK's light blue for line under heading */
        }

        /* About section */
        #about p {
            text-align: center; /* Center text */
            max-width: 800px; /* Maximum paragraph width */
            margin: 0 auto; /* Center paragraph */
            font-size: 1.1em; /* Font size */
            color: var(--primary-dark-color); /* Dark gray text color */
        }

        /* Services section - grid */
        .services-grid {
            display: grid; /* Grid layout */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive column grid */
            gap: 25px; /* Spacing between grid items */
            padding: 0 20px; /* Left/right inner padding */
        }

        .service-item {
            background-color: #f9f9f9; /* Light gray item background */
            border: 1px solid #ddd; /* Subtle border */
            border-radius: var(--border-radius); /* Rounded corners */
            padding: 25px; /* Inner padding */
            text-align: center; /* Center text */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for transform and shadow */
        }

        .service-item:hover {
            transform: translateY(-5px); /* Slight upward shift on hover */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Larger shadow on hover */
        }

        .service-item h3 {
            color: var(--primary-dark-color); /* CUK's main dark blue for service headings */
            margin-top: 0; /* Remove top margin */
            font-size: 1.4em; /* Font size */
        }

        .service-item h3 i {
            color: var(--supporting-first-color);
        }

        .service-item p {
            font-size: 0.95em; /* Font size */
            color: var(--dark-color); /* Dark gray text color */
        }

        /* New Partners section */
        #partners .partners-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            justify-items: center;
            align-items: center;
            padding: 0 20px;
        }

        #partners .partner-logo {
            width: 100%;
            max-width: 180px;
            height: auto;
            /*border: 1px solid #eee;
            border-radius: 5px;*/
            padding: 10px;
            background-color: var(--complementary-light-color);
            box-shadow: 0 1px 3px var(--complementary-light-color);
            transition: transform 0.3s ease;
        }

        #partners .partner-logo:hover {
            transform: scale(1.05);
        }

        /* New Calculators section */
        #calculators .calculators-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Adjusted for calculators */
            gap: 25px;
            padding: 0 20px;
        }

        .calculator-item {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            padding: 20px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .calculator-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .calculator-item i {
            font-size: 2.5em;
            color: var(--supporting-first-color); /* CUK's light blue for calculator icons */
            margin-bottom: 15px;
        }

        .calculator-item h3 {
            color: var(--primary-dark-color);
            margin-top: 0;
            font-size: 1.2em;
            margin-bottom: 15px;
        }

        .calculator-item .btn-check {
            display: inline-block;
            background-color: var(--complementary-orange-color);
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: var(--border-radius);
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .contact-item .btn-check {
            display: inline-block;
            background-color: var(--complementary-orange-color);
            color: var(--primary-white-color);
            padding: 10px 20px;
            border: none;
            border-radius: var(--border-radius);
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .contact-item .btn-check:hover {
            background-color: var(--complementary-orange-color-hover);
        }         

        .calculator-item .btn-check:hover {
            background-color: var(--complementary-orange-color-hover);
        }

        /* Testimonials section - slider */
#testimonials {
  /*margin: 50px auto;*/
  max-width: 1200px;
  padding: 20px;
  text-align: center;
}

.testimonials-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.testimonials-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  border-radius: var(--border-radius);
}

.testimonial-item {
  min-width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  border-radius: var(--border-radius);
  margin: 0 auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonial-item p {
  font-size: 1.1rem;
  color: var(--dark-color)
}

.testimonial-item .author {
  margin-top: 10px;
  font-weight: bold;
  color: var(--primary-dark-color);
}

.avatar-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: 10px 0;
}

.testimonial-content {
  display: flex;
  align-items: center;
  gap: 15px; /* odstęp między obrazkiem a tekstem */
}

/* Przyciski sterujące */
.testimonials-nav {
  margin-top: 15px;
}

.testimonials-nav button {
  background: #007BFF;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.testimonials-nav button:hover {
  background: #0056b3;
}

        /* Contact section */
        #contact .contact-info {
            display: flex; /* Flexbox layout */
            flex-direction: column; /* Items arranged in a column */
            align-items: center; /* Center horizontally */
            gap: 15px; /* Spacing between items */
            font-size: 1.1em; /* Font size */
            color: var(--dark-color); /* Dark gray text color */
        }

        #contact .contact-info a {
            color: var(--complementary-orange-color);
        }

        #contact .contact-info a:hover {
            color: var(--complementary-orange-color-hover);
        }

        #contact .contact-info p i {
            margin-right: 10px; /* Right margin for icons */
            color: var(--supporting-first-color); /* CUK's light blue for contact icons */
        }

        .contact-form {
            max-width: 600px; /* Maximum form width */
            margin: 30px auto 0 auto; /* Center form and top margin */
            padding: 30px; /* Inner padding */
            background-color: #f9f9f9; /* Light gray background */
            border: 1px solid #ddd; /* Subtle border */
            border-radius: 8px; /* Rounded corners */
            box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
        }

        .contact-form label {
            display: block; /* Labels as blocks */
            margin-bottom: 8px; /* Bottom margin */
            font-weight: bold; /* Bold text */
            color: #444; /* Dark gray text color */
        }

        .contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form textarea {
            width: calc(100% - 20px); /* Field width accounting for padding */
            padding: 10px; /* Inner padding */
            margin-bottom: 20px; /* Bottom margin */
            border: 1px solid #ccc; /* Border */
            border-radius: 4px; /* Rounded corners */
            font-size: 1em; /* Font size */
            box-sizing: border-box; /* Box model */
        }

        .contact-form textarea {
            resize: vertical; /* Resizable only vertically */
            min-height: 120px; /* Minimum height */
        }

        .contact-form button {
            background-color: var(--complementary-orange-color); /* CUK's light blue for form button */
            color: var(--primary-white-color); /* White text */
            padding: 12px 25px; /* Inner padding */
            border: none; /* Remove border */
            border-radius: var(--border-radius); /* Rounded corners */
            cursor: pointer; /* Pointer cursor */
            font-size: 1.1em; /* Font size */
            transition: background-color 0.3s ease; /* Smooth background color transition */
            width: 100%; /* Full width */
        }

        .contact-form button:hover {
            background-color: var(--complementary-orange-color-hover); /* Darker shade of light blue on hover */
        }

        /* Footer style */
        footer {
            background-color: var(--primary-dark-color); /* Dark gray background */
            color: var(--complementary-light-color); /* White text */
            text-align: center; /* Center text */
            padding: 20px 0; /* Top/bottom inner padding */
            margin-top: 20px; /* Top margin */
            font-size: 0.9em; /* Font size */
        }

        footer p {
            margin: 0; /* Remove margins */
        }

        footer .social-links a {
            color: #fff; /* White link color */
            margin: 0 10px; /* Margins between links */
            font-size: 1.5em; /* Icon font size */
            text-decoration: none; /* Remove underline */
            transition: color 0.3s ease; /* Smooth color transition */
        }

        footer .social-links a:hover {
            color: var(--dark-color) /* CUK's light blue on hover */
        }

        /* Responsiveness for smaller screens (max-width: 768px) */
@media (max-width: 768px) {
            header h1 {
                font-size: 2em; /* Zmniejszenie rozmiaru nagłówka */
            }

            header p {
                font-size: 1em; /* Zmniejszenie rozmiaru tekstu */
            }

            nav ul {
                flex-direction: column; /* Elementy nawigacji w kolumnie */
            }

            nav ul li {
                margin: 5px 0; /* Zmiana marginesów elementów nawigacji */
            }

            .services-grid, .calculators-grid { /* Zastosowanie dla obu siatek */
                grid-template-columns: 1fr; /* Jedna kolumna w siatce usług i kalkulatorów */
            }

            .testimonial-item {
                /* Nowe obliczenie flex-basis dla 1 elementu na mobile z marginesem */
                flex: 0 0 calc(100% - 20px); /* 100% szerokości minus 20px marginesu prawego */
                margin-right: 20px; /* Margines prawy */
            }
            #testimonials .testimonials-slider {
                padding: 0 10px; /* Mniejszy padding na mobile */
            }
        }