/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Global Spacings Start */
:root {
	--section-padding-top-global: 2rem;
	--section-padding-right-global: 1rem;
	--section-padding-bottom-global: 2rem;
	--section-padding-left-global: 1rem;
	
	--content-container-width: 100%;
    --image-container-width: 100%;
    --main-container-gap: 2rem;
}
@media(min-width: 1024px) {
	:root {
		--section-padding-top-global: 3rem;
		--section-padding-bottom-global: 3rem;
		
		--content-container-width: 60%;
        --image-container-width: calc( 100% - var(--content-container-width) );
        --main-container-gap: 3rem;
	}
}
.x-container {
	&.e-flex.e-con {
	padding-right: var(--section-padding-right-global);
	padding-left: var(--section-padding-left-global);
	}
	&>.e-con-inner {
		padding-top: var(--section-padding-top-global);
		padding-bottom: var(--section-padding-bottom-global);
	}
}
/* Global Spacings End */
.elementor-element p {
	&:last-child {
		margin-bottom: 0;
	}
}
	
.overflow-x-clip {
	overflow-x: clip !important;
}
.overflow-y-clip {
	overflow-y: clip !important;
}
.elementor-element.e-parent:has(.elementor-widget.elementor-widget-template) {
    overflow-x: clip;
}
body.page-template-default:not(.elementor-page) .page-content {
    margin-top: 6rem;
    margin-bottom: 3rem;
}

.counter-bordered-title .elementor-counter-title {
    padding: 0.25rem 2rem;
    border: 1px dashed #A7A7A7;
    border-radius: 3rem;
}
.swiper-pagination-bullet {
    border-radius: 1000px;
    transition: 300ms;
    &.swiper-pagination-bullet-active {
        width: calc( 3 * var(--swiper-pagination-size) )
    }
}

.btn-hover-slide a.elementor-button {
	border-width: 0 !important;
    &::before,
    &::after {
        content: '';
        height: 100%;
        display: block;
        position: absolute;
        border-radius: 2rem;
        left: 0;
        top: 0;
        z-index: 0;
        transition: 300ms;
    }
    &::before {
        background-color: #FFFFFF;
        width: 100%;
    }
    &::after {
        background-color: #000000;
        width: 0%;
    }
    &:hover::after {
        width: 100%;
    }
    & .elementor-button-content-wrapper {
        z-index: 100;
        position: relative;
    }
}

.btn-hover-slide-alt a.elementor-button {
    border-width: 0 !important;
    &::before,
    &::after {
        content: '';
        height: 100%;
        display: block;
        position: absolute;
        border-radius: 2rem;
        left: 0;
        top: 0;
        z-index: 0;
        transition: 300ms;
    }
    &::before {
        background-color: #000000;
        width: 100%;
    }
    &::after {
        background-color: #FFFFFF;
        width: 0%;
    }
    &:hover::after {
        width: 100%;
    }
    & .elementor-button-content-wrapper {
        z-index: 100;
        position: relative;
    }
}

.random-ads img.horizontal-banner__image,
.random-ads img.vertical-banner__image {
    border-radius: 1.5rem;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media(min-width: 768px) {
    .horizontal-banner__link img.horizontal-banner__image.horizontal-banner__image--mobile {
        display: none;
    }
}
@media(max-width: 767px) {
    .horizontal-banner__link img.horizontal-banner__image.horizontal-banner__image--desktop {
        display: none;
    }
}

.client-brands-wrapper-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 1rem;

    & .client-brand-item {
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: center;
        gap: 1rem;
        border: 3px dashed #A7A7A7;
        border-radius: 0.5rem;
        padding: 1rem;

        &.client-brand-image {
            & img {
                max-height: 3rem;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    
        & .client-brand-name {
            color: #000;
            font-family: Inter;
            font-size: 1.25rem;
            font-weight: 600;
        }
    }

}
@media(max-width: 767px) {
    .client-brands-wrapper-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}