/*
Theme Name: Bixol Child
Theme URI: http://demo.casethemes.net/bixol/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/portfolio/
Description: Cleaning Services WordPress theme is a modern, clean and professional WordPress theme which is specially created to spread and represent your cleaning services business to your potential customers. <b>Bixol</b> theme is fully responsive, and it looks attractive on all types of screens and devices. It comes with a lot of user-friendly and customizable features those will help you to create a robust website to achieve the main goal of online business.   
Version: 1.7.2
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: bixol
Text Domain: bixol-child
Tags: cleaner, cleaning, cleaning agency, cleaning business, cleaning company, cleaning service, building, floor cleaning, house cleaning, window cleaning, housekeeping, washing, maintenance, janitor
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* GLOBAL */

body p {
	margin-bottom: 0;
}

#about,
#why-us,
#areas-we-cover,
#our-work {
	scroll-margin-top: 50px;
}

#services,
#reviews {
	scroll-margin-top: 100px;
}

/* TOP BAR */

@media screen and (max-width: 900px) {
	.ct-topbar-rating {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
    #ct-header-wrap .ct-topbar-layout1 {
        display: block !important;
    }
	
	.ct-topbar-social,
	#ct-header-wrap .ct-topbar-layout1 label {
		display: none;
	}
	
	#ct-header-wrap .ct-topbar-layout1 a {
		color: #fff !important;
	}
}

.home #ct-header-wrap .ct-topbar-layout1 .ct-topbar-meta {
	padding-left: 15px !important;
}

.ct-topbar-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ct-topbar-rating .ct-rating-text {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.ct-topbar-rating .ct-rating-stars {
    display: flex;
    align-items: center;
    gap: 0px;
}

.ct-topbar-rating .ct-rating-stars i {
    color: #ffd21f;
    font-size: 12px;
	margin-right: 2px;
}

/* HEADER */

#ct-header-wrap .ct-topbar-layout1 {
    color: #F2D84A !important;
}

#ct-header-wrap .ct-topbar-layout1 .ct-topbar-social a {
	color: #F2D84A !important;
}

#ct-header-wrap .ct-header-branding img {
    max-height: 115px !important;
}

.ct-header-button .btn {
	color: var(--e-global-color-secondary);
}

.ct-header-button .btn {
	background-color: #ffd532;
}

.ct-header-button .btn:hover {
	background-color: var(--e-global-color-secondary);
}

@media (min-width: 1200px) {
		.home .ct-header-main:not(.h-fixed) .ct-header-branding {
		display: none !important;
	}

	.home .ct-header-main:not(.h-fixed) .ct-header-navigation {
		margin: 0 15px 0 0 !important;
	}

	.home .ct-header-main:not(.h-fixed) {
		height: 110px;
		align-content: center;
	}
}

#ct-header-wrap.ct-header-layout1 #ct-header .ct-main-menu > li > a:before {
	display: none;
}

.ct-header-main,
#ct-header-wrap #ct-header.h-fixed {
	background-color: var(--e-global-color-primary) !important;
}

#ct-menu-mobile .btn-nav-mobile:before, #ct-menu-mobile .btn-nav-mobile:after, #ct-menu-mobile .btn-nav-mobile span {
	background-color: #fff !important;
}

.ct-header-navigation .ct-main-navigation {
	background-color: var(--e-global-color-primary) !important;
}

.ct-main-menu li a {
	color: #fff !important;
}

@media (min-width: 1200px) {
	.mobile-quote-button {
    display: none !important;
}
}

.mobile-quote-button .btn {
	padding-right: 0px !important;
	margin-top: 20px !important;
	color: var(--e-global-color-text) !important;
}


.ct-main-navigation.navigation-open #ct-main-menu .mobile-quote-button {
    display: block !important;
    margin-top: 20px;
    padding: 0 !important;
    border: 0 !important;
}

.ct-main-navigation.navigation-open #ct-main-menu .mobile-quote-button a {
    display: block !important;
    width: 100%;
    text-align: center;
}

/* HERO */

.cta-phone {
	width: fit-content !important;
}

@media (max-width: 767px) {
    .cta-phone {
        left: 10px;
    }
}
	
.hero-usps .material-icons:not(.testloadedicon) {
	font-size: 24px !important;
	color: #7FBE4A !important;
}


/*
=========================================================
ES CLEANING BUBBLES
=========================================================

Structure:

.elementor-section.es-hero-section
    |
    |-- content column
    |
    |-- .bubbles-column
            |
            |-- shortcode
                    |
                    |-- .es-bubbles
                            |
                            |-- .hero-bubble

The bubbles are visually positioned relative to the
whole Elementor Section, not the column containing
the shortcode.
*/


/* =========================================================
   HERO SECTION
   ========================================================= */

.es-hero-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   BUBBLES COLUMN
   ========================================================= */

/*
 * The shortcode physically lives inside this column,
 * but we don't want the column to become the positioning
 * context for the bubbles.
 */

.es-hero-section .bubbles-column {
    position: static !important;
}


/*
 * Elementor's inner wrappers can also create positioning
 * contexts, so reset them as well.
 */

.es-hero-section .bubbles-column > .elementor-column-wrap,
.es-hero-section .bubbles-column .elementor-widget-wrap,
.es-hero-section .bubbles-column .elementor-widget-shortcode,
.es-hero-section .bubbles-column .elementor-widget-container {
    position: static !important;
}


/* =========================================================
   BUBBLE CANVAS
   ========================================================= */

/*
 * This is the decorative bubble canvas.
 *
 * Because the parent .es-hero-section is position:relative,
 * this layer covers the entire hero section.
 */

.es-hero-section .es-bubbles {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   CONTENT ABOVE BUBBLES
   ========================================================= */

/*
 * Make sure the actual hero content stays above
 * the decorative bubbles.
 */

.es-hero-section > .elementor-container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   BUBBLE BASE
   ========================================================= */

/*
 * Outer element:
 *
 * ONLY handles mouse parallax.
 *
 * JS continuously updates --mouse-x and --mouse-y.
 */

.es-hero-section .hero-bubble {
    position: absolute;

    display: block;

    margin: 0;
    padding: 0;

    transform: translate3d(
        var(--mouse-x, 0px),
        var(--mouse-y, 0px),
        0
    );

    will-change: transform;

    pointer-events: none;
}


/*
 * Inner element:
 *
 * ONLY handles entrance/drop animation.
 *
 * Keeping this separate prevents the entrance animation
 * from overwriting the mouse-parallax transform.
 */

.es-hero-section .hero-bubble__entrance {
    display: block;

    width: 100%;
    height: 100%;

    opacity: 0;

    transform: translate3d(0, -35px, 0);

    animation-name: bubbleDropIn;
    animation-duration: 900ms;
    animation-timing-function: cubic-bezier(
        0.22,
        0.75,
        0.25,
        1
    );
    animation-fill-mode: forwards;
}


/*
 * Original PNG remains untouched.
 */

.es-hero-section .hero-bubble img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   ENTRANCE ANIMATION
   ========================================================= */

@keyframes bubbleDropIn {

    0% {
        opacity: 0;
        transform: translate3d(0, -35px, 0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

}


/* =========================================================
   STAGGERED ENTRANCE
   ========================================================= */

.es-hero-section .bubble-13 .hero-bubble__entrance {
    animation-delay: 200ms;
}

.es-hero-section .bubble-11 .hero-bubble__entrance,
.es-hero-section .bubble-12 .hero-bubble__entrance {
    animation-delay: 350ms;
}

.es-hero-section .bubble-1 .hero-bubble__entrance {
    animation-delay: 450ms;
}

.es-hero-section .bubble-10 .hero-bubble__entrance {
    animation-delay: 550ms;
}

.es-hero-section .bubble-2 .hero-bubble__entrance,
.es-hero-section .bubble-5 .hero-bubble__entrance,
.es-hero-section .bubble-9 .hero-bubble__entrance {
    animation-delay: 700ms;
}

.es-hero-section .bubble-4 .hero-bubble__entrance {
    animation-delay: 850ms;
}

.es-hero-section .bubble-3 .hero-bubble__entrance,
.es-hero-section .bubble-7 .hero-bubble__entrance {
    animation-delay: 1000ms;
}

.es-hero-section .bubble-6 .hero-bubble__entrance,
.es-hero-section .bubble-8 .hero-bubble__entrance {
    animation-delay: 1150ms;
}


/* =========================================================
   DESKTOP
   Slider Revolution desktop grid:
   1230 x 840
   ========================================================= */


/* top right large */
.es-hero-section .bubble-1 {
    right: 80px;
    top: 98px;

    width: 94px;
    height: 94px;
}


/* top right medium */
.es-hero-section .bubble-2 {
    right: 275px;
    top: 175px;

    width: 47px;
    height: 47px;
}


/* upper left large */
.es-hero-section .bubble-3 {
    left: 46px;
    top: 46px;

    width: 94px;
    height: 94px;
}


/* upper centre large */
.es-hero-section .bubble-4 {
    left: 520px;
    top: 67px;

    width: 94px;
    height: 94px;
}


/* middle left large */
.es-hero-section .bubble-5 {
    left: 43px;
    top: 410px;

    width: 94px;
    height: 94px;
}


/* upper small */
.es-hero-section .bubble-6 {
    left: 224px;
    top: 36px;

    width: 40px;
    height: 39px;
}


/* upper tiny */
.es-hero-section .bubble-7 {
    left: 264px;
    top: 100px;

    width: 16px;
    height: 15px;
}


/* upper tiny */
.es-hero-section .bubble-8 {
    left: 335px;
    top: 75px;

    width: 16px;
    height: 15px;
}


/* middle-left medium */
.es-hero-section .bubble-9 {
    left: 44px;
    top: 262px;

    width: 47px;
    height: 47px;
}


/* lower medium */
.es-hero-section .bubble-10 {
    left: 305px;
    bottom: 234px;

    width: 47px;
    height: 47px;
}


/* bottom medium */
.es-hero-section .bubble-11 {
    left: 279px;
    bottom: 90px;

    width: 47px;
    height: 47px;
}


/* bottom tiny */
.es-hero-section .bubble-12 {
    left: 104px;
    bottom: 104px;

    width: 16px;
    height: 15px;
}


/* bottom tiny */
.es-hero-section .bubble-13 {
    left: 140px;
    bottom: 74px;

    width: 16px;
    height: 15px;
}


/* =========================================================
   NOTEBOOK
   Slider grid:
   1024 x 640
   ========================================================= */

@media (max-width: 1230px) {

    .es-hero-section .bubble-1 {
        right: 66px;
        top: 81px;

        width: 78px;
        height: 78px;
    }


    .es-hero-section .bubble-2 {
        right: 228px;
        top: 145px;

        width: 39px;
        height: 39px;
    }


    .es-hero-section .bubble-3 {
        left: 38px;
        top: 38px;

        width: 78px;
        height: 78px;
    }


    .es-hero-section .bubble-4 {
        left: 432px;
        top: 55px;

        width: 78px;
        height: 78px;
    }


    .es-hero-section .bubble-5 {
        left: 35px;
        top: 341px;

        width: 78px;
        height: 78px;
    }


    .es-hero-section .bubble-6 {
        left: 186px;
        top: 29px;

        width: 33px;
        height: 32px;
    }


    .es-hero-section .bubble-7 {
        left: 219px;
        top: 83px;

        width: 13px;
        height: 12px;
    }


    .es-hero-section .bubble-8 {
        left: 278px;
        top: 62px;

        width: 13px;
        height: 12px;
    }


    .es-hero-section .bubble-9 {
        left: 36px;
        top: 218px;

        width: 39px;
        height: 39px;
    }


    .es-hero-section .bubble-10 {
        left: 253px;
        bottom: 194px;

        width: 39px;
        height: 39px;
    }


    .es-hero-section .bubble-11 {
        left: 232px;
        bottom: 74px;

        width: 39px;
        height: 39px;
    }


    .es-hero-section .bubble-12 {
        left: 86px;
        bottom: 86px;

        width: 13px;
        height: 12px;
    }


    .es-hero-section .bubble-13 {
        left: 116px;
        bottom: 61px;

        width: 13px;
        height: 12px;
    }

}


/* =========================================================
   TABLET
   Slider grid:
   778 x 640
   ========================================================= */

@media (max-width: 1024px) {

    .es-hero-section .bubble-1 {
        right: 50px;
        top: 61px;

        width: 59px;
        height: 59px;
    }


    .es-hero-section .bubble-2 {
        right: 173px;
        top: 110px;

        width: 29px;
        height: 29px;
    }


    .es-hero-section .bubble-3 {
        left: 28px;
        top: 28px;

        width: 59px;
        height: 59px;
    }


    .es-hero-section .bubble-4 {
        left: 328px;
        top: 41px;

        width: 59px;
        height: 59px;
    }


    .es-hero-section .bubble-5 {
        left: 26px;
        top: 259px;

        width: 59px;
        height: 59px;
    }


    .es-hero-section .bubble-6 {
        left: 141px;
        top: 22px;

        width: 25px;
        height: 24px;
    }


    .es-hero-section .bubble-7 {
        left: 166px;
        top: 63px;

        width: 9px;
        height: 9px;
    }


    .es-hero-section .bubble-8 {
        left: 211px;
        top: 47px;

        width: 9px;
        height: 9px;
    }


    .es-hero-section .bubble-9 {
        left: 27px;
        top: 165px;

        width: 29px;
        height: 29px;
    }


    .es-hero-section .bubble-10 {
        left: 192px;
        bottom: 147px;

        width: 29px;
        height: 29px;
    }


    .es-hero-section .bubble-11 {
        left: 176px;
        bottom: 56px;

        width: 29px;
        height: 29px;
    }


    .es-hero-section .bubble-12 {
        left: 65px;
        bottom: 65px;

        width: 9px;
        height: 9px;
    }


    .es-hero-section .bubble-13 {
        left: 88px;
        bottom: 46px;

        width: 9px;
        height: 9px;
    }

}


/* =========================================================
   MOBILE
   Slider grid:
   480 x 580
   ========================================================= */

@media (max-width: 778px) {

    .es-hero-section .bubble-1 {
        right: 30px;
        top: 37px;

        width: 36px;
        height: 36px;
    }


    .es-hero-section .bubble-2 {
        right: 106px;
        top: 67px;

        width: 17px;
        height: 17px;
    }


    .es-hero-section .bubble-3 {
        left: 17px;
        top: 17px;

        width: 36px;
        height: 36px;
    }


    .es-hero-section .bubble-4 {
        left: 202px;
        top: 25px;

        width: 36px;
        height: 36px;
    }


    .es-hero-section .bubble-5 {
        left: 16px;
        top: 159px;

        width: 36px;
        height: 36px;
    }


    .es-hero-section .bubble-6 {
        left: 86px;
        top: 13px;

        width: 15px;
        height: 14px;
    }


    .es-hero-section .bubble-7 {
        left: 102px;
        top: 38px;

        width: 5px;
        height: 5px;
    }


    .es-hero-section .bubble-8 {
        left: 130px;
        top: 28px;

        width: 5px;
        height: 5px;
    }


    .es-hero-section .bubble-9 {
        left: 16px;
        top: 101px;

        width: 17px;
        height: 17px;
    }


    .es-hero-section .bubble-10 {
        left: 118px;
        bottom: 90px;

        width: 17px;
        height: 17px;
    }


    .es-hero-section .bubble-11 {
        left: 108px;
        bottom: 34px;

        width: 17px;
        height: 17px;
    }


    .es-hero-section .bubble-12 {
        left: 40px;
        bottom: 40px;

        width: 5px;
        height: 5px;
    }


    .es-hero-section .bubble-13 {
        left: 54px;
        bottom: 28px;

        width: 5px;
        height: 5px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .es-hero-section .hero-bubble {
        transform: none !important;
    }

    .es-hero-section .hero-bubble__entrance {
        opacity: 1;
        transform: none;
        animation: none;
    }

}

@media (max-width: 520px) {
	.hero-usps .elementor-icon-list-items.elementor-inline-items {
		flex-direction: column;
		gap: 8px;
	}
}
/* SERVICES SECTION */



@media (min-width: 768px) and (max-width: 1024px) {
	.diamond-item {
		height: 250px !important;
		width: 250px !important;
	}
}

/* @media (max-width: 767px) {
	.diamond-item {
		height: 225px !important;
		width: 225px !important;
	}
}

@media (max-width: 592px) {
	.diamond-grid {
		width: 410px !important;
	}
	
	.diamond-item {
		height: 200px !important;
		width: 200px !important;
	}
} */

.diamond-item .elementor-icon {
	border: 3px solid #fff;
}


@media (min-width: 768px) {
.diamond-item{
    position:relative;
    width:100%;
    height:100%;
    perspective:1000px;
	overflow: hidden !important;
	height: 250px !important;
}

.flip-front,
.flip-back{
    width:100%;
    height:100%;
    transition:transform .8s;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.flip-front{
    transform:
        rotate(-45deg);
	top: -25px;
	left: -25px;
	height: 150%;
	width: 150%;
}

.flip-back{
    transform:
        rotateY(180deg)
        rotate(-45deg);
	top: -25px;
	left: -25px;
	height: 150%;
	width: 150%;
}

.diamond-item:hover .flip-front{
    transform:
        rotateY(-180deg)
        rotate(-45deg);
	top: -25px;
	left: -25px;
	height: 150%;
	width: 150%;
}

.diamond-item:hover .flip-back{
    transform:
        rotateY(0deg)
        rotate(-45deg);
	top: -25px;
	left: -25px;
	height: 150%;
	width: 150%;
}
}

@media (max-width: 767px) {
	.diamond-grid {
		--e-con-transform-rotateZ: 0deg !important;
		--content-width: 90% !important;
	}
	
	.diamond-item {
		overflow: hidden !important;
		gap: 0 !important;
		aspect-ratio: 7/8;
		--flex-wrap: nowrap !important;
		height: fit-content;
	}
	
	.flip-front,
	.flip-back {
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		min-height: 50% !important;
	}
	
	.flip-front .elementor-icon-box-content {
		display: none;
	}
	
	.flip-front .elementor-icon {
		font-size: 26px !important;
	}
	
	.flip-back .elementor-widget-icon-box {
		margin: 20px !important;
	}
}

@media (max-width: 500px) {
    .diamond-grid {
        --e-con-grid-template-columns: 1fr !important;
    }
	
	.diamond-item {
		aspect-ratio: 3/2;
	}
}

@media (min-width: 1025px) {
	.diamond-item {
		height: 275px !important;
	}
}


/* ABOUT */

@media (max-width: 767px) {
	.car-image {
		max-width: 450px !important;
	}
}

/* VIDEO SECTION */

.phone-cta-long .phone-number {
	display: inline-flex;
	width: fit-content;
}

.phone-cta-long .phone-number div {
	white-space: nowrap;
}

/* PROJECTS SECTION */

.project-badge {
	width: fit-content !important;
}

/* CONTACT */

.wpcf7-form {
	display: flex;
	flex-direction: column;
}

.wpcf7-form .wpcf7-turnstile {
	order: 999;
	margin-top: 10px;
}

.wpcf7-form .wpcf7-submit {
	margin-top: 10px;
}

.wpcf7-list-item {
	margin: 0 !important;
}

.ct-contact-form-layout1.style2 .row .wpcf7-form-control-wrap {
    margin-bottom: 25px !important;
}

.ct-testimonial .item--description {
	overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 12;
           line-clamp: 12; 
   -webkit-box-orient: vertical;
}

#reviews .wpcf7-form .row .input-filled .wpcf7-form-control-wrap input,
#reviews .wpcf7-form .row .input-filled .wpcf7-form-control-wrap ul,
#reviews .wpcf7-form .row .input-filled .wpcf7-form-control-wrap textarea,
#reviews .wpcf7-form .row .input-filled .wpcf7-form-control-wrap label,
#reviews .wpcf7-form .row .input-filled .wpcf7-form-control-wrap .nice-select span {
	color: #17212B !important;
}

/* FOOTER */

.footer-custom-inner .footer-get-in-touch .elementor-icon-box-description a,
.copyright-section a {
	color: var(--e-global-color-accent) !important;
}

.footer-custom-inner .footer-get-in-touch .elementor-icon-box-description a:hover,
.copyright-section a:hover {
	opacity: 0.8 !important;
}

.footer-custom-inner .footer-get-in-touch .elementor-icon {
	border-color: var(--e-global-color-primary) !important;
}