/*
Theme Name:   BeMo
Description:  Light weight, stripped back theme
Author:       Katrien Moore
Text Domain:  bemo
Author URI:   https://www.bemoore.com
Version:      1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*font-family: 'Arimo', sans-serif;
font-family: 'Catamaran', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Nunito', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Rubik', sans-serif;*/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    font-size: 62.5%;
}

:root {
    --text: #333;
    --meta: #9F9F9F;
    --heading: #25A8E0;
    --sub-heading: #0E65A3;
    --link: #5D25E0;
    --contrast: #BA25E0;
    --header-font: 'Roboto', sans-serif;
    --text-font: 'Nunito', sans-serif;

}


body {
    color: var(--text);
    font-size: 1.6rem;
    line-height: 2rem;
    font-family: var(--text-font);
    font-weight: 400;
    box-sizing: border-box;
}

a,
p,
li {
    font-size: 1.6rem;
}

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

a:hover {
    color: var(--heading);
}

h1,
h2 {
    color: var(--heading);
    font-weight: 500;
    font-family: var(--header-font);
    line-height: 1.3;
    margin-bottom: 2.5rem;
}


h3,
h4,
h5,
h6 {
    color: var(--sub-heading);
    font-weight: 500;
    font-family: var(--header-font);
    line-height: 1.3;
    margin-bottom: 2.5rem;
}

h1,
.h1 {
    font-size: 3.4rem;
}

h2,
.h2 {
    font-size: 3rem;
}

h3,
.h3 {
    font-size: 2.4rem;
}

h4,
.h4 {
    font-size: 2rem;
}

h5,
.h5 {
    font-size: 1.8rem;
}

h6,
.h6 {
    font-size: 1.6rem;
}

p {
    margin-bottom: 2rem;
    line-height: 1.75;
}

.bemo-wrapper {
    width: 70% !important;
    margin: 0 auto !important;
    padding: 3rem 1rem;
    clear: both;
}



.bemo-flex {
    display: flex;
}


.no-padding {
    padding: 0rem;
}

.margin-top-150 {
    margin-top: 15rem;
}



img {
    max-width: 100%;
    height: auto;
}

/*--------header-----*/

.menu-main-container,
.menu {
    height: 100%;
}

#header {
    background: #dedede;
}



/*------------menu--------------*/
#header > div > div.col-md-8.col-sm-12.header-nav-1.match_height {
    display: flex;
    justify-content: flex-end;
}

/*----------header--------*/
.header-logo-2 {
    text-align: center;
}

.header-nav-2 > .navbar {
    justify-content: center;

}

.header-logo {
    height: 12rem;
    width: auto;
    padding: 1rem;
}

.topbar {
    height: 5rem;
    background-color: #333;
}

/*---------footer-----*/


#footer {
    background: var(--heading);
}

#footer h4 {
    color: white;
}

.single-footer-widget p,
.single-footer-widget a,
.single-footer-widget li {
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 5px;
}


.single-footer-widget {
    padding: 0rem 1rem;
}

.single-footer-widget {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.bemoore {
    text-align: center;
    padding-top: 1.5rem;
}

img.copyright-img {
    height: 40px;
    width: auto;
}

.bemoore p,
.copyright span {
    color: var(--meta);
}

.copyright {
    padding-top: 1.5rem;
}

.menu-footer-container {
    width: 100%;
    text-align: center;
}

ul#menu-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style-type: none;
}

ul#menu-footer li {
    padding: 1rem 2rem;
}


/*---------------pages-------------------*/
.page {
    min-height: 500px;
}

ul {

    padding-left: 2rem;
    list-style-position: outside !important;
}

/*------------homepage ------------*/
.post-wrapper {
    padding: 2rem;
}

.post-inside {
    padding: 1rem;
}

.news {
    clear: both;
}

.home-post-date {
    color: var(--meta);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;

}

div.home-post-title > h4 {
    margin-bottom: 1.5rem;
}

/*----------posts on home 2 full images---*/
.post-wrapper-2 {
    padding: 0px;
}


.post-inside-2 {
    min-height: 500px;
    color: white;
}

.post-inside-2 > article {
    padding: 40px;
    background: rgb(0, 0, 0, 0.4);
}

.home-post-title-2 > h4 {
    color: white;
    margin-bottom: 1.5rem;
}

.home-post-date-2 {
    font-size: 12px;
}

div.post-home-read-more-2 > p > a {
    background: var(--heading);
    padding: 10px;
    color: white;
}

.post-inside-2 {
    position: relative;
}

.post-inside-2 > article {
    position: absolute;
    bottom: 0;
    width: 100%;
}

/*------------open section -------------*/
.open-section {

    -webkit-box-shadow: inset 0px 0px 0px 800px rgb(46 48 139 / 25%);
    -moz-box-shadow: inset 0px 0px 0px 800px rgba(46, 48, 139, 0.25);
    box-shadow: inset 0px 0px 0px 800px rgb(46 48 139 / 25%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.open-section p {
    color: white;
    font-size: 2rem;
    line-height: 3rem;
    margin-bottom: 1rem;
    margin: 0 auto;
    letter-spacing: 0.1rem;
    text-align: center;

}

.width-60-90 {
    width: 60%;
    margin: 0 auto;
}

.open-section-title {
    color: #FFFFFF;
    font-size: 5rem;
    line-height: 6rem;
    font-weight: 700;
    text-align: center;
    padding-top: 40px;
}

/*----------categories-------*/
.entry-title.archive-title {
    margin-bottom: 5rem;
}

.wrapper {
    padding: 1rem;
    border: .1rem solid #dedede;
    box-shadow: .5rem .5rem 1.2rem #dedede;
}

div.post-title-div > h4 > a {
    color: var(--text);

}

div.post-title-div > h4 {
    margin: 1.5rem 0rem;
}

.post-read-more > p {
    text-align: center;
    padding: 1rem;
    background: var(--heading);
    margin-bottom: 0rem;
}


.post-read-more > p > a,
.post-read-more > p > a:hover {
    color: white;
}

#content > div > div > nav > div.nav-links {
    margin: 5rem 0rem;
    font-weight: bold;
}

.pagination {
    justify-content: center;
}

.post-excerpt.match_height {
    margin-bottom: 2rem;
}

div.single-post.col-md-12.layout-2 > div.wrapper > article > div {
    display: flex;

}

div.single-post.col-md-12.layout-2 {
    margin-bottom: 5rem;
}

.layout-2-text {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-img-layout-2 {
    display: flex;
    align-items: center;
}

#search-logo {
    width: 200px !important;
    height: auto;

}

/*--------------single posts------------*/
.sidebar-div {
    padding-left: 4rem;
}

div.single-post-img > img {
    max-width: 100%;
    height: auto;
}

div.single-post-tite > h2 {
    color: var(--text);
    margin: 2rem 0rem;
}

.single-post-meta {
    display: flex;
    padding: 1rem 0rem;
    margin: 1rem 0rem;
    border-bottom: .1rem solid var(--meta);
    border-top: .1rem solid var(--meta);
}

.single-post-meta > div {
    padding-right: 2rem;
    color: var(--meta);
}

.single-post-meta > div > i {
    padding-right: .8rem;
    --fa-primary-color: var(--meta);
    --fa-secondary-color: var(--heading);
}

div.single-post-meta > div > a {
    color: var(--meta);
}

.single-pagination {
    margin: 2rem 0rem;
    display: flex;
    justify-content: space-between;
}

.sidebar-div > div > .widget {

    margin-bottom: 5rem;

}

/*-------------sidebar------------------*/



.sidebar-widget > h4 > span {
    color: var(--text);
}

.sidebar-widget > h4 {
    margin-bottom: 2rem;
}


div.col-4.recent-post-img > a > img {
    padding: 1rem;
    border-radius: 100px;
    box-shadow: 2px 2px 5px #eeeeee;
}

.recent-post-title > a {
    color: var(--text);
}

.recent-post-date {
    color: var(--meta);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.col.recent-post-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/*-----------------page banner---------------*/

@keyframes moveUp {
    0% {
        transform: translate(-50%, 100%);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, 50%);
        opacity: 1;
    }
}

.page-banner {
    position: relative;
    margin-bottom: 30px;
}

.page-banner-image-outer {
    background: #666;
}

.page-banner-image {
    height: 50rem;
    background-size: cover;
    opacity: 0.8;
    background-position: center center;
}

h1.banner-text {
    color: #fff;
    font-size: 6rem;
    line-height: 7rem;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    text-align: center;
    padding: 0rem 5rem;
    animation-name: moveUp;
    animation-duration: 2s;
    animation-timing-function: ease-out;
}


/*---------------search form------------------------*/
.widget.widget_search > form > label {
    width: 100%;
}

.widget.widget_search > form > input {
    padding: 1rem;
    border: none;
    width: 100%;
    background: var(--meta);
    color: whitevar(--heading);
}

.widget.widget_search > form > label > input {
    padding: 1rem;
    width: 100%;
    border: 1px solid var(--meta);
}


/* Style for the search form */
.search-form {
    position: relative;
    margin: 0 auto;
    max-width: 300px;
    /* Adjust as needed */
}

.search-form input[type="search"] {
    width: 100%;
    padding: 10px 15px;
    border-radius: 20px;
    /* Adjust border radius as needed */
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
}

.search-form button[type="submit"] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 5px;
}

/* Hide the text of the button */
.search-form button[type="submit"] span {
    display: none;
}

/* Style the Font Awesome icon */
.search-form button[type="submit"] i {
    font-family: "Font Awesome 6 Pro";
}

.searchform {
    height: 100%;
}


/*-----accordion---------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: none;
    border-bottom: 1px solid var(--heading) !important;
    border-radius: 0px !important;
    background: none !important;
    font-weight: bold !important;
    color: var(--heading) !important;
    margin-bottom: 30px !important;
}

.ui-widget-content {
    border: none !important;
    background: #dedede;
    font-family: 'Nunito Sans';
    color: var(--text);
    line-height: 1.4;
}

/*--custom cart icon-*/
.custom-cart-icon {
    position: relative;
}

.cart-icon-link {
    position: relative;
    display: inline-block;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    color: #ffffff !important;
    font-size: 12px;
    z-index: 100 !important;
    /* Ensure count is above circle */
}

.cart-count:before {
    content: "\f111";
    /* FontAwesome icon for pulsating circle */
    font-family: FontAwesome;
    animation: pulse 1s infinite alternate;
    /* Add pulsing animation */
    display: inline-block;
    width: 50px !important;
    /* Adjust size to fit count */
    height: 50px !important;
    /* Adjust size to fit count */
    text-align: center;
    line-height: 50px !important;
    /* Adjust line height to center count */
    border-radius: 50%;
    /* Make it a circle */
    background-color: transparent;
    /* Transparent background for the pulsating circle */
    margin-right: 5px;
    /* Adjust spacing between circle and count */
    position: relative;
    color: #ff0000;
    /* Color for the circle */
    z-index: -100;
}

.cart-count:before,
.cart-count span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.cart-count span {
    z-index: 1;
    /* Ensure count is above circle */
}

/*---------up arrow ------------*/
#footer {
    position: relative;
}

.bemo-back-to-top {
    position: fixed;
    bottom: 150px;
    right: 5%;
}

/*zoom effects for image*/
/*source https://w3bits.com/css-image-hover-zoom/*/
/* the classes set up below are to be applied to the wrapper div around the image
example:
<div class="img-hover-zoom">
  <img src="/path/to/image/" alt="This zooms-in really well and smooth">
</div>*/

/* normal zoom*/
/* [1] The container */
.img-hover-zoom {

    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
    transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
    transform: scale(1.5);
}

/*quick zoom in --> class becomes: .img-hover-zoom--quick-zoom */
.img-hover-zoom--quick-zoom {

    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom--quick-zoom img {
    transform-origin: 0 0;
    transition: transform .25s, visibility .25s ease-in;
}

.img-hover-zoom--quick-zoom:hover img {
    transform: scale(2);
}

/*point zoom class becomes: .img-hover-zoom--point-zoom*/
.img-hover-zoom--point-zoom {

    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom--point-zoom img {
    transform-origin: 65% 75%;
    transition: transform 1s, filter .5s ease-out;
}

.img-hover-zoom--point-zoom:hover img {
    transform: scale(5);
}

/*zoom and rotate class becomes: .img-hover-zoom--zoom-n-rotate*/
.img-hover-zoom--zoom-n-rotate {

    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom--zoom-n-rotate img {
    transition: transform .5s ease-in-out;
}

.img-hover-zoom--zoom-n-rotate:hover img {
    transform: scale(2) rotate(25deg);
}

/*zoom in slow motion class becomes: .img-hover-zoom--slowmo*/
.img-hover-zoom--slowmo {

    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom--slowmo img {
    transform-origin: 50% 65%;
    transition: transform 5s, filter 3s ease-in-out;
    filter: brightness(150%);
}

.img-hover-zoom--slowmo:hover img {
    filter: brightness(100%);
    transform: scale(3);
}

/*Brighten and Zoom-in class becomes: .img-hover-zoom--brightness*/
.img-hover-zoom--brightness {

    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom--brightness img {
    transition: transform 2s, filter 1.5s ease-in-out;
    transform-origin: center center;
    filter: brightness(50%);
}

.img-hover-zoom--brightness:hover img {
    filter: brightness(100%);
    transform: scale(1.3);
}

/*Horizontal Zoom-n-pan class becomes: .img-hover-zoom--zoom-n-pan-h*/
.img-hover-zoom--zoom-n-pan-h {

    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom--zoom-n-pan-h img {
    transition: transform .5s ease-in-out;
    transform: scale(1.4);
    transform-origin: 100% 0;
}

.img-hover-zoom--zoom-n-pan-h:hover img {
    transform: scale(1.5) translateX(30%);
}

/*Vertical Zoom-n-pan class becomes:.img-hover-zoom--zoom-n-pan-v*/
.img-hover-zoom--zoom-n-pan-v {

    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom--zoom-n-pan-v img {
    transition: transform .5s ease-in-out;
    transform: scale(1.4);
    transform-origin: 0 0;
}

.img-hover-zoom--zoom-n-pan-v:hover img {
    transform: scale(1.25) translateY(-30%);
}

/*Blur-out with Zooming-in class becomes: .img-hover-zoom--blur*/
.img-hover-zoom--blur {
    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom--blur img {
    transition: transform 1s, filter 2s ease-in-out;
    filter: blur(2px);
    transform: scale(1.2);
}

.img-hover-zoom--blur:hover img {
    filter: blur(0);
    transform: scale(1);
}

/* Colorize with zooming-in class becomes:.img-hover-zoom--colorize*/
.img-hover-zoom--colorize {
    overflow: hidden !important;
    /* [1.2] Hide the overflowing of child elements */
}

.img-hover-zoom--colorize img {
    transition: transform .3s, filter 1.5s ease-in-out;
    filter: grayscale(100%);
}

.img-hover-zoom--colorize:hover img {
    filter: grayscale(0);
    transform: scale(1.1);
}

/*------------lists-----------*/
ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

ol > li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

ol > li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;
}

li ol > li {
    margin: 0;
}

li ol > li:before {
    content: counters(item, ".") " ";
}


/*comments template*/
.comments-area {
    margin-top: 50px;
    border-top: 1px solid #dedede;
    margin-top: 30px;
}

.logged-in-as > a {
    color: var(--heading);
}

#comment {
    width: 500px;
    border: 2px solid #dedede !important;
    border-radius: 5px;
}

#commentform > p.form-submit > input.submit {
    background: var(--heading);
    color: white;
    padding: 5px 15px;
    border: 1px solid var(--heading);
    border-radius: 10px;
}

ul.striped-list > li:nth-of-type(odd) {
    background-color: #F7F7F7;
}

ul.striped-list > li {
    border: 1px solid #dedede;
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 10px;
    list-style-type: none !important;
}

ul.children > li {
    list-style-type: none !important;
    padding: 10px 20px;
}

div.comment-author.vcard > b > a {
    color: var(--heading);
}

#div-comment-2 > footer > div.comment-metadata > a {
    color: var(--meta);
}

.comment-content {
    padding: 10px 0px;
}

.comment-content > p {
    margin-bottom: 5px;
}

.reply > a {
    color: var(--text);
    font-weight: bold;
}

/*-------------mobile--------------*/

/* bootstrap breakpoints 

Bootstrap breakpoints
X-Small             ->   None   ->  <576px
Small               ->  sm      ->  ≥576px
Medium              ->	md      ->  ≥768px
Large               ->  lg      ->  ≥992px
Extra large         ->  xl      ->  ≥1200px
Extra extra large   ->	xxl     ->  ≥1400px

*/


@media(min-width:1800px) {
    .page-banner-image {
        height: 80rem !important;
    }
}



@media(max-width:1200px) {
    .bemo-wrapper {
        width: 95% !important;
    }

    .post-img-layout-2 {
        display: flex !important;
        align-items: center !important;
    }
}

@media(max-width:992px) {
    .width-60-90 {
        width: 90% !important;
        margin: 0 auto;
    }

    .margin-top-150 {
        margin-top: 0rem !important;
    }
}

@media(max-width:768px) {

    .bemo-flex {
        display: block !important;
    }

    .bemo-flex > div {
        width: 100%;
    }

    .sidebar-div {
        padding-left: 0rem !important;
    }

    .open-section-title {
        font-size: 4rem;
    }

    .bemoore,
    .copyright {
        text-align: left;
    }

    .page-banner-image.banner-image-mobile-left {
        background-position: center left;
    }

    .page-banner-image.banner-image-mobile-right {
        background-position: center right;
    }

    .page-banner-image.banner-image-mobile-center {
        background-position: center center;
    }
}

@media(max-width:576px) {
    .open-section p {
        font-size: 1.6rem !important;
        line-height: 2rem !important;
    }

    .open-section-title {
        font-size: 3rem !important;
        line-height: 3.5rem !important;
    }
}

@media(max-width:350px) {
    .open-section p {
        letter-spacing: normal !important;
    }
}