body {

    margin: 0;

    padding: 0;

    font-family: Arial, sans-serif;

    background-color: #f8fafc;

    color: #1e293b;


    /* HEADER */

    header {

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        align-items: center;

        padding: 15px 5%;

        background-color: white;

        position: sticky;

        top: 0;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

        z-index: 10;


        h2 {
            margin: 0;

        }
        a {
            color: #0f172a;
            text-decoration: none;
        }


        nav {

            display: flex;

            justify-content: center;

            gap: 25px;


            a {

                text-decoration: none;

                color: #1e293b;

                font-weight: bold;

                transition: 0.2s;


                &:hover {

                    color: #2563eb;

                }

            }

        }


        button {

            justify-self: end;

        }

    }


    /* BUTTON */

    button {

        padding: 10px 16px;

        border: none;

        border-radius: 8px;

        background-color: #2563eb;

        color: white;

        cursor: pointer;

        transition: 0.2s;


        &:hover {

            background-color: #1d4ed8;

        }

    }


    /* HERO */

    .hero {

        text-align: center;

        padding: 120px 20px;

        background-color: #fef3c7;


        h1 {

            font-size: 52px;

            margin-bottom: 20px;

        }


        p {

            max-width: 650px;

            margin: 0 auto 30px;

            font-size: 20px;

            line-height: 1.6;

        }


        a {

            display: inline-block;

            padding: 14px 25px;

            background-color: #2563eb;

            color: white;

            text-decoration: none;

            border-radius: 8px;

            transition: 0.2s;


            &:hover {

                background-color: #1d4ed8;

            }

        }

    }


    /* SECTIONS */

    .nabidka,
    .proces,
    .projekty,
    .kontakt {

        padding: 80px 5%;


        h2 {

            text-align: center;

            font-size: 35px;

            margin-bottom: 50px;

        }

    }


    /* NABÍDKA */

    .nabidka-karty {

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        gap: 25px;


        .karta {

            padding: 30px;

            background-color: white;

            border-radius: 12px;

            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

            transition: 0.3s;


            &:hover {

                transform: translateY(-5px);

            }

        }

    }


    /* PROCES */

    .kroky {

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        gap: 25px;


        .karta-kroky {

            padding: 30px;

            background-color: white;

            border-radius: 12px;

            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

            transition: 0.3s;


            &:hover {

                transform: translateY(-5px);

            }

        }

    }


    /* PROJEKTY */

    .projekt-karty {

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        gap: 25px;


        .projekt {

            padding: 30px;

            background-color: white;

            border-radius: 12px;

            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

            transition: 0.3s;


            &:hover {

                transform: translateY(-5px);

            }


            a {

                display: inline-block;

                margin-top: 15px;

                padding: 10px 18px;

                background-color: #2563eb;

                color: white;

                text-decoration: none;

                border-radius: 8px;


                &:hover {

                    background-color: #1d4ed8;

                }

            }

        }

    }


    /* KONTAKT */

    .kontakt {

        text-align: center;

        background-color: #eff6ff;


        p {

            max-width: 600px;

            margin: 0 auto 30px;

            font-size: 18px;

            line-height: 1.6;

        }


        a {

            display: inline-block;

            padding: 14px 25px;

            background-color: #2563eb;

            color: white;

            text-decoration: none;

            border-radius: 8px;


            &:hover {

                background-color: #1d4ed8;

            }

        }

    }


    /* FOOTER */

    footer {

        padding: 30px;

        text-align: center;

        background-color: #0f172a;

        color: white;

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;

        a {
            text-decoration: none;
            color: white;
        }


        p {

            margin: 0;

        }

    }


    /* DARK MODE */

    &.dark {

        background-color: #222;

        color: white;


        header {

            background-color: #222;


            nav {

                a {

                    color: white;

                    &:hover {

                        color: #2563eb;

                    }

                }

            }
            a {
                color: white;
            }

        }

        .hero{
            color: #1e293b;
        }


        .karta,
        .karta-kroky,
        .projekt {

            background-color: #333;

            color: white;

        }


        .kontakt {

            background-color: #333;

        }

    }


    /* MOBIL */

    @media (max-width: 768px) {

        header {

            position: static ;

            grid-template-columns: 1fr;

            gap: 15px;


            h2 {

                text-align: center;

            }


            nav {

                flex-direction: column;

                align-items: center;

                gap: 10px;

            }


            button {

                justify-self: center;

            }

        }


        .hero {

            padding: 80px 20px;


            h1 {

                font-size: 38px;

            }

        }


        .nabidka-karty,
        .kroky,
        .projekt-karty {

            grid-template-columns: 1fr;

        }


        footer {

            grid-template-columns: 1fr;
            
            gap: 15px;
        }

    }

}