:root {
    font-size: 100%;

    @include media-breakpoint-down(xl) {
        font-size: 95%;
    }

    @include media-breakpoint-down(lg) {
        font-size: 85%;
    }

    @include media-breakpoint-down(md) {
        font-size: 80%;
    }
    
    @include media-breakpoint-down(sm) {
        font-size: 75%;
    }

    --bs-body-font-size: 16px;
}

a{
    transition: all 0.3s;
}

a:hover{
    transition: all 0.3s;   
    text-decoration: none;
}

button{
    outline: none;
    transition: all 0.3s;
}

body iframe{
    max-width: 100%;
}

body img{
    max-width: 100%;
    height: auto;
}

i[class*="icon-"]{
    display: inline-block;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{
    font-family: $font-family-secondary;
}

h1, .h1{
    font-size: 40px;
}

h2, .h2{
    font-size: 25px;
}

h3, .h3{
    font-size: 20px;
}

h4, .h4{
    font-size: 17px;
}

.container{
    max-width: 1100px;
}

h2.title{
    @include rem('font-size', 40);
    font-weight: 500;
    text-transform: uppercase;
    color: #181818;
    
    span{
        color: #F89623;
    }
}

.btn{
    background-color: $primary;
    color: $white;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: $font-family-secondary;
    outline: none !important;
    box-shadow: none !important;
    padding: 7px 20px;

    &:hover{
        color: $white;
        background-color: #c96c00;
    }
}
