@import "Colors.css";

/* font-family: 'Abel', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Abel');

/* font-family: 'Chau Philomene One', sans-serif; font-family: 'Mitr', sans-serif; */
/*@import url('https://fonts.googleapis.com/css?family=Chau+Philomene+One|Mitr');*/
/* font-family: "Lato"; */
/*@import url('https://fonts.googleapis.com/css?family=Lato');*/
/* font-family: "Quick"; */
/*@import url('https://fonts.googleapis.com/css?family=Quicksand');*/
/* font-family: 'Open Sans', sans-serif */
/*@import url('https://fonts.googleapis.com/css?family=Open+Sans');*/
/* font-family: 'Oxygen', sans-serif; */
/*@import url('https://fonts.googleapis.com/css?family=Oxygen');*/
/* font-family: Cairo */
/*@import url('https://fonts.googleapis.com/css?family=Cairo:400,300,300italic,400italic,700,700italic,900,900italic');*/
/*font-family: "Open Sans", sans-serif;*/
/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');*/

/* font-family: "Bruno Ace SC", sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&family=Bruno+Ace+SC&display=swap');

/* Default */
html {
}

body {
    padding-top: 120px;
    font-family: Abel, sans-serif;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .row {
    margin: 0px;
    /*padding: 0px;*/
}

a {
    color: var(--color-gray-600);
    text-decoration: none;
}

a:hover {
    color: var(--Color-Yellow-2)
}

textarea {
    resize: none;
}

/* Header */

.navbar-display {
    background-color: white;
    padding-top: 25px;
    padding-bottom: 25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -o-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -ms-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
}

.nav-colored {
    /*background-image: linear-gradient(var(--Color-6), var(--Color-6));*/
    background-color: white;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.nav-transparent {
    background-color: transparent;
}

.Logo {
    background-color: white;
}

.Logo img {
    width: 100%;
    height: 70px;
    object-position: center center;
    object-fit: contain;
}

/* Page Center */

    .PageContentCenter {
        margin: auto;
        border: 2px solid var(--color-gray-200);
        padding: 25px;
        margin-bottom: 50px;
    }

    .PageContentCenter2 {
        margin: auto;
        padding: 25px;
        margin-bottom: 50px;
    }
    /* Menu Item Level 1 */

.nav-link {
    color: var(--Color-Gray-1);
    font-size: 15px;
    /*font-weight: 500;*/
    font-family: "Bruno Ace SC", sans-serif;
    text-transform: capitalize;
}

        .nav-link:focus, .nav-link:hover {
            color: var(--Color-Yellow-2);
        }

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--Color-Yellow-2);
}
    /* Menu Category Level 1 */

.nav-link.dropdown-toggle {
    color: var(--Color-Gray-1);
}

    .nav-link.dropdown-toggle:hover {
        color: var(--Color-Yellow-2);
    }
    /* Menu Section Level 2 */
.dropdown-item {
    font-size: 12px;
    font-family: "Bruno Ace SC", sans-serif;
    text-transform: capitalize;
}

        .dropdown-item a {
            color: var(--Color-Gray-1);
        }

        .dropdown-item:focus, .dropdown-item:hover {
            /*background-color: unset;*/
        }

        .dropdown-item.active, .dropdown-item:active {
            background-color: unset;
        }

            .dropdown-item.active a, .dropdown-item:active a {
                color: var(--Color-Yellow-2);
            }
    /* auto list sub menu */

    .navbar .nav-item .dropdown-menu {
        display: none;
    }

    .navbar .nav-item:hover .nav-link {
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
    }

    .navbar .nav-item .dropdown-menu {
        /*margin-top: 0;*/
    }

    .offcanvas {
        max-width: 90%;
    }
    /* Home Page */
    
    /* Home Highlight We Serve */

    .HomePartnersWrapper {
        padding-top: 40px;
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .HomePartnersWrapperTitle {
        text-align: center;
        margin-bottom: 50px;
    }

        .HomePartnersWrapperTitle h2 {
            color: var(--Color-Gray-1);
            font-weight: 300;
            font-size: 26px;
            font-family: "Bruno Ace SC", sans-serif;
            text-transform: uppercase;
        }

.HomePartnersTitleBorder {
    width: 50px;
    height: 3px;
    background-color: var(--Color-Yellow-2);
    margin-bottom: 20px;
}

        .HomePartnersWrapperTitle a {
            color: var(--Color-Blue-1);
            font-weight: 300;
            font-size: 20px;
        }

    .HomePartnersItemFrame {
        /*border: 1px solid #e1e1e1;*/
        margin-left: 15px;
        margin-right: 15px;
        padding: 10px;
        display: flex;
        justify-content: center;
        border-radius: 10px;
    }

        .HomePartnersItemFrame:hover {
            /*-webkit-box-shadow: 0px 3px 10px 0 rgba(50,50,50,.2);
            cursor: pointer;*/
        }

    .HomePartnersItemImage {
        height: 100px;
    }

    .HomePartnerItemName {
        text-align: center;
        padding-top: 20px;
        height: 50px;
    }

        .HomePartnerItemName h3 {
            font-weight: 300;
            font-size: 15px;
        }

        .HomePartnerItemName a {
            color: var(--color-gray-800);
        }

            .HomePartnerItemName a:hover {
                font-size: 16px;
                color: var(--Color-Blue-1);
            }

    /* End Home Partners */

/* Home Highlight Brands */

    .HomeBrandsWrapper {
        padding-top: 50px;
        padding-bottom: 30px;
    }

.HomeBrandsTitle {
    text-align: center;
}

    .HomeBrandsTitle h2 {
        color: var(--Color-Gray-1);
        font-weight: 300;
        font-size: 26px;
        font-family: "Bruno Ace SC", sans-serif;
        text-transform: uppercase;
    }

.HomeBrandsTitleBorder {
    width: 50px;
    height: 3px;
    background-color: var(--Color-Yellow-2);
    margin-bottom: 50px;
}

.HomeBrandsBlock {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    padding: 15px;
    margin-bottom: 20px;
    background-color: white;
}



    .HomeBrandsBlock img {
        width: 100%;
        height: 300px;
        object-position: center center;
        object-fit: contain;
        aspect-ratio: 1;
    }

.HomeBrandsOpacity {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(139, 183, 181, 0.1);
    padding: 10px;
    display: flex;
    align-items: flex-end;
}

    .HomeBrandsOpacity:hover {
        background-color: rgba(139, 183, 181, 0.3);
    }

    /* End Home Highlight Brands */

    /* Home Our History */

    .HomeOurHistoryWrapper {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .HomeOurHistoryContent {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }

        .HomeOurHistoryContent img {
            width: 100%;
            object-position: center center;
            object-fit: cover;
            aspect-ratio: 4/3;
        }

.HomeOurHistoryItem h2 {
    color: var(--Color-Gray-1);
    font-weight: 300;
    font-size: 26px;
    font-family: "Bruno Ace SC", sans-serif;
    text-transform: uppercase;
}

.HomeOurHistoryTitleBorder {
    width: 50px;
    height: 3px;
    background-color: var(--Color-Yellow-2);
    margin-bottom: 20px;
}

.HomeOurHistoryDesc {
    color: black;
    font-size: 18px;
    margin-bottom: 30px;
}

    .HomeOurHistoryItem a {
        color: white;
        background-color: var(--color-gray-600);
        font-size: 15px;
        letter-spacing: normal;
        font-weight: 400;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 3px;
        text-transform: uppercase;
    }

        .HomeOurHistoryItem a:hover {
            background-color: var(--Color-Yellow-2);
        }

    /* End Home Our History */

    /* Home Find Us */

    .HomeFindUsWrapper {
        /*background-color: #efefef;*/
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .HomeFindUsBlockTitle {
        color: var(--Color-Gray-1);
        font-weight: 300;
        font-size: 30px;
        margin-bottom: 50px;
    }


    .HomeFindUsMap {
        margin-bottom: 50px;
        padding-top: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }

    .HomeFindUsContactForm {
        color: black;
        margin-bottom: 50px;
    }

    .HomeFindUsDetails {
        color: black;
        margin-bottom: 50px;
    }
    /* Inner Pages */

    /* Page */

    .PageWrapper {
        padding-top: 50px;
        padding-bottom: 50px;
    }

.PageTitle {
    margin-bottom: 50px;
    text-align: center;
}

.PageTitle h1 {
    color: var(--Color-Gray-5);
    text-transform: capitalize;
    font-size: 30px;
    font-weight: 400;
    /*font-family: "Bruno Ace SC", sans-serif;*/
    text-transform: capitalize;
}

.PageTitle span {
    width: 50px;
    height: 3px;
    background-color: var(--Color-Yellow-2);
    margin-bottom: 50px;
    display: block;
    margin: 0 auto;
}

.SubPageTitle {
    background-color: var(--color-gray-100);
    padding-top: 13px;
    padding-bottom: 10px;
    margin-bottom: 50px;
}

    .SubPageTitle h2 {
        color: var(--color-gray-700);
        font-size: 24px;
        font-weight: 400;
        font-family: "Bruno Ace SC", sans-serif;
        text-transform: uppercase;
    }

.ItemPageTitle {
    margin-bottom: 35px;
}

    .ItemPageTitle h2 {
        color: var(--color-gray-700);
        font-size: 20px;
        font-weight: 400;
        font-family: "Bruno Ace SC", sans-serif;
        text-transform: uppercase;
    }

    .ItemPageTitle span {

        width: 50px;
        height: 3px;
        background-color: var(--Color-Yellow-2);
        display: block;
    }

.PageHeaderContent {
    margin-bottom: 30px;
}

.PageContent {
    margin-bottom: 75px;
}

    /* End Page */

    /* Item */

    .ItemTitle {
        margin-bottom: 100px;
        text-align: center;
    }

        .ItemTitle h1 {
            color: var(--Color-Blue-3);
            text-transform: capitalize;
            font-size: 30px;
            font-weight: 400;
        }

    .ItemImages {
        margin-bottom: 50px;
        text-align: center;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        /*border-radius: 10px;*/
    }

        .ItemImages img {
            width: 100%;
            object-position: center center;
            object-fit: cover;
        }

    .ItemFileDescrption {
        font-size: 14px;
        color: gray;
        padding: 10px;
        /*margin-bottom: 5px;*/
    }

    .Item a {
        font-size: 14px;
        font-weight: 500;
        color: gray;
    }

    .ItemPostDate {
        font-size: 11px;
        margin-bottom: 30px;
    }

    .ItemDetails {
        font-size: 20px;
    }

        .ItemDetails h2 {
            color: black;
            font-size: 24px;
        }

        .ItemDetails h3 {
            color: black;
            font-size: 22px;
        }

        .ItemDetails h4 {
            color: black;
            font-size: 20px;
        }

        .ItemDetails a {
            color: var(--Color-Blue-3);
            font-weight: bold;
        }

            .ItemDetails a:hover {
                text-decoration: underline;
            }

    .ImgShadow {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }
    /* End Item */

/* Projects Categories */

.ProjectCategoryContent {
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    position: relative;
}

    .ProjectCategoryContent img {
        width: 100%;
        object-position: center center;
        object-fit: contain;
        aspect-ratio: 4/3;
        border-radius: 10px;
        z-index: -1;
    }

.Transbox {
    display: none;
}

.ProjectCategoryContent:hover img {
    position: relative;
}

.ProjectCategoryContent:hover > .Transbox {
    border-radius: 10px;
    transition: transform 3s ease-in;
    background-color: rgba(0, 0, 0, 0.2);
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
}

    .ProjectCategoryContent:hover > .Transbox span {
        color: white;
        font-size: 32px;
        font-weight: 400;
        vertical-align: middle;
        display: table-cell;
        text-decoration: underline 1px;
    }

.ProjectCategoryTitle {
    text-align: center;
    margin-bottom: 20px;
}

    .ProjectCategoryTitle h2 {
        color: gray;
        font-size: 20px;
        font-weight: 400;
    }

    .ProjectCategoryTitle:hover h2 {
        color: var(--Color-Yellow-2);
    }
/* Projects */

.ProjectContent {
    margin-bottom: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
}

    .ProjectContent img {
        width: 100%;
        object-position: center center;
        object-fit: cover;
        aspect-ratio: 3/2;
        margin-bottom: 20px;
    }

.ProjectImg-Portrait {
    width: auto;
    /*height: 800px;*/
    /*background-color: transparent;
    object-position: center center;
    object-fit: contain;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
}

.ProjectImg-Landscape {
    width: 100%;
    /*height: 800px;*/
    /*background-color: transparent;
    object-position: center center;
    object-fit: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
}

.ProjectImg-Square {
    width: 100%;
    /*height: 800px;*/
    /*background-color: transparent;
    object-position: center center;
    object-fit: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
}



.ProjectContent:hover img {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

.ProjectContent h2 {
    padding-top: 20px;
    font-size: 16px;
    color: black;
    font-weight: 400;
}
/*.ProjectContent:hover {
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    }*/

.ProjectContent:hover h2 {
    color: var(--Color-Blue-3);
}
/* Project Details */
/*.ProjectItem {
    margin-top: 50px;
    margin-bottom: 40px;
}*/

.ProjectItemTitle {
    color: var(--Color-Red-1);
    text-transform: capitalize;
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 50px;
}

.ProjectItemContent {
    text-align: center;
    padding-top: 10px;
    margin-bottom: 50px;
}

    .ProjectItemContent img {
        /*height: 400px;*/
        /*width: auto;*/
        /*-webkit-box-reflect: below 2px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));*/
        -webkit-filter: drop-shadow(5px 5px 5px #949494);
        filter: drop-shadow(5px 5px 5px #949494);
    }

    .ProjectItemContent:hover img {
        -webkit-animation-name: pulse;
        animation-name: pulse;
    }

.ProjectItemImg-Portrait {
    width: auto;
    height: 400px;
    object-position: center center;
    object-fit: contain;
    /*background-color: transparent;
    
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
}

.ProjectItemImg-Landscape {
    width: 100%;
    height: auto;
    object-position: center center;
    object-fit: cover;
    /*height: 800px;*/
    /*background-color: transparent;
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
}

.ProjectItemImg-Square {
    width: 100%;
    height: auto;
    object-position: center center;
    object-fit: cover;
    /*background-color: transparent;
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
}

.ProjectItemModalContent {
    /*position: absolute;
    bottom: 0;
    left: 0;
    right: 0;*/
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}

    .ProjectItemModalContent span {
        display: table-cell;
        vertical-align: middle;
    }

    .ProjectItemModalContent img {
        width: 100%;
        height: auto;
        
    }

.ProjectItem input {
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
    font-size: 12px;
    letter-spacing: normal;
    font-weight: 400;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 3px;
    text-transform: uppercase;
    border: none;
}

    .ProjectItem input:hover {
        background-color: var(--Color-Blue-3);
        cursor: pointer;
    }

/* End Project Details */

    /* Products Categories */

    .ProductCategoryContent {
        margin-bottom: 20px;
        text-align: center;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        position: relative;
    }

        .ProductCategoryContent img {
            width: 100%;
            object-position: center center;
            object-fit: cover;
            aspect-ratio: 4/3;
            border-radius: 10px;
            z-index: -1;
        }

    .Transbox {
        display: none;
    }

    .ProductCategoryContent:hover img {
        position: relative;
    }

    .ProductCategoryContent:hover > .Transbox {
        border-radius: 10px;
        transition: transform 3s ease-in;
        background-color: rgba(0, 0, 0, 0.6);
        display: table;
        position: absolute;
        width: 100%;
        height: 100%;
    }

        .ProductCategoryContent:hover > .Transbox span {
            color: white;
            font-size: 22px;
            font-weight: 400;
            vertical-align: middle;
            display: table-cell;
            text-decoration: underline 1px;
        }

    .ProductCategoryTitle {
        text-align: center;
        margin-bottom: 20px;
    }

        .ProductCategoryTitle h2 {
            color: gray;
            font-size: 20px;
            font-weight: 400;
        }

        .ProductCategoryTitle:hover h2 {
            color: var(--Color-Blue-3);
        }

    /* Products */

    .ProductContent {
        margin-bottom: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

        .ProductContent img {
            width: 100%;
            object-position: center center;
            object-fit: contain;
            aspect-ratio: 3/2;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            padding: 10px;
        }

    .ProductImg-Portrait {
        width: auto;
        /*height: 800px;*/
        /*background-color: transparent;
    object-position: center center;
    object-fit: contain;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
    }

    .ProductImg-Landscape {
        width: 100%;
        /*height: 800px;*/
        /*background-color: transparent;
    object-position: center center;
    object-fit: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
    }

    .ProductImg-Square {
        width: 100%;
        /*height: 800px;*/
        /*background-color: transparent;
    object-position: center center;
    object-fit: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
    }



    .ProductContent:hover img {
        -webkit-animation-name: pulse;
        animation-name: pulse;
    }

    .ProductContent h2 {
        padding-top: 10px;
        font-size: 20px;
        color: black;
        font-weight: 400;
    }
    /*.ProductContent:hover {
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    }*/

.ProductContent:hover h2 {
    text-decoration: underline var(--Color-Yellow-2);
    text-underline-offset: 6px;
}
    /* Product Details */
    /*.ProductItem {
    margin-top: 50px;
    margin-bottom: 40px;
}*/

    .ProductItemTitle {
        color: var(--Color-Red-1);
        text-transform: capitalize;
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 50px;
    }

    .ProductItemContent {
        text-align: center;
        padding-top: 90px;
        margin-bottom: 50px;
    }

        .ProductItemContent img {
            /*height: 400px;*/
            /*width: auto;*/
            /*-webkit-box-reflect: below 2px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));*/
            -webkit-filter: drop-shadow(5px 5px 5px #949494);
            filter: drop-shadow(5px 5px 5px #949494);
        }

        .ProductItemContent:hover img {
            -webkit-animation-name: pulse;
            animation-name: pulse;
        }

    .ProductItemImg-Portrait {
        width: auto;
        height: 400px;
        object-position: center center;
        object-fit: contain;
        /*background-color: transparent;
    
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
    }

    .ProductItemImg-Landscape {
        width: 100%;
        height: auto;
        object-position: center center;
        object-fit: cover;
        /*height: 800px;*/
        /*background-color: transparent;
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
    }

    .ProductItemImg-Square {
        width: 100%;
        height: auto;
        object-position: center center;
        object-fit: cover;
        /*background-color: transparent;
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;*/
    }

    .ProductItemModalContent {
        /*position: absolute;
    bottom: 0;
    left: 0;
    right: 0;*/
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }

        .ProductItemModalContent span {
            display: table-cell;
            vertical-align: middle;
        }

        .ProductItemModalContent img {
            width: auto;
            height: 700px;
        }

    .ProductItem input {
        color: var(--color-gray-700);
        background-color: var(--color-gray-100);
        font-size: 12px;
        letter-spacing: normal;
        font-weight: 400;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 40px;
        padding-right: 40px;
        border-radius: 3px;
        text-transform: uppercase;
        border: none;
    }

        .ProductItem input:hover {
            background-color: var(--Color-Blue-3);
            cursor: pointer;
        }

    .Product-accordion-item {
        padding-bottom: 20px;
        border: none;
        border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)
    }

    .Product-accordion-header {
    }

    .Product-accordion-button {
        font-size: 18px;
        color: var(--color-gray-700);
    }

        .Product-accordion-button:not(.collapsed) {
            color: var(--color-gray-700);
            background-color: white;
            box-shadow: none;
        }

    .Product-accordion-body {
        font-size: 16px;
        padding-top: 30px;
        padding-bottom: 20px;
        color: var(--color-gray-600);
        line-height: 1.8;
    }

    .ProductItemGalleryWrapper {
        background-color: var(--color-gray-100);
    }

    .ProductItemGalleryTopWrapper {
        background-image: linear-gradient(var(--color-gray-300), var(--color-gray-100));
        height: 40px;
        margin-bottom: 40px;
    }

    .ProductItemGalleryBottomWrapper {
        background-image: linear-gradient(var(--color-gray-100), var(--color-gray-300));
        height: 40px;
        margin-top: 40px;
    }
    /* End Product Details */
    
    /* FAQs */

    .FAQSideCategory h2 {
        font-size: 22px;
        font-weight: 300;
        padding: 10px;
    }

    .FAQSideCategory h3 {
        font-size: 20px;
        font-weight: 300;
        padding: 10px;
    }

    .FAQSideCategory a {
        color: var(--Color-Green-3);
    }

        .FAQSideCategory a:hover {
            text-decoration: underline;
        }

    .FAQCategory {
        padding-top: 20px;
        color: var(--Color-Green-1);
    }

        .FAQCategory h2 {
            font-size: 22px;
            font-weight: 400;
            padding: 10px;
        }

    .accordion {
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    }

    .FAQ-accordion-item {
        padding-bottom: 20px;
        border: none;
        /*border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)*/
    }

    .FAQ-accordion-header {
    }

    .FAQ-accordion-button {
        font-size: 18px;
        color: var(--color-gray-700);
        background-color: var(--color-gray-100);
    }

        .FAQ-accordion-button:hover {
            background-color: var(--color-gray-200);
        }

        .FAQ-accordion-button:not(.collapsed) {
            color: white;
            background-color: var(--Color-Green-1);
        }

    .FAQ-accordion-body {
        font-size: 18px;
        padding-top: 30px;
        padding-bottom: 20px;
        color: var(--color-gray-600);
        line-height: 1.8;
    }

        .FAQ-accordion-body a {
            color: var(--Color-Green-2);
        }

            .FAQ-accordion-body a:hover {
                text-decoration: underline;
            }
    /* End FAQs */

    /* About Us */

    .Services-Block {
    }

    .Services-Item {
        padding-top: 40px;
        padding-bottom: 40px;
    }

        .Services-Item h2 {
            color: var(--color-gray-700);
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 30px;
            display: block;
        }

        .Services-Item span {
            color: black;
            font-size: 20px;
            display: block;
            margin-bottom: 40px;
        }

        .Services-Item a {
            color: var(--Color-Yellow-2);
        }

            .Services-Item a:hover {
                text-decoration: underline;
            }

        .Services-Item div a {
            color: white;
            background-color: var(--color-gray-600);
            font-size: 14px;
            letter-spacing: normal;
            font-weight: 400;
            text-align: center;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-left: 40px;
            padding-right: 40px;
            border-radius: 3px;
            text-transform: capitalize;
        }

            .Services-Item div a:hover {
                background-color: var(--Color-Yellow-2);
                text-decoration: none;
            }

    .Services-Item-Image {
        border-radius: 10px;
        width: 100%;
        height: 250px;
    }

    .Services-ScrollBox {
        text-align: center;
    }

        .Services-ScrollBox:hover {
            cursor: pointer;
        }

        .Services-ScrollBox span {
            margin-top: -3px;
            font-size: 40px;
            color: #f2f5f9;
        }

        .Services-ScrollBox div {
            background-color: #f2f5f9;
            width: 3px;
            height: 290px;
        }

.Services-Block:hover .Services-ScrollBox div {
    background-color: var(--Color-Yellow-2);
}

.Services-Block:hover .Services-ScrollBox span {
    color: var(--Color-Yellow-2);
}

.Services-Block:hover .Services-Item h2 {
    color: var(--Color-Yellow-2);
}

    .Services-Block:hover .Services-Item a {
        text-decoration: none;
    }
    /* End Services */

/* We Serve */

.Partners-Block {
}

.Partners-Item {
    padding-top: 20px;
    padding-bottom: 20px;
}

    .Partners-Item h4 {
        color: var(--color-gray-700);
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 30px;
        display: block;
    }

    .Partners-Item span {
        color: black;
        font-size: 20px;
        display: block;
        margin-bottom: 40px;
    }

    .Partners-Item a {
        color: var(--Color-Red-1);
    }

        .Partners-Item a:hover {
            text-decoration: underline;
        }

    .Partners-Item div a {
        color: white;
        background-color: var(--color-gray-600);
        font-size: 14px;
        letter-spacing: normal;
        font-weight: 400;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 40px;
        padding-right: 40px;
        border-radius: 3px;
        text-transform: capitalize;
    }

        .Partners-Item div a:hover {
            background-color: var(--Color-Red-1);
            text-decoration: none;
        }

.Partners-Item-Image {
    border-radius: 10px;
    width: auto;
    height: 90px;
}

.Partners-ScrollBox {
    text-align: center;
}

    .Partners-ScrollBox:hover {
        cursor: pointer;
    }

    .Partners-ScrollBox span {
        margin-top: -3px;
        font-size: 40px;
        color: #f2f5f9;
    }

    .Partners-ScrollBox div {
        background-color: #f2f5f9;
        width: 3px;
        height: 480px;
    }

.Partners-Block:hover .Partners-ScrollBox div {
    background-color: var(--Color-Red-1);
}

.Partners-Block:hover .Partners-ScrollBox span {
    color: var(--Color-Red-1);
}

.Partners-Block:hover .Partners-Item h2 {
    color: var(--Color-Red-1);
}

.Partners-Block:hover .Partners-Item a {
    text-decoration: none;
}

/* End Partners */

    /* Activities */

    .Activities-Block {
    }

    .Activities-Item {
        padding-top: 40px;
        padding-bottom: 40px;
    }

        .Activities-Item h2 {
            color: var(--color-gray-700);
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 30px;
            display: block;
        }

        .Activities-Item span {
            color: black;
            font-size: 20px;
            display: block;
            margin-bottom: 40px;
        }

        .Activities-Item a {
            color: var(--Color-Red-1);
        }

            .Activities-Item a:hover {
                text-decoration: underline;
            }

        .Activities-Item div a {
            color: white;
            background-color: var(--color-gray-600);
            font-size: 14px;
            letter-spacing: normal;
            font-weight: 400;
            text-align: center;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-left: 40px;
            padding-right: 40px;
            border-radius: 3px;
            text-transform: capitalize;
        }

            .Activities-Item div a:hover {
                background-color: var(--Color-Red-1);
                text-decoration: none;
            }

    .Activities-Item-Image {
        border-radius: 10px;
        width: 100px;
        height: 100px;
    }

    .Activities-Block:hover div {
        background-color: var(--color-gray-100);
    }
    /* End Activities */
    /* Blog */

    .BlogBlock {
        padding-left: 15px;
        border-left: 1px solid var(--color-gray-300);
        margin-bottom: 10px;
    }

    .BlogImage {
        width: 100%;
        height: 250px;
        border-radius: 1px;
        margin-bottom: 10px;
        transition: transform 0.3s ease;
        transform: translateX(0px);
    }

    .BlogTitle {
        height: 250px;
    }

        .BlogTitle h2 {
            color: var(--color-gray-900);
            font-weight: 300;
            font-size: 24px;
        }

        .BlogTitle a {
        }

        .BlogTitle h2:hover {
            color: var(--Color-Blue-1);
        }

        .BlogTitle span {
            color: var(--color-gray-700);
            font-size: 16px;
            margin-bottom: 20px;
        }

    .BlogUploadDate {
        color: var(--color-gray-700);
        font-size: 13px;
    }
    /* End Blog */
    /* Contact Us */

    .FieldItem {
    }

    .FieldItemIcon {
        font-size: 16px;
        color: var(--color-gray-500);
        font-size: 20px;
        width: 50px;
        float: left;
    }

    .FieldItemText {
        float: left;
        color: var(--color-gray-700);
    }

        .FieldItemText a {
            color: var(--Color-gray-700);
        }

            .FieldItemText a:hover {
                color: var(--Color-Yellow-2);
                text-decoration: underline;
            }


    .FieldItemNumber {
        float: left;
        color: var(--color-gray-900);
    }

    .FieldIcon {
        /*color: var(--Color-Gray-1);
    font-size: 20px;*/
    }

        .FieldIcon i {
            /*color: red ;
        padding: 5px;*/
        }
    /* End Contact Us */
    /* Request Contact Form */

    .ContactFormPageContent {
        background-color: whitesmoke;
        padding-top: 40px;
        padding-bottom: 40px;
        margin-bottom: 50px;
    }
    /* End Request Contact Form */
    /* Icons Status */

    .ActiveIcon {
        font-size: 16px;
        color: var(--Color-Green-1);
        font-size: 20px;
    }

    .NotActiveIcon {
        font-size: 16px;
        color: var(--Color-Red-1);
        font-size: 20px;
    }
    /* End Icons Status */
    /* Ratings */

    .ratings {
        margin-right: 10px;
    }

        .ratings i {
            color: #cecece;
            font-size: 12px;
        }

    .rating-color {
        color: #fbc634 !important;
    }

    .review-count {
        font-weight: 400;
        font-size: 12px !important;
        padding-top: 5px;
    }
    /* End Ratings */

    .ProductImageBox {
        text-align: center;
        margin-bottom: 50px;
    }

        .ProductImageBox img {
            width: 100%;
            height: auto;
        }
    /* Footer */

    .FooterWrapper {
        background-color: var(--color-gray-100);
    }

    footer h3, h4, h5 {
        font-size: 20px;
        color: var(--color-gray-600)
    }

    footer a {
        color: var(--color-gray-600)
    }

        footer a:hover {
            color: var(--Color-Yellow-2)
        }

            footer a:hover > h5 {
                color: var(--Color-Yellow-2)
            }
    /* End Footer */
    /* Flags */

    .flag-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 20px;
    }

    .flag-icon-ca {
        background-image: url(Flags/ca.svg);
    }

    .flag-icon-us {
        background-image: url(Flags/us.svg);
    }

    .flag-icon-jo {
        background-image: url(Flags/jo.svg);
    }

    .flag-icon-fr {
        background-image: url(Flags/fr.svg);
    }
    /* Social Media */

    .SocialMediaIcon {
        /*opacity: 0.7;*/
        margin: 4px;
        display: inline-block;
    }

        .SocialMediaIcon:hover {
            /*opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);*/
            -webkit-animation-name: fa-shake;
            animation-name: fa-shake;
            -webkit-animation-duration: var(--fa-animation-duration,3s);
            animation-duration: var(--fa-animation-duration,3s);
            -webkit-animation-iteration-count: var(--fa-animation-iteration-count,infinite);
            animation-iteration-count: var(--fa-animation-iteration-count,infinite);
            -webkit-animation-timing-function: var(--fa-animation-timing,linear);
            animation-timing-function: var(--fa-animation-timing,linear)
        }

        .SocialMediaIcon span {
            font-size: 30px;
            color: var(--Color-Yellow-2);
        }
    /* Navigation */

    .NavigationWrapper {
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .Navigation {
        color: darkslategray;
        font-size: 13px;
    }

        .Navigation i {
            font-size: 15px;
            color: var(--Color-Gray-3);
        }

        .Navigation a {
            font-size: 13px;
            color: darkslategray;
            font-weight: bold;
            /*text-transform: uppercase;*/
        }
    /* Forms */

    .FormHeader {
        color: var(--color-gray-800);
        font-size: 22px;
        font-weight: 500;
        padding: 10px;
        margin-bottom: 40px;
        border-bottom: solid 6px var(--Color-Red-1);
    }

    .form-label {
        margin-bottom: 1rem;
        display: block;
        font-weight: 700;
        color: var(--color-gray-700);
    }

    .FormRowBorder {
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
    }

    .FormLabelReuired {
        color: red;
        font-size: 17px;
    }

    .form-control {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 2;
        color: var(--bs-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--bs-body-bg);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
    }

    .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        display: block;
        width: 100%;
        padding: .375rem 2.25rem .375rem .75rem;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 2;
        color: var(--bs-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--bs-body-bg);
        background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
        background-repeat: no-repeat;
        background-position: right .75rem center;
        background-size: 16px 12px;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
    }
    /* Modal */

    .modal-header {
        border: none;
    }

    .modal-body {
        /*padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;*/
    }
    /* Checkbox */
    input[type='checkbox'] {
        width: 15px;
        height: 15px;
        margin-right: 10px;
        cursor: pointer;
    }
    /* Radio Button List */

    input[type='radio'] {
        width: 15px;
        height: 15px;
        margin-left: 10px;
        margin-right: 10px;
        cursor: pointer;
    }
    /* Share Media  */

    .ShareMedia {
        width: 100%;
        padding-top: 40px;
    }
    /* Custom button style */

    .Button {
        color: white;
        border: 1px solid var(--color-gray-500);
        background-color: var(--color-gray-500);
        font-size: 18px;
        letter-spacing: normal;
        font-weight: 400;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 40px;
        padding-right: 40px;
        border-radius: 3px;
        width: 100%;
    }

        .Button:hover {
            border: 1px solid var(--Color-Yellow-1);
            background-color: var(--Color-Yellow-2);
            color: white;
            /*background-image: linear-gradient(var(--Color-1), var(--Color-2));*/
            /*background-color: white;*/
        }

    .LinkButton {
        color: var(--Color-Gray-1);
        border: 1px solid var(--Color-Gray-1);
        font-size: 12px;
        letter-spacing: normal;
        font-weight: 400;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 40px;
        padding-right: 40px;
        border-radius: 3px;
    }

        .LinkButton:hover {
            border: 1px solid var(--Color-Gray-1);
            background-color: white;
            /*font-size: 18px;
        color: white;*/
        }
    /* Quick Search */

    .QuickSearchBox {
    }
    /* Payment */


    .CardPayment {
        position: relative;
    }

        .CardPayment input {
            padding-left: 50px;
            display: inline-block;
        }

        .CardPayment i {
            position: absolute;
            left: 20px;
            top: 15px;
            font-size: 18px;
            color: gray;
        }
    /* Account Management */

    .EmailsManagementBlock {
        border: 1px solid #f0f0f0;
        background-color: #f4f4f4
    }

    .MobilesManagementBlock {
        border: 1px solid #f0f0f0;
        background-color: #f4f4f4
    }

    .ResetPasswordManagementBlock {
        border: 1px solid #f0f0f0;
        background-color: #f4f4f4
    }
    /* Transition elsements */
    /*a, div, .btn, .navbar, input, textarea, .form-control {*/
    a, div, .navbar {
        -webkit-transition: all 0.425s ease-in-out 0s;
        -moz-transition: all 0.425s ease-in-out 0s;
        -ms-transition: all 0.425s ease-in-out 0s;
        -o-transition: all 0.425s ease-in-out 0s;
        transition: all 0.425s ease-in-out 0s;
    }
    /* Responsive */
    /* X-Large desktops and laptops */
    @media (min-width:1600px) {
        /* Home Product Category */
        /* End Home Product Category */
    }
    /* X-Large desktops and laptops */
    @media (min-width:1400px) {

        .container-fluid {
            padding-left: 50px;
            padding-right: 50px;
        }
        /* Home Product Category */
        /* End Home Product Category */
    }
    /* Large desktops and laptops */
    @media (max-width: 1200px) {
        /* Home Product Category */
        /* End Home Product Category */
        /* Product Details */
        /*.ProductItemContent img {
        height: auto;
        width: 100%;
    }*/
        /* End Products Details */
    }
    /* Portrait tablets and small desktops */
    @media (max-width: 992px) {
        /* Home Product Category */
        /* End Home Product Category */
        /* Product Details */
        /*.ProductItemContent img {
        height: auto;
        width: 100%;
    }*/
        /* End Products Details */
        /* Navigation */

        .dropdown-toggle::after {
            float: right;
            font-size: 30px;
        }
        /* End Navigation */
    }
    /* Landscape phones and portrait tablets */
    @media (max-width: 768px) {

        .PageContentCenter {
            margin: auto;
            width: unset;
        }
        /* Navigation */
        /* End Navigation */
        /* Product Category */

        .ProductCategoryContent h2 {
            font-weight: 300;
            font-size: 20px;
        }
        /* End Product Category */
        
        .HomePartnersItemFrame {
            border: none;
            margin-left: 35px;
            margin-right: 35px;
        }
        /* Services */

        .Services-Item {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .Services-ScrollBox {
            display: none
        }
        /* End Services */
    }
    /* Portrait phones and smaller */
    @media (max-width: 576px) {
        /* Navigation */
        /* End Navigation */
        /* Item Details */

        .ItemDetails img {
            width: 100%;
            height: auto;
        }
        /* Products */

        .ProductContent h2 {
            font-size: 16px;
        }
        /* End Products */
        /* Product Details */

        .ProductItemModalContent img {
            width: 90%;
            height: auto;
        }
        /* End Products Details */
        
        /* Page Details */
        /* End Page Details */
        /* Footer */
        /* End Footer */

        .d-xs-none {
            display: none
        }
    }
    /* smaller */
    @media (max-width: 300px) {
        /* Products */

        .ProductContent h2 {
            font-size: 14px;
        }
        /* End Products */
        

        .d-xs-none {
            display: none
        }
    }