/* nothing-you-could-do-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nothing You Could Do';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/nothing-you-could-do/nothing-you-could-do-v21-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/nothing-you-could-do/nothing-you-could-do-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/nothing-you-could-do/nothing-you-could-do-v21-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('fonts/nothing-you-could-do/nothing-you-could-do-v21-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('fonts/nothing-you-could-do/nothing-you-could-do-v21-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('fonts/nothing-you-could-do/nothing-you-could-do-v21-latin-regular.svg#NothingYouCouldDo') format('svg'); /* Legacy iOS */
}

html, body{
    hyphens: auto;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    *{
        color: #333;
        font-family: 'Arial';
        font-size: 16px;
    }
    h1{
        font-family: 'Nothing You Could Do';
        font-size: 2em;
        margin: auto;
        margin-bottom: 35px;
        position: relative;
        width: fit-content;
        &:before{
            background-color: #707070;
            bottom: -10px;
            content: "";
            height: 1px;
            left: 0;
            min-width: 175px;
            position: absolute;
            width: 100%;
        }
        &:after{
            background-color: #f27c00;
            bottom: -10px;
            content: "";
            height: 3px;
            left: 0;
            margin-bottom: -1px;
            position: absolute;
            width: 75px;
        }
    }
    h2{font-family: 'Nothing You Could Do';font-size: 1.5em;}
    h3{font-family: 'Nothing You Could Do';font-size: 1.17em;}
    h4{font-family: 'Nothing You Could Do';font-size: 1em;}
    h5{font-family: 'Nothing You Could Do';font-size: .83em;}
    h6{font-family: 'Nothing You Could Do';font-size: .67em;}
    .wrapper{
        .logo{
            background-color: #fff;
            border-bottom: 3px solid #f27c00;
            display: flex;
            justify-content: center;
            padding: 15px 0;
            position: absolute;
            width: 100%;
            z-index: 1;
        }
        .banner{
            overflow: hidden;
            position: relative;
            img{
                min-height: 430px;
                width: -webkit-fill-available;
            }
            .banner-content{
                background: #ffffff80;
                -webkit-backdrop-filter: blur(20px) brightness(1.2) contrast(1);
                backdrop-filter: blur(20px) brightness(1.2) contrast(1);
                border-radius: 25px;
                height: 250px;
                padding: 15px;
                position: absolute;
                right: 50px;
                top: 150px;
                width: 300px;
                z-index: 1;
                .banner-content-headline{
                    display: block;
                    font-family: 'Nothing You Could Do';
                    font-size: 24px;
                    font-weight: bold;
                    margin-bottom: 30px;
                    margin-top: 20px;
                    position: relative;
                    width: 100%;
                    &:before{
                        background-color: #707070;
                        bottom: -10px;
                        content: "";
                        height: 1px;
                        left: 0;
                        min-width: 175px;
                        position: absolute;
                        width: 100%;
                    }
                    &:after{
                        background-color: #f27c00;
                        bottom: -10px;
                        content: "";
                        height: 3px;
                        left: 0;
                        margin-bottom: -1px;
                        position: absolute;
                        width: 75px;
                    }
                }
                .banner-content-subheadline{
                    display: block;
                    font-weight: bold;
                    width: 100%;
                }
            }
        }
        .main{
            .content{
                .container{
                    margin: auto;
                    max-width: 1024px;
                    padding: 50px 0;
                    text-align: center;
                    button{
                        background-color: rgba(0,0,0,.1);
                        border: 1px solid rgba(0,0,0,.1);
                        border-radius: 25px;
                        color: #333;
                        cursor: pointer;
                        padding: 10px 20px;
                        padding-left: 50px;
                        &:hover{
                            background-color: rgba(0,0,0,.15);
                        }
                        .bi.bi-envelope-at{
                            fill: #f27c00;
                            height: 25px;
                            margin-left: -35px;
                            margin-top: -5px;
                            position: absolute;
                            width: 25px;
                        }
                    }
                }
            }
        }
        .footer{
            .footer-content{
                .container{
                    margin: auto;
                    max-width: 1024px;
                    padding: 50px 0;
                    .row{
                        column-gap: 15px;
                        display: flex;
                        justify-content: center;
                        width: 100%;
                        .col-4{
                            background-color: rgba(0,0,0,.05);
                            border: 1px solid rgba(0,0,0,.1);
                            border-radius: 25px;
                            box-shadow: -3px 3px 6px rgba(0,0,0,.1);
                            padding: 25px;
                            width: 33.333%;
                            h3{
                                border-bottom: 1px solid rgba(0,0,0,.2);
                            }
                            a{
                                text-decoration: none;
                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                        }
                        .col-8{
                            background-color: rgba(0,0,0,.05);
                            border: 1px solid rgba(0,0,0,.1);
                            border-radius: 25px;
                            box-shadow: -3px 3px 6px rgba(0,0,0,.1);
                            padding: 25px;
                            width: 66.666%;
                            h3{
                                border-bottom: 1px solid rgba(0,0,0,.2);
                            }
                            a{
                                text-decoration: none;
                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                        }
                    }
                }
            }
            .footer-navigation{
                background-color: #333;
                border-top: 3px solid #f27c00;
                display: flex;
                justify-content: center;
                padding: 10px;
                ul{
                    display: flex;
                    justify-content: space-between;
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                    li{
                        color: #fff;
                        padding: 0 10px;
                        span{
                            color: #fff;
                            cursor: pointer;
                            text-decoration: none;
                            &:hover{
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
        .pages{
            *{
                font-family: 'Arial';
            }
            .to-top{
                background-color: rgba(0, 0, 0, .1);
                border: 1px solid rgba(0, 0, 0, .1);
                border-radius: 0 0px 25px 25px;
                cursor: pointer;
                display: none;
                margin: auto;
                padding: 10px 20px;
                width: fit-content;
                &:hover{
                    background-color: rgba(0, 0, 0, .15);
                }
            }
            .page{
                display: none;
                min-height: calc(100vh - 81px);
                &.active{
                    display: block;
                }
                .container{
                    margin: auto;
                    max-width: 1024px;
                    padding: 50px 0;
                }
            }
        }
    }
}
@media only screen and (max-width: 1500px){
    .banner img{
        object-fit: cover;
        width: auto!important;
    }
}
@media only screen and (max-width: 1100px){
    .container{
        max-width: 90%!important;
    }
}
@media only screen and (max-width: 435px){
    .container{
        max-width: 100%!important;
    }
    .col-8{
        width: 100%!important;
    }
    .page{
        padding: 10px;
    }
}
@media only screen and (max-width: 380px){
    .banner-content{
        left: 0!important;
        right: 0!important;
        width: calc(100% - 30px)!important;
    }
    .page{
        overflow-x: hidden!important;
    }
}
@media only screen and (max-width: 372px){
    button{
        padding-left: 20px!important;
        svg{
            display: none;
        }
    }
}