/* HEADER */

        @font-face {
            font-family: 'Andre Sans'; /* Choose a name for your font */
            src: url('fonts/ATAndreSans-Regular.woff2') format('woff2'), /* Modern Browsers */
                 url('fonts/ATAndreSans-Regular.woff') format('woff'); /* Older Browsers */
            font-weight: normal;
            font-style: normal;
        }


        body{
            color: #1D1D1D;
            font-family: 'Andre Sans', sans-serif; /* Use the font-family in your styles */
            letter-spacing: 0.4;
        }

        h2 {
            color: #1d1d1d;
            line-height: 32px;
            letter-spacing: 0.2px;
        }

        iframe {
            width: 100%;
            height: -webkit-fill-available;
            border: none;
            margin: auto;
            position: fixed;
        }
        header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #1D1D1D;
            padding: 15px;
        }

        .logo {
            order: 1;
        }

        nav {
            display: flex;
            justify-content: center;
            order: 2;
        }

         .menu-items a {
            padding: 10px;
            text-decoration: none;
            color: #E5E6E0;
            margin-right: 20px;
        }

        .menu-items a.active {
            text-decoration: underline;
        }

        .social-icons {
            display: flex;
            order: 3;
        }

        .burger-menu {
            display: none;
        }

        .drawer {
            display: none;
            height: 100%;
            width: 100%; /* Set initial width to 100% */
            position: fixed;
            top: 0;
            right: -100%; /* Position off the right side of the page */
            background-color: #1d1d1d;
            overflow-x: hidden;
            transition: right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Use right for transition */
            color: #E5E6E0;
            padding: 20px;
            z-index: 1;
        }

        .drawer a {
            display: block;
            padding: 20px;
            text-decoration: none;
            color: #E5E6E0 !important;
        }

        .drawer a:hover {
            text-decoration: underline;
        }

        .drawer .social-icons {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: left;
        }

        @media (max-width: 920px) {
            header {
                justify-content: space-between;
                flex-direction: row;
                align-items: center;
            }

            .logo {
                order: 1;
            }

            nav {
                display: none;
                order: 2;
                color: #E5E6E0 !important;
            }

            .social-icons {
                display: none;
                order: 3;
            }

            .burger-menu {
                display: block;
                order: 3;
                padding: 10px;
                cursor: pointer;
            }

            .drawer {
                display: block;
            }

            .drawer.active {
                right: 0; /* Bring it in from the right */
                transition: right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Use right for transition */
            }
        }


    
     /* INDEX */

        * {
            box-sizing: border-box;
        }


        body {
            font-family: 'Andre Sans', sans-serif; /* Use the font-family in your styles */
            margin: 0;
            font-size: 20px;
            font-weight: 300;
            background-color: #E5E6E0;
            letter-spacing: 0.2px;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .item {
            width: 30%;
            margin: 50px 10px 50px 10px;
        }

        .item:hover {
            transform: scale(1.02); /* Adjust the scaling factor as needed */
        }

        @media (max-width: 920px) {
            .item {
                width: 100%;
                margin: 10px;
            }
        }



        /* FONT SINGLE PAGES */

        .fonthero{
            width:80%; 
        }

        .section {
            width:100%; 
            margin:0; 
            padding:10% 15% 10% 15%;
            text-align: center;
        }

        .footer{
            padding: 10%;
            text-align: left;
            display: block;
            line-height: 56px;
            font-size: 34px;
            font-weight: 200;
            letter-spacing: 0.2px;
        }

        .title{
            font-size: 44px;
            font-weight: 400;
        }


        /* mouse over link */
        a:hover {
            text-decoration: underline;
        }


        @media (max-width: 920px) {
            .section {
            width: 100%;
            padding: 60px 10px 50px 10px;
            margin: 0;
            text-align: center;
            }

            .footer{
            padding: 10%;
            text-align: left;
            display: block;
            line-height: 22px;
            font-size: 16px;
            font-weight: 400;
            }

            .title{
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 0.2px;
            }
        }


        /* Text page */

            .textpage{
            padding: 2% 30% 2% 30%;
            text-align: left;
            display: block;
            line-height: 24px;
            font-size: 18px;
            font-weight: 200;
            letter-spacing: 0.2px;
        }

            @media (max-width: 920px) {

            .textpage{
            padding: 5%;
            text-align: left;
            display: block;
            line-height: 22px;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0.2px;
            }

        }