/*
Theme Name: Francaboi 2024
Theme URI: http://www.mangaba.com.br/
Author: Fabiano Coelho
Author URI: http://www.mangaba.com.br/
Description: Site para FrancaBoi
Version: 1.0
*/
@import url('assets/css/quicksand.css');
@import url('assets/css/mulish.css');
@import url('assets/css/overlay.css');

:root {
    --fontsize: 16px;
    --primary-font: "Mulish", sans-serif;
    --primary-weight: 200;
    --quicksand: "Quicksand", sans-serif;
    --quicksand-weight: 600;
    --primary-color: #fff;
    --background-color: #2c2c2c;
    --background-color-darker: #131313;
    --background-color-lighter: #515153;
    --orange: #F04D4D;
    --dark-orange: #b74000;
    --fb-green: #006535;
    --fb-lime: #A0D45C;
    --fb-lime-rgb: 146, 193, 85;
    --fb-blue: #2F3E76;
    --prod-div-height: 740px;
    --prod-div-topmargin: 680px;
}

html {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    font-family: var(--primary-font);
    font-weight: var(--primary-weight);
    font-stretch: normal;
    font-size: var(--fontsize);
    color: var(--primary-color);
    background: url(assets/img/header-background.webp) no-repeat, url(assets/img/bg-main.png) repeat;
    background-position: center top;
    background-color: var(--background-color);
    margin: 0 !important;
    padding: 0 !important;
}

.glass {
    background: rgba(235, 235, 236, 0.05);
    border-radius: 50%/24%;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: none;
}

.bg-glass {
    background: rgba(235, 235, 236, 0.05);
    border-radius: 16px;
}

.fb-card {
    background: rgba(235, 235, 236, 0.1);
    color: var(--primary-color);
    border-radius: 16px;
}

.fb-card img {
    border-radius: 16px !important;
}

.fb-card img:hover {
    /* filter: brightness(70%) */
    filter: sepia(45%)
}

.round {
    border-radius: 2rem;
}

.depoimentos-card {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 1rem;
}

.depoimentos-card h5 {
    margin-top: 2rem;
    margin-bottom: 0;
}

.depoimentos-card img {
    border-radius: 100% !important;
    margin-top: 2rem;
    max-width: 60%;
    margin-bottom: 1rem;
}

.logo {
    width: 230px;
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    color: var(--fb-lime);
}

.orange a {
    color: var(--orange);
}

.orange a:hover {
    color: var(--fb-lime)
}

.fb-carousel-caption {
    position: absolute;
    right: 15%;
    top: 40%;
    left: 15%;
    padding-bottom: 1.25rem;
    color: #fff;
}


.footer {
    background: rgba(235, 235, 236, 0.05);
    border-radius: 2.4em;
    padding: 3rem;
    margin-bottom: 3em;
    margin-top: 2rem;
}

.footer-logo {
    width: 75px;
}

.icon-24 {
    width: 24px;
    height: auto;
    padding-right: 4px;
}

.icon-30 {
    width: 30px;
    height: auto;
}

.zap-modal-content {
    background: url(assets/img/zapbg.webp) no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}

.btn-zap {
    background-color: #268132;
    color: #fff;
}

.btn-zap:hover {
    background-color: #18431e;
    color: #fff;
}

.btn-primary {
    background-color: var(--fb-lime);
    border-color: var(--fb-lime);
    color: #1b2822;
}

.btn-primary:hover {
    background-color: var(--fb-green);
    border-color: var(--fb-green);
}

.btn-outline-francaboi {
    /* border-color: var(--fb-lime); */
    border-color: rgba(var(--fb-lime-rgb), 0.4);
    color: var(--fb-lime);
    border-radius: 2rem;
    padding: 0.5rem 2rem;
}

.btn-outline-francaboi:hover {
    border-color: rgb(var(--fb-lime-rgb));
    color: white;
    background-color: rgba(var(--fb-lime-rgb), 0.5);
}

.dark-group-text {
    background-color: #313131;
    color: #ccc;
    border-color: #303030;
}

.dark-input {
    background-color: #232323;
    color: #ccc;
    border-color: #303030;
}

input::placeholder {
    color: #ccc !important;
}

/* .content img:hover { */
.scaleImg img:hover {
    transform: scale(1.3);
    z-index: 1000;
    box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.5);
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
    border-radius: 1.2rem;
}

.content img {
    border-radius: 0.8rem;
}

/* floating menu */

.boxmenu {
    position: fixed;
    top: 40vh;
    left: 0px;
    bottom: 0px;
    padding: 0;
    margin: 0;
    /* width: 3em; */
    /* margin-top: -2.5em; */
    /* text-align: center; */
    z-index: 10;
}

.boxmenu a:hover {
    color: white;
}

.boxmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.boxmenu li {
    min-height: 38px;
    min-height: 38px;
    text-align: center;
    padding: 10px;
    /* background-color: var(--orange); */
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom-color: #000;
    margin-bottom: 1px;
}

.boxmenu li:hover {
    background-color: #000;
}

/* end floating menu */


/* text */

.content blockquote {
    position: relative;
    padding: 25px 50px 25px 50px;
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
    margin: 0;
    line-height: 1.6em;
    font-style: italic;
    border: none;
}

.content blockquote:before,
.content blockquote:after {
    font-family: 'FontAwesome';
    content: "\201C";
    position: absolute;
    font-size: 60px;
    opacity: 0.3;
    font-style: normal;
}

.content blockquote:before {
    top: 25px;
    left: 20px;
}

.content blockquote:after {
    content: "\201D";
    right: 20px;
    bottom: 0;
}

.wp-element-caption {
    color: #fff;
}

.txt-shadow {
    text-shadow: 2px 1px 2px #171717;
}

.fs-default {
    font-size: var(--fontsize);
}

.fs-7 {
    font-size: .9rem;
}

.fs-8 {
    font-size: .8rem;
}

.fs-11 {
    font-size: 1.1rem;
}

.fs-12 {
    font-size: 1.2rem;
}

.fs-20 {
    font-size: 2rem;
}

.fs-35 {
    font-size: 3.5rem;
}

.lh-12 {
    line-height: 1.2rem;
}

.lh-14 {
    line-height: 1.4rem;
}

.lh-18 {
    line-height: 1.8rem;
}

.lh-2 {
    line-height: 2rem;
}

.lh-25 {
    line-height: 2.5rem;
}

.lh-3 {
    line-height: 3rem;
}

.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500 !important;
    font-optical-sizing: auto;
}

.fw-600 {
    font-weight: 600 !important;
    font-optical-sizing: auto;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800 !important;
    font-optical-sizing: auto;
}

.fw-900 {
    font-weight: 900;
}

/* end text */


/* colors */

.orange {
    color: var(--orange);
}

.lime {
    color: var(--fb-lime);
}

.black {
    color: black;
}

.silver {
    color: rgb(154, 154, 154);
}

.white {
    color: white !important;
}

.primary-color {
    color: var(--fb-lime);
}

a.primary-color:hover {
    color: #fff;
}

/* end colors */


.mt-6, .mb-6 {
    margin-top: 4rem;
}

.my-6 {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.mb-6 {
    margin-bottom: 4rem;
}

.mt-7 {
    margin-top: 5rem;
}

.mb-7 {
    margin-bottom: 5rem !important;
}

.my-7 {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.mt-8 {
    margin-top: 6rem;
}

.mb-8 {
    margin-bottom: 6rem !important;
}

.my-8 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.mtop-5 {
    margin-top: 5rem;
}

.mtop-7 {
    margin-top: 8rem;
}

.mtop-10 {
    margin-top: 10rem;
}

.pad-140 {
    margin: 140px 0;
}


.dropdown-toggle:after {
    content: none
}

header a {
    color: var(--primary-color);
    /* cursor: pointer; */
}

strong, .bold {
    font-weight: 700;
}

.inline-list {
    list-style: none;
    display: flex;
}

.clear-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* offcanvas */

.offcanvas a {
    color: black;
}

.offcanvas a:hover {
    color: var(--fb-blue);
}

.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin-right: 45px !important;
    margin-bottom: 35px !important;
}

.alignright {
    float: right;
    margin-left: 45px !important;
    margin-bottom: 35px !important;
}

/* WP content */

.content {
    font-size: 1.1rem;
    line-height: 1.8rem;
}

.content h2 {
    margin-bottom: 2.4rem;
}

.content a {
    color: var(--fb-lime);
}

.content a:hover {
    color: var(--primary-color);
}

/* End WP Content */


/* Produtos */

.bg-prods-- {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-prods {
    content: "";
    background: url(assets/img/background-prods.webp) no-repeat;
    background-position: center top;
    min-height: 600px;
    background-size: contain;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.prod-pill {
    width: 240px;
    padding-top: 100px
}

.prod-pill-img {
    padding-top: 50px;
    padding-bottom: 90px;
}

.hero-title {
    font-size: 2.8rem;
    line-height: 2.8rem;
}

.hero-products {
    background: url(assets/img/produtos-img.webp) no-repeat center center;
    background-size: cover;
    top: 0;
    height: var(--prod-div-height);
    z-index: -1;
    position: absolute;
    clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
}

.hero-caption {
    padding-top: 30%;
}

.products-container {
    margin-top: var(--prod-div-topmargin);
    margin-bottom: 100px;
}

.product-grid {
    background: rgba(235, 235, 236, 0.05);
    border-radius: 16px;
}

.product-grid:hover {
    background: rgba(235, 235, 236, 0.1);
}

.fancybox-title-over {
    background-color: #fff !important;
}

#fancybox-title {
    font-weight: 800;
    text-transform: uppercase;
    background-color: #fff !important;
    color: black;
}

/* End Produtos */

/* Pagination */

.page-numbers {
    font-size: .9rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 10px 12px;
    /* background: rgb(31, 31, 31); */
    border: 1px solid rgb(78, 76, 76);
    line-height: 1;
    border-radius: 4px;
    color: #fff;
}

.page-numbers:hover {
    color: var(--orange);
}

.page-numbers.current {
    padding: 10px 12px;
    background: rgb(31, 31, 31);
    border: 1px solid var(--background-color);
    line-height: 1;
    border-radius: 4px;
    color: #fff;
}

/* Forms */

.dark-form-control {
    background-color: rgba(135, 135, 135, 0.1);
    border-color: rgba(98, 98, 98, 0.5);
    border-radius: 22px;
    color: #ccc;
}

/* End Forms */

/* Contact 7 */

.wpcf7-form p label span {
    display: block;
    margin-top: 7px !important;
}

/* End Contact 7 */


/* Receitas */

.hero-receitas {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--prod-div-height);
    width: 100%;
}

.hero-receitas::before {
    content: "";
    background-repeat: no-repeat !important;
    background-position: center center;
    background-size: cover !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
    filter: brightness(50%) !important;
}

/* End receitas */


/* menu */

nav.header-nav ul li {

    background-color: transparent;
    /* Main item background color */

    color: white;
    /* Main item text color */

    padding: 0 1rem;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Initially hide the sub-menu */

nav ul li ul {

    display: none;

    position: absolute;
    /* Position the dropdown */

    /* Dropdown background color */
    color: #000;
    background-color: #ffffff;
    border-radius: 4px;

    z-index: 100;
    /* Ensure the dropdown is above other content */

    margin: 0;
    padding: 0.9rem 0.7rem;
    text-align: start;
    font-size: 1rem;
}

nav ul li ul li {
    line-height: 1.8rem;
}

nav ul li ul li a {
    color: #000;
    font-weight: 600;
}

nav ul li ul li a:hover {
    color: #3c3c3c;
}

/* Reveal the sub-menu on hover over the parent item */

nav ul li:hover>ul {

    display: block;
    /* Show dropdown */

}

/* Style individual dropdown items */

nav ul li ul li {

    display: block;
    /* Dropdown items should be block level */

}


/* end menu */


.dt-search input {
    background-color: transparent;
    /* border-color: var(--background-color-lighter); */
    border-color: #656565;
}

.dt-paging li.dt-paging-button.disabled button {
    background-color: var(--background-color-darker) !important;
    color: white;
    border-color: var(--background-color-lighter);
}

.dt-paging li.dt-paging-button.active button {
    background-color: var(--fb-blue) !important;
    color: white;
    border-color: var(--background-color-lighter);
}

.dt-paging li.dt-paging-button.active button:hover {
    background-color: var(--background-color-darker) !important;
    color: white;
    /* border-color: var(--background-color-lighter); */
}

.dt-paging-button button {
    background-color: var(--background-color);
    color: white;
    border-color: var(--background-color-lighter);
}

.dt-paging-button button:hover {
    background-color: var(--background-color-darker);
    color: white;
    border-color: var(--background-color-lighter);
}

@media (min-width: 320px) and (max-width: 640px) {

    .footer {
        padding: 3rem;
    }

    body {
        font-size: 17px;
        font-weight: 200;
        background-position: 50% top;
        background-color: var(--background-color);
    }

    .logo {
        width: 180px;
    }

    .bg-prods {
        background: url(assets/img/background-prods.webp) no-repeat;
        background-position: center 30%;
        min-height: 300px;
        background-size: auto;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
    }

    .hero-caption {
        padding-top: 70%;
    }

    .hero-title {
        font-size: 2.8rem;
        line-height: 2.8rem;
    }

    .content-container {
        margin: 0;
    }

    .content {
        font-weight: 200;
        line-height: 2rem;
    }

    .content h2 {
        margin-bottom: 2.4rem;
    }

    .content img {
        border-radius: 1.4rem;
        margin-bottom: 1.4rem;
    }

    .alignleft {
        float: left;
        margin-right: 0 !important;
        margin-bottom: 35px !important;
    }

    .alignright {
        float: right;
        margin-left: 0 !important;
        margin-bottom: 35px !important;
    }

    .mtop-10 {
        margin-top: 5rem;
    }

    .fs-11 {
        font-size: .9rem;
    }

    .pad-140 {
        margin: 40px 0;
    }

    .mb-8 {
        margin-bottom: 2.5rem !important;
    }

    .glass {
        background: rgba(235, 235, 236, 0.05);
        /* border-radius: 50%/24%; */
        border-radius: 44px;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        border: none;
    }

    .prod-pill {
        width: 85%;
        padding-top: 50px
    }

    .prod-pill-img {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .icon-24 {
        width: 32px;
        height: auto;
        padding-right: 4px;
    }
}