@charset "UTF-8";
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');





@import url("root.css");
@import url("baners.css");
@import url("infoboxy.css");
@import url("menu.css");
@import url("aktualnosci.css");
@import url("wzory.css");
@import url("arty.css");
@import url("tablice.css");
@import url("opinie.css");
@import url("stopka.css");



/* Styl kontenera na kafelki */
        .tiles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* Styl pojedynczego kafelka */
        .tile {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 30px 20px;
            text-decoration: none;
            color: #2c3e50;
            display: flex;
            flex-direction: column; /* Ułożenie elementów pionowo (ikona nad tekstem) */
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 120px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        /* Styl ikony */
        .tile-icon {
            font-size: 2.5rem; /* Rozmiar ikony */
            margin-bottom: 15px; /* Odstęp między ikoną a tekstem */
            color: #0056b3; /* Główny kolor ikony */
            transition: color 0.3s ease;
        }

        /* Efekt po najechaniu myszką (hover) */
        .tile:hover {
            background-color: #0056b3;
            color: #ffffff;
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
            border-color: #0056b3;
        }

        /* Zmiana koloru ikony po najechaniu myszką */
        .tile:hover .tile-icon {
            color: #ffffff;
        }

        /* Styl tekstu wewnątrz kafelka */
        .tile-text {
            font-size: 1.1rem;
            font-weight: 600;
            line-height: 1.4;
        }