/*
Theme Name: Quali Metal
Theme URI: 
Author: Bishoy Asaad
Author URI: mailto:bishoy.g.asaad@gmail.com
Description: Quali Metal is specially designed for <a href="https://www.quali-metal.com">Quali Metal</a> to present the business's projects portfolio and the catalog for its products.
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: qualimetal
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/

:root {
    --bs-primary: #143149;
    --bs-secondary: #928779;
    --bs-light: #8DBAF3;
    --bs-dark: #000000;
    --bs-danger: #960200;
    --bs-red: var(--bs-danger);
    --bs-primary-rgb: 20, 49, 73;
    --bs-secondary-rgb: 146, 135, 121;
    --bs-light-rgb: 141, 186, 243;
    --bs-dark-rgb: 0, 0, 0;
    --bs-danger-rgb: 150, 2, 0;
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-secondary);
    --bs-nav-pills-link-active-bg: var(--bs-secondary);
    font-size: 14px;
}

section {
    background-color: #fff;
    position: relative;
    z-index: 100;
}

a {
    text-decoration: none !important;
}

.h-95 {
    height: 95%;
}

.inherit-min-height {
    min-height: inherit;
}

.right-0 {
    right: 0;
}

.left-0 {
    left: 0;
}

.left-50 {
    left: 50%;
}

.left-25 {
    left: 25%;
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
}

.btn-white {
    --bs-btn-bg: var(--bs-white) !important;
    --bs-btn-active-bg: var(--bs-white) !important;
    --bs-btn-hover-bg: var(--bs-white) !important;
    --bs-btn-active-color: var(--bs-danger) !important;
    --bs-btn-hover-color: var(--bs-danger) !important;
    --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
}

#header {
    background: #fff;
    border-bottom: 2px #8DBAF3 solid;
    position: fixed;
    z-index: 1000;

    .menu-item a {
        text-decoration: none;
        color: #143149;
        font-size: 1.5rem;
    }
    
    .menu-item a:hover {
        color: #8DBAF3;
    }

    #navbarNav .menu-item {
        font-size: 2rem;
        padding: 1rem 0;
    }
}

#quali-metal-custom-logo {
    display: none;
}

.custom-logo, .custom-logo-link {
    width: 100%;
    height: auto;
}

.list-style-none {
    list-style: none;
}

.border-1 {
    border-width: 1px;
}

.border-3 {
    border-width: 3px;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-secondary);
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--bs-danger);
}

#featured-section {
    height: 40vh;
}

.owl-stage-outer, .owl-stage, .owl-item {
    height: 100%;
    overflow: hidden;
}

.company-image {
    height: 100%;
    width: 100%;
}

#suppliers-background {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(139, 139, 139);
    background-blend-mode: multiply;
    background-clip: content-box;
}

#suppliers #description p {
    display: none;
}
#suppliers #description .active {
    display: block !important;
}

#menu-footer .menu-item {
    width: 100%;
    padding: .2rem;
}
#menu-footer .menu-item a {
    color: white;
    text-decoration: none;
}

#projects {
    .feature-1,.feature-5 {
        flex: 0 0 auto;
        width: 100%;
        height: 40vh;
    }
    .feature-2,.feature-4 {
        flex: 0 0 auto;
        width: 100%;
        height: 40vh;
    }
    .feature-3,.feature-6 {
        flex: 0 0 auto;
        width: 100%;
        height: 40vh;
    }
}
#products {
    #products-categories .nav-link {
        font-size: 1.5rem;
    }
    .projects{
        height: 10vh;
    }
    .bring-forward:hover {
        z-index: 1000;
    }
    .product-curtain {
        background: linear-gradient(to left, #fff 20%, #ffffff00, #fff 80%);
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }
}

#contact-us-section {
    height: 70vh;
}

@media (min-width: 576px) {
    #header #menu-icon {
        font-size: 2em;
    }
}

@media (min-width: 992px) {
    body {
        font-size: 1em;
    }
    .position-fixed-lg {
        position: fixed;
    }
    .vh-lg-100 {
        height: 100vh !important;
    }
    .rounded-lg-start {
        border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius)!important;
    }
    .rounded-lg-end {
        border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0!important;
    }
    #header {
        background: linear-gradient(#fff 18%, hsla(0, 0%, 100%, 0%));
        height: 18vh;
        border-bottom: 0px #8DBAF3 solid;
    }

    #menu-footer .menu-item {
        width: 50%;
        padding: .2rem;
    }

    #logo {
        padding: 1rem;
    }

    #quali-metal-custom-logo {
        display: flex;
    }

    #quali-metal-short-logo {
        display: none;
    }
    
    .custom-logo, .custom-logo-link {
        width: 100%;
        height: auto;
    }

    .featured-img {
        height: auto !important;
        width: 100% !important;
    }

    .position-lg-absolute {
        position: absolute !important;
    }

    .p-md-45 {
        padding: 2em !important;
    }

    .left-md-25 {
        left: 25%;
    }

    .right-lg-0 {
        left: auto;
        right: 0 !important;
    }

    .h-lg-100 {
        height: 100% !important;
    }

    .h-lg-auto {
        height: auto !important;
    }

    .offset-xl-1 {
        margin-left: 12.5% !important;
    }

    .border-md-none {
        border: none !important;
    }

    #contact-us #business-img {
        right: 0;
    }

    #products {
        #products-categories .nav-link {
            font-size: 1.5rem;
        }

        .projects{
            height: 15vh;
        }
    }

    #projects {
        .feature-1,.feature-5 {
            width: 60%;
            height: 60vh;
            padding: 0 .25em .5em 0;
        }
        .feature-2,.feature-4 {
            width: 40%;
            height: 60vh;
            padding: 0 0 .5em .25em;
        }
        .feature-3,.feature-6 {
            width: 100%;
            height: 60vh;
            padding: 0 0 .5em 0;
        }
        .feature-4 {
            padding: 0 .25em .5em 0;
        }
        .feature-5 {
            padding: 0 0 .5em .25em;
        }
        .feature-img h1{
            opacity: 0;
            visibility: hidden;
            background-color: transparent !important;
        }
        .feature-img div {
            opacity: 0
        }
        .feature-img:hover div {
            background: linear-gradient(#00000000 0%, #fff 100%);
            opacity: 100;
            transition: all .2s linear;
        }
        .feature-img:hover h1{
            opacity: 100;
            transition: opacity .5s linear;
            visibility: visible;
        }
    }

    #contact-us-section {
        height: 55vh;
    }
}