/*
Theme Name: Mondial88
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
@import url('https://fonts.googleapis.com/css2?family=Krub&display=swap');

@font-face {
    font-family: 'Futura Std Medium';
    src: url('fonts/FuturaStdMedium.woff') format('woff');
}

@font-face {
    font-family: 'Futura Std Bold';
    src: url('fonts/FuturaStdBold.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Book';
    src: url('fonts/GothamBook.woff') format('woff');
}

@font-face {
    font-family: 'Krub';
    src: url('fonts/Krub-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Adam';
    src: url('fonts/AdamCgPro.woff') format('woff');
}


@font-face {
    font-family: "Alaska Regular";
    src: url('fonts/Alaska-Regular.woff') format('woff');
}

@font-face {
    font-family: "Berlin Sans";
    src: url('fonts/BRLNSDB.TTF') format('ttf');
}

@font-face {
    font-family: "Helvetica Now Micro Regular";
    src: url('fonts/HelveticaNowMicro-Regular.woff') format('woff');
}

@font-face {
    font-family: "Helvetica Now Micro Bold";
    src: url('fonts/HelveticaNowMicro-Bold.woff') format('woff');
}


                                                                                                          
/*** GENERAL ***/ 
:root {
    --mint: #189782; 
    --black: #000000;
    --yellow: #ffe114;
    --light: #fffdeb;
}



#logo img {
    max-height: 150px;
}

.nav-size-xlarge>li>a {
    font-size: 1.3em;
}

.section-title b {
    background-color: transparent;
}

.section-title-normal, .section-title-normal span {
    border-bottom: 0px solid #ececec;
}

.header-nav.header-nav-main a{
    font-family: 'Futura Std Medium' !important; 
}

.logo-slider{
    bottom:70px !important;
}

/* Dot Nav */

.flickity-page-dots {
    bottom: 80px;
}

.flickity-page-dots .dot {
    border: 1px solid #b9b9b9;
    background-color: #b9b9b9;
    width:14px;
    height:15px;
}

.flickity-page-dots .dot.is-selected {
    background-color: #fff;
    opacity: 1!important;
}

.flickity-page-dots .dot:hover {
    background-color: #a6dac7;
}


/*Footer*/
.footer-2 {
    border-bottom: 1px solid #d5fff94f;
}

.footer-secondary{
    color: #fff8d8;
    font-family: 'Gotham Book' !important; 
}

i.icon-facebook:hover, i.icon-instagram:hover,.ux-menu-link a span:hover{
    color: #ffeab7;
}


/*Buttons*/
.button.white {
    background-color: #fff!important;
    color: #000!important;
}

/*Margin*/
.m-remove {
    margin: 0;
}
.mt-remove {
    margin-top: 0 !important;
}
.mb-remove {
    margin-bottom: 0 !important;
}

.ml-remove {
    margin-left: 0;
}
.mr-remove {
    margin-right: 0;
}
.m-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.m-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}
.m-40 {
    margin-top: 40px;                                                          
    margin-bottom: 40px;
}
.mt-5 {
    margin-top: 5px;
}
.mt-10 {
    margin-top: 10px;
}
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-70 {
    margin-top: 70px;
}
.mt-100 {
    margin-top: 100px;
}
.mb-5 {
    margin-bottom: 5px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-25 {
    margin-bottom: 25px;
}
.mb-30 {
    margin-bottom: 30px;                                                                        
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-60 {
    margin-bottom: 60px;
}
.mb-70 {
    margin-bottom: 70px;
}
.mr-20 {
    margin-right: 20px;
}   
.ml-20 {
    margin-left: 20px;
}


/*Padding*/
.p-remove {
    padding: 0;
}
.pt-remove {
    padding-top: 0 !important;
}
.pb-remove {
    padding-bottom: 0 !important;
}
.pl-remove {
    padding-left: 0 !important;
}
.pr-remove {
    padding-right: 0 !important;
}

/*Headings*/
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
    opacity: 1 !important;
}
/* .hero {
    font-size: 4.8rem;
    line-height: 0.85;
} */
.hero-404 {                                              
    font-size: 10rem;
    line-height: 0.85;
}
.heading-large {
    font-size: 12.5rem;
    font-weight: 500;
}
.heading-medium {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1.1;
}
.heading-small {
    font-size: 2.6rem;
    line-height: 1.1;
}
.sub-heading {
    font-size: 1.8rem;
    line-height: 1;
}
h1, .h1 {
    font-size: 3.50rem;
    line-height: 1.1;
}
h2, .h2 {
    font-size: 2.8rem;
    line-height: 1;
}
h3, .h3 {
    font-size: 2.7rem;
    line-height: 1.1;
}
h4, .h4 {
    font-size: 2.125rem;
    line-height: 1.1;
}
h5, .h5 {
    font-size: 1.125rem;
    line-height: 1.6;
}
h6, .h6 {
    font-size: 1rem;
}
.text-large {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
}
.text-medium {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.1;
}
.text-small {
    font-size: 1rem;
    font-weight: 100;
    line-height: 1.1;
}

mark {
    padding: 2px;
    background-color: transparent;
    font-weight: 600;
    color: #ff2e2e;
}

/*Utilities*/
.text-center {
    text-align: center;
}                                       
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify !important;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-light {
    font-weight: 300;
}
.text-normal {
    font-weight: 400;
}
.text-medium {
    font-weight: 500;
}
.text-semibold {
    font-weight: 600;
}
.text-extrabold {
    font-weight:  800;
}
.text-bold {
    font-weight: 700;
}
.text-strike {
    text-decoration: line-through;
}
.hidden {
    display: none;
}
.font-futura-m, .font-futura-m  > * {
    font-family: 'Futura Std Medium' !important; 
}

.font-futura-b, .font-futura-b  > * {
    font-family: 'Futura Std Bold' !important; 
}

.font-krub, .font-krub  > * {
    font-family: 'Krub' !important; 
}

.font-adam, .font-adam > * {
    font-family: 'Adam' !important; 
}

.font-alaska, .font-alaska > * {
    font-family: 'Alaska' !important; 
}

.letter-space-normal {
    letter-spacing: 1px;
}
.letter-space {
    letter-spacing: 2px;
}
.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}


/*Colors*/
.text-mint {
    color: var(--mint);
}
.text-black {
    color: var(--black);
}
.text-yellow {
    color: var(--yellow);
}
.bg-mint {
    background-color: var(--mint);
}
.bg-black {
    background-color: var(--black);
}
.bg-yellow {
    background-color: var(--yellow);
}

/*About Us*/

.mondial88-contact-form input[type='text'], .mondial88-contact-form input[type='email']{
    background-color: #e7f4f2;
    border: 1px solid #e7f4f2;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0%);
    height: 3.2em;
}

.mondial88-contact-form textarea{
    background-color: #e7f4f2;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0%);
}

.mondial88-contact-form input[type=submit]{
    background-color: var(--yellow) !important;
    color: #000;
}

.mondial88-contact-form input[type=submit]:hover{
    background-color: var(--mint) !important;
    color: #fff;
}

.mondial88-contact-form .icon-box{
    display: flex;
    align-items: center;
    margin-left: 150px;    
}

.mondial88-contact-form .row{
    box-shadow: rgb(184 190 197 / 10%) 0px 8px 20px;
    border-radius: 30px;
}
.about-contact-col-1 .wpcf7 p{
    display: flex !important;
    justify-content: end  !important;;
    align-items: flex-end  !important;;
}

.about-contact-col-1  .wpcf7-spinner{
    display:none;
}

.about-contact-col-1 .col-inner{
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
}

.about-contact-col-2 .col-inner{
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}

.about-contact-col-2{
    box-shadow: rgb(184 190 197 / 10%) 3px 0px 7px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}
.about-contact-col-2 .stack .text p{
    margin-bottom:0.5em;
}

.about-contact-col-2 .stack a{
    color: var(--black);
}
.about-contact-col-2 .stack a:hover{
    color: var(--mint);
}

/*Blog*/

.page-id-255 .top-a{
    background: url(https://mondial88dev.wpengine.com/wp-content/uploads/2023/06/header-wave_bg_02-1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: rgb(255, 228, 1);
}

.featured-recipes .post-title {
    font-family: 'Krub';
    font-size: 20px;
    font-weight: 700;
    color: #000;
}


/*** Brands ***/
.brand-box{
    background: #f6f4e3;
    border: 1px solid #dfdfdf;
    padding: 50px 50px 50px 50px;
}

/*** WooCommerce **/


.single-product .product-info .product-title{
    color: #1f1f1f;
    font-family: 'Krub';
    text-transform: capitalize;
    font-weight: bold;
    font-size: 2rem;
}

.product-page-sections .product-section .row {
    display: block;
    border: 1px solid #c7c7c769;
    margin-bottom: 20px;
    padding: 5px 20px;
    margin: 20px 5px;
}


.related.product-section {
    border: 0px solid transparent !important;
    margin-top: 50px;
    margin-bottom: 80px;
}

.related .product-section-title{
    color:#1f1f1f;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: normal;
    text-transform: capitalize;
}

.box-text-products{
    text-align: center;
}

.box-text-products .product-title a{
    color: #1f1f1f !important;;
    font-family: 'Krub' !important;;
    text-transform: capitalize !important;;
    font-size: 1.1rem !important;;
}
.related .box-image {
    background: #f9eccc;
}
.box-text-products{
    text-align: center;
}

.woocommerce-shop .star-rating, .related .box-text-products .category, .related .box-text-products .woocommerce-review-link {
    display:none;
}

.product-section, .woocommerce-Reviews.row{
    border: 0px solid transparent !important;
}

.woocommerce-Reviews h3{
    font-size: 1.5rem !important;
}

.single-product .shop-container{
    background-image: linear-gradient(360deg, #fffdeb, #fffdeb);
    background-size: 100% 220px;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.product-section .large-10 {
    max-width: 100% !important;
}

.woocommerce-product-attributes th{
    width:15%;
}


.woocommerce-product-attributes td, .woocommerce-product-attributes th {
    border: 0px solid transparent !important;
}

.product-section h5.uppercase.mt::after {
    content: '';
    background-color: rgb(0 0 0 / 34%);
    display: block;
    height: 3px;
    margin: 1em 0;
    max-width: 50px;
    width: 100%;
}

#shop-sidebar .cat-item.cat-item-15,.woocommerce .shop-page-title,.quick-view.quick-view-added{
    display: none;
}

.single-product .product_meta{
    pointer-events: none;
}

.slider-nav-reveal .flickity-prev-next-button, .slider-nav-reveal .flickity-prev-next-button:hover{
    background-color: transparent;
    box-shadow: none;
    
}

.no-image-col {
    visibility: hidden;
}


/*** AHG Page ***/
.page-id-865 #content section, .page-id-865 #footer{
    z-index:1;
}

.ahg-recipes-border .box.has-hover {
    border: 1px solid #c09862 !important;
    padding: 30px !important;
    border-radius: 20px !important;
}




/*************** Responsive CSS ***************/

@media (max-width:1024px){
    .flickity-page-dots {
        bottom: 45px;
    }
    .slider-nav-outside .flickity-prev-next-button.previous{
        right: 98%;
    }
    .slider-nav-outside .flickity-prev-next-button.next{
        left:98%;
    }
    .page-id-253 .banner-layer{
        margin-top:50px !important;
    }
}

@media (max-width: 1024px) {
    .brands-banner .banner-layer{
        top:10% !important;
    }
    .mondial88-contact-form .section-content{
        padding: 0px 10px;
    }
    

}

@media (max-width: 820px){
    .trade-corp p{
        line-height: 1.2 !important;
    }
    .category-page-row .hide-for-medium  {
        display: block!important;
    }
    .product-info {
        padding-top: 50px;
    }
}

@media (max-width: 540px) {
    .brand-box{
        padding: 12px 12px 12px 12px !important;
    }
    #logo img {
        max-height: 80px !important;
    }

    .footer .social-icons{
        text-align: center;
    }
    .page-id-865 .ahg-section-c .img-inner[style],.page-id-865 .ahg-section-d .img-inner[style]{
        margin: 0px 0px -90px 0px !important;
    }

}

@media (max-width: 414px) {
    .brands-banner .banner-layer{
        top:-3% !important;
    }

}

@media (max-width: 375px) {
    .brands-banner .banner-layer{
        top:-10% !important;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      % !important;
    }
}