/* Arabs Munch — styles.css */

:root {
    --bs-primary: #f4623a;
    --bs-primary-rgb: 244, 98, 58;
}

html { height: 100%; scroll-padding-top: calc(4.5rem - 1px); scroll-behavior: smooth; }
body { width: 100%; height: 100%; font-family: 'Merriweather', serif; }

.page-section { padding: 8rem 0; }
.text-white-75 { color: rgba(255,255,255,.75) !important; }

.btn-primary  { background-color: #f4623a; border-color: #f4623a; }
.btn-primary:hover { background-color: #cf5331; border-color: #c34e2e; }
.btn-xl { padding: 1.25rem 2.25rem; font-size: .85rem; font-weight: 700;
          text-transform: uppercase; border: none; border-radius: 10rem; }
.bg-primary { background-color: #f4623a !important; }
.text-primary { color: #f4623a !important; }

hr.divider {
    height: .2rem; max-width: 3.25rem; margin: 1.5rem auto;
    background-color: #f4623a; opacity: 1; border: none;
}
hr.divider-light { background-color: #fff; }

#mainNav {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    background-color: #fff;
    transition: background-color .2s ease;
}
#mainNav .navbar-brand { font-family: 'Merriweather Sans', sans-serif; font-weight: 700; color: #212529; }
#mainNav .navbar-nav .nav-item .nav-link {
    color: #6c757d; font-family: 'Merriweather Sans', sans-serif;
    font-weight: 700; font-size: .9rem; padding: .75rem 0;
}
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active { color: #f4623a; }

@media (min-width: 992px) {
    #mainNav { box-shadow: none; background-color: transparent; }
    #mainNav .navbar-brand { color: rgba(255,255,255,.7); }
    #mainNav .navbar-brand:hover { color: #fff; }
    #mainNav .navbar-nav .nav-item .nav-link { color: rgba(255,255,255,.7); padding: 0 1rem; }
    #mainNav .navbar-nav .nav-item .nav-link:hover,
    #mainNav .navbar-nav .nav-item .nav-link.active { color: #fff; }
    #mainNav .navbar-nav .nav-item:last-child .nav-link { padding-right: 0; }
    #mainNav.navbar-shrink { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); background-color: #fff; }
    #mainNav.navbar-shrink .navbar-brand { color: #212529; }
    #mainNav.navbar-shrink .navbar-brand:hover { color: #f4623a; }
    #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link { color: #212529; }
    #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover,
    #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link.active { color: #f4623a; }
}

header.masthead {
    padding-top: 10rem;
    padding-bottom: calc(10rem - 4.5rem);
    background:
        linear-gradient(to bottom, rgba(92,77,66,.8) 0%, rgba(92,77,66,.8) 100%),
        url('https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=1600&q=80')
        center center / cover no-repeat;
}
header.masthead h1 { font-size: 2.25rem; }
@media (min-width: 992px) {
    header.masthead { height: 100vh; min-height: 40rem; padding-top: 4.5rem; padding-bottom: 0; }
    header.masthead p { font-size: 1.15rem; }
    header.masthead h1 { font-size: 3rem; }
}
@media (min-width: 1200px) { header.masthead h1 { font-size: 3.5rem; } }

#portfolio .container-fluid { max-width: 1920px; }
#portfolio .container-fluid .portfolio-box { position: relative; display: block; overflow: hidden; }
#portfolio .container-fluid .portfolio-box img {
    width: 100%; height: 280px; object-fit: cover; display: block; transition: transform .4s ease;
}
#portfolio .container-fluid .portfolio-box:hover img { transform: scale(1.04); }
#portfolio .container-fluid .portfolio-box .portfolio-box-caption {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    width: 100%; height: 100%; position: absolute; bottom: 0; text-align: center;
    opacity: 0; color: #fff; background: rgba(244,98,58,.9); transition: opacity .25s ease;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category {
    font-family: 'Merriweather Sans', sans-serif; font-size: .85rem; font-weight: 600; text-transform: uppercase;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name { font-size: 1.2rem; }
#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption { opacity: 1; }