/*!
Theme Name: sleepfoe-official
Theme URI: https://linkedin.com/in/jahidulwd
Author: Jahidul Islam Hridoy
Author URI: https://linkedin.com/in/jahidulwd/
Description: Web Developer
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sleepfoe
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sleepfoe-official is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */


html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}



hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #666;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 0em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


@import "https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap";
@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";
@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap";
@import "https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap";

:root {
  --primary: #fff;
  --secondary: #fff;
  --border: rgba(18, 18, 18, 0.08);
  --theme: #121212;
  --black: #121212;
  --black-2: #555555;
  --white: #ffffff;
  --white-2: #999999;
  --action: #ffcd4d;
}

.pb-10 {
  padding-bottom: 10px;
}
.pb-15 {
  padding-bottom: 15px;
}
.pb-20 {
  padding-bottom: 20px;
}
.pb-25 {
  padding-bottom: 25px;
}
.pb-30 {
  padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .pb-30 {
    padding-bottom: 25px;
  }
}
.pb-35 {
  padding-bottom: 35px;
}
@media only screen and (max-width: 767px) {
  .pb-35 {
    padding-bottom: 30px;
  }
}
.pb-40 {
  padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .pb-40 {
    padding-bottom: 30px;
  }
}
.pb-45 {
  padding-bottom: 45px;
}
@media only screen and (max-width: 767px) {
  .pb-45 {
    padding-bottom: 30px;
  }
}
.pb-50 {
  padding-bottom: 50px;
}
@media only screen and (max-width: 767px) {
  .pb-50 {
    padding-bottom: 30px;
  }
}
.pb-55 {
  padding-bottom: 55px;
}
@media only screen and (max-width: 991px) {
  .pb-55 {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-55 {
    padding-bottom: 30px;
  }
}
.pb-60 {
  padding-bottom: 60px;
}
@media only screen and (max-width: 991px) {
  .pb-60 {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-60 {
    padding-bottom: 30px;
  }
}
.pb-65 {
  padding-bottom: 65px;
}
@media only screen and (max-width: 991px) {
  .pb-65 {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-65 {
    padding-bottom: 30px;
  }
}
.pb-70 {
  padding-bottom: 70px;
}
@media only screen and (max-width: 991px) {
  .pb-70 {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-70 {
    padding-bottom: 35px;
  }
}
.pb-75 {
  padding-bottom: 75px;
}
@media only screen and (max-width: 991px) {
  .pb-75 {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-75 {
    padding-bottom: 35px;
  }
}
.pb-80 {
  padding-bottom: 80px;
}
@media only screen and (max-width: 991px) {
  .pb-80 {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-80 {
    padding-bottom: 35px;
  }
}
.pb-85 {
  padding-bottom: 85px;
}
@media only screen and (max-width: 991px) {
  .pb-85 {
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-85 {
    padding-bottom: 35px;
  }
}
.pb-90 {
  padding-bottom: 90px;
}
@media only screen and (max-width: 1199px) {
  .pb-90 {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-90 {
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-90 {
    padding-bottom: 40px;
  }
}
.pb-95 {
  padding-bottom: 95px;
}
@media only screen and (max-width: 1199px) {
  .pb-95 {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-95 {
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-95 {
    padding-bottom: 40px;
  }
}
.pb-100 {
  padding-bottom: 100px;
}
@media only screen and (max-width: 991px) {
  .pb-100 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-100 {
    padding-bottom: 60px;
  }
}
.pb-105 {
  padding-bottom: 105px;
}
@media only screen and (max-width: 991px) {
  .pb-105 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-105 {
    padding-bottom: 60px;
  }
}
.pb-110 {
  padding-bottom: 110px;
}
@media only screen and (max-width: 1399px) {
  .pb-110 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-110 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-110 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-110 {
    padding-bottom: 60px;
  }
}
.pb-115 {
  padding-bottom: 115px;
}
@media only screen and (max-width: 1399px) {
  .pb-115 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-115 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-115 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-115 {
    padding-bottom: 60px;
  }
}
.pb-120 {
  padding-bottom: 120px;
}
@media only screen and (max-width: 1399px) {
  .pb-120 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-120 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-120 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-120 {
    padding-bottom: 60px;
  }
}
.pb-125 {
  padding-bottom: 125px;
}
@media only screen and (max-width: 1399px) {
  .pb-125 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-125 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-125 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-125 {
    padding-bottom: 60px;
  }
}
.pb-130 {
  padding-bottom: 130px;
}
@media only screen and (max-width: 1399px) {
  .pb-130 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-130 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-130 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-130 {
    padding-bottom: 60px;
  }
}
.pb-135 {
  padding-bottom: 135px;
}
@media only screen and (max-width: 1399px) {
  .pb-135 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-135 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-135 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-135 {
    padding-bottom: 60px;
  }
}
.pb-140 {
  padding-bottom: 140px;
}
@media only screen and (max-width: 1399px) {
  .pb-140 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-140 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-140 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-140 {
    padding-bottom: 60px;
  }
}
.pb-145 {
  padding-bottom: 145px;
}
@media only screen and (max-width: 1399px) {
  .pb-145 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-145 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-145 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-145 {
    padding-bottom: 60px;
  }
}
.pb-150 {
  padding-bottom: 150px;
}
@media only screen and (max-width: 1399px) {
  .pb-150 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-150 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-150 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-150 {
    padding-bottom: 60px;
  }
}
.pb-160 {
  padding-bottom: 160px;
}
@media only screen and (max-width: 1399px) {
  .pb-160 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-160 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-160 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-160 {
    padding-bottom: 60px;
  }
}
.pb-170 {
  padding-bottom: 170px;
}
@media only screen and (max-width: 1399px) {
  .pb-170 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-170 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-170 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-170 {
    padding-bottom: 60px;
  }
}
.pb-180 {
  padding-bottom: 180px;
}
@media only screen and (max-width: 1399px) {
  .pb-180 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb-180 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-180 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-180 {
    padding-bottom: 60px;
  }
}
.pb-190 {
  padding-bottom: 190px;
}
@media only screen and (max-width: 1199px) {
  .pb-190 {
    padding-bottom: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-190 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-190 {
    padding-bottom: 100px;
  }
}
.pb-200 {
  padding-bottom: 200px;
}
@media only screen and (max-width: 1199px) {
  .pb-200 {
    padding-bottom: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .pb-200 {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-200 {
    padding-bottom: 100px;
  }
}
.pt-10 {
  padding-top: 10px;
}
.pt-15 {
  padding-top: 15px;
}
.pt-20 {
  padding-top: 20px;
}
.pt-25 {
  padding-top: 25px;
}
.pt-30 {
  padding-top: 30px;
}
@media only screen and (max-width: 767px) {
  .pt-30 {
    padding-top: 25px;
  }
}
.pt-35 {
  padding-top: 35px;
}
@media only screen and (max-width: 767px) {
  .pt-35 {
    padding-top: 30px;
  }
}
.pt-40 {
  padding-top: 40px;
}
@media only screen and (max-width: 767px) {
  .pt-40 {
    padding-top: 30px;
  }
}
.pt-45 {
  padding-top: 45px;
}
@media only screen and (max-width: 767px) {
  .pt-45 {
    padding-top: 30px;
  }
}
.pt-50 {
  padding-top: 50px;
}
@media only screen and (max-width: 767px) {
  .pt-50 {
    padding-top: 30px;
  }
}
.pt-55 {
  padding-top: 55px;
}
@media only screen and (max-width: 991px) {
  .pt-55 {
    padding-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-55 {
    padding-top: 30px;
  }
}
.pt-60 {
  padding-top: 60px;
}
@media only screen and (max-width: 991px) {
  .pt-60 {
    padding-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-60 {
    padding-top: 30px;
  }
}
.ptf-60 {
  padding-top: 60px;
}
.pt-65 {
  padding-top: 65px;
}
@media only screen and (max-width: 991px) {
  .pt-65 {
    padding-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-65 {
    padding-top: 30px;
  }
}
.pt-70 {
  padding-top: 70px;
}
@media only screen and (max-width: 991px) {
  .pt-70 {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-70 {
    padding-top: 35px;
  }
}
.pt-75 {
  padding-top: 75px;
}
@media only screen and (max-width: 991px) {
  .pt-75 {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-75 {
    padding-top: 35px;
  }
}
.pt-80 {
  padding-top: 80px;
}
@media only screen and (max-width: 991px) {
  .pt-80 {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-80 {
    padding-top: 35px;
  }
}
.pt-85 {
  padding-top: 85px;
}
@media only screen and (max-width: 991px) {
  .pt-85 {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-85 {
    padding-top: 35px;
  }
}
.pt-90 {
  padding-top: 90px;
}
@media only screen and (max-width: 1199px) {
  .pt-90 {
    padding-top: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-90 {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-90 {
    padding-top: 40px;
  }
}
.pt-95 {
  padding-top: 95px;
}
@media only screen and (max-width: 1199px) {
  .pt-95 {
    padding-top: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-95 {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-95 {
    padding-top: 40px;
  }
}
.pt-100 {
  padding-top: 100px;
}
@media only screen and (max-width: 991px) {
  .pt-100 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-100 {
    padding-top: 60px;
  }
}
.pt-105 {
  padding-top: 105px;
}
@media only screen and (max-width: 991px) {
  .pt-105 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-105 {
    padding-top: 60px;
  }
}
.pt-110 {
  padding-top: 110px;
}
@media only screen and (max-width: 1399px) {
  .pt-110 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-110 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-110 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-110 {
    padding-top: 60px;
  }
}
.pt-115 {
  padding-top: 115px;
}
@media only screen and (max-width: 1399px) {
  .pt-115 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-115 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-115 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-115 {
    padding-top: 60px;
  }
}
.pt-120 {
  padding-top: 120px;
}
@media only screen and (max-width: 1399px) {
  .pt-120 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-120 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-120 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-120 {
    padding-top: 60px;
  }
}
.pt-125 {
  padding-top: 125px;
}
@media only screen and (max-width: 1399px) {
  .pt-125 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-125 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-125 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-125 {
    padding-top: 60px;
  }
}
.pt-130 {
  padding-top: 130px;
}
@media only screen and (max-width: 1399px) {
  .pt-130 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-130 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-130 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-130 {
    padding-top: 60px;
  }
}
.pt-135 {
  padding-top: 135px;
}
@media only screen and (max-width: 1399px) {
  .pt-135 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-135 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-135 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-135 {
    padding-top: 60px;
  }
}
.pt-140 {
  padding-top: 140px;
}
@media only screen and (max-width: 1399px) {
  .pt-140 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-140 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-140 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-140 {
    padding-top: 60px;
  }
}
.pt-145 {
  padding-top: 145px;
}
@media only screen and (max-width: 1399px) {
  .pt-145 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-145 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-145 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-145 {
    padding-top: 60px;
  }
}
.pt-150 {
  padding-top: 150px;
}
@media only screen and (max-width: 1399px) {
  .pt-150 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-150 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-150 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-150 {
    padding-top: 60px;
  }
}
.pt-160 {
  padding-top: 160px;
}
@media only screen and (max-width: 1399px) {
  .pt-160 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-160 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-160 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-160 {
    padding-top: 60px;
  }
}
.pt-170 {
  padding-top: 170px;
}
@media only screen and (max-width: 1399px) {
  .pt-170 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-170 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-170 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-170 {
    padding-top: 60px;
  }
}
.pt-180 {
  padding-top: 180px;
}
@media only screen and (max-width: 1399px) {
  .pt-180 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-180 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-180 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-180 {
    padding-top: 60px;
  }
}
.pt-190 {
  padding-top: 190px;
}
@media only screen and (max-width: 1199px) {
  .pt-190 {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-190 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-190 {
    padding-top: 100px;
  }
}
.pt-200 {
  padding-top: 200px;
}
@media only screen and (max-width: 1199px) {
  .pt-200 {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-200 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-200 {
    padding-top: 100px;
  }
}
.pt-210 {
  padding-top: 210px;
}
@media only screen and (max-width: 1919px) {
  .pt-210 {
    padding-top: 170px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-210 {
    padding-top: 160px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-210 {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-210 {
    padding-top: 130px;
  }
}
.pt-230 {
  padding-top: 230px;
}
@media only screen and (max-width: 1919px) {
  .pt-230 {
    padding-top: 190px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-230 {
    padding-top: 180px;
  }
}
@media only screen and (max-width: 991px) {
  .pt-230 {
    padding-top: 170px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-230 {
    padding-top: 150px;
  }
}
.pt-250 {
  padding-top: 250px;
}
@media only screen and (max-width: 1919px) {
  .pt-250 {
    padding-top: 200px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-250 {
    padding-top: 200px;
  }
}
@media only screen and (max-width: 1199px) {
  .pt-250 {
    padding-top: 190px;
  }
}
@media only screen and (max-width: 767px) {
  .pt-250 {
    padding-top: 160px;
  }
}
.pl-5 {
  padding-inline-start: 5px;
}
@media only screen and (max-width: 767px) {
  .pl-5 {
    padding-inline-start: 0;
  }
}
.pl-10 {
  padding-inline-start: 10px;
}
@media only screen and (max-width: 767px) {
  .pl-10 {
    padding-inline-start: 0;
  }
}
.pl-15 {
  padding-inline-start: 15px;
}
@media only screen and (max-width: 767px) {
  .pl-15 {
    padding-inline-start: 0;
  }
}
.pl-20 {
  padding-inline-start: 20px;
}
@media only screen and (max-width: 991px) {
  .pl-20 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-20 {
    padding-inline-start: 0;
  }
}
.pl-25 {
  padding-inline-start: 25px;
}
@media only screen and (max-width: 1199px) {
  .pl-25 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-25 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-25 {
    padding-inline-start: 0;
  }
}
.pl-30 {
  padding-inline-start: 30px;
}
@media only screen and (max-width: 1199px) {
  .pl-30 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-30 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-30 {
    padding-inline-start: 0;
  }
}
.pl-35 {
  padding-inline-start: 35px;
}
@media only screen and (max-width: 1399px) {
  .pl-35 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-35 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-35 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-35 {
    padding-inline-start: 0;
  }
}
.pl-40 {
  padding-inline-start: 40px;
}
@media only screen and (max-width: 1399px) {
  .pl-40 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-40 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-40 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-40 {
    padding-inline-start: 0;
  }
}
.pl-45 {
  padding-inline-start: 45px;
}
@media only screen and (max-width: 1919px) {
  .pl-45 {
    padding-inline-start: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-45 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-45 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-45 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-45 {
    padding-inline-start: 0;
  }
}
.pl-50 {
  padding-inline-start: 50px;
}
@media only screen and (max-width: 1919px) {
  .pl-50 {
    padding-inline-start: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-50 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-50 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-50 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-50 {
    padding-inline-start: 0;
  }
}
.pl-55 {
  padding-inline-start: 55px;
}
@media only screen and (max-width: 1919px) {
  .pl-55 {
    padding-inline-start: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-55 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-55 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-55 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-55 {
    padding-inline-start: 0;
  }
}
.pl-60 {
  padding-inline-start: 60px;
}
@media only screen and (max-width: 1919px) {
  .pl-60 {
    padding-inline-start: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-60 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-60 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-60 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-60 {
    padding-inline-start: 0;
  }
}
.pl-65 {
  padding-inline-start: 65px;
}
@media only screen and (max-width: 1919px) {
  .pl-65 {
    padding-inline-start: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-65 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-65 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-65 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-65 {
    padding-inline-start: 0;
  }
}
.pl-70 {
  padding-inline-start: 70px;
}
@media only screen and (max-width: 1919px) {
  .pl-70 {
    padding-inline-start: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-70 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-70 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-70 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-70 {
    padding-inline-start: 0;
  }
}
.pl-75 {
  padding-inline-start: 75px;
}
@media only screen and (max-width: 1919px) {
  .pl-75 {
    padding-inline-start: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-75 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-75 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-75 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-75 {
    padding-inline-start: 0;
  }
}
.pl-80 {
  padding-inline-start: 80px;
}
@media only screen and (max-width: 1919px) {
  .pl-80 {
    padding-inline-start: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-80 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-80 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-80 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-80 {
    padding-inline-start: 0;
  }
}
.pl-85 {
  padding-inline-start: 85px;
}
@media only screen and (max-width: 1919px) {
  .pl-85 {
    padding-inline-start: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-85 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-85 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-85 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-85 {
    padding-inline-start: 0;
  }
}
.pl-90 {
  padding-inline-start: 90px;
}
@media only screen and (max-width: 1919px) {
  .pl-90 {
    padding-inline-start: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-90 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-90 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-90 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-90 {
    padding-inline-start: 0;
  }
}
.pl-100 {
  padding-inline-start: 100px;
}
@media only screen and (max-width: 1919px) {
  .pl-100 {
    padding-inline-start: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .pl-100 {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .pl-100 {
    padding-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .pl-100 {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .pl-100 {
    padding-inline-start: 0;
  }
}
.plr-50 {
  padding-inline-start: 50px;
  padding-inline-end: 50px;
}
@media only screen and (max-width: 991px) {
  .plr-50 {
    padding-inline-start: 30px;
    padding-inline-end: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .plr-50 {
    padding-inline-start: 15px;
    padding-inline-end: 15px;
  }
}
.plr-100 {
  padding-inline-start: 100px;
  padding-inline-end: 100px;
}
@media only screen and (min-width: 1600px) {
  .box-layout .plr-100 {
    padding-inline-start: 30px;
    padding-inline-end: 30px;
  }
}
@media only screen and (max-width: 1919px) {
  .plr-100 {
    padding-inline-start: 30px;
    padding-inline-end: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .plr-100 {
    padding-inline-start: 15px;
    padding-inline-end: 15px;
  }
}
.plr-150 {
  padding-inline-start: 150px;
  padding-inline-end: 150px;
}
@media only screen and (min-width: 1600px) {
  .box-layout .plr-150 {
    padding-inline-start: 30px;
    padding-inline-end: 30px;
  }
}
@media only screen and (max-width: 1919px) {
  .plr-150 {
    padding-inline-start: 30px;
    padding-inline-end: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .plr-150 {
    padding-inline-start: 15px;
    padding-inline-end: 15px;
  }
}
.plr-200 {
  padding-inline-start: 200px;
  padding-inline-end: 200px;
}
@media only screen and (min-width: 1600px) {
  .box-layout .plr-200 {
    padding-inline-start: 50px;
    padding-inline-end: 50px;
  }
}
@media only screen and (max-width: 1919px) {
  .plr-200 {
    padding-inline-start: 50px;
    padding-inline-end: 50px;
  }
}
@media only screen and (max-width: 1199px) {
  .plr-200 {
    padding-inline-start: 30px;
    padding-inline-end: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .plr-200 {
    padding-inline-start: 15px;
    padding-inline-end: 15px;
  }
}
.plr-250 {
  padding-inline-start: 250px;
  padding-inline-end: 250px;
}
@media only screen and (min-width: 1600px) {
  .box-layout .plr-250 {
    padding-inline-start: 50px;
    padding-inline-end: 50px;
  }
}
@media only screen and (max-width: 1919px) {
  .plr-250 {
    padding-inline-start: 50px;
    padding-inline-end: 50px;
  }
}
@media only screen and (max-width: 1199px) {
  .plr-250 {
    padding-inline-start: 30px;
    padding-inline-end: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .plr-250 {
    padding-inline-start: 15px;
    padding-inline-end: 15px;
  }
}
.mt-10 {
  margin-top: 10px;
}
.mt-15 {
  margin-top: 15px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-25 {
  margin-top: 25px;
}
.mt-30 {
  margin-top: 30px;
}
@media only screen and (max-width: 767px) {
  .mt-30 {
    margin-top: 25px;
  }
}
.mt-35 {
  margin-top: 35px;
}
@media only screen and (max-width: 767px) {
  .mt-35 {
    margin-top: 30px;
  }
}
.mt-40 {
  margin-top: 40px;
}
@media only screen and (max-width: 767px) {
  .mt-40 {
    margin-top: 30px;
  }
}
.mt-45 {
  margin-top: 45px;
}
@media only screen and (max-width: 767px) {
  .mt-45 {
    margin-top: 30px;
  }
}
.mt-50 {
  margin-top: 50px;
}
@media only screen and (max-width: 767px) {
  .mt-50 {
    margin-top: 30px;
  }
}
.mt-55 {
  margin-top: 55px;
}
@media only screen and (max-width: 991px) {
  .mt-55 {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-55 {
    margin-top: 30px;
  }
}
.mt-60 {
  margin-top: 60px;
}
@media only screen and (max-width: 991px) {
  .mt-60 {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-60 {
    margin-top: 30px;
  }
}
.mt-65 {
  margin-top: 65px;
}
@media only screen and (max-width: 991px) {
  .mt-65 {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-65 {
    margin-top: 30px;
  }
}
.mt-70 {
  margin-top: 70px;
}
@media only screen and (max-width: 991px) {
  .mt-70 {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-70 {
    margin-top: 35px;
  }
}
.mt-75 {
  margin-top: 75px;
}
@media only screen and (max-width: 991px) {
  .mt-75 {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-75 {
    margin-top: 35px;
  }
}
.mt-80 {
  margin-top: 80px;
}
@media only screen and (max-width: 991px) {
  .mt-80 {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-80 {
    margin-top: 35px;
  }
}
.mt-85 {
  margin-top: 85px;
}
@media only screen and (max-width: 991px) {
  .mt-85 {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-85 {
    margin-top: 35px;
  }
}
.mt-90 {
  margin-top: 90px;
}
@media only screen and (max-width: 1199px) {
  .mt-90 {
    margin-top: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-90 {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-90 {
    margin-top: 40px;
  }
}
.mt-95 {
  margin-top: 95px;
}
@media only screen and (max-width: 1199px) {
  .mt-95 {
    margin-top: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-95 {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-95 {
    margin-top: 40px;
  }
}
.mt-100 {
  margin-top: 100px;
}
@media only screen and (max-width: 991px) {
  .mt-100 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-100 {
    margin-top: 60px;
  }
}
.mt-105 {
  margin-top: 105px;
}
@media only screen and (max-width: 991px) {
  .mt-105 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-105 {
    margin-top: 60px;
  }
}
.mt-110 {
  margin-top: 110px;
}
@media only screen and (max-width: 1199px) {
  .mt-110 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-110 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-110 {
    margin-top: 60px;
  }
}
.mt-115 {
  margin-top: 115px;
}
@media only screen and (max-width: 1199px) {
  .mt-115 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-115 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-115 {
    margin-top: 60px;
  }
}
.mt-120 {
  margin-top: 120px;
}
@media only screen and (max-width: 1199px) {
  .mt-120 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-120 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-120 {
    margin-top: 60px;
  }
}
.mt-125 {
  margin-top: 125px;
}
@media only screen and (max-width: 1199px) {
  .mt-125 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-125 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-125 {
    margin-top: 60px;
  }
}
.mt-130 {
  margin-top: 130px;
}
@media only screen and (max-width: 1199px) {
  .mt-130 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-130 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-130 {
    margin-top: 60px;
  }
}
.mt-135 {
  margin-top: 135px;
}
@media only screen and (max-width: 1199px) {
  .mt-135 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-135 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-135 {
    margin-top: 60px;
  }
}
.mt-140 {
  margin-top: 140px;
}
@media only screen and (max-width: 1199px) {
  .mt-140 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-140 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-140 {
    margin-top: 60px;
  }
}
.mt-145 {
  margin-top: 145px;
}
@media only screen and (max-width: 1199px) {
  .mt-145 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-145 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-145 {
    margin-top: 60px;
  }
}
.mt-150 {
  margin-top: 150px;
}
@media only screen and (max-width: 1199px) {
  .mt-150 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-150 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-150 {
    margin-top: 60px;
  }
}
.mt-160 {
  margin-top: 160px;
}
@media only screen and (max-width: 1199px) {
  .mt-160 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-160 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-160 {
    margin-top: 60px;
  }
}
.mt-170 {
  margin-top: 170px;
}
@media only screen and (max-width: 1199px) {
  .mt-170 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-170 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-170 {
    margin-top: 60px;
  }
}
.mt-180 {
  margin-top: 180px;
}
@media only screen and (max-width: 1199px) {
  .mt-180 {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-180 {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-180 {
    margin-top: 60px;
  }
}
.mt-190 {
  margin-top: 190px;
}
@media only screen and (max-width: 1199px) {
  .mt-190 {
    margin-top: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-190 {
    margin-top: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-190 {
    margin-top: 100px;
  }
}
.mt-200 {
  margin-top: 200px;
}
@media only screen and (max-width: 1199px) {
  .mt-200 {
    margin-top: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .mt-200 {
    margin-top: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-200 {
    margin-top: 100px;
  }
}
.mlr-200 {
  margin-left: 200px !important;
  margin-right: 200px !important;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-15 {
  margin-bottom: 15px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-25 {
  margin-bottom: 25px;
}
.mb-30 {
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .mb-30 {
    margin-bottom: 25px;
  }
}
.mb-35 {
  margin-bottom: 35px;
}
@media only screen and (max-width: 767px) {
  .mb-35 {
    margin-bottom: 30px;
  }
}
.mb-40 {
  margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .mb-40 {
    margin-bottom: 30px;
  }
}
.mb-45 {
  margin-bottom: 45px;
}
@media only screen and (max-width: 767px) {
  .mb-45 {
    margin-bottom: 30px;
  }
}
.mb-50 {
  margin-bottom: 50px;
}
@media only screen and (max-width: 767px) {
  .mb-50 {
    margin-bottom: 30px;
  }
}
.mb-55 {
  margin-bottom: 55px;
}
@media only screen and (max-width: 991px) {
  .mb-55 {
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-55 {
    margin-bottom: 30px;
  }
}
.mb-60 {
  margin-bottom: 60px;
}
@media only screen and (max-width: 991px) {
  .mb-60 {
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-60 {
    margin-bottom: 30px;
  }
}
.mb-65 {
  margin-bottom: 65px;
}
@media only screen and (max-width: 991px) {
  .mb-65 {
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-65 {
    margin-bottom: 30px;
  }
}
.mb-70 {
  margin-bottom: 70px;
}
@media only screen and (max-width: 991px) {
  .mb-70 {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-70 {
    margin-bottom: 35px;
  }
}
.mb-75 {
  margin-bottom: 75px;
}
@media only screen and (max-width: 991px) {
  .mb-75 {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-75 {
    margin-bottom: 35px;
  }
}
.mb-80 {
  margin-bottom: 80px;
}
@media only screen and (max-width: 991px) {
  .mb-80 {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-80 {
    margin-bottom: 35px;
  }
}
.mb-85 {
  margin-bottom: 85px;
}
@media only screen and (max-width: 991px) {
  .mb-85 {
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-85 {
    margin-bottom: 35px;
  }
}
.mb-90 {
  margin-bottom: 90px;
}
@media only screen and (max-width: 1199px) {
  .mb-90 {
    margin-bottom: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-90 {
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-90 {
    margin-bottom: 40px;
  }
}
.mb-95 {
  margin-bottom: 95px;
}
@media only screen and (max-width: 1199px) {
  .mb-95 {
    margin-bottom: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-95 {
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-95 {
    margin-bottom: 40px;
  }
}
.mb-100 {
  margin-bottom: 100px;
}
@media only screen and (max-width: 991px) {
  .mb-100 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-100 {
    margin-bottom: 60px;
  }
}
.mb-105 {
  margin-bottom: 105px;
}
@media only screen and (max-width: 991px) {
  .mb-105 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-105 {
    margin-bottom: 60px;
  }
}
.mb-110 {
  margin-bottom: 110px;
}
@media only screen and (max-width: 1199px) {
  .mb-110 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-110 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-110 {
    margin-bottom: 60px;
  }
}
.mb-115 {
  margin-bottom: 115px;
}
@media only screen and (max-width: 1199px) {
  .mb-115 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-115 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-115 {
    margin-bottom: 60px;
  }
}
.mb-120 {
  margin-bottom: 120px;
}
@media only screen and (max-width: 1199px) {
  .mb-120 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-120 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-120 {
    margin-bottom: 60px;
  }
}
.mb-125 {
  margin-bottom: 125px;
}
@media only screen and (max-width: 1199px) {
  .mb-125 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-125 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-125 {
    margin-bottom: 60px;
  }
}
.mb-130 {
  margin-bottom: 130px;
}
@media only screen and (max-width: 1199px) {
  .mb-130 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-130 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-130 {
    margin-bottom: 60px;
  }
}
.mb-135 {
  margin-bottom: 135px;
}
@media only screen and (max-width: 1199px) {
  .mb-135 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-135 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-135 {
    margin-bottom: 60px;
  }
}
.mb-140 {
  margin-bottom: 140px;
}
@media only screen and (max-width: 1199px) {
  .mb-140 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-140 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-140 {
    margin-bottom: 60px;
  }
}
.mb-145 {
  margin-bottom: 145px;
}
@media only screen and (max-width: 1199px) {
  .mb-145 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-145 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-145 {
    margin-bottom: 60px;
  }
}
.mb-150 {
  margin-bottom: 150px;
}
@media only screen and (max-width: 1199px) {
  .mb-150 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-150 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-150 {
    margin-bottom: 60px;
  }
}
.mb-160 {
  margin-bottom: 160px;
}
@media only screen and (max-width: 1199px) {
  .mb-160 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-160 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-160 {
    margin-bottom: 60px;
  }
}
.mb-170 {
  margin-bottom: 170px;
}
@media only screen and (max-width: 1199px) {
  .mb-170 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-170 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-170 {
    margin-bottom: 60px;
  }
}
.mb-180 {
  margin-bottom: 180px;
}
@media only screen and (max-width: 1199px) {
  .mb-180 {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-180 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-180 {
    margin-bottom: 60px;
  }
}
.mb-190 {
  margin-bottom: 190px;
}
@media only screen and (max-width: 1199px) {
  .mb-190 {
    margin-bottom: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-190 {
    margin-bottom: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-190 {
    margin-bottom: 100px;
  }
}
.mb-200 {
  margin-bottom: 200px;
}
@media only screen and (max-width: 1199px) {
  .mb-200 {
    margin-bottom: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .mb-200 {
    margin-bottom: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .mb-200 {
    margin-bottom: 100px;
  }
}
.ml-5 {
  margin-left: 5px;
}
@media only screen and (max-width: 767px) {
  .ml-5 {
    margin-left: 0;
  }
}
.ml-10 {
  margin-left: 10px;
}
@media only screen and (max-width: 767px) {
  .ml-10 {
    margin-left: 0;
  }
}
.ml-15 {
  margin-left: 15px;
}
@media only screen and (max-width: 767px) {
  .ml-15 {
    margin-left: 0;
  }
}
.ml-20 {
  margin-left: 20px;
}
@media only screen and (max-width: 991px) {
  .ml-20 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-20 {
    margin-left: 0;
  }
}
.ml-25 {
  margin-left: 25px;
}
@media only screen and (max-width: 1199px) {
  .ml-25 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-25 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-25 {
    margin-left: 0;
  }
}
.ml-30 {
  margin-left: 30px;
}
@media only screen and (max-width: 1199px) {
  .ml-30 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-30 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-30 {
    margin-left: 0;
  }
}
.ml-35 {
  margin-left: 35px;
}
@media only screen and (max-width: 1399px) {
  .ml-35 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-35 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-35 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-35 {
    margin-left: 0;
  }
}
.ml-40 {
  margin-left: 40px;
}
@media only screen and (max-width: 1399px) {
  .ml-40 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-40 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-40 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-40 {
    margin-left: 0;
  }
}
.ml-45 {
  margin-left: 45px;
}
@media only screen and (max-width: 1919px) {
  .ml-45 {
    margin-left: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-45 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-45 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-45 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-45 {
    margin-left: 0;
  }
}
.ml-50 {
  margin-left: 50px;
}
@media only screen and (max-width: 1919px) {
  .ml-50 {
    margin-left: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-50 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-50 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-50 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-50 {
    margin-left: 0;
  }
}
.ml-55 {
  margin-left: 55px;
}
@media only screen and (max-width: 1919px) {
  .ml-55 {
    margin-left: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-55 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-55 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-55 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-55 {
    margin-left: 0;
  }
}
.ml-60 {
  margin-left: 60px;
}
@media only screen and (max-width: 1919px) {
  .ml-60 {
    margin-left: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-60 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-60 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-60 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-60 {
    margin-left: 0;
  }
}
.ml-65 {
  margin-left: 65px;
}
@media only screen and (max-width: 1919px) {
  .ml-65 {
    margin-left: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-65 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-65 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-65 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-65 {
    margin-left: 0;
  }
}
.ml-70 {
  margin-left: 70px;
}
@media only screen and (max-width: 1919px) {
  .ml-70 {
    margin-left: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-70 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-70 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-70 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-70 {
    margin-left: 0;
  }
}
.ml-75 {
  margin-left: 75px;
}
@media only screen and (max-width: 1919px) {
  .ml-75 {
    margin-left: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-75 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-75 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-75 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-75 {
    margin-left: 0;
  }
}
.ml-80 {
  margin-left: 80px;
}
@media only screen and (max-width: 1919px) {
  .ml-80 {
    margin-left: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-80 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-80 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-80 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-80 {
    margin-left: 0;
  }
}
.ml-85 {
  margin-left: 85px;
}
@media only screen and (max-width: 1919px) {
  .ml-85 {
    margin-left: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-85 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-85 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-85 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-85 {
    margin-left: 0;
  }
}
.ml-90 {
  margin-left: 90px;
}
@media only screen and (max-width: 1919px) {
  .ml-90 {
    margin-left: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-90 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-90 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-90 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-90 {
    margin-left: 0;
  }
}
.ml-100 {
  margin-left: 100px;
}
@media only screen and (max-width: 1919px) {
  .ml-100 {
    margin-left: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .ml-100 {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .ml-100 {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .ml-100 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .ml-100 {
    margin-left: 0;
  }
}
.ptf-70 {
  padding-top: 70px;
}
.ptf-80 {
  padding-top: 80px;
}
@media only screen and (max-width: 767px) {
  .sm-pb-30 {
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .sm-pb-40 {
    padding-bottom: 40px;
  }
}
.mbm-1 {
  margin-bottom: -1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  color: #fff;
}
ul,
ol {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  transition: all 0.3s;
  color: inherit;
}
a:hover {
  color: var(--primary);
}
button {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
}
p {
  padding: 0;
  margin: 0;
  line-height: 1.41;
  font-weight: 400;
  font-size: 18px;
  color: var(--secondary);
}
strong {
  font-weight: 500;
}
video,
iframe,
img {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
}
.medium {
  font-weight: 600;
}
.bold {
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .g-0 {
    padding-right: 15px;
    padding-left: 15px;
  }
  .row.g-0 {
    padding-right: 0;
    padding-left: 0;
  }
}
main {
  display: inline-block;
  width: 100%;
}
h1 {
  font-size: 48px;
}
h2 {
  font-size: 36px;
}
h3 {
  font-size: 32px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 20px;
}
h6 {
  font-size: 18px;
}
@font-face {
  font-family: "recoleta";
  src: url("../fonts/recoleta/Latinotype - Recoleta Medium.otf");
  font-display: swap;
}
@font-face {
  font-family: "beatricetrial";
  src: url("../fonts/Beatrice/BeatriceTRIAL-Regular-BF64829e8f591fb.ttf");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "beatricetrial";
  src: url("../fonts/Beatrice/BeatriceTRIAL-Medium-BF64829e8f63463.ttf");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "getaway";
  src: url("../fonts/getaway/getaway.otf");
  font-display: swap;
}
@font-face {
  font-family: "canelatrial";
  src: url("../fonts/Canela-Medium-Trial/Canela-Thin-Trial.otf");
  font-display: swap;
}
@font-face {
  font-family: "bonvivant";
  src: url("../fonts/BonVivant/BonVivant-Regular.ttf");
  font-display: swap;
}
:root {
  --font_recoleta: "recoleta";
  --font_teko: "Teko", sans-serif;
  --font_dmsans: "DM Sans", sans-serif;
  --font_plusjakartasans: "Plus Jakarta Sans", sans-serif;
  --font_beatricetrial: "beatricetrial";
  --font_khand: "Khand", sans-serif;
  --font_getaway: "getaway";
  --font_instrumentsans: "Instrument Sans", sans-serif;
  --font_spacegrotesk: "Space Grotesk", sans-serif;
  --font_canelatrial: "canelatrial";
  --font_bonvivant: "bonvivant";
}
.font-heading-recoleta-medium h1,
.font-heading-recoleta-medium h2,
.font-heading-recoleta-medium h3,
.font-heading-recoleta-medium h4,
.font-heading-recoleta-medium h5,
.font-heading-recoleta-medium h6 {
  font-family: var(--font_recoleta);
  font-weight: 500;
  line-height: 1.05;
}
.font-heading-teko-bold h1,
.font-heading-teko-bold h2,
.font-heading-teko-bold h3,
.font-heading-teko-bold h4,
.font-heading-teko-bold h5,
.font-heading-teko-bold h6 {
  font-family: var(--font_teko);
  font-weight: 700;
  line-height: 0.94;
}
.font-heading-dmsans-medium h1,
.font-heading-dmsans-medium h2,
.font-heading-dmsans-medium h3,
.font-heading-dmsans-medium h4,
.font-heading-dmsans-medium h5,
.font-heading-dmsans-medium h6 {
  font-family: var(--font_dmsans);
  font-weight: 500;
  line-height: 1;
}
.font-heading-plusjakartasans-regular h1,
.font-heading-plusjakartasans-regular h2,
.font-heading-plusjakartasans-regular h3,
.font-heading-plusjakartasans-regular h4,
.font-heading-plusjakartasans-regular h5,
.font-heading-plusjakartasans-regular h6 {
  font-family: var(--font_plusjakartasans);
  font-weight: 400;
  line-height: 1;
}
.font-heading-plusjakartasans-regular-2 h1,
.font-heading-plusjakartasans-regular-2 h2,
.font-heading-plusjakartasans-regular-2 h3,
.font-heading-plusjakartasans-regular-2 h4,
.font-heading-plusjakartasans-regular-2 h5,
.font-heading-plusjakartasans-regular-2 h6 {
  font-family: var(--font_plusjakartasans);
  font-weight: 400;
  line-height: 1.08;
}
.font-heading-beatricetrial-regular h1,
.font-heading-beatricetrial-regular h2,
.font-heading-beatricetrial-regular h3,
.font-heading-beatricetrial-regular h4,
.font-heading-beatricetrial-regular h5,
.font-heading-beatricetrial-regular h6 {
  font-family: var(--font_beatricetrial);
  font-weight: 400;
  line-height: 1.07;
}
.font-heading-beatricetrial-regular-2 h1,
.font-heading-beatricetrial-regular-2 h2,
.font-heading-beatricetrial-regular-2 h3,
.font-heading-beatricetrial-regular-2 h4,
.font-heading-beatricetrial-regular-2 h5,
.font-heading-beatricetrial-regular-2 h6 {
  font-family: var(--font_beatricetrial);
  font-weight: 400;
  line-height: 1.08;
}
.font-heading-beatricetrial-medium h1,
.font-heading-beatricetrial-medium h2,
.font-heading-beatricetrial-medium h3,
.font-heading-beatricetrial-medium h4,
.font-heading-beatricetrial-medium h5,
.font-heading-beatricetrial-medium h6 {
  font-family: var(--font_beatricetrial);
  font-weight: 500;
  line-height: 1.08;
}
.font-heading-khand-bold h1,
.font-heading-khand-bold h2,
.font-heading-khand-bold h3,
.font-heading-khand-bold h4,
.font-heading-khand-bold h5,
.font-heading-khand-bold h6 {
  font-family: var(--font_khand);
  font-weight: 700;
  line-height: 0.88;
}
.font-heading-instumentsans-medium h1,
.font-heading-instumentsans-medium h2,
.font-heading-instumentsans-medium h3,
.font-heading-instumentsans-medium h4,
.font-heading-instumentsans-medium h5,
.font-heading-instumentsans-medium h6 {
  font-family: var(--font_instrumentsans);
  font-weight: 500;
  line-height: 1;
}
.font-heading-instumentsans-semibold h1,
.font-heading-instumentsans-semibold h2,
.font-heading-instumentsans-semibold h3,
.font-heading-instumentsans-semibold h4,
.font-heading-instumentsans-semibold h5,
.font-heading-instumentsans-semibold h6 {
  font-family: var(--font_instrumentsans);
  font-weight: 600;
  line-height: 1;
}
.font-heading-spacegrotesk-bold h1,
.font-heading-spacegrotesk-bold h2,
.font-heading-spacegrotesk-bold h3,
.font-heading-spacegrotesk-bold h4,
.font-heading-spacegrotesk-bold h5,
.font-heading-spacegrotesk-bold h6 {
  font-family: var(--font_spacegrotesk);
  font-weight: 700;
  line-height: 1;
}
.font-heading-canelatrial-thin h1,
.font-heading-canelatrial-thin h2,
.font-heading-canelatrial-thin h3,
.font-heading-canelatrial-thin h4,
.font-heading-canelatrial-thin h5,
.font-heading-canelatrial-thin h6 {
  font-family: var(--font_canelatrial);
  font-weight: 300;
  line-height: 1.2;
}
.cf_parallax_image {
  overflow: hidden;
}
@keyframes wcBubble {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcZoom {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcZoom_2 {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.9;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcSlideBottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes reveal {
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
@keyframes wcfadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes characters {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes sheen {
  50% {
    transform: translateY(-20px);
    color: var(--primary);
  }
}
.body-overlay {
  position: fixed;
  z-index: 9;
  pointer-events: none;
  top: 0;
  opacity: 1;
  inset-inline-start: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: repeat;
  background-position: top left;
  background-image: url(../imgs/writer/body-bg.webp);
}
.container-xl {
  max-width: 1550px;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #d6d6d6;
}
::-webkit-scrollbar-thumb {
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.pagination.style-1 {
  display: flex;
  gap: 20px;
}
.pagination.style-1 li:last-child {
  padding-inline-start: 20px;
}
.pagination.style-1 li a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dir-rtl .pagination.style-1 li a img {
  transform: rotate(180deg);
}
.pagination.style-1 li a.current {
  color: #999;
}
.register-form-box {
  background-color: var(--white);
  border-radius: 30px;
  width: 420px;
  padding: 70px 45px 80px;
  position: relative;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .register-form-box {
    margin: 0 10px;
    padding: 50px 25px 60px;
    width: calc(100% - 20px);
  }
}
.register-form-box .close-btn {
  width: 45px;
  height: 45px;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.register-form-box .btn-wrapper {
  position: absolute;
  right: 10px;
  top: 10px;
}
.register-form-box .title {
  font-size: 30px;
}
.register-form-box .title span {
  font-weight: 400;
  color: var(--primary);
}
.register-form-box .icon {
  margin-top: 20px;
  margin-bottom: 45px;
}
.register-form-box .input-field input {
  width: 100%;
  height: 60px;
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 0 30px;
  outline: none;
}
.register-form-box .input-field input:focus {
  border-color: var(--theme);
}
.register-form-box .input-field:not(:first-child) {
  margin-top: 12px;
}
.register-form-box .policy-field {
  margin-top: 20px;
  margin-bottom: 42px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.register-form-box .policy-field label {
  font-size: 14px;
}
.register-form-box .policy-field label a {
  font-weight: 600;
  text-decoration: underline;
}
.register-form-box .note {
  margin-top: 15px;
  text-align: start;
}
.register-form-box .note p {
  font-size: 14px;
}
.register-form-box .note p a {
  font-weight: 600;
  text-decoration: underline;
}
.register-form-box button {
  width: 100%;
}
.register-form-box .alternative-title {
  font-size: 16px;
  position: relative;
  margin-top: 38px;
}
.register-form-box .alternative-title::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--border);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.register-form-box .alternative-title span {
  padding: 0 18px;
  background-color: var(--white);
  display: inline-block;
  position: relative;
}
.register-form-box .social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 37px;
}
.register-form-box .social-links a {
  width: 60px;
  height: 60px;
  background-color: #f5f5f5;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--primary);
}
.register-form-box .social-links a:hover {
  background-color: var(--theme);
}
.login-form-box {
  background-color: var(--white);
  border-radius: 30px;
  width: 420px;
  padding: 70px 45px 80px;
  position: relative;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .login-form-box {
    margin: 0 10px;
    padding: 50px 25px 60px;
    width: calc(100% - 20px);
  }
}
.login-form-box .close-btn {
  width: 45px;
  height: 45px;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.login-form-box .btn-wrapper {
  position: absolute;
  right: 10px;
  top: 10px;
}
.login-form-box .title {
  font-size: 30px;
}
.login-form-box .title span {
  font-weight: 400;
  color: var(--primary);
}
.login-form-box .icon {
  margin-top: 20px;
  margin-bottom: 45px;
}
.login-form-box .input-field input {
  width: 100%;
  height: 60px;
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 0 30px;
  outline: none;
}
.login-form-box .input-field input:focus {
  border-color: var(--theme);
}
.login-form-box .input-field:not(:first-child) {
  margin-top: 12px;
}
.login-form-box .policy-field {
  margin-top: 15px;
  margin-bottom: 42px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.login-form-box .policy-field label {
  font-size: 14px;
}
.login-form-box .policy-field label a {
  font-weight: 600;
  text-decoration: underline;
}
.login-form-box .note {
  margin-top: 15px;
  text-align: start;
}
.login-form-box .note p {
  font-size: 14px;
}
.login-form-box .note p a {
  font-weight: 600;
  text-decoration: underline;
}
.login-form-box button {
  width: 100%;
}
.login-form-box .forget-password {
  font-size: 14px;
  color: var(--theme);
  margin-left: auto;
}
.pos-abs {
  position: absolute;
}
.header-area {
  transition: 0.3s;
}
.header-area.sticky {
  position: fixed !important;
  background-color: var(--white);
  z-index: 9999;
}
.header-area.sticky .header-area__inner {
  height: 70px !important;
}
.header-area.sticky button i {
  color: var(--primary);
}
.modal {
  z-index: 99999;
}
.modal-content {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
}
.btn-primary {
  background-color: rgba(0, 0, 0, 0);
  color: unset;
  border: unset;
  outline: unset;
}
.btn-primary:hover {
  background-color: unset;
}
.btn-primary:focus {
  outline: unset;
  background-color: unset;
  border: unset;
}
.form-search input {
  width: 100%;
  height: 55px;
  background: rgba(0, 0, 0, 0);
  border: 0;
  color: var(--white);
}
.form-search input:focus {
  outline: 0;
}
.form-search {
  display: flex;
  gap: 10px;
  border: 1px solid #19242b;
  border-radius: 70px;
  padding: 0 15px;
}
.form-search button i {
  color: var(--white);
}
.btn-close {
  content: "";
  font-family: "icomoon";
  font-size: 16px;
  opacity: 1;
  filter: brightness(100) contrast(0);
  border-radius: 50px;
  width: 2em;
  height: 2em;
  border: 1px solid var(--white);
  position: absolute;
  inset-inline-end: 20px;
  top: 20px;
  transition: unset;
}
.modal {
  background-color: var(--primary);
}
@media screen and (min-width: 1550px) {
  .container-large {
    max-width: 1630px;
  }
  .container-x-large {
    max-width: 1790px;
  }
  .container-hd {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
}
.circle-text {
  width: 140px;
  height: 140px;
  position: relative;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: hidden;
}
@media only screen and (max-width: 991px) {
  .circle-text {
    width: 120px;
    height: 120px;
  }
}
.circle-text .text {
  animation: spinner 5s infinite linear;
  padding: 2px;
}
.circle-text .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.circle-text:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 37px solid rgba(0, 0, 0, 0);
  border-radius: 50%;
}
.p-relative {
  position: relative;
}
.p-absolute {
  position: absolute;
}
.fix {
  overflow: hidden;
}
.bg-full {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.bg-full img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.has-top-line {
  position: relative;
  padding-top: 10px;
}
.has-top-line:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: currentColor;
  top: 0;
  left: 0;
}
.has-bottom-line {
  position: relative;
  padding-bottom: 10px;
}
.has-bottom-line:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: currentColor;
  bottom: 0;
  left: 0;
}
.has-left-line {
  position: relative;
  padding-inline-start: 35px;
  display: inline-block;
}
.has-left-line:before {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background-color: currentColor;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
}
.has-right-line {
  position: relative;
  padding-inline-end: 35px;
  display: inline-block;
}
.has-right-line:after {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background-color: currentColor;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
}
.wc-btn-play {
  width: 56px;
  height: 56px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1.5px solid currentColor;
  color: var(--primary);
  border-radius: 50%;
  transition: all 0.5s;
  font-size: 14px;
}
@media only screen and (max-width: 767px) {
  .wc-btn-play {
    width: 50px;
    height: 50px;
    font-size: 12px;
    border-width: 1px;
  }
}
.wc-btn-play:hover {
  color: var(--theme, --action);
}
.wc-btn-play.light {
  color: var(--white);
}
.wc-btn-play.light:hover {
  color: var(--white);
}
.line-area {
  position: relative;
  z-index: 1;
}
.lines {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  z-index: -1;
}
.lines .line {
  width: 1px;
  height: 100%;
  background-color: var(--border);
  display: inline-block;
  position: relative;
  z-index: 1;
}
.wc-btn-icon i {
  transform: rotate(-45deg);
  transition: all 0.3s;
  font-size: 20px;
  color: var(--primary);
}
.dir-rtl .wc-btn-icon i {
  transform: rotate(-135deg);
}
.wc-btn-icon:hover i {
  transform: rotate(0);
}
.dir-rtl .wc-btn-icon:hover i {
  transform: rotate(-180deg);
}
.list-check li {
  position: relative;
  padding-inline-start: 30px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 10px;
}
.list-check li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  background-image: url("../imgs/electrician/check-mark.webp");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  top: 4px;
  transform: rotateY(0deg);
}
.dir-rtl .list-check li::before {
  transform: rotateY(180deg);
}
.list-check li:last-child {
  margin-bottom: 0;
}
.list-plus li {
  position: relative;
  padding-inline-start: 30px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  display: inline-block;
  width: 100%;
}
.list-plus li::before {
  content: "+";
  position: absolute;
  inset-inline-start: 0;
  top: -10px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}
.list-plus li:not(:last-child) {
  margin-bottom: 10px;
}
.pos-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.pagination-with-dash {
  font-size: 14px;
  display: flex;
  gap: 10px;
  color: var(--primary);
  align-items: center;
}
.pagination-with-dash .dash {
  width: 100px;
  height: 1px;
  background-color: var(--primary);
}
.pagination-with-dash .swiper-pagination-current {
  display: flex;
  gap: 5px;
  align-items: center;
}
.pagination-with-dash .swiper-pagination-total {
  display: flex;
  gap: 5px;
  align-items: center;
}
.wcf__toggle_switcher .slide-toggle-wrapper {
  display: flex;
  justify-content: center;
}
.wcf__toggle_switcher .slide-toggle-btn {
  --switcher-width: 40px;
  --switcher-border-width: 2px;
  --switcher-indicator-width: 16px;
  background-color: #f0f7f8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.wcf__toggle_switcher .slide-toggle-btn input {
  display: none;
}
.wcf__toggle_switcher .before_label,
.wcf__toggle_switcher .after_label {
  cursor: pointer;
  font-size: 18px;
  color: var(--primary);
}
.wcf__toggle_switcher .toggle-pane {
  display: none;
}
.wcf__toggle_switcher .toggle-pane.show {
  display: block;
}
.wcf__toggle_switcher.style-1 .switcher {
  display: inline-block;
  width: var(--switcher-width);
  height: 20px;
  background-color: #999;
  border: var(--switcher-border-width) solid #999;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}
.wcf__toggle_switcher.style-1 .switcher::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--switcher-indicator-width);
  height: var(--switcher-indicator-width);
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  transform: translate(0px, -50%);
}
.wcf__toggle_switcher.style-1 input:checked + .switcher::before {
  transform: translate(
    calc(
      var(--switcher-width) -
        (var(--switcher-indicator-width) + 2 * var(--switcher-border-width))
    ),
    -50%
  );
}
.wcf__toggle_switcher.style-1 input:checked + .switcher {
  background-color: #000;
  border-color: #000;
}
.wcf__toggle_switcher.style-2 .before_label,
.wcf__toggle_switcher.style-2 .after_label {
  padding: 22px 38px;
  position: relative;
  z-index: 2;
  font-size: 16px;
  line-height: 1;
  color: var(--primary);
}
.wcf__toggle_switcher.style-2 .before_label:after,
.wcf__toggle_switcher.style-2 .after_label:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 60px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--theme);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s;
}
.wcf__toggle_switcher.style-2 .before_label.active,
.wcf__toggle_switcher.style-2 .after_label.active {
  color: var(--primary);
}
.wcf__toggle_switcher.style-2 .before_label.active:after,
.wcf__toggle_switcher.style-2 .after_label.active:after {
  opacity: 1;
  visibility: visible;
  transform: translatex(0);
}
.wcf__toggle_switcher.style-2 .before_label:after {
  transform: translatex(100%);
}
.wcf__toggle_switcher.style-2 .after_label:after {
  transform: translatex(-100%);
}
.wcf__toggle_switcher.style-2 .slide-toggle-btn {
  gap: 0;
  border-radius: 60px;
}
html {
  --container-max-widths: 1320px;
}
@media only screen and (max-width: 1399px) {
  html {
    --container-max-widths: 1140px;
  }
}
@media only screen and (max-width: 1199px) {
  html {
    --container-max-widths: 960px;
  }
}
@media only screen and (max-width: 991px) {
  html {
    --container-max-widths: 720px;
  }
}
@media only screen and (max-width: 767px) {
  html {
    --container-max-widths: 540px;
  }
}
body {
  background-color: #f5f5f5;
}
.img_anim_reveal {
  visibility: hidden;
  overflow: hidden;
}
.img_anim_reveal img {
  -o-object-fit: cover;
  object-fit: cover;
  transform-origin: left;
}
.anim-reveal {
  overflow: hidden;
}
.anim-reveal-line {
  overflow: hidden;
}
.color-white {
  color: var(--white);
}
.color-black {
  color: var(--black);
}
.color-primary {
  color: var(--primary);
}
.color-secondary {
  color: var(--secondary);
}
.wc-bg-white {
  background-color: var(--white);
}
.wc-bg-black {
  background-color: var(--black);
}
.wc-bg-primary {
  background-color: var(--primary);
}
.wc-bg-secondary {
  background-color: var(--secondary);
}
.wc-bg-transparent {
  background-color: rgba(0, 0, 0, 0) !important;
}
.zi-1 {
  z-index: 1;
}
.zi-2 {
  z-index: 2;
}
.zi-0 {
  z-index: 0;
}
.zi--1 {
  z-index: -1;
}
.box-layout {
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden !important;
}
.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.vertically-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.text-indent-40 {
  text-indent: 40px;
}
.text-indent-50 {
  text-indent: 50px;
}
header {
  margin-bottom: -1px;
  z-index: 100;
}
section {
  margin-bottom: -1px;
}
.dir-rtl {
  direction: rtl;
}
.line-divider-sm {
  height: 0.5px;
  background-color: var(--black-9);
}
.swiper,
.swiper-container {
  direction: ltr;
}
.border-e-0 {
  border-inline-end: 0 !important;
}
.border-s-0 {
  border-inline-start: 0 !important;
}
.hover-zoom li a:hover {
  transform: scale(1.1);
}
.hover-rotate li a i {
  transition: all 1s;
}
.hover-rotate li a:hover i {
  transform: rotate(360deg);
}
.hover-space li a:hover {
  letter-spacing: 1px;
}
.hover-border-move li a {
  position: relative;
  transition: all 0.5s;
}
.hover-border-move li a:hover::after {
  width: 100%;
  left: auto;
  right: 0;
}
.hover-border-move li a::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 1px;
  bottom: 0;
  left: 0;
  transition: all 0.5s;
  background-color: currentColor;
}
.menu-hover-default li a:hover {
  color: var(--primary);
}
.menu-hover-space li a:hover {
  letter-spacing: 1px;
}
.anim_img_zoom img {
  transform: scale(1);
  transition: all 1s;
}
.anim_img_zoom:hover img {
  transform: scale(1.1);
}
.title-hover-flip {
  overflow: hidden;
  perspective: 1000px;
}
.title-hover-flip strong {
  font-weight: 400;
  position: relative;
  display: inline-block;
  transition: transform 0.5s;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.title-hover-flip strong:before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  content: attr(data-hover);
  transition: all 0.5s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
}
.title-hover-flip:hover strong {
  transform: rotateX(90deg) translateY(-22px);
}
.service-hover-default:hover {
  background-color: var(--white-6);
}
.service-rollover-right {
  position: relative;
  transition: all 0.5s;
}
.service-rollover-right::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--white-6);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.service-rollover-right:hover::after {
  width: 100%;
  left: auto;
  right: 0%;
}
.service-rollover-left {
  position: relative;
  transition: all 0.5s;
}
.service-rollover-left::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: var(--white-6);
  transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  z-index: -1;
}
.service-rollover-left:hover::after {
  width: 100%;
  right: auto;
  left: 0%;
}
.service-rollover-top {
  position: relative;
  transition: all 0.5s;
}
.service-rollover-top::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  left: 0;
  bottom: 0;
  background-color: var(--white-6);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.service-rollover-top:hover::after {
  height: 100%;
  bottom: auto;
  top: 0%;
}
.service-rollover-bottom {
  position: relative;
  transition: all 0.5s;
}
.service-rollover-bottom::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  top: 0;
  left: 0;
  background-color: var(--white-6);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.service-rollover-bottom:hover::after {
  height: 100%;
  top: auto;
  bottom: 0%;
}
.container-preloader {
  align-items: center;
  cursor: none;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 900;
}
.container-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}
.container-preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  height: 9em;
  width: 9em;
  border: 10px solid var(--white);
  border-top-color: var(--primary);
  margin: 0 auto 3.5em auto;
}
@media only screen and (max-width: 767px) {
  .container-preloader .animation-preloader .spinner {
    margin: 0 auto 0.2em auto;
  }
}
.container-preloader .animation-preloader .txt-loading {
  font: bold 5em "Montserrat", sans-serif;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.container-preloader .animation-preloader .txt-loading .characters {
  color: var(--white);
  position: relative;
  display: inline-block;
}
.dark .container-preloader .animation-preloader .txt-loading .characters {
  color: rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 767px) {
  .container-preloader .animation-preloader .txt-loading .characters {
    font-size: 50px;
  }
}
.container-preloader .animation-preloader .txt-loading .characters:before {
  color: var(--primary);
  content: attr(data-text);
  animation: characters 4s infinite;
  left: 0;
  top: 0;
  opacity: 0;
  position: absolute;
  transform: rotateY(-90deg);
}
.container-preloader
  .animation-preloader
  .txt-loading
  .characters:nth-child(2):before {
  animation-delay: 0.2s;
}
.container-preloader
  .animation-preloader
  .txt-loading
  .characters:nth-child(3):before {
  animation-delay: 0.4s;
}
.container-preloader
  .animation-preloader
  .txt-loading
  .characters:nth-child(4):before {
  animation-delay: 0.6s;
}
.container-preloader
  .animation-preloader
  .txt-loading
  .characters:nth-child(5):before {
  animation-delay: 0.8s;
}
.container-preloader
  .animation-preloader
  .txt-loading
  .characters:nth-child(6):before {
  animation-delay: 1s;
}
.container-preloader .loader-section {
  background-color: var(--black);
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}
.dark .container-preloader .loader-section {
  background-color: var(--white);
}
.container-preloader .loader-section.section-left {
  left: 0;
}
.container-preloader .loader-section.section-right {
  right: 0;
}
.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
.scroll__down {
  display: flex;
  gap: 20px;
  align-items: center;
}
.scroll__down p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--white);
}
.scroll__down span {
  width: 66px;
  height: 106px;
  border: 1px solid var(--black-6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 89px;
}
.scroll__down span i {
  color: var(--white);
}
.scroll__down-wrapper {
  height: 425px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 1399px) {
  .scroll__down-wrapper {
    height: 380px;
  }
}
@media only screen and (max-width: 1199px) {
  .scroll__down-wrapper {
    height: 350px;
  }
}
@media only screen and (max-width: 767px) {
  .scroll__down-wrapper {
    height: auto;
    padding: 40px 0;
  }
}
.scroll-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  bottom: 0px;
  z-index: 9999;
  background: var(--white);
  border-radius: 100px;
  mix-blend-mode: exclusion;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}
.scroll-top.showed {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}
.go-top-writer {
  width: 105px;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  background-image: url(../imgs/writer/go-top.webp);
  background-position: right center;
  background-repeat: no-repeat;
  right: 16%;
  visibility: hidden;
  opacity: 0;
  z-index: 9;
  transition: all 0.5s;
}
.dark .go-top-writer {
  color: var(--black);
  background-image: url(../imgs/writer/go-top-light.webp);
}
.go-top-writer:hover {
  color: var(--primary);
}
.go-top-writer.showed {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .go-top-writer br {
    display: block;
  }
}
.progress-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 200ms linear;
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.progress-wrap::after {
  position: absolute;
  content: "Up";
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: var(--black);
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  transition: all 200ms linear;
  border-radius: 50px;
}
.progress-wrap svg path {
  fill: var(--black-6);
}
.progress-wrap svg.progress-circle path {
  fill: var(--white);
  stroke: var(--theme);
  stroke-width: 5;
  box-sizing: border-box;
  transition: all 200ms linear;
}
.light .scroll__down p {
  color: var(--black);
}
.light .scroll__down span {
  border-color: var(--white-3);
}
.light .scroll__down span i {
  color: var(--black);
}
.light.go-top-writer {
  color: var(--black);
  background-color: rgba(0, 0, 0, 0);
  background-image: url(../imgs/writer/go-top-light.webp);
}
.light.progress-wrap {
  margin: 0;
  background-color: rgba(0, 0, 0, 0);
}
.light.progress-wrap svg path {
  fill: var(--black);
}
.light.progress-wrap::after {
  color: var(--white);
}
.b-radius {
  border-radius: 12px;
}
.wc-btn {
  display: inline-flex;
  transition: all 0.3s;
}
.wc-btn-default {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--white);
  text-transform: capitalize;
  background: rgba(0, 0, 0, 0);
  border-radius: 100px;
  padding: 17px 35px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.3s;
}
.wc-btn-default:hover {
  color: var(--white);
}
.dark .wc-btn-default {
  color: var(--black);
}
.dark .wc-btn-default:hover {
  color: var(--black);
}
.dir-rtl .wc-btn-default i {
  transform: rotateY(180deg);
}
.wc-btn-border {
  gap: 10px;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  padding: 16px 30px;
  border: 1px solid var(--white);
  overflow: hidden;
  transition: all 0.3s;
  z-index: 1;
  position: relative;
}
.wc-btn-border:hover {
  color: var(--white);
}
.dark .wc-btn-border {
  color: var(--black);
  border-color: var(--black);
}
.dark .wc-btn-border:hover {
  color: var(--black);
}
.wc-btn-primary {
  padding: 21px 30px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--white);
  background-color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 15px;
  text-transform: capitalize;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
  gap: 30px;
  white-space: nowrap;
}
.dark .wc-btn-primary {
  color: var(--black);
}
@media only screen and (max-width: 991px) {
  .wc-btn-primary {
    padding: 16px 25px;
  }
}
.wc-btn-primary:hover {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}
.wc-btn-primary.bordered {
  border-color: var(--primary);
  background-color: rgba(0, 0, 0, 0);
  color: var(--primary);
}
.wc-btn-primary.bordered:hover {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--white);
}
.dark .wc-btn-primary.bordered:hover {
  color: var(--black);
}
.dir-rtl .wc-btn-primary i {
  transform: rotateY(180deg);
}
.wc-btn-circle {
  text-align: center;
  width: 70px;
  height: 70px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  border-radius: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
}
@media only screen and (max-width: 1199px) {
  .wc-btn-circle {
    width: 50px;
    height: 50px;
  }
}
.wc-btn-circle:hover {
  background-color: var(--black);
  color: var(--white);
}
.wc-btn-oval {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  border: 1px solid #3f3a36;
  display: inline-block;
  padding: 32px 52px;
  text-align: center;
  transition: all 0.3s;
  border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
}
.dark .wc-btn-oval {
  color: var(--black);
}
.wc-btn-oval:hover {
  color: var(--primary);
}
.wc-btn-light {
  color: var(--white) !important;
  border-color: var(--white) !important;
}
.wc-btn-light:hover {
  color: var(--black) !important;
}
.wc-btn-light span {
  background-color: var(--white) !important;
}
.wc-btn-ellipse {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  padding: 45px 45px;
  position: relative;
  display: inline-block;
  background-color: var(--white);
  border-radius: 100%;
  border-top-left-radius: 200%;
  border-bottom-right-radius: 200%;
  z-index: 1;
}
.dark .wc-btn-ellipse {
  color: var(--black);
  background-color: var(--black);
}
.wc-btn-ellipse:before {
  position: absolute;
  content: "";
  width: calc(100% - 14px);
  height: calc(100% - 2px);
  background-color: var(--black);
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  border-top-left-radius: 200%;
  border-bottom-right-radius: 200%;
}
.dark .wc-btn-ellipse:before {
  background-color: #ededed;
}
.wc-btn-appointment {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--blue-6);
  text-align: center;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 215px;
  width: 215px;
  padding: 20px;
}
@media only screen and (max-width: 1199px) {
  .wc-btn-appointment {
    width: 200px;
    height: 200px;
  }
}
@media only screen and (max-width: 991px) {
  .wc-btn-appointment {
    width: 170px;
    height: 170px;
    font-size: 18px;
  }
}
.wc-btn-appointment i {
  font-size: 24px;
  margin-bottom: 10px;
}
.wc-btn-appointment:hover {
  color: var(--blue-3);
}
.wc-btn-link {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--white);
  display: inline-block;
  text-transform: uppercase;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dark .wc-btn-link {
  color: var(--black);
}
.wc-btn-link i {
  transform: rotate(-45deg);
  transition: all 0.3s;
}
.wc-btn-link:hover {
  color: var(--primary);
}
.wc-btn-link:hover i {
  transform: rotate(0);
  color: var(--primary);
}
.about-btn {
  display: inline-block;
  padding: 15px 30px;
  background-color: var(--primary);
  color: var(--black);
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
}
.about-btn img {
  padding-left: 15px;
}
.readmore-btn img {
  margin-bottom: 3px;
}
.play_btn_5 {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--white);
}
@media only screen and (max-width: 991px) {
  .play_btn_5 {
    height: 80px;
    width: 80px;
  }
}
.play_btn_5:hover {
  border-color: var(--primary);
}
.play_btn_5 i {
  font-size: 20px;
  color: var(--white);
}
.dark .play_btn_5 i {
  color: var(--black);
}
.dark .play_btn_5 img {
  filter: brightness(0);
}
.get-touch {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white-11);
  padding: 13px 18px;
  display: inline-block;
  text-transform: uppercase;
  border: 1px solid var(--white);
  margin-inline-end: 40px;
}
.get-touch:hover {
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .get-touch {
    padding: 12px 10px;
    margin-inline-end: 12px;
  }
}
.wc-btns-group {
  text-align: center;
  display: flex;
}
@media only screen and (max-width: 991px) {
  .wc-btns-group {
    flex-direction: column;
  }
}
@media only screen and (max-width: 767px) {
  .wc-btns-group {
    padding: 40px 0;
  }
  .wc-btns-group br {
    display: block;
  }
}
.wc-btns-group .btn-wrapper a {
  width: 140px;
  height: 140px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--white);
  border-radius: 50%;
  color: var(--black);
  font-weight: 500;
}
@media only screen and (max-width: 1199px) {
  .wc-btns-group .btn-wrapper a {
    width: 110px;
    height: 110px;
  }
}
.wc-btns-group .btn-wrapper:first-child a {
  margin-inline-end: -15px;
  background-color: var(--primary);
}
@media only screen and (max-width: 991px) {
  .wc-btns-group .btn-wrapper:first-child a {
    margin-inline-end: 0;
  }
}
.wc-btns-group .btn-wrapper:first-child a span {
  background-color: var(--white);
}
.wc-btns-group .btn-wrapper:last-child a {
  margin-inline-start: -15px;
}
.dark .wc-btns-group .btn-wrapper:last-child a {
  background: var(--black);
  color: var(--white);
}
@media only screen and (max-width: 991px) {
  .wc-btns-group .btn-wrapper:last-child a {
    margin-inline-start: 0;
    margin-top: -15px;
  }
}
.wc-btns-group .btn-wrapper:last-child a:hover {
  border: 0;
}
.wc-btns-group .btn-wrapper:last-child a span {
  background-color: var(--primary);
}
.wc-btns-group-wrap {
  height: 425px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--black-6);
}
.dark .wc-btns-group-wrap {
  border-color: #f3f2f2;
}
@media only screen and (max-width: 1399px) {
  .wc-btns-group-wrap {
    height: 380px;
  }
}
@media only screen and (max-width: 1199px) {
  .wc-btns-group-wrap {
    height: 350px;
  }
}
@media only screen and (max-width: 767px) {
  .wc-btns-group-wrap {
    height: auto;
  }
}
.wc-btns-group a:hover {
  border: 0;
}
.wc-btns-group a span {
  background-color: var(--white);
}
.btn-hover-bgchange {
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.btn-hover-bgchange span {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  z-index: -1;
  border-radius: 100%;
  transition: all 1s;
  background-color: var(--primary);
  transform: translate(-50%, -50%);
}
.btn-hover-bgchange:hover {
  color: var(--black);
  border: 1px solid var(--primary);
}
.btn-hover-bgchange:hover span {
  width: 400px;
  height: 400px;
}
.wc-btn-link-none {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.85;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 30px;
}
.wc-btn-link-none:hover {
  color: var(--action);
}
.wc-btn-underline {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  white-space: nowrap;
}
.wc-btn-underline:hover::before {
  width: 0;
}
.wc-btn-underline::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  bottom: 0px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: 0.3s;
}
.wc-btn-underline i,
.wc-btn-underline img {
  font-size: 10px;
}
.dir-rtl .wc-btn-underline i,
.dir-rtl .wc-btn-underline img {
  transform: rotateY(180deg);
}
.wc-btn-normal {
  display: inline-flex;
  position: relative;
  color: var(--secondary);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  align-items: center;
  gap: 5px;
}
.wc-btn-normal:hover {
  color: var(--theme);
}
.wc-btn-normal i {
  font-size: 14px;
}
.dir-rtl .wc-btn-normal i {
  transform: rotateY(180deg);
}
.btn-text-flip {
  perspective: 1000px;
}
.btn-text-flip:hover span {
  transform: rotateX(90deg) translateY(-12px);
  color: inherit;
}
.btn-text-flip span {
  position: relative;
  display: inline-block;
  padding: 0;
  transition: transform 0.5s;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.btn-text-flip span:before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  content: attr(data-text);
  transition: color 0.5s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
  text-align: center;
}
.wc-btn-group {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
}
.wc-btn-group > *:nth-child(1) {
  transform: scale3d(0.5, 0.5, 1);
  margin-inline-end: -40px;
}
.wc-btn-group > *:nth-child(2) {
  transform: scale3d(1, 1, 1);
}
.wc-btn-group > *:nth-child(3) {
  transform: scale3d(1, 1, 1);
  margin-inline-start: 0;
}
.wc-btn-group:hover > *:nth-child(1) {
  transform: scale3d(1, 1, 1);
  margin-inline-end: 0;
}
.wc-btn-group:hover > *:nth-child(2) {
  transform: scale3d(1, 1, 1);
}
.wc-btn-group:hover > *:nth-child(3) {
  transform: scale3d(0.5, 0.5, 1);
  margin-inline-start: -40px;
}
@keyframes mask_animation {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes mask_animation_2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.btn-hover-default {
  transition: all 0.5s;
}
.btn-hover-default:hover {
  color: var(--black);
  background-color: var(--white);
}
.btn-hover-cross {
  overflow: hidden;
  position: relative;
  transition: all 1s;
}
.btn-hover-cross::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: var(--primary);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}
.btn-hover-cross:hover {
  border-color: var(--primary);
  background-color: rgba(0, 0, 0, 0);
}
.btn-hover-cross:hover::after {
  height: 120%;
  opacity: 1;
}
.btn-hover-divide {
  overflow: hidden;
  position: relative;
  transition: all 1s;
  z-index: 1;
}
.btn-hover-divide::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: var(--primary);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}
.btn-hover-divide:hover {
  border-color: var(--primary);
  background-color: rgba(0, 0, 0, 0) !important;
  border-color: rgba(0, 0, 0, 0);
}
.btn-hover-divide:hover::after {
  height: 400%;
  opacity: 1;
}
.btn-hover-cropping {
  overflow: hidden;
  position: relative;
  transition: all 1s;
}
.btn-hover-cropping::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: var(--primary);
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}
.btn-hover-cropping:hover {
  border-color: var(--primary);
  background-color: rgba(0, 0, 0, 0);
}
.btn-hover-cropping:hover::after {
  height: 400%;
  opacity: 1;
}
.btn-hover-mask {
  gap: 10px;
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s;
  border-radius: 5px;
  color: var(--white);
  font-weight: 400;
  font-size: 16px;
  border: 1px solid var(--white);
  z-index: 1;
}
.btn-hover-mask::after {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  position: absolute;
  content: attr(data-text);
  cursor: pointer;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--white);
  -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.webp");
  mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.webp");
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
  animation: mask_animation_2 0.7s steps(22) forwards;
}
.btn-hover-mask:hover {
  color: var(--white);
}
.btn-hover-mask:hover::after {
  animation: mask_animation 0.7s steps(22) forwards;
}
.dark .btn-hover-mask {
  border-color: var(--black);
}
.dark .btn-hover-mask::after {
  z-index: -1;
  color: var(--white);
  background-color: var(--black);
}
.dark .btn-hover-mask:hover {
  color: var(--black);
}
.btn-rollover-top {
  position: relative;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn-rollover-top:before {
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: "";
  background-color: var(--primary);
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn-rollover-top:hover {
  border-color: var(--primary);
  background-color: rgba(0, 0, 0, 0);
}
.btn-rollover-top:hover::before {
  top: 0%;
  bottom: auto;
  height: 100%;
}
.btn-rollover-left {
  position: relative;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn-rollover-left::before {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: "";
  background-color: var(--primary);
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.btn-rollover-left:hover {
  border-color: var(--primary);
  background-color: rgba(0, 0, 0, 0);
}
.btn-rollover-left:hover::before {
  left: 0%;
  right: auto;
  width: 100%;
}
.btn-rollover-cross {
  overflow: hidden;
  position: relative;
  transition: all 0.5s;
}
.btn-rollover-cross::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 100%;
  left: 100%;
  opacity: 0;
  border-bottom: 3px solid var(--primary);
  border-left: 3px solid var(--primary);
  transition: all 0.75s;
}
.btn-rollover-cross::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 100%;
  right: 100%;
  opacity: 0;
  border-top: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  transition: all 0.75s;
}
.btn-rollover-cross:hover {
  border-color: rgba(0, 0, 0, 0);
  color: var(--primary);
}
.btn-rollover-cross:hover::before {
  bottom: 0;
  left: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.btn-rollover-cross:hover::after {
  top: 0;
  right: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.btn-parallal-border {
  overflow: hidden;
  position: relative;
  transition: all 0.5s;
}
.btn-parallal-border::before {
  position: absolute;
  content: "";
  width: 0%;
  height: 0%;
  bottom: 0;
  left: 0;
  opacity: 0;
  border-bottom: 3px solid var(--primary);
  border-left: 3px solid var(--primary);
  border-radius: 5px;
  transition: all 0.75s;
}
.btn-parallal-border::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 0%;
  top: 0;
  right: 0;
  opacity: 0;
  border-top: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  border-radius: 5px;
  transition: all 0.75s;
}
.btn-parallal-border:hover {
  border-color: rgba(0, 0, 0, 0);
  color: var(--primary);
}
.btn-parallal-border:hover::before {
  opacity: 1;
  width: 100%;
  height: 100%;
}
.btn-parallal-border:hover::after {
  opacity: 1;
  width: 100%;
  height: 100%;
}
.main-menu.menu-dark > ul > li > a {
  color: var(--black);
}
.main-menu.menu-light > ul > li > a {
  color: var(--white);
}
.main-menu > ul {
  display: flex;
}
.main-menu > ul > li:hover > a {
  color: var(--primary);
}
.main-menu > ul > li:hover > ul {
  opacity: 1;
  pointer-events: all;
  inset-inline-start: 0;
}
.main-menu > ul > li:hover > ul.dp-menu li:hover > ul {
  opacity: 1;
  pointer-events: all;
  inset-inline-start: 100%;
  visibility: visible;
}
.main-menu li {
  position: relative;
}
.main-menu li a {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--primary);
  padding: 37px 15px;
  text-transform: uppercase;
}
.main-menu ul.dp-menu {
  background-color: #232529;
  padding: 18px 0px;
  width: 240px;
  position: absolute;
  inset-inline-start: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}
.main-menu ul.dp-menu ul {
  background: #232529;
  padding: 18px 0px;
  width: 230px;
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 0;
  opacity: 0;
  z-index: 10;
  transition: all 0.5s;
  visibility: hidden;
}
.main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}
.main-menu ul.dp-menu li:hover > a {
  color: var(--white);
  background-color: rgba(0, 0, 0, 0);
}
.main-menu ul.dp-menu li:hover > ul {
  opacity: 1;
  transform: none !important;
  pointer-events: all;
}
.main-menu ul.dp-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: #999;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 8px;
  text-transform: capitalize;
}
.main-menu ul.dp-menu li a:hover {
  letter-spacing: 0.5px;
}
.main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}
.main-menu ul.dp-menu.col-2 {
  -moz-column-count: 2;
  column-count: 2;
  width: 500px;
}
.main-menu .has-mega-menu {
  position: static;
}
.main-menu li.menu-item-has-children > a:after {
  content: "\f107";
  font-family: var(--font_awesome);
  margin-inline-start: 5px;
  font-weight: 600;
  font-size: 14px;
}
.main-menu .mega-menu {
  background-color: var(--black);
  padding: 30px 50px;
  width: 100%;
  position: absolute;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 50px;
  column-gap: 50px;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}
@media only screen and (max-width: 1399px) {
  .main-menu .mega-menu {
    -moz-column-gap: 30px;
    column-gap: 30px;
  }
}
.main-menu .mega-menu li:has(ul) > a:after {
  content: "";
}
.main-menu .mega-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: #999;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--black);
  border-radius: 8px;
  overflow: hidden;
}
.main-menu .mega-menu li a:hover {
  color: var(--white);
  background: #2c2c2f;
}
.main-menu .mega-menu .title {
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  border-bottom: 1px solid #333337;
  padding-bottom: 20px;
  margin-bottom: 20px;
  pointer-events: none;
  border-radius: 0;
}
.main-menu .mega-style-2 {
  padding: 0 15%;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
}
.main-menu .mega-style-2 .title {
  height: 70px;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  padding-left: 30px;
}
.main-menu .mega-style-2 .title:after {
  position: absolute;
  content: "";
  width: 5000px;
  height: 1px;
  background-color: #333337;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}
.main-menu .mega-style-2 > li:not(:first-child) {
  border-left: 1px solid #333337;
}
.main-menu .mega-style-2 ul {
  -moz-column-count: 2;
  column-count: 2;
  position: relative;
  padding: 20px 0;
}
.main-menu .mega-style-2 ul:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 700px;
  background-color: #333337;
  top: 0;
  left: 50%;
  z-index: 1;
}
.main-menu .mega-style-2 ul li a {
  padding-left: 30px;
}
.main-menu .mega-style-3 {
  padding: 0 0 0 20px;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
}
.main-menu .mega-style-3 .title {
  height: 70px;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  padding-left: 30px;
}
.main-menu .mega-style-3 .title:after {
  position: absolute;
  content: "";
  width: 5000px;
  height: 1px;
  background-color: #333337;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}
.main-menu .mega-style-3 > li:not(:first-child) {
  border-left: 1px solid #333337;
}
.main-menu .mega-style-3 > li:last-child {
  border: none;
  width: 36vw;
}
@media only screen and (max-width: 1399px) {
  .main-menu .mega-style-3 > li:last-child {
    width: 32vw;
  }
}
.main-menu .mega-style-3 ul {
  -moz-column-count: 2;
  column-count: 2;
  position: relative;
  padding: 20px 0;
  -moz-column-gap: 0;
  column-gap: 0;
}
.main-menu .mega-style-3 ul:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 700px;
  background-color: #333337;
  top: 0;
  left: 50%;
  z-index: 1;
}
.main-menu .mega-style-3 ul li {
  margin: 0 10px;
}
.main-menu .mega-style-3 ul li a {
  padding-left: 20px;
}
.main-menu .mega-grid-6 {
  grid-template-columns: repeat(6, 1fr);
}
.main-menu .mega-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 60px;
}
.main-menu .list-3-column ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 50px;
  column-gap: 50px;
}
@media only screen and (max-width: 1399px) {
  .main-menu .list-3-column ul {
    -moz-column-gap: 30px;
    column-gap: 30px;
  }
}
.main-menu .span-first-item ul li:first-child {
  grid-column: 1/-1;
  -moz-column-span: all;
  column-span: all;
}
.main-menu .new {
  font-size: 10px;
  font-weight: 600;
  background: #ffa38e;
  color: var(--black);
  padding: 3px 7px;
  line-height: 1;
  border-radius: 2px;
  margin-inline-start: 8px;
  display: inline-block;
}
@media only screen and (max-width: 1199px) {
  .main-menu-2 {
    display: none;
  }
}
.main-menu-2 li {
  display: inline-block;
  padding: 0 10px;
}
.main-menu-2 li a {
  display: block;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  padding: 10px;
  text-transform: capitalize;
}
.main-menu-2 li a:hover {
  color: var(--primary);
}
@media only screen and (max-width: 1399px) {
  .main-menu-2 li a {
    padding: 5px 0;
  }
}
.main-menu-3 li {
  display: inline-block;
  margin-right: 45px;
}
@media only screen and (max-width: 1199px) {
  .main-menu-3 li {
    margin-right: 25px;
  }
}
.main-menu-3 li:last-child {
  margin-right: 0;
}
.main-menu-3 li a {
  color: var(--white);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}
.main-menu-3 li a:hover {
  color: var(--primary);
}
.main-menu-4 li {
  display: inline-block;
  margin-right: 50px;
}
.main-menu-4 li a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  text-transform: uppercase;
}
.main-menu-4 li a:hover {
  color: var(--primary);
}
.mega-menu-thumb {
  width: 108%;
  aspect-ratio: 100/83;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
@media only screen and (max-width: 1199px) {
  .mega-menu-thumb {
    width: 100%;
    height: 100%;
  }
}
.mega-menu-thumb:after {
  position: absolute;
  content: "";
  width: 76%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(270deg, rgba(28, 29, 32, 0) 0%, #1c1d20 100%);
}
.mega-menu-thumb .laptop-view {
  width: 70%;
  aspect-ratio: 100/114;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
  position: absolute;
  right: 70px;
  bottom: 0;
}
.mega-menu-counter__item {
  text-align: center;
  display: inline-block;
  margin-top: 35%;
  margin-left: 17%;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .mega-menu-counter__item {
    margin: 30px auto 50px;
  }
}
.mega-menu-counter__text p {
  font-size: 30px;
  line-height: 28px;
  color: var(--white);
  font-weight: 500;
}
.mega-menu-counter__number {
  font-size: 150px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 24px;
  color: var(--white);
  background: linear-gradient(136deg, #9479ff 0%, #ffa6d6 47.92%, #fffce3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
@media only screen and (max-width: 1199px) {
  .menu-with-number {
    display: none;
  }
}
.menu-with-number li {
  display: inline-block;
}
.menu-with-number li a {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
  padding: 34px 40px;
  display: inline-block;
  text-transform: uppercase;
}
.menu-with-number li a:hover span {
  color: var(--white);
}
.menu-with-number li a:hover span::before {
  background-color: var(--white);
}
.menu-with-number li a.active span {
  color: var(--white);
}
.menu-with-number li a.active span::before {
  position: absolute;
  content: "";
  width: 35px;
  height: 1px;
  right: 20px;
  top: 50%;
  background-color: var(--white);
}
.menu-with-number li a span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 10px;
  text-align: right;
  color: #999;
  position: relative;
  transition: all 0.5s;
}
.menu-with-number li a span::before {
  position: absolute;
  content: "";
  width: 35px;
  height: 1px;
  right: 20px;
  top: 50%;
  transition: all 0.5s;
  background-color: var(--black-6);
}
.sidebar-menu li {
  display: block;
  padding-bottom: 15px;
}
@media only screen and (max-width: 1919px) {
  .sidebar-menu li {
    padding-bottom: 10px;
  }
}
.sidebar-menu li a {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
  padding: 10px 0;
  text-transform: uppercase;
}
.sidebar-menu li a:hover,
.sidebar-menu li a.active {
  color: var(--primary);
}
@media only screen and (max-width: 1399px) {
  .sidebar-menu li a {
    padding: 5px 0;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.offcanvas__menu-wrapper.mean-container .mean-nav > ul > li:last-child > a {
  border-bottom: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}
.offcanvas__menu-wrapper.mean-container .mean-nav .new {
  font-size: 10px;
  font-weight: 600;
  background: #ffa38e;
  color: var(--black);
  padding: 3px 7px;
  line-height: 1;
  display: flex;
  align-items: center;
  border-radius: 2px;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  padding-inline-start: 15px;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--white);
  text-transform: capitalize;
  border-top: 1px solid var(--black-4);
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  outline: none;
  transform: translateY(var(--y)) translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-sizing: border-box;
}
.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  color: var(--black);
  border-color: var(--white-4);
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 20px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  width: 54px;
  height: 54px;
  justify-content: center;
  font-weight: 300;
  border: none !important;
}
.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  background-color: var(--white-4);
}
.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  right: 275px;
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 50px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--secondary);
  opacity: 1;
}
.dark
  .offcanvas__menu-wrapper.mean-container
  .mean-nav
  ul
  li
  a.mean-expand:hover {
  background-color: var(--white-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--black-4);
}
.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-color: var(--white-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  font-size: 20px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 12px 0;
  padding-inline-start: 30px;
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 18px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
  height: 58px;
}
@media only screen and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 22px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
  border-bottom: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
  padding-left: 40px;
}
.offcanvas__menu-wrapper.mean-container .mean-bar {
  padding: 0;
  background: none;
  max-height: auto;
  overflow-y: scroll;
}
.offcanvas__menu-wrapper.mean-container .mean-bar::-webkit-scrollbar {
  width: 0;
}
.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal {
  display: none !important;
}
.light .main-menu li a:hover {
  color: var(--primary);
}
.light .main-menu-2 li a {
  color: var(--black);
}
.light .main-menu-2 li a:hover {
  color: var(--primary);
}
.light .main-menu-3 li a {
  color: var(--black);
}
.light .main-menu-3 li a:hover {
  color: var(--primary);
}
.light .sidebar-menu li a {
  color: var(--black);
}
.light .sidebar-menu li a:hover {
  color: var(--primary);
}
.light .menu-with-number li a {
  color: var(--black);
}
.light .menu-with-number li a:hover span {
  color: var(--black);
}
.light .menu-with-number li a:hover span::before {
  background-color: var(--black);
}
.light .menu-with-number li a span {
  color: var(--black-9);
}
.light .menu-with-number li a span::before {
  background-color: var(--black-9);
}
.light .menu-with-number li a.active span {
  color: var(--black);
}
.light .menu-with-number li a.active span::before {
  background-color: var(--black);
}
.modal__dialog {
  width: 760px;
  max-width: 100%;
  margin-top: 100px;
}
@media only screen and (max-width: 991px) {
  .modal__dialog {
    width: 700px;
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .modal__dialog {
    width: 350px;
  }
}
.modal__content {
  height: 500px;
}
@media only screen and (max-width: 767px) {
  .modal__content {
    height: 300px;
  }
}
.modal__content iframe {
  width: 100%;
  height: 100%;
}
.modal__close {
  position: absolute;
  width: 40px;
  height: 40px;
  top: -15px;
  right: -15px;
  z-index: 9;
  border-radius: 50px;
  font-size: 20px;
  color: var(--white);
  background: var(--black);
  transition: all 0.3s;
}
.modal__close:hover {
  color: var(--primary);
}
.modal__sfluence {
  width: 100%;
  height: 100%;
  padding: 60px;
}
@media only screen and (max-width: 767px) {
  .modal__sfluence {
    padding: 20px 10px;
  }
}
.modal__sfluence-area {
  width: 100vw;
  height: 100vh;
  background: var(--black);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  transform: scale(0.5);
}
.modal__sfluence-area.showed {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.modal__sfluence-area .close_btn {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0px;
  right: 20px;
  z-index: 9;
  border-radius: 50px;
  font-size: 30px;
  color: var(--white);
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__sfluence-area .close_btn:hover {
  color: var(--primary);
}
@media only screen and (max-width: 767px) {
  .modal__sfluence-area .close_btn {
    right: 0;
  }
}
.modal__sfluence-area iframe,
.modal__sfluence-area video {
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .modal__sfluence-area iframe,
  .modal__sfluence-area video {
    height: 300px;
    -o-object-fit: cover;
    object-fit: cover;
    margin-top: 45%;
  }
}
.cursor {
  position: fixed;
  pointer-events: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--var(--white));
  background: var(--black);
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  z-index: 999;
  opacity: 0;
  mix-blend-mode: hard-light;
  transition: all 0.3s;
}
.cursor.large {
  width: 180px;
  height: 180px;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
}
.cursor1 {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.15s;
  z-index: 999;
}
@media (max-width: 1200px) {
  .cursor1 {
    display: none;
  }
}
.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--primary);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.2s;
  z-index: 999;
}
@media (max-width: 1200px) {
  .cursor2 {
    display: none;
  }
}
.cursor-testi {
  position: fixed;
  width: 80px;
  height: 80px;
  background-color: var(--black);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.2s;
  z-index: 999;
}
@media (max-width: 1200px) {
  .cursor-testi {
    display: none;
  }
}
@supports (mix-blend-mode: exclusion) {
  .wc-cursor.exclusion,
  .wc-cursor.opaque {
    mix-blend-mode: exclusion;
  }
}
@supports (mix-blend-mode: exclusion) {
  .wc-cursor.exclusion:before,
  .wc-cursor.opaque:before {
    background: var(--white);
  }
}
.wc-cursor.normal,
.wc-cursor.text {
  mix-blend-mode: normal;
}
.wc-cursor.normal:before,
.wc-cursor.text:before {
  background: currentColor;
}
.wc-cursor.inverse {
  color: var(--white);
}
.wc-cursor.visible:before {
  transform: scale(0.2);
}
.wc-cursor.visible.active:before {
  transform: scale(0.23);
  transition-duration: 0.2s;
}
.wc-cursor.pointer:before {
  transform: scale(0.15);
}
.wc-cursor.text:before {
  opacity: 0.85;
  transform: scale(1.7);
}
.wc-cursor.text.active:before {
  transform: scale(1.6);
  transition-duration: 0.2s;
}
.wc-cursor.opaque:before {
  transform: scale(1.32);
}
.wc-cursor.opaque.active:before {
  transform: scale(1.2);
}
.wc-cursor.sm:before {
  transform: scale(1.25);
}
.wc-cursor.md:before {
  transform: scale(1.5);
}
.wc-cursor.lg:before {
  transform: scale(2);
}
.wc-cursor.xl:before {
  transform: scale(2.5);
}
.wc-cursor.xxl:before {
  transform: scale(3);
}
.wc-cursor.hidden:before {
  transform: scale(0);
}
.color-accent-lilac {
  color: #8d53e9;
}
.color-accent-lilac-bg {
  background: #8d53e9;
}
.wc-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  contain: layout style size;
  pointer-events: none;
  will-change: transform;
  color: var(--primary);
  transition: opacity 0.3s, color 0.4s;
}
.wc-cursor:before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  display: block;
  width: 48px;
  height: 48px;
  transform: scale(0);
  background: currentColor;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out, opacity 0.1s;
}
.wc-cursor-text {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0) rotate(10deg);
  opacity: 0;
  color: var(--white);
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.01em;
  transition: opacity 0.4s, transform 0.3s;
}
.wc-cursor.text .wc-cursor-text {
  opacity: 1;
  transform: scale(1);
}
@supports (mix-blend-mode: exclusion) {
  .wc-cursor.-exclusion,
  .wc-cursor.-opaque {
    mix-blend-mode: exclusion;
  }
}
@supports (mix-blend-mode: exclusion) {
  .wc-cursor.exclusion:before,
  .wc-cursor.opaque:before {
    background: var(--white);
  }
}
.wc-cursor.normal,
.wc-cursor.text {
  mix-blend-mode: normal;
}
.wc-cursor.normal:before,
.wc-cursor.text:before {
  background: currentColor;
}
.wc-cursor.inverse {
  color: var(--white);
}
.wc-cursor.visible:before {
  transform: scale(0.2);
}
.wc-cursor.visible.active:before {
  transform: scale(0.23);
  transition-duration: 0.2s;
}
.wc-cursor.pointer:before {
  transform: scale(0.15);
}
.wc-cursor.text:before {
  opacity: 0.85;
  transform: scale(1.7);
}
.wc-cursor.text.active:before {
  transform: scale(1.6);
  transition-duration: 0.2s;
}
.wc-cursor.opaque:before {
  transform: scale(1.32);
}
.wc-cursor.opaque.active:before {
  transform: scale(1.2);
}
.wc-cursor.sm:before {
  transform: scale(1.25);
}
.wc-cursor.md:before {
  transform: scale(1.5);
}
.wc-cursor.lg:before {
  transform: scale(2);
}
.wc-cursor.xl:before {
  transform: scale(2.5);
}
.wc-cursor.xxl:before {
  transform: scale(3);
}
.wc-cursor.xxxl:before {
  transform: scale(3.5);
}
.wc-cursor.hidden:before {
  transform: scale(0);
}
.progress__item p.title,
.progress__item-2 p.title {
  padding: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 25px;
  color: var(--white);
  padding-bottom: 15px;
  text-transform: uppercase;
}
.progress__item-2 {
  padding-bottom: 25px;
}
.light .progress__item p.title,
.light .progress__item-2 p.title {
  color: var(--black);
}
.light .developer-skill__resume .sonny_progressbar .progress-percent {
  color: var(--black);
}
.cf-cta__text-wrapper {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  grid-gap: 45px;
}
@media only screen and (max-width: 991px) {
  .cf-cta__text-wrapper {
    grid-template-columns: 1fr;
  }
}
.cf-cta__btn .wc-btn-default {
  font-size: 18px;
  font-weight: 600;
  padding: 35px 75px;
  background-color: var(--white);
  color: var(--black);
  text-transform: uppercase;
  border-width: 0;
}
.dark .cf-cta__btn .wc-btn-default {
  background-color: var(--black);
  color: var(--white);
}
@media only screen and (max-width: 1199px) {
  .cf-cta__btn .wc-btn-default {
    padding: 20px 40px;
    font-weight: 500;
  }
}
.dark .cf-cta__btn .wc-btn-default:hover {
  color: var(--black);
}
.cf-cta__text {
  max-width: 250px;
  position: absolute;
  inset-inline-end: -30px;
  top: 47%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 1199px) {
  .cf-cta__text {
    inset-inline-end: -130px;
    max-width: 270px;
  }
}
@media only screen and (max-width: 991px) {
  .cf-cta__text {
    inset-inline-end: 0;
    max-width: 270px;
  }
}
@media only screen and (max-width: 767px) {
  .cf-cta__text {
    position: static;
    transform: none;
  }
}
.cf-cta__text p {
  font-size: 18px;
}
.dark .cf-cta__text p {
  color: #555;
}
.cf-cta__sec-title-wrapper {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .cf-cta__sec-title-wrapper .sec-title-18 {
    margin-bottom: 20px;
    font-size: 40px;
  }
}
.switcher__area {
  position: relative;
  direction: ltr;
}
@media only screen and (max-width: 767px) {
  .switcher__area {
    display: none;
  }
}
.switcher__icon {
  position: fixed;
  width: 50px;
  height: 50px;
  background: var(--white);
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  z-index: 999;
  transition: all 0.3s;
  mix-blend-mode: exclusion;
}
.switcher__icon i {
  color: var(--black);
}
.switcher__icon button {
  font-size: 24px;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transition: all 0.3s;
}
.switcher__icon button:hover {
  color: var(--white-2);
}
.switcher__icon button#switcher_open {
  animation: wcSpinner 5s infinite linear;
}
.switcher__items {
  width: 280px;
  padding: 50px 30px;
  background: var(--black);
  position: fixed;
  right: -280px;
  top: 40%;
  z-index: 99;
  transform: translateY(-50%);
  font-family: var(--font_primary);
  transition: all 0.3s;
}
.switcher__items .wc-col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.switcher__item {
  margin-bottom: 30px;
}
@media only screen and (max-width: 1399px) {
  .switcher__item:nth-child(3) {
    display: none;
  }
}
.switcher__item:last-child {
  margin-bottom: 0;
}
.switcher__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white) !important;
  text-transform: capitalize;
  padding-bottom: 10px;
}
.switcher__btn button {
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white-2);
  background: #2b2b2f;
  border-radius: 4px;
  padding: 10px 15px;
  text-transform: capitalize;
}
.switcher__btn button:hover,
.switcher__btn button.active {
  color: var(--white);
}
.switcher__btn select {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white-2);
  width: 100%;
  border: none;
  padding: 9px 10px;
  border-radius: 4px;
  background: #2b2b2f;
  text-transform: capitalize;
  outline: none;
  cursor: pointer;
}
#switcher_close {
  display: none;
}
.overlay-switcher-close {
  position: fixed;
  z-index: 99;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: none;
}
.overlay-switcher-close.show-overlay {
  display: block;
}
.offcanvas-3__area {
  background: var(--primary);
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 50px 50px 100px;
  z-index: 100000;
  overflow: hidden;
}
@media (max-height: 500px) {
  .offcanvas-3__area {
    padding: 40px;
  }
}
.offcanvas-3__inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: 100%;
}
@media only screen and (max-width: 991px) {
  .offcanvas-3__inner {
    grid-template-columns: 260px 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas-3__inner {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
  }
}
@media (max-height: 500px) {
  .offcanvas-3__inner {
    overflow-y: scroll;
  }
}
.offcanvas-3__inner::-webkit-scrollbar {
  width: 0;
}
.offcanvas-3__meta li {
  font-size: 18px;
  line-height: 20px;
  color: var(--white);
  text-transform: uppercase;
}
.offcanvas-3__meta li:not(:last-child) {
  margin-bottom: 19px;
}
.offcanvas-3__meta li a:hover {
  color: var(--secondary);
}
.offcanvas-3__meta-wrapper {
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: space-between;
}
.offcanvas-3__social .title {
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.offcanvas-3__social-links {
  display: flex;
  gap: 20px;
}
.offcanvas-3__social-links a {
  font-size: 18px;
  color: var(--white);
}
.offcanvas-3__social-links a:hover {
  color: var(--secondary);
}
.offcanvas-3__menu {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.offcanvas-3__menu ul {
  position: relative;
}
.offcanvas-3__menu ul:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background: #333337;
  inset-inline-start: 8px;
  top: 0;
}
@media only screen and (max-width: 767px) {
  .offcanvas-3__menu ul:before {
    display: none;
  }
}
@media (max-height: 500px) {
  .offcanvas-3__menu ul:before {
    height: 100%;
  }
}
.offcanvas-3__menu li {
  padding-inline-start: 58px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .offcanvas-3__menu li {
    padding-left: 0;
  }
}
.offcanvas-3__menu li:hover > a {
  color: var(--white);
}
.offcanvas-3__menu li:hover:before {
  opacity: 1;
  visibility: visible;
}
.offcanvas-3__menu li:before {
  position: absolute;
  content: "";
  width: 17px;
  height: 17px;
  background: var(--white);
  border-radius: 50%;
  border: 4px solid var(--black-2);
  inset-inline-start: 0;
  top: 38%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
@media only screen and (max-width: 767px) {
  .offcanvas-3__menu li:before {
    display: none;
  }
}
.offcanvas-3__menu li:not(:last-child) {
  margin-bottom: 26px;
}
@media only screen and (max-width: 991px) {
  .offcanvas-3__menu li:not(:last-child) {
    margin-bottom: 20px;
  }
}
.offcanvas-3__menu li a {
  font-size: 120px;
  font-size: 8vh;
  color: var(--secondary);
  text-transform: uppercase;
  line-height: 0.9;
  position: relative;
  transition: all 0.5s cubic-bezier(0, 0, 0.23, 1);
  text-decoration: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(90deg, #fff, #ddd 50%, #666 0);
  background-size: 200% 100%;
  background-position: 100%;
  transform: perspective(359px) rotateY(-18deg);
}
.offcanvas-3__menu li a:hover {
  background-position: 0;
  color: #fff;
  letter-spacing: 1.5px;
}
@media only screen and (max-width: 1399px) {
  .offcanvas-3__menu li a {
    font-size: 7vh;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas-3__menu li a {
    font-size: 6vh;
  }
}
@media only screen and (max-width: 991px) {
  .offcanvas-3__menu li a {
    font-size: 2.5vh;
    color: rgba(255, 255, 255, 0.6705882353);
    background-image: unset;
    -webkit-text-fill-color: unset;
  }
}
.offcanvas-3__menu-wrapper {
  display: flex;
  align-items: flex-end;
  overflow-y: hidden;
}
.offcanvas-3__area {
  left: 0%;
  opacity: 0;
  visibility: hidden;
  transform: perspective(359px) rotateY(50deg);
}
.offcanvas-3__menu ul li {
  opacity: 0;
  top: -100px;
  position: relative;
  transform: perspective(359px) rotateX(50deg);
}
.offcanvas-3__meta {
  opacity: 0;
  top: -30px;
  position: relative;
}
.offcanvas-3__social {
  opacity: 0;
  top: -30px;
  position: relative;
}
.close-button {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background-color: var(--black-2);
  position: relative;
  border: 1px solid #333337;
  transition: all 0.5s;
}
@media only screen and (max-width: 767px) {
  .close-button {
    width: 50px;
    height: 50px;
  }
}
.close-button:hover {
  background-color: var(--secondary);
}
.close-button:hover span {
  background-color: var(--primary);
}
.close-button span {
  width: 26px;
  height: 1px;
  display: inline-block;
  background-color: var(--white);
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all 0.5s;
}
@media only screen and (max-width: 767px) {
  .close-button span {
    width: 20px;
  }
}
.close-button span:first-child {
  transform: translateX(-50%) rotate(45deg);
}
.close-button span:last-child {
  transform: translateX(-50%) rotate(-45deg);
}
.cf_feature.style-1 .thumb {
  margin-bottom: 50px;
}
@media only screen and (max-width: 1199px) {
  .cf_feature.style-1 .thumb {
    margin-bottom: 30px;
  }
}
.cf_feature.style-1 .title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
}
.cf_feature.style-1 .title:hover {
  color: var(--action);
}
.cf_feature.style-1 .text {
  color: var(--primary);
}
.cf_feature.style-1 .btn-wrapper {
  display: none;
}
.cf_feature.text-design {
  padding: 60px;
  padding-left: 70px;
  padding-right: 0;
  border-left: 1px solid rgba(18, 18, 18, 0.06);
}
@media only screen and (max-width: 1199px) {
  .cf_feature.text-design {
    padding-left: 30px;
  }
}
@media only screen and (max-width: 991px) {
  .cf_feature.text-design {
    border: 0;
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .cf_feature.text-design {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.cf_feature.text-design .thumb {
  margin-bottom: 30px;
}
.cf_feature.text-design .title-2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.16;
  text-decoration-line: underline;
  margin-bottom: 40px;
}
@media only screen and (max-width: 1199px) {
  .cf_feature.text-design .title-2 {
    font-size: 22px;
    margin-bottom: 20px;
  }
}
.cf_feature.style-2 {
  padding: 60px;
  border-right: 1px solid rgba(18, 18, 18, 0.06);
}
@media only screen and (max-width: 1199px) {
  .cf_feature.style-2 {
    padding: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .cf_feature.style-2 {
    padding-left: 0;
  }
}
.cf_feature.style-2:first-child {
  padding-left: 0;
}
.cf_feature.style-2:last-child {
  border-right: 0;
  padding-right: 0;
}
.font-heading-Beatricetrial h1,
.font-heading-Beatricetrial h2,
.font-heading-Beatricetrial h3,
.font-heading-Beatricetrial h4,
.font-heading-Beatricetrial h5,
.font-heading-Beatricetrial h6 {
  font-family: var(--font_beatricetrial);
}
.cf_feature.style-3 {
  border-right: 1px solid #f1f1f1;
  border-top: 1px solid #f1f1f1;
  padding: 50px;
  padding-bottom: 0;
}
@media only screen and (max-width: 1199px) {
  .cf_feature.style-3 {
    padding: 30px;
  }
}
@media only screen and (max-width: 991px) {
  .cf_feature.style-3 {
    flex-basis: 45%;
    border: 0;
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .cf_feature.style-3 {
    padding-left: 0;
    margin-bottom: 0;
    flex-basis: 100%;
    padding-bottom: 20px;
  }
}
.cf_feature.style-3:first-child {
  padding-left: 0;
}
.cf_feature.style-3:last-child {
  border-right: 0;
}
.cf_feature.style-3:hover .title {
  padding-left: 15px;
}
.cf_feature.style-3:hover .title::before {
  left: 0;
}
.cf_feature.style-3 .content {
  overflow: hidden;
}
.cf_feature.style-3 .count-title {
  color: var(--primary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 25px;
}
.cf_feature.style-3 .title {
  color: var(--primary);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 25px;
  transition: 0.3s;
  position: relative;
}
.cf_feature.style-3 .title::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: var(--primary);
}
.cf_feature.style-3 .title:hover {
  color: var(--action);
}
.cf_feature.style-3 .text {
  margin-bottom: 100px;
}
@media only screen and (max-width: 991px) {
  .cf_feature.style-3 .text {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .cf_feature.style-3 .text {
    margin-bottom: 20px;
  }
}
.cf_feature.style-3 .btn-underline {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--primary);
  text-transform: capitalize;
}
:root {
  --theme: #feda1f;
}
:root .dark {
  --border: #252525;
}
.section-title {
  font-size: 50px;
  margin-top: -17px;
}
@media only screen and (max-width: 1919px) {
  .section-title {
    font-size: 46px;
    margin-top: -15px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-title {
    font-size: 42px;
    margin-top: -13px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-title {
    font-size: 40px;
    margin-top: -11px;
  }
}
@media only screen and (max-width: 991px) {
  .section-title {
    font-size: 38px;
    margin-top: -11px;
  }
}
@media only screen and (max-width: 767px) {
  .section-title {
    font-size: 35px;
    margin-top: 0;
  }
}
@media (max-width: 575px) {
  .section-title {
    font-size: 30px;
    margin-top: 0;
  }
}
.section-title span {
  background-image: url(../imgs/shape/img-s-53.webp);
  background-repeat: no-repeat;
  background-size: 100% 28px;
  background-position: bottom left;
}
@media only screen and (max-width: 1399px) {
  .section-title span {
    background-size: 100% 20px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-title span {
    background-size: 100% 16px;
  }
}
@media only screen and (max-width: 767px) {
  .section-title span {
    background-size: 100% 10px;
  }
}
.section-spacing {
  padding-top: 150px;
  padding-bottom: 150px;
}
@media only screen and (max-width: 1919px) {
  .section-spacing {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-spacing {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-spacing {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.section-spacing-top {
  padding-top: 50px;
}
@media only screen and (max-width: 1919px) {
  .section-spacing-top {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-spacing-top {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-spacing-top {
    padding-top: 60px;
  }
}
.section-spacing-bottom {
  padding-bottom: 150px;
}
@media only screen and (max-width: 1919px) {
  .section-spacing-bottom {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-spacing-bottom {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-spacing-bottom {
    padding-bottom: 60px;
  }
}
.wc-btn-primary {
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  padding: 21px 40px;
  background-color: var(--primary);
  color: var(--white);
  border-color: rgba(0, 0, 0, 0);
}
.wc-btn-primary:hover {
  border-color: rgba(0, 0, 0, 0);
  background-color: var(--theme);
  color: var(--black);
}
@media (min-width: 1900px) {
  .container.large {
    max-width: 1850px;
  }
}
.header-area {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: 100%;
}
.header-area.sticky {
  background-color: #f9f9f9;
}
.header-area .header-area__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  height: 80px;
}
@media only screen and (max-width: 1919px) {
  .header-area .header-area__inner {
    height: 80px;
  }
}
.header-area .header-area__inner > *:nth-child(1) {
  margin-inline-end: auto;
}
@media (max-width: 575px) {
  .header-area .header__meta {
    display: none;
  }
}
.dir-rtl .header-area .header__navicon img {
  transform: rotateY(180deg);
}
.header-area .main-menu > ul > li:hover > a {
  color: var(--primary);
}
.header-area .main-menu > ul > li > a {
  font-size: 18px;
  text-transform: capitalize;
  color: var(--secondary);
  padding: 31px 17px;
}
.header-area .wc-btn-primary {
  padding: 13px 20px;
  background-color: var(--theme);
  color: var(--black);
}
.hero-area {
  margin-top: 80px;
}
.hero-area-inner {
  display: grid;
  grid-template-columns: 51% 1fr;
}
@media only screen and (max-width: 1919px) {
  .hero-area-inner {
    grid-template-columns: 55% 1fr;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-inner {
    grid-template-columns: 1fr;
  }
}
.hero-area .thumb {
  position: relative;
  overflow: hidden;
}
.hero-area .thumb:after {
  position: absolute;
  content: url(../imgs/shape/img-s-51.webp);
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
}
.hero-area .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.hero-area .section-content {
  position: relative;
  padding: 170px 60px;
  padding-inline-start: 200px;
  z-index: 1;
}
@media only screen and (max-width: 1919px) {
  .hero-area .section-content {
    padding: 120px 60px;
    padding-inline-start: 180px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area .section-content {
    padding: 100px 60px;
    padding-inline-start: 160px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area .section-content {
    padding: 80px 60px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-area .section-content {
    padding: 50px 30px;
  }
}
.hero-area .section-content .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  z-index: -1;
}
.hero-area .section-content .bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.hero-area .section-content .section-title {
  font-size: 100px;
  line-height: 0.85;
  margin-top: -6px;
  color: var(--black);
}
@media only screen and (max-width: 1919px) {
  .hero-area .section-content .section-title {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area .section-content .section-title {
    font-size: 70px;
  }
}
@media (max-width: 575px) {
  .hero-area .section-content .section-title {
    font-size: 50px;
  }
}
.hero-area .section-content .section-title .shape-1 {
  height: 72px;
  margin-top: -18px;
}
@media only screen and (max-width: 1919px) {
  .hero-area .section-content .section-title .shape-1 {
    height: 62px;
  }
}
@media only screen and (max-width: 1399px) {
  .hero-area .section-content .section-title .shape-1 {
    height: 52px;
    margin-top: -13px;
  }
}
@media (max-width: 575px) {
  .hero-area .section-content .section-title .shape-1 {
    height: 42px;
    margin-top: -10px;
  }
}
.hero-area .section-content .section-subtitle {
  font-size: 16px;
  color: var(--black);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}
@media only screen and (max-width: 1199px) {
  .hero-area .section-content .section-subtitle {
    transform: none;
    writing-mode: unset;
  }
}
.hero-area .section-content .section-subtitle.has-right-line {
  padding-inline-end: 110px;
}
.dir-rtl .hero-area .section-content .section-subtitle.has-right-line {
  padding-inline-start: 110px;
}
@media only screen and (max-width: 1199px) {
  .hero-area .section-content .section-subtitle.has-right-line {
    padding-inline-end: 0;
  }
  .dir-rtl .hero-area .section-content .section-subtitle.has-right-line {
    padding-inline-start: 0px;
  }
}
.hero-area .section-content .section-subtitle.has-right-line:after {
  width: 1px;
  height: 90px;
  bottom: 0;
  transform: translateX(-50%);
  left: 50%;
  top: auto;
}
@media only screen and (max-width: 1199px) {
  .hero-area .section-content .section-subtitle.has-right-line:after {
    display: none;
  }
}
.hero-area .section-content .subtitle-wrapper {
  position: absolute;
  inset-inline-start: 48px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 1199px) {
  .hero-area .section-content .subtitle-wrapper {
    transform: none;
    position: static;
    margin-bottom: 20px;
  }
}
.hero-area .section-content .text {
  font-size: 24px;
  line-height: 1.33;
  max-width: 490px;
  color: var(--black-2);
}
@media only screen and (max-width: 1199px) {
  .hero-area .section-content .text {
    font-size: 20px;
  }
}
.hero-area .section-content .text-wrapper {
  margin-top: 42px;
}
@media only screen and (max-width: 991px) {
  .hero-area .section-content .text-wrapper {
    margin-top: 32px;
  }
}
.hero-area .section-content .btn-wrapper {
  margin-top: 42px;
}
@media only screen and (max-width: 991px) {
  .hero-area .section-content .btn-wrapper {
    margin-top: 32px;
  }
}
.hero-area .section-content .wc-btn-primary {
  background-color: var(--black);
  color: var(--white);
}
.hero-area .section-content .review-wrapper {
  margin-top: 40px;
  border-top: 1px solid var(--black);
  display: inline-flex;
}
.hero-area .section-content .ratings {
  border-inline-start: 1px solid var(--black);
  padding-inline-start: 20px;
  margin-inline-start: 15px;
}
.hero-area .section-content .rating {
  font-size: 50px;
  line-height: 1;
  margin-top: 13px;
  color: var(--black);
}
.hero-area .section-content .review {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  color: var(--black-2);
}
.hero-area .section-content .rating-icons {
  display: flex;
  gap: 4px;
  margin-top: 15px;
}
.hero-area .section-content .rating-text {
  font-size: 18px;
  color: var(--black);
  line-height: 1;
  display: inline-block;
  margin-top: 17px;
}
.clients-area .section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary);
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  background-color: var(--white);
  padding: 0 22px;
  margin-top: 0;
}
.dark .clients-area .section-title {
  background-color: var(--black);
}
.clients-area .title-wrapper {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.clients-area .section-header {
  margin-bottom: 48px;
}
.client-slider-active .swiper-slide {
  width: auto;
}
.client-slider .swiper-wrapper {
  transition-timing-function: linear;
}
.client-box img {
  opacity: 1;
}
.features-area .section-header {
  display: flex;
  gap: 20px 60px;
  align-items: center;
	justify-content: center
}
@media only screen and (max-width: 1199px) {
  .features-area .section-header {
    grid-template-columns: 1fr 330px;
  }
}
@media only screen and (max-width: 991px) {
  .features-area .section-header {
    grid-template-columns: 1fr;
  }
}
.features-area .section-title {
  max-width: 670px;
}
.features-area .features-wrapper-box {
  margin-top: 92px;
}
@media only screen and (max-width: 1919px) {
  .features-area .features-wrapper-box {
    margin-top: 72px;
  }
}
@media only screen and (max-width: 1399px) {
  .features-area .features-wrapper-box {
    margin-top: 52px;
  }
}
.features-area .features-wrapper {
  display: flex;
  gap: 40px 30px;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 991px) {
  .features-area .features-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .features-area .features-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
.features-area .feature-box .title {
  font-size: 24px;
  font-weight: 600;
}
.features-area .feature-box .content {
  margin-top: 41px;
}
@media only screen and (max-width: 1199px) {
  .features-area .feature-box .content {
    margin-top: 21px;
  }
}
.features-area .feature-box .text {
  margin-top: 16px;
  max-width: 250px;
}
@media (max-width: 575px) {
  .features-area .feature-box .text {
    max-width: 100%;
  }
}
.about-area .thumbs {
  width: 100%;
  aspect-ratio: 100/118;
  position: relative;
}
.about-area .thumbs img {
  border-radius: 5px;
}
.about-area .thumbs .img-1 {
  width: 49%;
  position: absolute;
  top: 9%;
  inset-inline-start: 0;
}
.about-area .thumbs .img-2 {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 41%;
}
.about-area .thumbs .img-3 {
  position: absolute;
  bottom: 0;
  inset-inline-start: 26%;
  width: 59%;
}


.about-area .experience-box {
  margin-top: 55px;
}
@media only screen and (max-width: 1199px) {
  .about-area .experience-box {
    margin-top: 35px;
  }
}
.about-area .experience-box .number {
  font-size: 100px;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
}
@media only screen and (max-width: 1199px) {
  .about-area .experience-box .number {
    font-size: 70px;
  }
}
.about-area .experience-box .number i {
  font-size: 18px;
  margin-top: 12px;
  margin-inline-start: 9px;
}
@media only screen and (max-width: 1199px) {
  .about-area .experience-box .number i {
    margin-top: 10px;
  }
}
.about-area .experience-box .info {
  font-size: 18px;
  line-height: 1.2;
  max-width: 180px;
  font-weight: 600;
  margin-top: 10px;
}
.service-area {
  background-color: var(--black);
  position: relative;
  z-index: 1;
  padding: 0 45px;
}
@media only screen and (max-width: 991px) {
  .service-area {
    padding: 0 15px;
  }
}
.service-area .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  z-index: -1;
}
.service-area .bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.service-area .section-title {
  max-width: 700px;
  color: var(--white);
}
.service-area .services-wrapper-box {
  margin-top: 90px;
}
@media only screen and (max-width: 1919px) {
  .service-area .services-wrapper-box {
    margin-top: 70px;
  }
}
@media only screen and (max-width: 1399px) {
  .service-area .services-wrapper-box {
    margin-top: 50px;
  }
}
.service-box {
  border-bottom: 1px solid #3d3d3d;
  padding: 36px 0;
  display: grid;
  gap: 30px;
  grid-template-columns: 80px 220px 1fr;
  align-items: center;
  transition: all 0.5s;
}
@media only screen and (max-width: 1399px) {
  .service-box {
    grid-template-columns: 50px 200px 1fr;
  }
}
@media only screen and (max-width: 1199px) {
  .service-box {
    grid-template-columns: auto 1fr;
  }
}
.service-box:hover {
  background-color: #242424;
}
.service-box:hover .number {
  transform: translateX(30px);
}
.dir-rtl .service-box:hover .number {
  transform: translateX(-30px);
}
@media only screen and (max-width: 1199px) {
  .service-box:hover .number {
    transform: none;
  }
}
.service-box:hover .wc-btn-circle {
  transform: translateX(-30px);
  background-color: var(--theme);
  border-color: rgba(0, 0, 0, 0);
  color: var(--black);
}
.dir-rtl .service-box:hover .wc-btn-circle {
  transform: translateX(30px);
}
@media only screen and (max-width: 1199px) {
  .service-box:hover .wc-btn-circle {
    transform: none;
  }
}
.service-box:first-child {
  border-top: 1px solid #3d3d3d;
}
.service-box .number {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  transition: all 0.5s;
}
.service-box .thumb img {
  border-radius: 60px;
}
.service-box .title {
  font-size: 28px;
  line-height: 1.07;
  color: var(--white);
}
@media only screen and (max-width: 991px) {
  .service-box .title {
    font-size: 24px;
  }
}
.service-box .text {
  color: var(--white-2);
  max-width: 360px;
}
@media only screen and (max-width: 1399px) {
  .service-box .text {
    max-width: 330px;
  }
}
.service-box .wc-btn-circle {
  width: 70px;
  height: 70px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0);
  font-size: 20px;
  color: var(--white);
  transition: all 0.5s;
}
@media only screen and (max-width: 991px) {
  .service-box .wc-btn-circle {
    width: 50px;
    height: 50px;
    font-size: 16px;
  }
}
.service-box .wc-btn-circle i {
  transform: rotate(-45deg);
}
.service-box .content {
  display: grid;
  gap: 20px;
  grid-template-columns: 31% 1fr auto;
  align-items: center;
}
@media only screen and (max-width: 1199px) {
  .service-box .content {
    grid-column: span 2;
  }
}
@media only screen and (max-width: 767px) {
  .service-box .content {
    grid-template-columns: 1fr;
  }
}
.report-area .section-title {
  max-width: 580px;
  margin-inline: auto;
}
.report-area .section-header {
  text-align: center;
}
.report-area .section-content-box {
  margin-top: 82px;
}
@media only screen and (max-width: 1919px) {
  .report-area .section-content-box {
    margin-top: 72px;
  }
}
@media only screen and (max-width: 1399px) {
  .report-area .section-content-box {
    margin-top: 52px;
  }
}
.report-area .section-content {
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 1fr 340px;
  justify-content: space-between;
}
@media only screen and (max-width: 1399px) {
  .report-area .section-content {
    grid-template-columns: 1fr 290px;
  }
}
@media only screen and (max-width: 1199px) {
  .report-area .section-content {
    grid-template-columns: 1fr 270px;
  }
}
@media only screen and (max-width: 991px) {
  .report-area .section-content {
    grid-template-columns: 1fr;
  }
}
.report-area .report-graph {
  max-width: 860px;
}
.report-area .satisfaction-box .number {
  font-size: 250px;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  line-height: 0.75;
}
@media only screen and (max-width: 1399px) {
  .report-area .satisfaction-box .number {
    font-size: 200px;
  }
}
@media only screen and (max-width: 1199px) {
  .report-area .satisfaction-box .number {
    font-size: 180px;
  }
}
@media only screen and (max-width: 767px) {
  .report-area .satisfaction-box .number {
    font-size: 150px;
  }
}
@media (max-width: 575px) {
  .report-area .satisfaction-box .number {
    font-size: 100px;
  }
}
.report-area .satisfaction-box .number .icon {
  font-size: 30px;
  margin-inline-start: 2px;
  font-weight: 500;
}
@media (max-width: 575px) {
  .report-area .satisfaction-box .number .icon {
    font-size: 20px;
  }
}
.report-area .satisfaction-box .info {
  font-size: 22px;
  line-height: 1.23;
  color: var(--secondary);
  font-weight: 400;
  margin-top: 42px;
}
@media only screen and (max-width: 1199px) {
  .report-area .satisfaction-box .info {
    margin-top: 22px;
    font-size: 18px;
  }
}
.report-area .satisfaction-box .info span {
  color: var(--primary);
}
.report-area .satisfaction-box .info br {
  display: block;
}
.project-area .section-title {
  max-width: 330px;
font-family: Space Grotesk;
}
.project-area .section-header {
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 991px) {
  .project-area .section-header {
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
  }
}
@media only screen and (max-width: 767px) {
  .project-area .section-header {
    grid-template-columns: 1fr;
  }
}
.project-area .section-header .text {
  max-width: 450px;
}
.project-area .nav-icon {
  width: 70px;
  height: 70px;
  font-size: 20px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  color: #fff;
}
@media only screen and (max-width: 1919px) {
  .project-area .nav-icon {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }
}
.project-area .nav-icon:hover {
  background-color: var(--theme);
  color: var(--black);
  border-color: rgba(0, 0, 0, 0);
}
.dark .project-area .nav-icon:hover {
  color: var(--black);
}
.project-area .slider-nav {
  display: flex;
  gap: 20px;
}
.dir-rtl .project-area .slider-nav {
  flex-direction: row-reverse;
}
@media only screen and (max-width: 991px) {
  .project-area .slider-nav {
    display: none;
  }
}
.project-area .projects-wrapper-box {
  margin-top: 90px;
}
@media only screen and (max-width: 1919px) {
  .project-area .projects-wrapper-box {
    margin-top: 70px;
  }
}
@media only screen and (max-width: 1399px) {
  .project-area .projects-wrapper-box {
    margin-top: 50px;
  }
}
.project-area .projects-wrapper-box .swiper {
  margin: -30px;
  padding: 30px;
}
@media only screen and (max-width: 991px) {
  .project-area .projects-wrapper-box .swiper {
    margin: 0;
    padding: 0;
  }
}
.project-box {
  display: inline-block;
  position: relative;
}
.project-box:hover .thumb {
  transform: scale(1.09);
}
@media only screen and (max-width: 991px) {
  .project-box:hover .thumb {
    transform: none;
  }
}
.project-box:hover .wc-btn-circle {
  margin-bottom: 0;
  opacity: 1;
}
.project-box .thumb {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.5s;
}
.project-box .thumb:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #00000047;
  top: 0;
  inset-inline-start: 0;
  opacity: 0.9;
}
.project-box .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.project-box .tag {
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.35);
  color: var(--black);
}
.project-box .meta {
  position: absolute;
  top: 0px;
  inset-inline-start: 0px;
  margin: 40px;
}
@media only screen and (max-width: 1919px) {
  .project-box .meta {
    margin: 30px;
  }
}
.project-box .title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--white);
}
@media only screen and (max-width: 1919px) {
  .project-box .title {
    font-size: 22px;
  }
}
.project-box .title a:hover {
  color: var(--white);
}
.project-box .content {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  margin: 40px;
  overflow: hidden;
}
@media only screen and (max-width: 1919px) {
  .project-box .content {
    margin: 30px;
  }
}
.project-box .wc-btn-circle {
  margin-top: 28px;
  width: 60px;
  height: 60px;
  background-color: var(--theme);
  color: var(--black);
  margin-bottom: -88px;
  opacity: 0;
  transition: all 0.5s;
}
@media only screen and (max-width: 991px) {
  .project-box .wc-btn-circle {
    margin-bottom: 0;
    opacity: 1;
  }
}
.project-box .wc-btn-circle i {
  transform: rotate(-45deg);
}
.pricing-area .section-title {
  max-width: 610px;
}
.pricing-area .section-header {
  display: grid;
  gap: 30px 60px;
  grid-template-columns: 1fr 480px;
}
@media only screen and (max-width: 1199px) {
  .pricing-area .section-header {
    grid-template-columns: 1fr 400px;
  }
}
@media only screen and (max-width: 991px) {
  .pricing-area .section-header {
    grid-template-columns: 1fr;
  }
}
.pricing-area .accordion .accordion-button {
  font-size: 18px;
  line-height: 1;
  color: var(--primary);
  padding-top: 18px;
  padding-bottom: 18px;
  padding-inline-start: 0;
  padding-inline-end: 0;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  text-align: start;
  font-weight: 500;
}
.pricing-area .accordion .accordion-button .section-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  padding: 8px 16px;
  display: inline-block;
  border-radius: 10px;
  background-color: var(--white);
}
@media only screen and (max-width: 1399px) {
  .pricing-area .accordion .accordion-button {
    font-size: 20px;
  }
}
@media only screen and (max-width: 1199px) {
  .pricing-area .accordion .accordion-button br {
    display: none;
  }
}
.pricing-area .accordion .accordion-button::after {
  content: "+";
  color: var(--primary);
  background-image: none;
  line-height: 1;
  width: auto;
  height: auto;
  font-size: 25px;
  margin-inline-start: 50px;
  margin-inline-start: auto;
  margin-inline-end: 0;
}
.pricing-area .accordion .accordion-button:not(.collapsed) {
  pointer-events: none;
}
.pricing-area .accordion .accordion-button:not(.collapsed)::after {
  content: "-";
}
.pricing-area .accordion .accordion-item {
  border-bottom: 1px solid #b8b8b8;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0px;
}
.dark .pricing-area .accordion .accordion-item {
  border-color: #464646;
}
.pricing-area .accordion .accordion-item:not(:first-child) {
  margin-top: 0px;
}
.pricing-area .accordion .accordion-item:first-child {
  border-top: 1px solid #b8b8b8;
}
.dark .pricing-area .accordion .accordion-item:first-child {
  border-color: #464646;
}
.pricing-area .accordion .accordion-body {
  font-size: 18px;
  line-height: 1.44;
  padding-inline-start: 0px;
  padding-inline-end: 0px;
  padding-bottom: 24px;
  padding-top: 0;
  color: var(--secondary);
}
@media only screen and (max-width: 991px) {
  .pricing-area .accordion .accordion-body {
    padding-bottom: 23px;
  }
}
.pricing-area .pricing-wrapper-box {
  margin-top: 100px;
}
@media only screen and (max-width: 1919px) {
  .pricing-area .pricing-wrapper-box {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 1399px) {
  .pricing-area .pricing-wrapper-box {
    margin-top: 60px;
  }
}
.pricing-area .pricing-wrapper {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 991px) {
  .pricing-area .pricing-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .pricing-area .pricing-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
.pricing-box {
  background-color: var(--white);
  padding: 47px 50px 50px;
  box-shadow: 0px 30px 200px rgba(16, 25, 56, 0.08);
  border-radius: 5px;
}
.dark .pricing-box {
  background-color: #1c1c1c;
}
@media only screen and (max-width: 1199px) {
  .pricing-box {
    padding: 27px 30px 30px;
  }
}
.pricing-box .tag {
  font-size: 18px;
  color: var(--primary);
  display: inline-block;
  line-height: 1;
}
.pricing-box .feature-list {
  margin-top: 39px;
  min-height: 171px;
}
@media only screen and (max-width: 767px) {
  .pricing-box .feature-list {
    min-height: auto;
  }
}
.pricing-box .feature-list li {
  display: flex;
  align-items: center;
}
.pricing-box .feature-list li:not(:first-child) {
  margin-top: 15px;
}
.pricing-box .feature-list li img {
  margin-inline-end: 10px;
}
.dir-rtl .pricing-box .feature-list li img {
  transform: rotateY(180deg);
}
.pricing-box .price {
  font-size: 60px;
  line-height: 1;
  margin-top: 17px;
}
@media only screen and (max-width: 1399px) {
  .pricing-box .price {
    font-size: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .pricing-box .price {
    font-size: 40px;
  }
}
.pricing-box .wc-btn-primary {
  margin-top: 50px;
}
@media only screen and (max-width: 1199px) {
  .pricing-box .wc-btn-primary {
    margin-top: 40px;
  }
}
.dark .pricing-box .wc-btn-primary:hover {
  color: var(--black);
}
.fun-fact-area .section-title {
  max-width: 520px;
  margin-inline: auto;
  font-family: Space Grotesk;
}
.fun-fact-area .section-header {
  text-align: center;
}
.counter-wrapper-box {
  margin-top: 61px;
}
@media only screen and (max-width: 1399px) {
  .counter-wrapper-box {
    margin-top: 41px;
  }
}
.counter-wrapper {
  display: grid;
  gap: 50px 30px;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 991px) {
  .counter-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .counter-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
.counter-box {
  text-align: center;
}
.counter-box .number {
  font-size: 100px;
  font-weight: 600;
  line-height: 1.3;
  position: relative;
  z-index: 1;
  padding: 0 30px;
  display: inline-block;
  background-image: url(../imgs/shape/img-s-55.webp);
  background-size: 100% 100%;
  background-position: center;
  font-family: Space Grotesk;
	
}
@media only screen and (max-width: 1399px) {
  .counter-box .number {
    font-size: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .counter-box .number {
    font-size: 50px;
    padding: 0 20px;
  }
}
.counter-box .text {
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  margin-top: 10px;
}
@media only screen and (max-width: 1399px) {
  .counter-box .text {
    font-size: 20px;
  }
}
@media only screen and (max-width: 1199px) {
  .counter-box .text {
    font-size: 18px;
  }
}
.testimonial-area-inner {
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 1fr 740px;
}
@media only screen and (max-width: 1399px) {
  .testimonial-area-inner {
    grid-template-columns: 1fr 640px;
  }
}
@media only screen and (max-width: 1199px) {
  .testimonial-area-inner {
    grid-template-columns: 1fr 470px;
  }
}
@media only screen and (max-width: 991px) {
  .testimonial-area-inner {
    grid-template-columns: 100%;
  }
}
.testimonial-area .section-subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  font-family: var(--font_spacegrotesk);
}
.testimonial-area .section-title {
  max-width: 390px;
}
.testimonial-area .section-content .subtitle-wrapper {
  display: flex;
  gap: 15px;
  align-items: center;
}
.testimonial-area .section-content .title-wrapper {
  margin-top: 30px;
}
@media only screen and (max-width: 767px) {
  .testimonial-area .section-content .title-wrapper {
    margin-top: 15px;
  }
}
.testimonial-area .section-content .text-wrapper {
  margin-top: 32px;
}
@media only screen and (max-width: 1199px) {
  .testimonial-area .section-content .text-wrapper {
    margin-top: 22px;
  }
}
.testimonial-area .section-content .text-wrapper .text {
  max-width: 357px;
}
.testimonial-area .section-content .review-wrapper-box {
  margin-top: 63px;
}
@media only screen and (max-width: 1199px) {
  .testimonial-area .section-content .review-wrapper-box {
    margin-top: 43px;
  }
}
.testimonial-area .review-wrapper {
  background-color: #e7f5eb;
  border-radius: 5px;
  padding: 15px 20px;
  display: inline-flex;
  align-items: center;
}
.dark .testimonial-area .review-wrapper {
  background-color: #252525;
}
.testimonial-area .review-author {
  display: flex;
  gap: 10px;
  align-items: center;
}
.testimonial-area .review-author .text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.testimonial-area .review-author .text br {
  display: block;
}
.testimonial-area .review-rating {
  padding-inline-start: 20px;
  border-inline-start: 1px solid #cddbd9;
  margin-inline-start: 20px;
}
.testimonial-area .review-rating .ratings {
  display: flex;
  align-items: center;
}
.testimonial-area .review-rating .number {
  font-size: 22px;
  display: inline-block;
}
.testimonial-area .review-rating .icon-list {
  display: inline-flex;
  gap: 2px;
  margin-inline-start: 8px;
}
.testimonial-area .review-rating .icon-list li {
  font-size: 14px;
}
.testimonial-area .review-rating .text {
  font-size: 14px;
  margin-top: 4px;
  color: #333;
}
.testimonial-area .testimonial-wrapper {
  padding: 80px 100px;
  background-color: #04080f;
  box-shadow: 0px 30px 200px rgba(16, 25, 56, 0.08);
  border-radius: 5px;
}
.dark .testimonial-area .testimonial-wrapper {
    background-color: rgba(255, 255, 255, 0.03);
}
@media only screen and (max-width: 1199px) {
  .testimonial-area .testimonial-wrapper {
    padding: 50px 60px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial-area .testimonial-wrapper {
    padding: 30px 20px;
  }
}
.testimonial-area .testimonial-wrapper-box {
  position: relative;
}
.testimonial-area .slider-nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% + 70px);
  margin-inline-start: -35px;
}
.dir-rtl .testimonial-area .slider-nav {
  flex-direction: row-reverse;
}
@media only screen and (max-width: 1199px) {
  .testimonial-area .slider-nav {
    width: calc(100% + 60px);
    margin-inline-start: -30px;
  }
}
@media only screen and (max-width: 991px) {
  .testimonial-area .slider-nav {
    display: none;
  }
}
.testimonial-area .slider-nav .nav-icon,
.testimonial-area .slider-nav [role="button"] {
  cursor: pointer;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(18, 18, 18, 0.15);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
  transition: all 0.5s;
}
.dark .testimonial-area .slider-nav .nav-icon,
.dark .testimonial-area .slider-nav [role="button"] {
  border-color: #464646;
}
@media only screen and (max-width: 1199px) {
  .testimonial-area .slider-nav .nav-icon,
  .testimonial-area .slider-nav [role="button"] {
    width: 60px;
    height: 60px;
    font-size: 18px;
  }
}
.testimonial-area .slider-nav .nav-icon:hover,
.testimonial-area .slider-nav [role="button"]:hover {
  background-color: var(--theme);
  border-color: rgba(0, 0, 0, 0);
  color: var(--black);
}
.testimonial-area .slider-nav .nav-icon.swiper-button-disabled,
.testimonial-area .slider-nav [role="button"].swiper-button-disabled {
  opacity: 0.3;
}
.testimonial-item {
  text-align: center;
}
.testimonial-item .icon img {
  height: 47px;
}
@media only screen and (max-width: 1199px) {
  .testimonial-item .icon img {
    height: 37px;
  }
}
.testimonial-item .text {
  font-size: 24px;
  line-height: 1.33;
  font-weight: 500;
  color: #fff;
  font-family: var(--font_spacegrotesk);
}
@media only screen and (max-width: 1399px) {
  .testimonial-item .text {
    font-size: 20px;
  }
}
.testimonial-item .post {
  font-size: 16px;
  display: block;
  margin-top: 8px;
}
.testimonial-item .name {
  font-size: 24px;
  line-height: 1;
  display: block;
  color: var(--primary);
}
.testimonial-item .text-wrapper {
  margin-top: 38px;
}
@media only screen and (max-width: 767px) {
  .testimonial-item .text-wrapper {
    margin-top: 28px;
  }
}
.testimonial-item .author {
  margin-top: 55px;
}
@media only screen and (max-width: 1199px) {
  .testimonial-item .author {
    margin-top: 45px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial-item .author {
    margin-top: 35px;
  }
}
.team-area-inner {
  padding-bottom: 485px;
  padding-inline: 40px;
  background-color: var(--black);
  border-radius: 5px;
  position: relative;
  z-index: 1;
}
.dark .team-area-inner {
  background-color: #1c1c1c;
}
@media only screen and (max-width: 1919px) {
  .team-area-inner {
    padding-bottom: 285px;
  }
}
@media only screen and (max-width: 1199px) {
  .team-area-inner {
    padding-bottom: 235px;
  }
}
@media only screen and (max-width: 767px) {
  .team-area-inner {
    padding-inline: 20px;
  }
}
.team-area-inner .shape-1 {
  position: absolute;
  width: 230px;
  top: 84px;
  inset-inline-end: 65px;
  z-index: -1;
}
.dir-rtl .team-area-inner .shape-1 img {
  transform: rotateY(180deg);
}
.team-area .section-title {
  max-width: 635px;
  margin-inline: auto;
  color: var(--white);
}
.team-area .section-header {
  text-align: center;
}
.team-area .section-header .text {
  max-width: 600px;
  margin-inline: auto;
  color: var(--white-2);
}
.team-area .section-header .text-wrapper {
  margin-top: 31px;
}
@media only screen and (max-width: 767px) {
  .team-area .section-header .text-wrapper {
    margin-top: 21px;
  }
}
.team-area .team-wrapper {
  display: grid;
  gap: 40px 40px;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1199px) {
  .team-area .team-wrapper {
    gap: 40px 20px;
  }
}
@media only screen and (max-width: 991px) {
  .team-area .team-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .team-area .team-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
.team-area .team-wrapper-box {
  margin-top: -392px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1919px) {
  .team-area .team-wrapper-box {
    margin-top: -212px;
  }
}
@media only screen and (max-width: 1399px) {
  .team-area .team-wrapper-box {
    margin-top: -232px;
  }
}
@media only screen and (max-width: 1199px) {
  .team-area .team-wrapper-box {
    margin-top: -182px;
  }
}
.team-area .team-wrapper-box .shape-1 {
  position: absolute;
  width: 200px;
  right: 9%;
  top: -130px;
  z-index: 1;
}
@media only screen and (max-width: 1919px) {
  .team-area .team-wrapper-box .shape-1 {
    width: 130px;
    right: -1%;
    top: -90px;
  }
}
@media only screen and (max-width: 991px) {
  .team-area .team-wrapper-box .shape-1 {
    display: none;
  }
}
.team-box:hover .thumb img {
  transform: scale(1.1);
}
.team-box .thumb {
  border-radius: 5px;
  overflow: hidden;
}
.team-box .thumb img {
  width: 100%;
  transition: all 0.5s;
}
.team-box .content {
  margin-top: 22px;
}
.team-box .name {
  font-size: 24px;
  font-weight: 600;
}
@media only screen and (max-width: 1399px) {
  .team-box .name {
    font-size: 22px;
  }
}
.team-box .post {
  font-size: 16px;
  line-height: 1;
  margin-top: 10px;
  margin-bottom: 28px;
}
@media only screen and (max-width: 1199px) {
  .team-box .post {
    margin-bottom: 23px;
  }
}
.team-box .wc-btn-circle {
  width: 30px;
  height: 30px;
  background-color: var(--white);
  color: var(--black);
  border: 1px solid rgba(18, 18, 18, 0.15);
  font-size: 14px;
}
.dark .team-box .wc-btn-circle {
  background-color: var(--black);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.15);
}
.team-box .wc-btn-circle i {
  transform: none;
}
.team-box .wc-btn-primary {
  font-size: 12px;
  font-weight: 400;
  padding: 0 11px;
  background-color: var(--white);
  color: var(--black);
  border: 1px solid rgba(18, 18, 18, 0.15);
  border-radius: 30px;
}
.dark .team-box .wc-btn-primary {
  background-color: var(--black);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.15);
}
.team-box .wc-btn-group {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
}
.team-box .wc-btn-group > *:nth-child(3) {
  transform: scale3d(0.5, 0.5, 1);
  margin-inline-start: -30px;
}
.team-box .wc-btn-group > *:nth-child(2) {
  transform: scale3d(1, 1, 1);
}
.team-box .wc-btn-group > *:nth-child(1) {
  transform: scale3d(1, 1, 1);
  margin-inline-end: 0;
}
.team-box .wc-btn-group:hover > *:nth-child(3) {
  transform: scale3d(1, 1, 1);
  margin-inline-start: 0;
}
.team-box .wc-btn-group:hover > *:nth-child(2) {
  transform: scale3d(1, 1, 1);
}
.team-box .wc-btn-group:hover > *:nth-child(1) {
  transform: scale3d(0.5, 0.5, 1);
  margin-inline-end: -30px;
}
.text-slider-active .swiper-slide {
  width: auto;
}
.text-slider {
  padding-top: 110px;
}
@media only screen and (max-width: 1919px) {
  .text-slider {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .text-slider {
    padding-top: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .text-slider {
    padding-top: 30px;
  }
}
.text-slider .swiper-wrapper {
  transition-timing-function: linear;
}
.text-slider-item .title {
  font-size: 190px;
  font-weight: 500;
  line-height: 1.1;
}
@media only screen and (max-width: 1919px) {
  .text-slider-item .title {
    font-size: 140px;
  }
}
@media only screen and (max-width: 1399px) {
  .text-slider-item .title {
    font-size: 100px;
  }
}
@media only screen and (max-width: 1199px) {
  .text-slider-item .title {
    font-size: 90px;
  }
}
@media only screen and (max-width: 991px) {
  .text-slider-item .title {
    font-size: 75px;
  }
}
@media only screen and (max-width: 767px) {
  .text-slider-item .title {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .text-slider-item .title {
    font-size: 35px;
  }
}
.text-slider-item .title span {
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 1px;
}
.cta-area .section-title {
  max-width: 680px;
  margin-inline: auto;
}
.cta-area .section-header {
  text-align: center;
}
.cta-area .btn-wrapper {
  margin-top: 42px;
}
.footer-area {
  background-color: var(--black);
  padding: 0 45px;
}
.dark .footer-area {
  background-color: #1c1c1c;
}
@media only screen and (max-width: 991px) {
  .footer-area {
    padding: 0 15px;
  }
}
.footer-area-inner {
  display: grid;
  gap: 80px 50px;
  grid-template-columns: 365px 190px 190px 385px;
  justify-content: space-between;
  overflow: hidden;
  padding-top: 130px;
  padding-bottom: 130px;
}
@media only screen and (max-width: 1919px) {
  .footer-area-inner {
    padding-top: 100px;
    padding-bottom: 100px;
    grid-template-columns: 265px 190px 190px 385px;
  }
}
@media only screen and (max-width: 1399px) {
  .footer-area-inner {
    padding-top: 80px;
    padding-bottom: 80px;
    grid-template-columns: 225px 160px 160px 305px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer-area-inner {
    padding-top: 60px;
    padding-bottom: 60px;
    gap: 50px 60px;
    grid-template-columns: auto auto auto;
  }
}
@media only screen and (max-width: 767px) {
  .footer-area-inner {
    grid-template-columns: auto auto;
  }
}
@media (max-width: 575px) {
  .footer-area-inner {
    grid-template-columns: auto;
  }
}
.footer-area .footer-area-inner > * {
  min-width: 130px;
}
@media only screen and (max-width: 1199px) {
  .footer-area .footer-area-inner > *.newsletter {
    grid-column: span 2;
  }
}
@media only screen and (max-width: 767px) {
  .footer-area .footer-area-inner > *.newsletter {
    order: 1;
  }
}
@media (max-width: 575px) {
  .footer-area .footer-area-inner > *.newsletter {
    grid-column: auto;
  }
}
.footer-area .footer-logo img {
  max-height: 42px;
}
@media only screen and (max-width: 1199px) {
  .footer-area .footer-logo img {
    max-height: 34px;
  }
}
.footer-area .info-text {
  max-width: 270px;
  margin-top: 26px;
  color: var(--white-2);
}
.footer-area .footer-widget-wrapper .title {
  color: var(--white);
  font-size: 24px;
  font-weight: 500;
  line-height: 0.73;
}
@media only screen and (max-width: 1399px) {
  .footer-area .footer-widget-wrapper .title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer-area .footer-widget-wrapper .title {
    font-size: 22px;
  }
}
.footer-area .footer-nav-list {
  margin-top: 27px;
}
.footer-area .footer-nav-list li {
  font-size: 18px;
  line-height: 30px;
  color: var(--white-2);
}
.footer-area .footer-nav-list li a:hover {
  color: var(--white);
}
.footer-area .footer-nav-list li .location {
  margin-bottom: 22px;
  display: inline-block;
}
.footer-area .social-links {
  display: flex;
  gap: 20px;
  margin-top: 56px;
}
@media only screen and (max-width: 1199px) {
  .footer-area .social-links {
    margin-top: 36px;
  }
}
.footer-area .social-links li {
  line-height: 1;
}
.footer-area .social-links li a {
  color: var(--white-2);
}
.footer-area .social-links li a:hover {
  color: var(--white);
}
.footer-area .newsletter-text {
  margin-top: 29px;
}
.footer-area .newsletter-text .text {
  color: var(--white-2);
}
.subscribe-form {
  margin-top: 38px;
}
.subscribe-form .input-field {
  background-color: #202020;
  border-radius: 5px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 25px 25px;
}
@media only screen and (max-width: 1399px) {
  .subscribe-form .input-field {
    padding: 18px 25px;
  }
}
.subscribe-form .input-field input {
  border: 0;
  background-color: #202020;
  color: var(--white);
  width: 100%;
}
.subscribe-form .input-field input::-moz-placeholder {
  color: var(--white-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.subscribe-form .input-field input::placeholder {
  color: var(--white-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.subscribe-form .input-field input:focus {
  outline: 0;
}
.subscribe-form .input-field .subscribe-btn img,
.subscribe-form .input-field .subscribe-btn i {
  color: var(--theme);
}
.dir-rtl .subscribe-form .input-field .subscribe-btn img,
.dir-rtl .subscribe-form .input-field .subscribe-btn i {
  transform: rotateY(180deg);
}
.subscribe-form .input-field .icon {
  color: var(--white-2);
}
.subscribe-form .policy-field {
  margin-top: 20px;
}
.subscribe-form .policy-field label {
  font-size: 14px;
  margin-inline-start: 6px;
}
.subscribe-form .policy-field label span {
  color: var(--primary);
  font-weight: 500;
}
.copyright-area-inner {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 0;
  position: relative;
}
@media only screen and (max-width: 1399px) {
  .copyright-area-inner {
    padding: 22px 0;
  }
}
.copyright-area .copyright-text .text {
  text-align: center;
  font-weight: 500;
  color: var(--white-2);
}
.copyright-area .copyright-text .text a {
  color: var(--white);
} /*# sourceMappingURL=master-seo-agency.css.map */


.swiper-wrapper {
    align-items: center;
}
.header__logo img.show-light, .header__logo img.show-dark {
    width: 151px;
}
.client-box img {
	width: 150px;
}
.feature-box.has_fade_anim .thumb img {
    width: 48px;
}
h3.price strong {
    font-size: 22px;
}
.contact-box p a:hover {
    color: white;
}
.header__button a {
    color: white !important;
}
.dark h1 {
    color: white !important;
}


.dark .header__button a span {
    color: #333 !important;
}
a.wc-btn.wc-btn-primary.btn-text-flip.home {
    color: #000 !important;
}
.dark .header__button.cnt a span {
    color: #fff !important;
}
h2.title.brand-title {
    color: #fff;
}
.dark h1.section-title.large.has_text_move_anim.dddddd {
    color: #fff !important;
}
.service-area .service-item .service-features li {
    font-size: 16px;
    line-height: 21px;
}
.container.adscmp {
    margin-top: 56px;
}

.container.adscmp .has_fade_anim {
    margin-top: 30px;
}
p.text {
    margin-top: 20px;
}
h1.section-title.has_text_move_anim.hometile {
    color: white;
}
p.text.has_fade_anim.hometile {
    color: white;
}
.ratings.borderfg {
    border-inline-start: 1px solid #fff !important;
}
.review-wrapper.has_fade_anim.borderhubh {
    border-top: 1px solid #fff;
}
span.section-subtitle.has-right-line.lftwhite {
    color: white;
}
.reviews.dada h2, .reviews.dada span {
    color: white !important;
}

span.rating-text.nana {
    color: white !IMPORTANT;
}
.client-box {
    border: 1px solid #e2d7d7;
}
.client-box img {
    width: 192px;
    padding: 48px;
    height: 142px;
}
.sizedada img {
    width: 231px !important;
}

.clients-area.top .client-box img {
    width: 192px;
    padding: 48px;
    height: 177px;
}


section.features-area.front-end div {
    color: #000;
}

section.features-area.front-end .text-wrapper p {
    color: #fff !important;
}

section.features-area.front-end div .service-card {
    background: transparent;
}

section.features-area.front-end div .service-card:hover span.agency-label {
    color: #fff;
}

section.features-area.front-end div .service-card:hover a.read-more-btn {
    color: #fff;
}

section.features-area.front-end div .service-card h3.service-title {
    color: #fff;
    margin-top: 70px;
    font-size: 30px;
}
section.features-area.front-end {
    padding-bottom: 80px;
}


.dark section.features-area.front-end {
    background: linear-gradient(135deg, #04151f 0%, #1a1e30 100%);
    position: relative;
    padding-top: 50px;
}

.dark section.features-area.front-end div {
    color: #fff;
}

.dark section.features-area.front-end .text-wrapper p {
    color: #fff !important;
}

.dark section.features-area.front-end div .service-card {
    background: transparent;
}

.dark section.features-area.front-end div .service-card:hover span.agency-label {
    color: #fff;
}

.dark section.features-area.front-end div .service-card:hover a.read-more-btn {
    color: #fff;
}


.dark section.features-area.front-end {
    padding-bottom: 80px;
}
.dark .client-box {
    border: 1px solid #525255;
}

section.features-area.front-end:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(62, 247, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
}


/* digital marketing css  */

.services-container.digital-marketing {
    grid-template-columns: repeat(auto-fit, minmax(301px, 1fr));
}

.services-container.digital-marketing span.service-number {
    font-size: 84px;
}

.services-container.digital-marketing h3.service-title {
    padding-top: 0;
    margin-top: 0 !important;
}

.services-container.digital-marketing.service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
}


@media (max-width: 768px) {
  
  .services {
      padding: 30px 0;
    }
    
    .services .service-item {
      padding: 20px;
    }
    
    .services .service-item .icon {
      width: 48px;
      height: 48px;
      position: relative;
      margin-bottom: 30px;
      margin-left: 42%;
    }
}

.services .service-item {
  padding: 40px;
  background: #F5F5F5;
  height: 100%;
  border-radius: 10px;
}

.services .service-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-bottom: 50px;
  margin-left: 42%;
}

.services .service-item .icon i {
  color: var(--color-default);
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.services .service-item .icon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: #eeeeee;
  border-radius: 50px;
  z-index: 1;
  top: 10px;
  right: -20px;
  transition: 0.3s;
}

.services .service-item h3 {
  color: var(--color-default);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 28px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid #eeeeee;
  transition: 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 17px;
  margin-bottom: 0;
}

.services .service-item .readmore {
  margin-top: 15px;
  display: inline-block;
  color: var(--color-primary);
}

.services .service-item:hover .icon:before {
  background: #1F45FC;
}

.services .service-item:hover h3{
  border-bottom: 2px solid #0d42ff;
}
.services .service-item:hover {
  border-bottom: 2px solid #0d42ff;
}

.service-first-paragraph {
    font-size: 17px;
    margin: 34px 0;
}


/*--------------------------------------------------------------
# Our Services 2 Section
--------------------------------------------------------------*/
.services2 {
  padding: 60px 0;
}

.section-header2 {
  text-align: center;
  padding: 60px 0;
  position: relative;
}

.section-header2 h2 {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 0;
  color: #001973;
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-header2 h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--color-primary);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transition:1s;
}

.section-header2 h2:hover::after {
  content: "";
  width: 50%;
  height: 3px;
}

.section-header2 span {
  position: absolute;
  top: 46px;
  color: #001973;
  left: 0;
  right: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  line-height: 0;
}

.section-header2 p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 640px) {
  .section-header2 h2 {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .section-header2 span {
    font-size: 38px;
  }
}

.services2 .service-item {
  padding: 40px;
  background: #F5F5F5;
  height: 100%;
  border-radius: 10px;
  padding-bottom:20px;
}

.services2 .service-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-bottom: 50px;
  margin-left: 40%;
}

.services2 .service-item .icon i {
  color: var(--color-default);
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.services2 .service-item .icon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: #eeeeee;
  border-radius: 50px;
  z-index: 1;
  top: 10px;
  right: -20px;
  transition: 0.3s;
}

.services2 .service-item h3 {
  color: var(--color-default);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 28px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid #eeeeee;
  transition: 0.3s;
}

.services2 .service-item p {
  line-height: 24px;
  font-size: 17px;
  margin-bottom: 0;
}

.services2 .service-item .readmore {
  margin-top: 15px;
  display: inline-block;
  color: var(--color-primary);
}

.services2 .service-item:hover .icon:before {
  background: #1F45FC;
}

.services2 .service-item:hover h3 {
  border-color: var(--color-primary);
}

.services2 .service-item:hover {
  border-bottom: 2px solid #0d42ff;
}

.dark .icon i {
    font-size: 72px;
    color: #fff;
}

.font-heading-beatricetrial-regular-2 .icon i{
    font-size: 43px;
}

.service-item.position-relative.text-center h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 21px;
}

.section-header.dg {
    padding-top: 40px;
}

.section-header.dg .section-title {
    font-size: 40px;
    margin-top: -17px;
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features {
  padding-bottom: 130px;
}

.features .features-item+.features-item {
  margin-top: 100px;
}

.feature-title{
  text-align: center;
}

@media (max-width: 640px) {
  .features .features-item+.features-item {
    margin-top: 40px;
  }
}

.features .features-item h3 {
  font-weight: 600;
  font-size: 26px;
  color: #001973;
}

.features .features-item ul {
  list-style: none;
  padding: 0;
}

.features .features-item ul li {
  padding-bottom: 10px;
  color: #e6dddd;
}

.features .features-item ul li:last-child {
  padding-bottom: 0;
}

.features .features-item ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--color-primary);
}

.features .features-item p:last-child {
  margin-bottom: 0;
}


.features lebel {
    color: white;
    padding-bottom: 8px !important;
    display: block;
}

/* end  */



/*--------------------------------------------------------------
# Our Team Section
--------------------------------------------------------------*/
.team .member {
  text-align: center;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid rgba(14, 29, 52, 0.15);
}

.team .member img {
  margin: -1px -1px 30px -1px;
  max-height:250px;
  min-width:300px;
}

.team .member .member-content {
  padding: 0 10px 15px 10px;
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: #6c757d;
}

.team .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: #6c757d;
}

.team .member .social {
  margin-top: 10px;
}

.team .member .social a {
  color: rgba(14, 29, 52, 0.5);
  transition: 0.3s;
}

.team .member .social a:hover {
  color: var(--color-primary);
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Horizontal Pricing Section
--------------------------------------------------------------*/
.horizontal-pricing .pricing-item {
  box-shadow: 0 3px 20px -2px rgba(108, 117, 125, 0.15);
  padding-bottom: 30px;
  background: #fff;
  height: 100%;
  position: relative;
}

.horizontal-pricing h3 {
  font-weight: 700;
  margin-bottom: 0;
  font-size: 24px;
  color: var(--color-secondary);
}

.horizontal-pricing h4 {
  font-size: 48px;
  color: var(--color-primary);
  font-weight: 400;
  font-family: var(--font-primary);
  margin-bottom: 25px;
  text-align: center;
}

.horizontal-pricing h4 sup {
  font-size: 28px;
}

.horizontal-pricing h4 span {
  color: rgba(108, 117, 125, 0.8);
  font-size: 18px;
}

.horizontal-pricing ul {
  padding: 20px 0;
  list-style: none;
  color: #6c757d;
  text-align: left;
  line-height: 20px;
}

.horizontal-pricing ul li {
  padding-top: 15px;
  display: flex;
  align-items: center;
}

.horizontal-pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.horizontal-pricing ul .na {
  color: rgba(108, 117, 125, 0.5);
}

.horizontal-pricing ul .na i {
  color: rgba(108, 117, 125, 0.5);
}

.horizontal-pricing ul .na span {
  text-decoration: line-through;
}

.horizontal-pricing .buy-btn {
  display: inline-block;
  padding: 12px 40px;
  border-radius: 4px;
  color: #fff;
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  transition: none;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
  font-family: var(--font-primary);
}

.horizontal-pricing .buy-btn:hover {
  background: #406aff;
  border-color: #406aff;
}

.horizontal-pricing .featured {
  background: var(--color-primary);
}

.horizontal-pricing .featured h3,
.horizontal-pricing .featured h4,
.horizontal-pricing .featured h4 span,
.horizontal-pricing .featured ul,
.horizontal-pricing .featured ul .na,
.horizontal-pricing .featured ul i,
.horizontal-pricing .featured ul .na i {
  color: #fff;
}

.horizontal-pricing .featured .buy-btn {
  background: var(--color-primary);
  color: #fff;
  border-color: #fff;
}

.horizontal-pricing .featured .buy-btn:hover {
  background: #fff;
  color: var(--color-primary);
}


.card-before-footer{
  width: 18rem;
  margin-bottom: 25px;
  background-color: #1F45FC;
  color: white;
  transition: 1s;
  height:320px;
}

.card-before-footer:hover{
  background-color: #00154e;
}


.card-hover-black{

  min-height: 280px;
  min-width: 100%;
  transition: 0.5s;
  background-image: linear-gradient(rgba(0, 0, 0, 0.727), rgba(0, 0, 0, 0.7)),url("../img/6.jpg");
  background-repeat: none;
  background-position: center;
  background-size: cover;
}

.card-hover-black:hover {
  transform: scale(1.05,1.05);
}

.blog-grid-image{
  height: 150px;
  width:100%;
  border-radius:15px;
}

.around-world-text{
  font-size: 24px;
  font-weight: bold;
  opacity:1;
  position: relative;
  z-index: 99;
  text-align: center;
  color: #F5F5F5;
  text-shadow: 2px,2px #0d42ff;
  margin-top: 25%;
}

p.card-text {
    font-size: 16px;
    color: #e3dede;
    margin-top: 15px;
}


/* prcing table */


/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px rgba(108, 117, 125, 0.15);
  height: 100%;
  border-radius: 5px;
  transition:0.2s;
}
.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
  color: var(--color-secondary);
}

.pricing h4 {
  font-size: 48px;
  color: var(--color-primary);
  font-weight: 400;
  font-family: var(--font-primary);
  margin-bottom: 25px;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: rgba(108, 117, 125, 0.8);
  font-size: 18px;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: #6c757d;
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: rgba(108, 117, 125, 0.5);
}

.pricing ul .na i {
  color: rgba(108, 117, 125, 0.5);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  display: inline-block;
  padding: 12px 35px;
  border-radius: 4px;
  color: var(--color-primary);
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-primary);
  transition: 0.3s;
  border: 1px solid var(--color-primary);
}

.pricing .buy-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

.pricing .featured {
  border-top-color: var(--color-primary);
}

.pricing .featured .buy-btn {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 992px) {
  .pricing .box {
    max-width: 60%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 767px) {
  .pricing .box {
    max-width: 80%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 420px) {
  .pricing .box {
    max-width: 100%;
    margin: 0 auto 30px auto;
  }
  
  .header .logo h1 {
      font-size: 28px;
      margin-top:-10px;
    }
    
    
  .header .logo img {
      margin-top:-10px;
      margin-right:4px;
    }
}

.features-area-inner.section-spacing-top.dm-top {
    margin-top: 20px !important;
}

.mt-top-dm {
    margin: 89px auto;
}

.service-item.position-relative.text-center {
    margin-bottom: 40px;
}




/* digital marketing css  */

  /* Base Styles */
  .digital-marketing-services {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 7rem 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
  }

  .digital-marketing-services::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    pointer-events: none;
  }

  .dm-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .dm-content-wrapper {
    display: flex;
    gap: 4rem;
    align-items: center;
  }

  /* Text Content */
  .dm-text-content {
    flex: 1;
    min-width: 0;
  }

  .dm-section-header {
    margin-bottom: 3.5rem;
  }

  .dm-heading {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, #ffffff 60%, #40ff00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .dm-highlight {
    position: relative;
    display: inline-block;
  }

  .dm-highlight::after {
    content: '';
    position: absolute;
    bottom: 0.25rem;
    left: 0;
    width: 100%;
    height: 0.5rem;
    background: rgba(64, 255, 0, 0.25);
    z-index: -1;
    border-radius: 0.25rem;
  }

  .dm-subheading {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #94a3b8;
    max-width: 80%;
  }

  /* Services Grid */
  .dm-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .dm-service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.5rem;
  }

  .dm-service-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .dm-service-card:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-0.5rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  }

  .dm-service-icon-wrapper {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .dm-service-icon {
    font-size: 1.25rem;
    color: white;
  }

  .dm-service-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  .dm-service-desc {
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
  }

  /* Visual Content */
  .dm-visual-content {
    flex: 1;
    position: relative;
    min-width: 0;
  }

  .dm-image-container {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 2rem 3rem rgba(0, 0, 0, 0.2);
    aspect-ratio: 1/1;
  }

  .dm-feature-image {
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dm-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(16, 24, 39, 0.7) 100%);
  }

  .dm-stats-overlay {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    display: flex;
    gap: 1.5rem;
  }

  .dm-stat-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .dm-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, #ffffff 0%, #40ff00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .dm-stat-label {
    font-size: 0.875rem;
    color: #e2e8f0;
  }

  .dm-image-container:hover .dm-feature-image {
    transform: scale(1.05);
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
    .dm-content-wrapper {
      flex-direction: column;
    }
    
    .dm-visual-content {
      order: -1;
      width: 100%;
      max-width: 600px;
      margin: 0 auto 3rem;
    }
    
    .dm-subheading {
      max-width: 100%;
    }
  }

  @media (max-width: 768px) {
    .digital-marketing-services {
      padding: 5rem 0;
    }
    
    .dm-heading {
      font-size: 2.25rem;
    }
    
    .dm-services-grid {
      grid-template-columns: 1fr;
    }
    
    .dm-service-card {
      padding: 1.5rem;
    }
  }

  @media (max-width: 480px) {
    .dm-container {
      padding: 0 1.25rem;
    }
    
    .dm-heading {
      font-size: 2rem;
    }
    
    .dm-stats-overlay {
      flex-direction: column;
      gap: 1rem;
      width: calc(100% - 2rem);
    }
  }



  .digital-marketing-stats {
    background-color: #000;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 100px;
}
    
    .digital-marketing-stats::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
        pointer-events: none;
    }
    
    .container {
        max-width: 1850px;
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
        z-index: 1;
    }
    
    .section-header {
        text-align: center;
        margin-bottom: 60px;
    }
    
    
    .section-subtitle {
        font-size: 1.1rem;
        color: #a1a1aa;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
        margin-top: 50px;
    }
    
    .stat-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 40px 30px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s ease;
        backdrop-filter: blur(10px);
    }
    
    .stat-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
        border-color: rgba(59, 130, 246, 0.3);
    }
    
    .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }
    
    .stat-label {
        font-size: 12px;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
    }
    
    .stat-number {
        font-size: 24px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.1);
    }
    
    .stat-value {
        font-size: 3rem;
        font-weight: 700;
        margin: 15px 0;
        color: #fff;
        background: linear-gradient(90deg, #fff, #3b82f6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .stat-description {
        font-size: 14px;
        color: #d1d5db;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    
    .stat-underline {
        height: 2px;
        width: 40px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        transition: width 0.4s ease;
    }
    
    .stat-card:hover .stat-underline {
        width: 80px;
    }
    
    @media (max-width: 768px) {
        .section-title {
            font-size: 2rem;
        }
        
        .stats-grid {
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
    }
    
    @media (max-width: 480px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }
        
        .stat-card {
            padding: 30px 20px;
        }
    }

    section.features-area.front-end h2 {
    text-align: left;
}


       .select-container {
            position: relative;
            display: inline-block;
            width: 300px;
        }

        .form-select {
            width: 100%;
            padding: 12px 40px 12px 16px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 8px;
            background-color: white;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }

        .form-select:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
        }

        .select-arrow {
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid #666;
            pointer-events: none;
            transition: transform 0.3s ease;
        }

        .select-container:hover .select-arrow {
            border-top-color: #ffffff;
        }

        .form-select:focus + .select-arrow {
            transform: translateY(-50%) rotate(180deg);
        }

        /* Alternative: Using a Unicode arrow */
        .select-arrow-unicode {
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            font-size: 14px;
            color: #000000;
            pointer-events: none;
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .select-container:hover .select-arrow-unicode {
            color: #333;
        }

   .container-fullwidth.padding-l-r {
    padding: 0 30px;
}     

.clients-area.top {
    background: linear-gradient(176deg, #000000 0% 18%, #000000 100%);
    position: relative;
}

.clients-area.top:before {
   content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

 /* Base Styles */
  .advanced-digital-services {
    background: linear-gradient(135deg, #0f172a 0%, #1a1e30 100%);
    padding: 6rem 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
  }

  .advanced-digital-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 80% 20%, rgba(64, 255, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
  }

  .ads-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
  }

  /* Header Styles */
  .ads-header {
    margin-bottom: 4rem;
  }

  .ads-main-title {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(90deg, #ffffff 60%, #40ff00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.5rem;
	font-family: Space Grotesk;  
  }

  .ads-main-title span {
    position: relative;
  }

  .ads-main-title span::after {
    content: '';
    position: absolute;
    bottom: 0.25rem;
    left: 0;
    width: 100%;
    height: 0.5rem;
    background: rgba(64, 255, 0, 0.2);
    z-index: -1;
    border-radius: 0.25rem;
  }

  .ads-divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #40ff00, transparent);
    margin: 0 auto;
  }

  /* Content Grid */
  .ads-grid {
    display: flex;
    gap: 3rem;
    align-items: center;
  }

  .ads-services-content {
    flex: 1;
  }

  .ads-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #ffffff;
  }

  .ads-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 2.5rem;
  }

  /* Services List */
  .ads-services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .ads-service-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
  }

  .ads-service-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
  }

  .ads-service-item:hover {
    background: rgba(64, 255, 0, 0.05);
    border-color: rgba(64, 255, 0, 0.3);
    transform: translateX(5px);
  }

  .ads-service-item i {
    font-size: 1.25rem;
    color: #40ff00;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(64, 255, 0, 0.1);
    border-radius: 6px;
  }

  .ads-service-item span {
    font-size: 1rem;
    font-weight: 500;
  }

  /* Visual Section */
  .ads-visual {
    flex: 1;
  }

  .ads-image-container {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  .ads-feature-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
  }

  .ads-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(16, 24, 39, 0.5) 0%, rgba(64, 255, 0, 0.1) 100%);
  }

  .ads-image-container:hover .ads-feature-image {
    transform: scale(1.03);
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
    .ads-grid {
      flex-direction: column;
    }
    
    .ads-visual {
      order: -1;
      width: 100%;
      max-width: 600px;
      margin: 0 auto 3rem;
    }
  }

  @media (max-width: 768px) {
    .ads-main-title {
      font-size: 2.25rem;
    }
    
    .ads-services-list {
      grid-template-columns: 1fr;
    }
    .hero-text {
    position: relative;
    z-index: 2;
}
span.title-highlight {
    display: none;
}
  }

  @media (max-width: 480px) {
    .ads-main-title {
      font-size: 2rem;
    }
    
    .ads-container {
      padding: 0 1.5rem;
    }

    .hero-text {
    position: relative;
    z-index: 2;
}
span.title-highlight {
    display: none;
}
  }

  .ads-header.text-center.fff .ads-divider {
    margin: 0;
}

section.about-area {
    background: #11182b;
}

.container.bgdfdf {
    background: linear-gradient(135deg, #0f172a 0%, #1a1e30 100%);
    margin-top: 79px;
}

main {
    background: linear-gradient(135deg, #0f172a 0%, #1a1e30 100%);
    position: relative;
}

main:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),                    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}
.clients-area {
    background: linear-gradient(135deg, #0f172a 0%, #1a1e30 100%);
    position: relative;
}

.clients-area:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(62, 247, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

section {
    margin-bottom: -8px;
}

.ads-divider.text-left {
    margin: 0;
}

.header__navicon.d-xl-none i {
    color: white;
}

section.blog-area {
    background: linear-gradient(135deg, #0f172a 0%, #1a1e30 100%);
    position: relative;
    padding: 100px 0;
}

section.blog-area:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.features-area-inner.section-spacing-top.sr {padding-top: 18px;}

.features-area-inner.section-spacing-top.sr .services-container {
    grid-template-columns: repeat(auto-fit, minmax(366px, 1fr));

}


h2.section-title.abt {
    font-size: 42px;
}


section.services-section.sbpd {
    padding-bottom: 145px;
}
section.digital-marketing-stats.abab {
    padding-bottom: 10px;
}

section#team {
    padding: 100px 0 !important;
}

span.date.has-left-line {
    color: white;
}

/* footer css   */
/* Keep this part (static wave) */

body {
    padding: 0 !important;
}

p.text.has_fade_anim {
    color: #d2d2d2;
}

.copyright p {
    color: #94a3b8;
    font-size: 0.875rem;
}
address.contact-info p {
    color: #94a3b8;
    font-size: 16px;
}
.footer-subtext {
    font-size: 16px;
    max-width: 600px;
}

section.fun-fact-area {
    padding-top: 70px;
}

a.wc-btn.wc-btn-primary.btn-text-flip {
    color: #333;
}