/*
Theme Name: Maiko
Theme URI: http://demo.casethemes.com/maiko/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/
Description: Maiko is a premium WordPress theme designed for architecture portfolios, agencies, and businesses. With a clean and modern design, it provides responsive layouts, grid-based sections, and extensive customization options to showcase your projects effectively.
Version: 1.0.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maiko
Tags: architecture, portfolio, design, creative, modern, minimalist, photography, agency, responsive, grid
Requires at least: 5.8 or Higher
Requires PHP: 7.4 or Higher
Tested up to: 6.4

Copyright (c) 2024 Case-Themes. All rights reserved.
This theme is licensed under the GPL-2.0+ license.
*/

/*change website text to 16px*/
body {
	font-size: 16px;
}

/*change font size for big screens*/
@media screen and (min-width: 1921px) {
    body {
		font-size: 22px !important;
	}
	.pxl-post--content, .pxl-item--description, .pxl-accordion1.style3 .pxl-accordion--content, .pxl-text-carousel2 .pxl-swiper-slide .pxl-item--desc, .pxl-list1 .pxl-item-content, .pxl-process1 .pxl--item, .pxl-text-carousel4 .pxl-swiper-slide .pxl-item--desc {
		font-size: 22px !important;
	}
	.pxl-item--inner.ft-gt p {
		font-size: 25px !important;
	}
	body p, .pxl-post--content, .pxl-item--description, .pxl-item--inner p, .pxl-accordion1.style3 .pxl-accordion--content {
		line-height: 33px !important;
	}
	h3 {
		font-size: 31px;
	}
	h3.pxl-item--title, h3.pxl-post--title, h5.pxl-post--title a, .pxl-accordion1.style3 .pxl-accordion--title {
		font-size: 31px !important;
	}
	.pxl-text-carousel2 .pxl-swiper-slide .pxl-item--desc {
		padding: 0 30px;
	}
	
	/*fix recent purchase layout on big screen*/
	.single-portfolio .pxl-testimonial-carousel5 .pxl-item--desc {
		font-size: 22px !important;
	}

	.single-portfolio .pxl-testimonial-carousel5 .pxl-swiper-thumbs {
		min-width: 30%;
		width: 30%;
	}

	.single-portfolio .pxl-testimonial-carousel5 .pxl-swiper-container {
		width: 70%;
		margin: 0px;
	}

	.single-portfolio .elementor-section-boxed .elementor-container .elementor-section-boxed .elementor-container {
		width: 100%;
		max-width: 100%;
	}

	.single-portfolio .pxl-item--image.hover-noise img {
		width: 100%;
	}
}
/*-------Change Preloader Color-------*/

#pxl-loadding, .pxl-loader .loader-line-mask .loader-line:before {
    background-color: #333333;
}

/*-------Change Sticky Header Mobile bg to gray */
#pxl-header-mobile .row {
    background-color: #333333;
}

/*-------Change Arrow Color to Blue-------*/
.blue-arrow .pxl-navigation-arrow .cls-1, .blue-arrow .pxl-swiper-arrow .cls-1 {
    stroke: #1b75ba;
}

.blue-number .pxl-swiper-slide:hover .pxl-item--number {
    box-shadow: 0 0 0 7px #1b75ba;
}

.blue-number .pxl-item--number {
    background-color: #1b75ba !important;
}

/*change submenu color to dark gray*/
.pxl-menu-primary .sub-menu {
    background: #333333;
}

/*change submenu color to dark gray*/
.pxl-menu-primary .sub-menu {
    background: #333333;
}

/*hides next button on navigation carousel widget | hides prev button on navigation carousel widget | hides single-blog meta-data*/
.arrow-left .pxl-navigation-arrow-next, .arrow-right .pxl-navigation-arrow-prev, .single-post .post-metas, .single-post .post-tags-wrap {
    display: none;
}

/*apply before and after to case image carousel*/
.before-after .pxl-swiper-slide:nth-child(1):before {
    content: "Before";
    position: absolute;
    z-index: 2;
    color: white;
    background-color: #1b75ba;
    margin: 30px 50px;
    padding: 20px 40px;
    font-size: 22px;
    font-family: 'founders grotesk';
    font-weight: 500;
}

.before-after .pxl-swiper-slide:nth-child(2):before {
    content: "After";
    position: absolute;
    z-index: 2;
    color: white;
    background-color: #1b75ba;
    margin: 30px 50px;
    padding: 20px 40px;
    font-size: 22px;
    font-family: 'founders grotesk';
    font-weight: 500;
}

.before-after path {
    fill: #1b75ba;
}

/*-------Change Blockquote Icon Color to Blue | Change Recent Purchases Pop up to Blue | changes case counter bg to blue | changes case process' number bg to blue | Change case text carousel number bg to blue-------*/
blockquote:not(.pxl-blockquote):before, .blue-holder .pxl-portfolio-carousel3 .pxl-post--inner .pxl-post--holder, .blue-ctr .pxl-counter--holder, .steps-blue .pxl-process1 .pxl-item--step:before, .steps-blue .pxl-process1 .pxl-item--step, .pxl-text-carousel4 .pxl-swiper-slide .pxl-item--inner .pxl-item--number {
    background-color: #1b75ba;
}

.pxl-text-carousel4 .pxl-swiper-slide:hover .pxl-item--number {
    box-shadow: 0 0 0 7px #1b75ba;
}

/*-------Change Quote Text Color to Blue | changes pagination fraction color to blue -------*/
.blue-quote .pxl-testimonial-carousel5 .pxl-quote, .pagination-fraction {
    color: #1b75ba;
}

/*-------Change Testimonial Quote to Blue | Change Services Carousel BG to Blue-------*/
.blue-quote .quote, .blue-wrapper .pxl-post--icon, .blue-wrapper .wrap-content {
	background-color: #1b75ba !important;
}

/*fix img icon on services carousel*/
.img-fix .pxl-post--icon img {
    height: 67px;
    width: auto;
    filter: brightness(0) invert(1);
}

/*fix Service Carousel Title*/
.blue-wrapper h3 {
    line-height: 25px;
    margin-bottom: 30px !important;
}

/*removes white space on case icon box widget*/
.m-30 .pxl-icon-box9 .pxl-item--content .number {
	margin-bottom: 30px;
}

/*changes blog categories and date bg to blue*/
.pxl-post-carousel2 .pxl-swiper-slide .pxl-post--inner .post-date, .pxl-post-carousel2 .pxl-swiper-slide .pxl-post--inner .pxl-post--category{
	background-color: var(--primary-color);
	color: white;
}

/*changes Recent Purchases Pop up categories box to light gray*/
.pxl-portfolio-carousel3 .pxl-post--inner .pxl-post--category a, .blue-holder .btn:not(.btn-stroke).btn-default:not(.btn-text-nina,.btn-text-nanuk,.btn-text-smoke,.btn-text-reverse):before, .blue-holder .btn:not(.btn-stroke).btn-default:not(.btn-text-nina,.btn-text-nanuk,.btn-text-smoke,.btn-text-reverse):after{
	border-color: #ffffff5e;
}


/*changes blog categories color to white | Change Recent Purchases Pop up text to white | Changes Services Carousel Text to white*/
.pxl-post-carousel2 .pxl-swiper-slide .pxl-post--inner .pxl-post--category a, .blue-holder .pxl-portfolio-carousel3 .pxl-post--inner .pxl-post--content, .blue-wrapper .wrap-content .pxl-post--content{
	color: #ffffff;
}

/*-------Sticky Section - Top 160-------*/
.section-sticky {
	position: sticky;
	top: 160px;
}

/*-------Sticky Block - Top 30-------*/
.block-sticky {
	position: sticky;
	top: 30px;
}

/*unclickable link
.link-none a{
	pointer-events: none;
}*/

.img-obj-fit .pxl-item--image img {
    object-fit: cover;
	width: 100%;
}

.blue-wrapper .pxl-image-carousel3 .pxl-swiper-slide .pxl-item--inner .wrap-content {
	padding: 50px 45px 10px;
    background-color: #1b75ba;
}

.blue-wrapper .btn-readmore {
    margin: 0px !important;
}

.blue-wrapper .btn-readmore a{
    text-align: start !important;
}

/*Change Mobile Header bg to gray*/
@media screen and (max-width: 1200px) {
    .pxl-header-menu, #pxl-header-elementor #pxl-header-mobile.pxl-header-mobile-fixed {
        background-color: #333;
    }
	
	#pxl-main{
		overflow-x: visible !important;
	}
}

/*change container width to 300px*/
.w-300 {
	position: absolute;
	width: 300px !important;
}

@media screen and (max-width: 1366px) {
    .w-300 {
	    position: relative;
	    width: 100% !important;
	}
}

/*changes star rating to blue*/
.blue-rating .pxl-testimonial-grid1 .pxl-grid-item .pxl-item--star svg {
    fill: #1b75ba;
}

/*icon box heigh 100%*/
.ib-h-100 .elementor-widget-pxl_icon_box, .ib-h-100 .elementor-widget-container, .ib-h-100 .pxl-icon-box, .ib-h-100 .pxl-item--inner {
    height: 100%;
}

/*case tabs title optimized for h3*/
.ct-h3 h3 {
    color: #333333;
    margin: 0;
    font-size: 18px;
}

.ct-h3 .pxl-item--title.active h3 {
    color: white;
}

/*case tabs content gray bg*/
.ct-gray-bg .pxl-tabs--content {
    background-color: #F1F2EB;
    padding: 30px;
}

/*centers images in icon box*/
.ib-img-center .pxl-item--inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*removes filters in images*/
.img-no-filter img{
	filter: none !important;
}

/*alters h2 title to small size*/
.h2-sub-title {
    font-size: 0.6em;
    line-height: normal;
    font-weight: normal;
}

/*custom blog css*/
.blog-custom .pxl-post--featured {
    height: 200px;
}

.blog-custom .pxl-item--author, .blog-custom .pxl-post--category, .blog-custom .pxl-post--meta {
    display: none !important;
}

/*custom blog css*/
.blog-custom .pxl-post--featured {
    height: 200px;
}

.blog-custom .pxl-post--meta, .blog-custom .pxl-post--category, .search-results .post-metas, .search-results .post-date, #pxl_recent_posts-3 .pxl-item--date {
    display: none !important;
}

.pxl-icon-box5 .pxl-item--inner:hover .number {
    background: #333333;
}

/*aligns single blog share element to left*/
.single-post .post-shares.align-items-center {
    justify-content: flex-start;
}

/*adjust banner box widget img to full width*/
.banner-box-img-w-100 img {
    width: 100% !important;
}

/*add padding to seach bar*/
#search-3 input {
    padding: 5px 10px;
}

/*adjust headers*/
h2.pxl-item--title {
  font-size: 3.5rem !important;
  line-height: 3.5rem !important;
}

@media screen and (max-width: 767px) {
  h2.pxl-item--title {
    font-size: 40px !important;
    line-height: 1em !important;
  }
}

.pxl-testimonial-carousel5 .pxl-swiper-slide .pxl-item--inner .pxl-item--desc{
	font-style: italic;
}
.pxl-testimonial-grid1 .pxl-grid-item .pxl-item--description{
	font-style: italic;
}
.pxl-text-editor .pxl-item--inner{
	font-style: italic;
}