@charset "utf-8";

/*
    Theme Name: MFOG Parent Theme
    Description: Mfog Basic Starter Theme
    Version: 4.0
    Author: Studio MFog
    Author URI: https://www.mfogdesign.com/
    Text Domain: Studio Mfog 
    Tested up to: 6
    License:
    License URI:
    Requires PHP
    

*/
html{
	background-color: var(--mfog_color_1);
	background-blend-mode: var(--bg-color-overlay);
}
* {
  --bs-primary: var(--mfog_color_1) !important;
  --bs-secondary: var(--mfog_color_2) !important;
  --bs-accordion-active-bg: var(--mfog_color_1) !important;
  --bs-btn-font-family: var(--mfog_font_btn) !important;
  --bs-btn-font-size: var(--mfog_font_size_btn) !important;
  --bs-btn-border-radius: 0 !important;
  --bs-btn-padding-x: 0 !important;
  --bs-btn-padding-y: 0 !important;
  --bs-btn-bg: var(--mfog_btn_bg) !important;
  --bs-btn-hover-bg: var(--mfog_btn_bg_hover) !important;
  --bs-btn-hover-color: var(--mfog_btn_colour_hover) !important;
  --bs-btn-active-color: var(--mfog_btn_colour_hover) !important;
  --bs-btn-active-bg: var(--mfog_btn_bg_hover) !important;
  --bs-btn-active-border-color: var(--mfog_btn_border_hover) !important;
  --bs-btn-color: var(--mfog_btn_colour) !important;
  --bs-btn-hover-border-color: var(--mfog_btn_border_hover) !important;
  --bs-btn-border-color: var(--mfog_btn_border) !important;
  --bs-body-color: var(--mfog_color_body) !important;
  --bs-body-bg: var(--mfog_color_body_bg) !important;
  --bs-body-font-size: var(--mfog_font_size_p) !important;
  --bs-font-sans-serif: var(--mfog_font_p) !important;
  --bs-link-color-rgb: var(--mfog_color_1) !important;
  --bs-link-color-rgb: var(--mfog_color_1) !important;
  --bs-btn-line-height: 1.2 !important;
  box-sizing: border-box !important;
}
/* .col-sm-2_5{
  width:20%;
} */
/* Button styles */
.btn {
  padding: var(--mfog_btn_padding) !important;
  border-radius: var(--mfog_btn_radius);
}
.accordion-button:focus {
  box-shadow: none !important;
}
.accordion-button:hover {
  background-color: var(--bs-accordion-active-bg) !important;
}
main{
  overflow: hidden;
}

main a,
header a,
footer a {
  color: var(--mfog_color_body);
}
main a:hover,
header a:hover,
footer a:hover {
  color: var(--mfog_color_1);
}

.container-fluid {
padding: 0 30px;
}
.mfog-page-builder .container-fluid {
  padding: 0;
}
.container {
  max-width: var(--mfog_site_width) !important;
padding: 0 30px;
}
.mfog-page-builder .container {
padding: 0;
}
/* Typography */
main h1,
header h1,
footer h1, main h1 a {
  font-family: var(--mfog_font_h1) !important;
  font-size: calc(var(--mfog_font_size_h1) - 2vw) !important;
  line-height: 110%;
}
main h2,
header h2,
footer h2, main h2 a {
  font-family: var(--mfog_font_h2) !important;
  font-size: calc(var(--mfog_font_size_h2) - .7vw)!important;
  line-height: 120%;
}
main h3,
header h3,
footer h3, main h3 a {
  font-family: var(--mfog_font_h3) !important;
  font-size:calc(var(--mfog_font_size_h3) - .5vw) !important;
  line-height: 130%;
}
main h4,
header h4,
footer h4, main h4 a {
  font-family: var(--mfog_font_h4) !important;
  font-size:calc(var(--mfog_font_size_h4) - .4vw) !important;
  line-height: 140%;
}
main h5,
header h5,
footer h5, main h5 a {
  font-family: var(--mfog_font_h5) !important;
  font-size: calc(var(--mfog_font_size_h5) - .3vw) !important;
  line-height: 150%;
}
main h6,
header h6,
footer h6, main h6 a{
  font-family: var(--mfog_font_h6) !important;
  font-size: calc(var(--mfog_font_size_h6) - .3vw) !important;
  line-height: 150%;
}
main p,
main,
header p,
main a,
main li,
header a,
footer a,
footer p {
  font-family: var(--mfog_font_p);
  font-size: var(--mfog_font_size_p);
  line-height: 150%;
}

header a{
  display: inline-block;
  width: 100%;
}
.accordion-header{
  line-height: 60%;
}
body.customize-support {
  margin: 0 !important;
  padding: 0 !important;
}
.site-logo .custom-logo {
  border-radius: 50%;
}
.site-logo .custom-logo {
  border-radius: 50%;
  max-width: 80px;
  height: auto;
}

/* error 404 */
.error-404 section .row {
  padding: 2em 30px;
  min-height: 80vh;
  height: auto;
  margin: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.error-404 .col {
  text-align: center;
}
.error-404 h1 {
  font-size: 120px !important;
  margin-bottom: 20px;
}
.error-404 h5 {
  margin-bottom: 2em;
}

/* Search form styles */
header .search-form-container{
  width: 60px;
}
.search-form-container:has(.searching){
width:100%; 
}
.search-form {
  transition: .5s ease-in-out;
  /* position: absolute;
    top: 50%;
    right: 0; */
  width: 60px;
  /* transform: translateY(-50%); */
  /* transform-origin: right center;  */
  z-index: 300;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: end;
  pointer-events: auto;
}
.search-form input {
  transition: all .5s ease;
  color: black;
  border: 0px solid black;
  border-bottom: 1px solid black;
  background-color: transparent;
  /* border-radius: 20px; */
  padding: 10px 50px 10px 15px;
  outline: 0 none;
  width: 100%;
  height: 40px;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  cursor: pointer;
}
.search-form.searching input {
  transition: .5s ease;
  opacity: 1;
}
.search-form input::-webkit-input-placeholder {
  color: black;
  opacity: 1;
}
.search-form input::-moz-placeholder {
  color: black;
  opacity: 1;
}
.search-form input:-ms-input-placeholder {
  color: black;
  opacity: 1;
}
.search-form input:-moz-placeholder {
  color: black;
  opacity: 1;
}
.search-form.searching input:-moz-placeholder {
  opacity: 1;
}
.search-form .search-submit {
  top: 40px;
  visibility: hidden;
  position: absolute;
  border: none;
  background: transparent;
  width: 30px;
  cursor: pointer;
  pointer-events: auto;
}
.search-form:after {
  pointer-events: none;
}

.search-form.searching {
  width: 100%;
}
.search-form.searching input {
  color: black;
}

.search-form:after {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  position: absolute;
  color: black;
  right: 25px;
  transform: translateY(-50%);
  height: auto;
  z-index: 5;
  top: 50%;
  z-index: 5;
}

.search-form-container {
  display: flex;
  justify-content: end;
}

/* search results*/
.search-results section .row {
  padding: 2em 30px;
  min-height: 80vh;
  height: auto;
  margin: 0 !important;
  display: flex;
  color: black;
}
.search-results .search-form {
  width: 100%;
  opacity: 1;
}
.search-results .search-form input {
  width: 100%;
  opacity: 1;
  color: black !important;
}

/* header styles */
.site-logo .navbar-brand{
  margin-right: 0;
}
#main_menu li {
  padding: 0 15px;
}
header .site-logo {
  flex: 0 0 15%;
}
header .menu-main-menu-container {
  flex: 0 0 85%;
}
header {
  display: flex;
  align-items: center;
}
header .menu-main-menu-container .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
}
header .menu-main-menu-container .menu li {
  padding: 0 15px;
  list-style-type: none;
}

/* footer styles */


.footer,
.footer p,
.footer a,
.footer-copyright,
.footer-copyright a {
  margin: 0;
  color: white;
}


/* Bootstrap elements */

/* Carousel */
.carousel-item {
  max-height: 100vh;
}

/* card */
.column-content:has(.content-card), .article:has(.content-card)  {
  display: flex;
}
.content-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.content-card .card .card-body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.content-card .card .card-body .card-text {
  flex: 1 0 auto;
}
.content-card .card-body a {
  align-self: flex-start;
}

/* Blog layouts */

.blog-home .card-body, .portfolio-archive .card-body{
margin-left: .5em;
}
.blog-home article, .portfolio-archive  article {
  padding: 1em 0;
}
.blog-layout-1 article, .portfolio-layout-1 article {
  display: flex;
  align-items: center;
}
.portfolio-layout-1, .blog-layout-1, .portfolio-layout-2, .blog-layout-2{
  margin: 1em 0;
}

.portfolio-layout-1 img, .blog-layout-1 img{
  width: 100%;
}

.portfolio-layout-1 .card, .blog-layout-1 .card{
border-radius: 0;
border: 0px solid black;
}

.blog-layout-1 .size-thumbnail.wp-post-image,
.blog-layout-2 .size-thumbnail.wp-post-image, .portfolio-layout-1 .size-thumbnail.wp-post-image,
.portfolio-layout-2 .size-thumbnail.wp-post-image {
  display: none;
}
 
.blog-layout-1 article .post-image,
.blog-layout-2 article .post-image, .portfolio-layout-1 article .post-image,
.portfolio-layout-2 article .post-image  {
  display: initial;
  margin-right: 2em;
} 
.blog-layout-1 .card-body, .portfolio-layout-1 .card-body{
  max-width: 100%;
  padding:1em 0;
  margin:0;
}

.single-portfolio .portfolio-single-img, .single-post .blog-single-img{
width:100%;
position: relative;
top:50%;
transform: translateY(-20%);
}
.single-portfolio .portfolio-img, .single-post .blog-img {
  overflow: hidden;
  max-height: 450px;
  display: inline-block;
}

.single-portfolio h2, .single-post h2{
  margin: 0em 0 .5em 0;
}
.mfog-page-builder main{
  padding: 0 !important;
}
@media only screen and (min-width: 576px) {
  /* Layout */
  main h1,
header h1,
footer h1, main h1 a {
  font-family: var(--mfog_font_h1) !important;
  font-size: calc(var(--mfog_font_size_h1) - .3vw) !important;
  line-height: 110%;
}
main h2,
header h2,
footer h2, main h2 a {
  font-family: var(--mfog_font_h2) !important;
  font-size: var(--mfog_font_size_h2)!important;
  line-height: 120%;
}
main h3,
header h3,
footer h3, main h3 a {
  font-family: var(--mfog_font_h3) !important;
  font-size:calc(var(--mfog_font_size_h3) - .5vw) !important;
  line-height: 130%;
}
main h4,
header h4,
footer h4, main h4 a {
  font-family: var(--mfog_font_h4) !important;
  font-size:calc(var(--mfog_font_size_h4) - .4vw) !important;
  line-height: 140%;
}
main h5,
header h5,
footer h5, main h5 a {
  font-family: var(--mfog_font_h5) !important;
  font-size: calc(var(--mfog_font_size_h5) - .3vw) !important;
  line-height: 150%;
}
main h6,
header h6,
footer h6, main h6 a{
  font-family: var(--mfog_font_h6) !important;
  font-size: calc(var(--mfog_font_size_h6) - .3vw) !important;
  line-height: 150%;
}

}

@media only screen and (min-width: 768px) {
  /* Layout */
  main h1,
header h1,
footer h1, main h1 a {
  font-family: var(--mfog_font_h1) !important;
  font-size: var(--mfog_font_size_h1) !important;
  line-height: 110%;
}
main h3,
header h3,
footer h3, main h3 a {
  font-family: var(--mfog_font_h3) !important;
  font-size:var(--mfog_font_size_h3) !important;
  line-height: 130%;
}
main h4,
header h4,
footer h4, main h4 a {
  font-family: var(--mfog_font_h4) !important;
  font-size:var(--mfog_font_size_h4) !important;
  line-height: 140%;
}
main h5,
header h5,
footer h5, main h5 a {
  font-family: var(--mfog_font_h5) !important;
  font-size:var(--mfog_font_size_h5) !important;
  line-height: 150%;
}
main h6,
header h6,
footer h6, main h6 a{
  font-family: var(--mfog_font_h6) !important;
  font-size: var(--mfog_font_size_h6) !important;
  line-height: 150%;
}


  
    /* portfolio and blog grids */
  .portfolio-layout-1 .flex-fill, .blog-layout-1 .flex-fill{
  display: flex;
  flex-direction: row;
  align-items: center;
  
}
.blog-layout-1 .card-body, .portfolio-layout-1 .card-body{
  max-width: 50%;
    padding:1em 2em;
}


.single-portfolio h2, .single-post h2{
  margin: .5em 0 .5em 0;
}

header .search-form.searching {
  width: 100%;
  max-width: 350px;
}
.search-form.searching {
  width: 100%;
}
header .search-form {
  max-width: 350px;
}
.search-form:after {

  right: 15px;
}


}
@media only screen and (min-width: 992px) {
  /* Layout */
  .col-sm-2_5{
  width:20%;
}
}

@media only screen and (min-width: 1200px) {
  /* Layout */


/* Portfolio and blog */
.blog-layout-1 .card-body, .portfolio-layout-1 .card-body{
  max-width: 60%;
}


}