/* 
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 */

header {
	position: relative;
	background-color: #ffffff;
	z-index: 9999;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.asban_counter .elementor-countdown-item {
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	position: relative;
}

.asban_counter .elementor-countdown-item::before {
    content: '';
    display: flex;
    position: absolute;
    width: 275px;
    height: 275px;
    top: auto;
    left: auto;
    z-index: 0;
    border-radius: 100%;
    background-image: url("https://grandcercle.ca/wp-content/uploads/2023/09/GC.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.asban_counter .elementor-countdown-item:nth-child(1)::before {
    -webkit-animation: rotate-center 400s linear infinite both;
	        animation: rotate-center 400s linear infinite both;
}

.asban_counter .elementor-countdown-item:nth-child(2)::before {
    -webkit-animation: rotate-center 200s linear infinite both;
	        animation: rotate-center 200s linear infinite both;
}

.asban_counter .elementor-countdown-item:nth-child(3)::before {
    -webkit-animation: rotate-center 120s linear infinite both;
	        animation: rotate-center 120s linear infinite both;
}

.asban_counter .elementor-countdown-item:nth-child(4)::before {
    -webkit-animation: rotate-center 60s linear infinite both;
	        animation: rotate-center 60s linear infinite both;
}

.asban_counter .elementor-countdown-digits, selector .elementor-countdown-label {
    z-index: 5;
} 

.asban_title .elementor-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.asban_title .elementor-widget-container::before {
    content: '';
    display: flex;
    position: absolute;
    left: auto;
    top: auto;
    background-color: #29235C;
    width: calc(100% + 120px);
    height: calc(100% + 40px);
    z-index: 1;
    margin-top: -20px;
    transform: rotate(-1.5deg)
}

.asban_title h2 {
    z-index: 5;
}

.countdown_title h3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.countdown_title span {
	font-size: 72px;
	line-height: 1.2em;
}

.asban_footer {
	display: flex;
	position: relative;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	color: white !important;
	font-family: Arial;
	font-size: 9px;
	text-transform: uppercase;
	opacity: 0.45;
	transition: all 0.75s ease;
	padding: 5px;
	font-weight: bold;
	letter-spacing: 0.4px
}

.asban_footer:hover {
	color: white;
	padding-right: 83px;
	opacity: 1;
}

.asban_footer:hover .asban_img {
	opacity: 1;
	right: 0px;
}

.asban_footer:hover .the_coon {
	transform: rotate(360deg);
}

.the_coon {
	display: flex;
	transition: all 0.5s ease;
	width: 36px;
	margin-left:10px;
	margin-right:5px;
}

.asban_img {
	display: flex;
	position: absolute;
	right: 83px;
	opacity: 0;
	transition: all 0.75s ease;
	width: 83px;
}

@media (max-width: 1024px) {
	.asban_counter .elementor-countdown-item::before {
		width: 215px;
		height: 215px;
	}
	
	.countdown_title span {
		font-size: 52px;
	}
}

@media (max-width: 767px) {
	.asban_counter .elementor-countdown-item::before {
		width: 125px;
		height: 125px;
	}
	
	.asban_title .elementor-widget-container::before {
		width: calc(100% + 80px);
		height: calc(100% + 10px);
		margin-top: -10px;
	}
	
	.countdown_title h3 {
		gap: 5px;
	}
	
	.countdown_title span {
		font-size: 32px;
		line-height: 1em;
	}
	
}

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* Improved Animations Stylesheet from https://element.how/elementor-improve-entrance-animations/ , works for the 'fade' animations */

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-20px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInDown {
    animation-name: fadeDown
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-20px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInLeft {
    animation-name: fadeLeft
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(20px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInRight {
    animation-name: fadeRight
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInUp {
    animation-name: fadeUp
}