html {
            font-size: 16px; /* Add this at the top of your CSS */
        }

        @font-face {
            font-family: 'Fontti1';
            src: url('fonts/Exo-SemiBold.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Otsikkofontti';
            src: url('fonts/Exo-Light.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Hakupalkkifontti';
            src: url('fonts/Exo-Medium.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
        
        p {
        line-height: 1.5; /* 1.5 times the font size (recommended for readability) */
        font-family: 'Aileron', Arial, sans-serif;
        font-size: 24px;
        max-width: clamp(0px, 90%, 1000px);
        margin-bottom: 2rem;
        }

        ul {
    line-height: 1.5; /* 1.5 times the font size (recommended for readability) */
        }
        

        section {
            padding: 6%;
            padding-left: 16%;
            padding-right: 16%;
        }
        
        footer {
            padding:2%;
        }


        .hero-section {
            background-image: url('images/tausta3.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            display: flex;
            align-items: center;     /* Vertical centering */
            min-height: 600px; /* Ensure section has height */
        }

        .hero-section-2 {
            background-image: url('images/roots.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            min-height: 400px; /* Ensure section has height */
        }

        h1 {
        font-size: 1rem; /* Set to any size you want */
        font-family: 'Fontti1', Arial, sans-serif;
        color: white;
        }

        h2 {
        font-size: 4rem; /* Set to any size you want */
        font-family: 'Otsikkofontti', Arial, sans-serif;
        letter-spacing: 1.2px;
        color: #E5C7A4;
        }

        h3 {
        font-size: 2rem; /* Set to any size you want */
        font-family: 'Aileron', Arial, sans-serif;
        color: #0F2E65;
        }

        p, h1, h2, h3, .text-block {
        hyphens: auto;            /* allow automatic hyphenation */
         /* fallback for very long words  overflow-wrap: break-word;*/
        text-wrap: pretty;
        }
        /* @import url("https://use.typekit.net/qtn7hnz.css"); */




        @media (max-width: 600px) {
            p {
                font-size: 22px;
            }
            h2 {
            font-size: 2.5rem; /* Down from 3rem */
            letter-spacing: 1px; /* Down from 1.2px */
            }
        }

        @media (max-width: 400px) {
            p {
                font-size: 20px;
            }
            h2 {
            font-size: 2rem; /* Even smaller for very small screens */
            letter-spacing: 0.8px;
            }
        }
        
        /* CONTAINER FOR TWO ELEMENTS NEXT TO EACH OTHER */

        /* Two Column Container */
        .two-column-container {
            display: grid;
            grid-template-columns: 1fr auto; /* 2 equal columns repeat(2, 1fr) */
            align-items: start; 
            gap: 40px;
            padding: 0px;
        }

        .two-column-container-equal {
            display: grid;
            grid-template-columns: repeat(2, 1fr) ; /* 2 equal columns repeat(2, 1fr) */
            align-items: center; 
            gap: 40px;
            padding: 0px;
        }

            .two-column-container-imageleft {
            display: grid;
            grid-template-columns: auto auto ; /* 2 equal columns repeat(2, 1fr) */
            align-items: start; 
            gap: 40px;
            padding: 0px;
        }

        .column-box {
        background: transparent;
        padding: 10px;
        text-align: left;
        border-radius: 8px;
        min-width: 0; /* Prevent overflow */
        }

        /* Mobile: stack columns */
        @media (max-width: 768px) {
        .two-column-container-equal,
        .two-column-container-imageleft,
        .two-column-container {
            grid-template-columns: 1fr; /* one column */
        }
        }

        



        /* NAVIGATION/

            /* Navigation styles #2b7cbe;  #183d7c*/
            .navbar {
                background-color: #0F2E65;
                font-family: 'Hakupalkkifontti', Arial, sans-serif;
                color: white;
                position:sticky;
                top:0;
                z-index:1000;

            }
            
            .nav-container {
                display: flex;
                justify-content: space-between;
                align-items: center;

            }
            
            nav, .main-content {
                padding-left: 3%;
                padding-right: 10%;

            }

            .logo {
                /* font-size: 24px; /* Set to any size you want */
                font-family: 'Fontti1', Arial, sans-serif;
                color: white;
                font-size: 2.0rem;
                font-weight: bold;
            }
            
            .nav-links {
                list-style: none;
                display: flex;
                font-size: 1.2rem;
                gap: 1.5rem;
            }
            
            .nav-links li a {
                color: white;
                text-decoration: none;
                transition: color 0.3s ease;
            }
            
            .nav-links li a:hover {
                color: #ff9900;
            }
            
            .nav-toggle {
                display: none;
                background: none;
                border: none;
                color: white;
                font-size: 1.5rem;
                cursor: pointer;
            }

            /* Dropdown container */
            .dropdown {
                position: relative;
            }

            /* Dropdown menu */
            .dropdown-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                background-color: #0F2E65;
                min-width: 200px;
                box-shadow: 0 8px 16px rgba(0,0,0,0.2);
                list-style: none;
                padding: 0;
                margin: 0;
                z-index: 1000;
            }

            .dropdown-menu li {
                margin: 0;
            }

            .dropdown-menu a {
                display: block;
                padding: 12px 20px;
                color: #333;
                text-decoration: none;
            }

            .dropdown-menu a:hover {
                background-color: #FCF9F5;
            }

            /* Show dropdown on hover */
            .dropdown:hover .dropdown-menu {
                display: block;
            }


    @media screen and (max-width: 768px) {
        .nav-links {
            display: none; /* hide links by default */
            flex-direction: column; /* stack vertically when shown */
            width: 50%;
            background-color: #1a4183;
            position: absolute;
            top: 100%; /* 60px adjust depending on navbar height #0F2E65 */
            right: 0;
            padding: 1rem 0;
            border-radius: 8px 8px 8px 8px;
        }

        .nav-links li {
            text-align: center;
            margin: 0.5rem 0;
        }

        .nav-toggle {
            display: block; /* show toggle button on mobile */
        }

        .nav-links.active {
            display: flex; /* show links when toggle is clicked */
        }
    }


    .video-container {
        position: relative;
        width: 100%;
        max-width: 800px;
    }

    .video-container::before {
        content: "";
        display: block;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }