html {
    scroll-behavior: smooth;
}

body {
    background-color: rgba(1, 35, 63, 0.9); /* Kiitos-sivun tyylikäs tummansininen tausta */
    color: white; /* Kaikki teksti oletuksena valkoiseksi */
}

/* Fontit */
.slogan-fontti {
    font-family: 'Architects Daughter', cursive;
}

.tekstit-fontti {
    font-family: 'Oswald', sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Palvelukorttien tyylit */
.palvelu-kortti {
    background-color: rgba(255, 255, 255, 0.05); /* Hyvin haalea vaalea tausta laatikolle, jotta se erottuu */
    border-left: 4px solid rgba(231, 130, 0, 0.7); /* Oranssi korostusraita vasempaan reunaan */
    transition: transform 0.2s;
}

.palvelu-kortti:hover {
    transform: scale(1.05);
}

/* Yhteydenottolomakkeen laatikko */
.lomake-laatikko {
    background-color: rgba(0, 0, 0, 0.2); /* Hieman tummempi tausta lomakkeelle */
    border-top: 4px solid rgba(231, 130, 0, 0.7);
}

/* Napin alkuperäinen oranssi väri ja hover-efekti */
.nappula {
    background-color: rgba(231, 130, 0, 0.7);
    color: white;
    border: none;
    transition: transform 0.2s;
}

.nappula:hover {
    transform: scale(1.05);
    color: white;
}

/* Alapalkin linkkien tyylit ja animaatiot */
.alapalkki-linkki a {
    color: white;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s, color 0.2s;
}

.alapalkki-linkki a:hover {
    transform: scale(1.1);
    color: rgba(231, 130, 0, 0.9); /* Muuttuu oranssiksi kun hiiri on päällä */
}
/* Referenssikuvien tyylit ja hover-efekti */
.referenssi-kuva {
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.1); /* Himmeä vaalea reuna oletuksena */
}

.referenssi-kuva:hover {
    transform: scale(1.03); /* Zoomaa kuvaa hieman */
    border-color: rgba(231, 130, 0, 0.9); /* Reuna muuttuu oranssiksi hiiren ollessa päällä */
}