/*----------------------------------------------
*
* [Page Stylesheet]
*
* Theme    : Blogify - Personal Blog 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 {
	--tl-primary-font: "Urbanist", sans-serif;
	--tl-secondary-font: "Urbanist", sans-serif;

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

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

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

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

	--tl-color-primary: #8133F1;
	--tl-color-primary-50: rgba(129, 51, 241, 0.5);
	--tl-color-secondary: #361565;
	--tl-color-secondary-50: rgb(54, 21, 101, 0.5);

	--tl-color-white: white;
	--tl-color-black: #030712;
	--tl-color-black-rgb: 3, 7, 18;
	--tl-color-black-light: color-mix(in srgb, var(--tl-color-black) 98%, white);
	--tl-color-overlay: var(--tl-color-black);
	--tl-color-neutral: color-mix(in srgb, var(--tl-color-black) 50%, white);
	--tl-color-grey: color-mix(in srgb, var(--tl-color-black) 65%, white);
	--tl-color-grey-light: color-mix(in srgb, var(--tl-color-black) 50%, white);
	--tl-color-valid: #007a4d;
	--tl-color-invalid: #e34f4f;

	--tl-color-selection: color-mix(in srgb, var(--tl-color-primary) 20%, transparent);
	--tl-placeholder-color: #6a6770;
	--tl-link-color: inherit;
	--tl-link-hover-color: var(--tl-color-primary);
	--tl-border-color: color-mix(in srgb, var(--tl-color-neutral) 16%, transparent);

	--tl-button-color: var(--tl-color-black-light);
	--tl-button-color-grey: color-mix(in srgb, var(--tl-color-black-light) 75%, white);
	--tl-button-hover-color: var(--tl-color-primary);

	--tl-fill-color: color-mix(in srgb, var(--tl-color-neutral) 8%, transparent);

	--tl-border-solid: solid;
	--tl-border-dashed: dashed;
	--tl-border-width: 1px;
	--tl-border-width-md: 2px;
	--tl-border-radius: 1rem;
	--tl-border-radius-sm: calc(var(--tl-border-radius) / 2);
	--tl-border-radius-md: calc(var(--tl-border-radius) * 2);
	--tl-border-radius-lg: calc(var(--tl-border-radius) * 2.5);

	--tl-icon-size: 1.4em;
	--tl-icon-size-sm: 1.2em;
	--tl-icon-size-md: 1.6em;

	--tl-circle: 3.5rem;
	--tl-circle-sm: 3rem;
	--tl-circle-xs: 2.5rem;
	--tl-circle-lg: 4rem;

	--tl-button-height: 2.75rem;
	--tl-button-height-sm: 2.25rem;
	--tl-button-height-md: 3.25rem;

	--tl-button-padding: 1.25rem;
	--tl-button-padding-sm: 1rem;
	--tl-button-padding-md: 1.5rem;

	--tl-spacer: 3vh;
	--tl-spacer-05: 0.25rem;
	--tl-spacer-1: 0.5rem;
	--tl-spacer-2: 0.75rem;
	--tl-spacer-3: 1rem;
	--tl-spacer-4: 1.25rem;
	--tl-spacer-5: 1.5rem;
	--tl-spacer-6: 1.75rem;
	--tl-spacer-7: 2rem;
	--tl-spacer-8: 2.25rem;
	--tl-spacer-9: 2.5rem;
	--tl-spacer-10: 2.75rem;
	--tl-spacer-negative: calc(var(--tl-spacer) * (-1));

	--tl-gap: 0.5em;
	--tl-gap-sm: 0.25em;
	--tl-gap-md: 1em;

	--tl-cursor-default: default;
	--tl-cursor-pointer: pointer;
	--tl-cursor-help: help;

	--tl-transition-function: cubic-bezier(.645, .045, .355, 1);
	--tl-transition-duration: 0.35s;
	--tl-transition-duration-faster: 0.2s;
	--tl-infinit-scrolling-transition-duration: 45s;
	--tl-transform-scale: scale3d(1.06, 1.06, 1.06);

	--tl-font-size-sm: 0.95em;
	--tl-font-size-xs: 0.9em;
	--tl-font-size-md: 0.5rem;
	--tl-font-size-lg: 1.05em;
	--tl-font-size-caption: 0.9rem;
	--tl-font-size-menu: 1rem;
	--tl-font-size-submenu: 0.98em;
	--tl-font-size-md-titles: 1.5em;

	--tl-text-weight-normal: 400;
	--tl-text-weight-medium: 500;
	--tl-text-weight-semi-bold: 600;
	--tl-text-weight-bold: bold;
	--tl-text-line-heigth-sm: 1.4;

	--tl-body-color: var(--tl-color-black-light);
	--tl-body-color-grey: color-mix(in srgb, var(--tl-body-color) 66%, var(--tl-color-white));
	--tl-body-color-grey-light: color-mix(in srgb, var(--tl-body-color) 51%, var(--tl-color-white));
	--tl-body-font-size: 1.2rem;
	--tl-body-font-weight: 400;
	--tl-body-line-height: 1.6;

	--tl-title-color: var(--tl-color-black);

	--tl-primary-t-color: var(--tl-color-black);
	--tl-primary-t-color-2: #B6BCC6;
	--tl-secondary-t-color: #f9f9f9;
	--tl-secondary-t-color-2: #a6abb4;
	--tl-primary-p-color: #353941;
	--tl-secondary-p-color: #909DAC;
	--tl-primary-b-color: #f5f5f5;
	--tl-secondary-b-color: #8b8d92;
	--tl-primary-l-color: rgba(152, 152, 152, 0.15);
	--tl-secondary-l-color: rgba(255, 255, 255, 0.15);

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

	--tl-primary-bg-color: var(--tl-color-white);
	--tl-primary-bg-color-2: #e8eaed;
	--tl-primary-bg-color-3: #e5e5e5;

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

	--tl-card-bg-color: #f4f3ff;
	--tl-button-color-dark: #565960;

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

/* #endregion Root */

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

/* #region Page */

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

.odd .hero-bg .circle-1,
.odd .hero-bg .circle-2 {
	opacity: 0.12;
}

@-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(--tl-title-color);
}

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

.hover-scrolled::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 0;
	left: 0;
	bottom: 0;
	z-index: -1;
	background-color: var(--tl-title-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(--tl-color-white);
}

.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(--tl-color-white);
}

[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(--tl-color-white) !important;
	stroke: var(--tl-color-white) !important;
}

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

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

/* Responsive Posts */

@media (max-width: 576px) {
	.blog-grid .card-body {
		padding: var(--tl-spacer-4);
	}

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

	.blog-grid .card-footer {
		padding: var(--tl-spacer-4) 0;
		margin: 0 var(--tl-spacer-4);
	}
}

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

	.contact-form {
		padding: var(--tl-spacer-7);
	}

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

	.contact-form .wpcf7-response-output {
		margin-top: var(--tl-spacer-5) !important;
	}

	/* #endregion Page */
}

/* #endregion All Media Queries */