// Fonts 
@font-face {
    font-family:"AlternateGotNo1D";
    src: url('../fonts/AlternateGotNo1D.otf');
}

@font-face {
    font-family:"Brandon Grotesque Regular";
    src: url('../fonts/Brandon_Grotesque_Regular.woff2');
}

@font-face {
    font-family:"Brandon Grotesque Black";
    src: url('../fonts/Brandon_Grotesque_Black.woff2');
}

// Custom Css
body{
    font-family: 'Helvetica';
    position: relative;
}

img{
    max-width: 100%;
}

.btn-primary{
    background: #c13647;
    border: none;
    cursor: pointer;
    &:hover, &:focus{
        outline: none;
        box-shadow: none;
        background-color: #99b5c3;
    }
}

.big-text{
    font-size: 5.625rem;
    line-height: 100%;
    font-family:"AlternateGotNo1D", Helvetica, Arial, sans-serif;
}

.font-black{
    font-family: "Brandon Grotesque Black", Helvetica, Arial, sans-serif;
}


.container{
    max-width: 1200px;
}

a{
    transition: all 0.5s ease;
    &:hover{
        text-decoration: none;
    }
}

// Header 
header{
    background: rgba(55, 71, 86, 0.9);  
    hgroup{
        img{
            background: #fff;
            padding-top: 5px;
        }
    }
    .navbar-expand-lg {
        .navbar-nav {
            .nav-link{
                font-family: "Brandon Grotesque Regular", Helvetica, Arial, sans-serif;
                text-transform: uppercase;
                padding-left:15px;
                padding-top:5px;
                padding-bottom:5px;
                font-size: 1.0625rem;
                color: #fff;
                &:not(:last-child){
                    border-right:1px solid #fff;
                    padding-right: 15px;
                }
                &:hover, &.active{
                    color: #99b5c3;
                }
            }
        }
    }
}
hgroup {
    z-index:99999;
}
// Banner
.banner{
    position: relative;
    .banner-img{
        min-height: 12.5rem;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .figure{
        background: url(../images/banner.jpg) left top;
        background-size: cover;
    }
    
    .figure-caption{
        background: rgba(55, 71, 86, 0.9);
        top: 22%;
        max-width: 700px;
        .figure-caption-inner{
            border-left: 2px solid #fff;
            a{
                font-family: "Brandon Grotesque Black", Helvetica, Arial, sans-serif;
                font-size: 0.875rem;
                text-transform: uppercase;
                letter-spacing: 2px;
                
                .truck-icon{
                    font-size: 36px;
                    background-color: #c13647;
                    border: 3px solid #fff;
                    border-radius: 6.25rem;
                    width: 6.25rem;
                    height: 6.25rem;
                    transition: all 0.5s ease;
                }
                &:hover{
                    .truck-icon{
                        background-color:#99b5c3;
                    }
                }
            }
        }
    }
}

// Section 1

.sec-1-top{
    .title{
        font-family: "Brandon Grotesque Black", Helvetica, Arial, sans-serif;
        font-size: 4.0625rem;
        color: #2C2D34;
    }
    a{
        font-family: "Brandon Grotesque Black", Helvetica, Arial, sans-serif;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #c13647;
    }
}

.sec-1{
    .row{
        .box{
            padding: 25px;
            border-left:1px solid #000;
        }
    }
}

.red-title{
    color: #c13647;
    font-weight: bold;
    font-family: "Brandon Grotesque Black", Helvetica, Arial, sans-serif;
    a{
        color: #c13647;
        &:hover{
            color: #99b5c3;
        }
    }
}

// Sticky Footer

.sticky-footer{
    position: fixed;
    bottom: 0px;
    z-index: 99;
    .call{
        a{
            color: #fff;
            span{
                font-family: "AlternateGotNo1D", Helvetica, Arial, sans-serif;
                text-transform: uppercase;
                font-size: 20px;
                letter-spacing: 2px;
                line-height: 100%;
            } 
        }
    }
    .quote{
        .btn.btn-primary{
            font-family: "Brandon Grotesque Black", Helvetica, Arial, sans-serif;
            text-transform: uppercase;
            border-radius: 0px;
            border: 1px solid #fff;
            letter-spacing: 2px;
            font-size: 0.9rem;
            padding: 0.8125rem 1.5625rem 0.625rem;
        }
    }
}


// Responsive

@media (max-width:991px){
    body{
        padding-bottom: 75px;
    }
    .menu-right{
        padding-right: 0px;
        padding-left: 0px;
    }
    header{
        .navbar-expand-lg {
            width: 100%;
            padding-top: 0px;
            padding-bottom: 0px;
            .navbar-toggler{
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #fff;
                background: #c13647;
                border-radius: 0px;
                width: 75px;
                height: 75px;
                justify-content: center;
                .navbar-icon-text{
                    font-size: 0.8rem;
                    letter-spacing: 2px;
                    line-height: 1.5;
                    font-family: "Brandon Grotesque Black", Helvetica, Arial, sans-serif;
                    text-transform: uppercase;
                }        
            }
            .navbar-collapse{
                background: #fff;
                .navbar-nav{
                    .nav-link{
                        color: #2c2d34;
                        font-family: "Brandon Grotesque Black", Helvetica, Arial, sans-serif;
                        text-transform: uppercase;
                        letter-spacing: 2px;
                        font-size: 0.875rem;
                        border-bottom: 1px solid #a7a9ac;
                        padding-top: 10px;
                        padding-bottom: 10px;
                        &:not(:last-child){
                            border-right: none;
                        }
                        &.active{
                            background: #c13647;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
    hgroup{
        position: absolute;
        img{
            max-width: 150px;
        }
    }

    .sec-1-top, 
    .sec-1{
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media (max-width:767px){
    .big-text{
        font-size: 4rem;
    }

    .banner{
        .figure-caption {
            .figure-caption-inner {
                a .truck-icon{
                    font-size: 28px;
                    width: 4.25rem;
                    height: 4.25rem;
                }
            }
        }
    }
}

@media (max-width:575px){
    .big-text, .sec-1-top .title{
        font-size: 2.8rem;
    }
    .banner{
        .figure{
            background-image: none;
            .figure-caption {
                background: rgba(55, 71, 86, 1);
                .figure-caption-inner{
                    border:none;
                    padding-top: 15px;
                    position: relative;
                    a .truck-icon{
                        font-size: 22px;
                        width: 3.25rem;
                        height: 3.25rem;
                    }
                    &:before{
                        content:"";
                        width:70px;
                        height: 3px;
                        background: #c13647;
                        position: absolute;
                        top: 0px;
                    }
                }
            }
        }
    }
}

@media (max-width:480px){
    .banner {
        .figure-caption {
            .figure-caption-inner {
                a{
                    font-size: 0.750rem;
                    letter-spacing: 1px;
                }
            }
        }
    }
}