/*----------------------------------------------
*
* [Page Stylesheet]
*
* Theme    : Brilio - Personal Portfolio WordPress Theme
* Version  : 1.0
* Author   : Themeland
* Support  : hridoy1272@gmail.com
* 
----------------------------------------------*/

/*----------------------------------------------

[ALL CONTENTS]

1. Root
2. Page
3. Custom CSS
4. Keyframe
5. All Media Queries

----------------------------------------------*/

/*----------------------------------------------
1. Root
----------------------------------------------*/

/* #region Root */

:root {
	--primary-font: "Urbanist", sans-serif;
	--secondary-font: "Urbanist", sans-serif;

	--h1-size: 6rem;
	--h1-weight: 500;

	--h2-size: 4rem;
	--h2-weight: 500;

	--p-size: 1.2rem;
	--p-weight: 400;

	--header-bg-color: #030712;
	--nav-brand-height: 50px;
	--nav-item-color: #030712;
	--hero-bg-color: #030712;

	--primary-color: #8133F1;
	--secondary-color: #361565;

	--white-color: #f9f9f9;
	--black-color: #040402;
	--dark-grey-color: #191919;

	--primary-t-color: #030712;
	--primary-t-color-2: #B6BCC6;
	--secondary-t-color: #f9f9f9;
	--secondary-t-color-2: #a6abb4;
	--primary-p-color: #353941;
	--secondary-p-color: #909DAC;
	--primary-b-color: #f5f5f5;
	--secondary-b-color: #8b8d92;
	--primary-l-color: #949494;
	--secondary-l-color: rgba(255, 255, 255, 0.25);

	--box-shadow-color: rgba(9, 31, 67, 0.06);

	--valid-color: #007a4d;
	--invalid-color: #e34f4f;

	--primary-bg-color: #f8f8f9;
	--primary-bg-color-2: #e8eaed;
	--primary-bg-color-3: #e5e5e5;

	--secondary-bg-color: #111013;
	--secondary-bg-color-2: #1C1B1E;
	--secondary-bg-color-3: #191919;

	--card-bg-color: #f4f3ff;

	--footer-bg-color: #000A1F;

	--transform-scale: scale3d(1.06, 1.06, 1.06);

	--transition-function: cubic-bezier(.645, .045, .355, 1);
	--transition-duration: 0.35s;
}

/* #endregion Root */

/*----------------------------------------------
2. Page
----------------------------------------------*/

/* #region Page */

.page-template-default.elementor-page section.no-hero {
	padding: 0;
}

.page-template-default.elementor-page .elementor-widget-container p:first-of-type {
	margin-top: 0;
}

.elementor-button:hover,
.elementor-button:focus {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Counter */

.counter-section .elementor-counter-number-wrapper {
	display: inline-flex !important;
}

/* #endregion Page */

/*----------------------------------------------
3. Custom CSS
----------------------------------------------*/

/* #region Custom CSS */

/* Hero */

.hero {
	position: relative;
	overflow: hidden;
}

.hero .hero-bg,
.hero .hero-bg .elementor-widget-container {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	inset: 0%;
	z-index: -1;
}

.hero-bg .circle-1,
.hero-bg .circle-2 {
	position: absolute;
	height: 100vmax;
	width: 100vmax;
	object-fit: cover;
}

.circle-1 {
	-webkit-animation: zoom 20s infinite linear;
	animation: zoom 20s infinite linear;
}

.circle-2 {
	-webkit-animation: spinner 20s infinite linear;
	animation: spinner 20s infinite linear;
}

[data-theme="dark"] .hero-bg .circle-1,
[data-theme="dark"] .hero-bg .circle-2 {
	opacity: 0.15;
}

@-webkit-keyframes zoom {
	0% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(1.5, 1.5);
	}
	100% {
		transform: scale(1, 1);
	}
}

@keyframes zoom {
	0% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(1.5, 1.5);
	}
	100% {
		transform: scale(1, 1);
	}
}

@-webkit-keyframes spinner {
	to {
		-webkit-transform: translate3d(0px, 0px, 0px) rotateZ(-360deg);
		transform: translate3d(0px, 0px, 0px) rotateZ(-360deg);
	}
}

@keyframes spinner {
	to {
		-webkit-transform: translate3d(0px, 0px, 0px) rotateZ(-360deg);
		transform: translate3d(0px, 0px, 0px) rotateZ(-360deg);
	}
}

/* Hover Scrolled */

.hover-scrolled {
	position: relative;
	z-index: 1;
}

.hover-scrolled .icon {
	color: var(--primary-t-color);
}

[data-theme="dark"] .hover-scrolled .icon {
	color: var(--white-color);
}

.hover-scrolled::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 0;
	left: 0;
	bottom: 0;
	z-index: -1;
	background-color: var(--primary-t-color);
	-webkit-transition: all 0.2s ease-out 0s;
	transition: all 0.2s ease-out 0s;
}

[data-theme="dark"] .hover-scrolled::after {
	background-color: var(--white-color);
}

.hover-scrolled:hover::after {
	height: 100%;
}

.hover-scrolled * {
	-webkit-transition: all 0.2s ease-out 0s;
	transition: all 0.2s ease-out 0s;
}

.hover-scrolled:hover * {
	color: var(--white-color);
}

[data-theme="dark"] .hover-scrolled:hover * {
	color: initial;
}

.hover-scrolled:hover .hover-scrolled-content:first-child {
	transform: translateX(1rem);
}

.hover-scrolled:hover .hover-scrolled-content:last-child {
	transform: translateX(-1rem);
}

/* Google reCAPTCHA */

.grecaptcha-badge {
	display: none !important;
}

/* Elementor */

.elementor-shape-bottom {
	bottom: 0 !important;
}

[data-theme="dark"] .custom-border,
[data-theme="dark"] .custom-border .elementor-divider-separator {
	border-color: #635D6FA6 !important;
}

[data-theme="dark"] .custom-stroke .elementor-heading-title {
	-webkit-text-stroke-color: var(--white-color) !important;
	stroke: var(--white-color) !important;
}

[data-theme="dark"] .breadcrumb h1 {
	color: var(--white-color) !important;
}

[data-theme="dark"] .filter-invert img {
	filter: invert(1);
}

/* Responsive Posts */

@media (max-width: 576px) {
	.blog-grid .card-body {
		padding: 20px;
	}

	.blog-grid .card-body h4 {
		font-size: 1.6rem;
	}

	.blog-grid .card-footer {
		padding: 20px 0;
		margin: 0 20px;
	}
}

/* Preview */

#preview .icon {
	width: inherit;
	height: inherit;
}

#preview .icon svg {
	display: none;
}

#preview .icon::before {
	content: "";
	background-image: url("https://brilio.theme-land.com/wp-content/uploads/2024/12/envato-logo.jpeg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 35px;
	height: 35px;
	border-radius: 100px;
}

/* #endregion Custom CSS */

/*----------------------------------------------
4. Keyframe
----------------------------------------------*/

/* #region Keyframe */

@-webkit-keyframes MoveScaleUpInitial {
	to {
		-webkit-transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
		transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
		opacity: 0;
	}
}

@keyframes MoveScaleUpInitial {
	to {
		-webkit-transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
		transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
		opacity: 0;
	}
}

@-webkit-keyframes MoveScaleUpEnd {
	from {
		-webkit-transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
		transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
		opacity: 0;
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes MoveScaleUpEnd {
	from {
		-webkit-transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
		transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
		opacity: 0;
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes MoveScaleLeftInitial {
	to {
		-webkit-transform: translate3d(100%, 0, 0) scale3d(2, 1, 1);
		transform: translate3d(100%, 0, 0) scale3d(2, 1, 1);
		opacity: 0;
	}
}

@keyframes MoveScaleLeftInitial {
	to {
		-webkit-transform: translate3d(100%, 0, 0) scale3d(2, 1, 1);
		transform: translate3d(100%, 0, 0) scale3d(2, 1, 1);
		opacity: 0;
	}
}

@-webkit-keyframes MoveScaleLeftEnd {
	from {
		-webkit-transform: translate3d(-100%, 0, 0) scale3d(2, 1, 1);
		transform: translate3d(-100%, 0, 0) scale3d(2, 1, 1);
		opacity: 0;
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes MoveScaleLeftEnd {
	from {
		-webkit-transform: translate3d(-100%, 0, 0) scale3d(2, 1, 1);
		transform: translate3d(-100%, 0, 0) scale3d(2, 1, 1);
		opacity: 0;
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/* #endregion Keyframe */

/*----------------------------------------------
5. All Media Queries
----------------------------------------------*/

/* #region All Media Queries */

@media (max-width: 575px) {

	/* #region Page */

	.page-template-default.elementor-page section.no-hero .container,
	.page-template-default.elementor-page section.no-hero .col-12.align-self-center {
		padding: 0;
	}

	.contact-form {
		padding: 2rem;
	}

	.contact-form label {
		margin-bottom: 0.8rem;
	}

	.contact-form .wpcf7-response-output {
		margin-top: 1.5rem !important;
	}

	/* #endregion Page */
}

/* #endregion All Media Queries */