@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/

/* Fonts */
:root {
	--default-font: "DM Sans", serif;
	--heading-font: "DM Sans", serif;
	--nav-font: "DM Sans", serif;
}





/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
	--background-color: #ffffff;
	/* Background color for the entire website, including individual sections */
	--default-color: #212529;
	/* Default color used for the majority of the text content across the entire website */
	--heading-color: #000000;
	/* Color for headings, subheadings and title throughout the website */
	--accent-color: #0d83fd;
	/* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
	--surface-color: #ffffff;
	/* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
	--contrast-color: #ffffff;
	/* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
	--nav-color: #212529;
	/* The default color of the main navmenu links */
	--nav-hover-color: #0d83fd;
	/* Applied to main navmenu links when they are hovered over or active */
	--nav-mobile-background-color: #ffffff;
	/* Used as the background color for mobile navigation menu */
	--nav-dropdown-background-color: #ffffff;
	/* Used as the background color for dropdown items that appear when hovering over primary navigation items */
	--nav-dropdown-color: #212529;
	/* Used for navigation links of the dropdown items in the navigation menu. */
	--nav-dropdown-hover-color: #0d83fd;
	/* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
	--background-color: #f3f9ff;
	--surface-color: #ffffff;
}

.dark-background {
	--background-color: #0d83fd;
	--default-color: #ffffff;
	--heading-color: #ffffff;
	--surface-color: #409dfd;
	--contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
	scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
	color: var(--default-color);
	background-color: var(--background-color);
	font-family: var(--default-font);
	font-family: "DM Sans", serif;
}

a {
	color: var(--accent-color);
	text-decoration: none;
	transition: 0.3s;
}

a:hover {
	color: color-mix(in srgb, var(--accent-color), transparent 25%);
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--heading-color);
	font-family: var(--heading-font);
}

p {
	line-height: 20px;
	font-size: 14px;
}

button {
	transition: 0.3s;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
	--background-color: rgba(255, 255, 255, 0);
	color: var(--default-color);
	background-color: var(--background-color);
	padding: 10px 0;
	transition: all 0.5s;
	z-index: 997;

}

.header .header-container {
	background: var(--surface-color);
	border-radius: 50px;
	padding: 15px 25px;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.scrolled .header .header-container {
	background: color-mix(in srgb, var(--surface-color), transparent 5%);
}

.header .logo {
	line-height: 1;
	padding-left: 5px;
}

.header .logo img {
	max-height: 36px;
	margin-right: 8px;
}

.header .logo h1 {
	font-size: 24px;
	margin: 0;
	font-weight: 500;
	color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
	color: var(--contrast-color);
	background: var(--accent-color);
	font-size: 14px;
	padding: 8px 20px;
	margin: 0 0 0 30px;
	border-radius: 50px;
	transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
	color: var(--contrast-color);
	background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
	.header {
		padding-top: 10px;
	}

	.header .header-container {
		margin-left: 10px;
		margin-right: 10px;
		padding: 10px 5px 10px 15px;
		margin: 0 auto;
	}

	/*
  .header .logo {
    order: 1;
  }
  */

	.header .btn-getstarted {
		order: 2;
		margin: 0 10px 0 0;
		padding: 6px 15px;
	}

	.header .navmenu {
		order: 3;
	}
}

.rightBtns {
	list-style: none;
	margin: 0;
	gap: 20px;
	justify-content: flex-end;
	display: flex;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
	.navmenu {
		padding: 0;
	}

	.navmenu ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;
	}

	.navmenu li {
		position: relative;
	}

	.navmenu a,
	.navmenu a:focus {
		color: var(--nav-color);
		padding: 18px 15px;
		font-size: 16px;
		font-family: var(--nav-font);
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: 0.3s;
	}

	.navmenu a i,
	.navmenu a:focus i {
		font-size: 12px;
		line-height: 0;
		margin-left: 5px;
		transition: 0.3s;
	}

	.navmenu li:last-child a {
		padding-right: 0;
	}

	.navmenu li:hover>a,
	.navmenu .active,
	.navmenu .active:focus {
		color: var(--nav-hover-color);
	}

	.navmenu .dropdown ul {
		margin: 0;
		padding: 10px 0;
		background: var(--nav-dropdown-background-color);
		display: block;
		position: absolute;
		visibility: hidden;
		left: 14px;
		top: 130%;
		opacity: 0;
		transition: 0.3s;
		border-radius: 4px;
		z-index: 99;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	}

	.navmenu .dropdown ul li {
		min-width: 200px;
	}

	.navmenu .dropdown ul a {
		padding: 10px 20px;
		font-size: 15px;
		text-transform: none;
		color: var(--nav-dropdown-color);
	}

	.navmenu .dropdown ul a i {
		font-size: 12px;
	}

	.navmenu .dropdown ul a:hover,
	.navmenu .dropdown ul .active:hover,
	.navmenu .dropdown ul li:hover>a {
		color: var(--nav-dropdown-hover-color);
	}

	.navmenu .dropdown:hover>ul {
		opacity: 1;
		top: 100%;
		visibility: visible;
	}

	.navmenu .dropdown .dropdown ul {
		top: 0;
		left: -90%;
		visibility: hidden;
	}

	.navmenu .dropdown .dropdown:hover>ul {
		opacity: 1;
		top: 0;
		left: -100%;
		visibility: visible;
	}
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
	.mobile-nav-toggle {
		color: var(--nav-color);
		font-size: 28px;
		line-height: 0;
		margin-right: 10px;
		cursor: pointer;
		transition: color 0.3s;
	}

	.navmenu {
		padding: 0;
		z-index: 9997;
	}

	.navmenu ul {
		display: none;
		list-style: none;
		position: absolute;
		inset: 60px 20px 20px 20px;
		padding: 10px 0;
		margin: 0;
		border-radius: 6px;
		background-color: var(--nav-mobile-background-color);
		overflow-y: auto;
		transition: 0.3s;
		z-index: 9998;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	}

	.navmenu a,
	.navmenu a:focus {
		color: var(--nav-dropdown-color);
		padding: 10px 20px;
		font-family: var(--nav-font);
		font-size: 17px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: 0.3s;
	}

	.navmenu a i,
	.navmenu a:focus i {
		font-size: 12px;
		line-height: 0;
		margin-left: 5px;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: 0.3s;
		background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
	}

	.navmenu a i:hover,
	.navmenu a:focus i:hover {
		background-color: var(--accent-color);
		color: var(--contrast-color);
	}

	.navmenu a:hover,
	.navmenu .active,
	.navmenu .active:focus {
		color: var(--nav-dropdown-hover-color);
	}

	.navmenu .active i,
	.navmenu .active:focus i {
		background-color: var(--accent-color);
		color: var(--contrast-color);
		transform: rotate(180deg);
	}

	.navmenu .dropdown ul {
		position: static;
		display: none;
		z-index: 99;
		padding: 10px 0;
		margin: 10px 20px;
		background-color: var(--nav-dropdown-background-color);
		border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
		box-shadow: none;
		transition: all 0.5s ease-in-out;
	}

	.navmenu .dropdown ul ul {
		background-color: rgba(33, 37, 41, 0.1);
	}

	.navmenu .dropdown>.dropdown-active {
		display: block;
		background-color: rgba(33, 37, 41, 0.03);
	}

	.mobile-nav-active {
		overflow: hidden;
	}

	.mobile-nav-active .mobile-nav-toggle {
		color: #fff;
		position: absolute;
		font-size: 32px;
		top: 15px;
		right: 15px;
		margin-right: 0;
		z-index: 9999;
	}

	.mobile-nav-active .navmenu {
		position: fixed;
		overflow: hidden;
		inset: 0;
		background: rgba(33, 37, 41, 0.8);
		transition: 0.3s;
	}

	.mobile-nav-active .navmenu>ul {
		display: block;
	}
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
	color: var(--default-color);
	background-color: var(--background-color);
	font-size: 14px;
	position: relative;
}

.footer .footer-top {
	padding-top: 50px;
}

.footer .footer-about .logo {
	line-height: 1;
	margin-bottom: 25px;
}

.footer .footer-about .logo img {
	max-height: 40px;
	margin-right: 6px;
}

.footer .footer-about .logo span {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 1px;
}

.footer .footer-about p {
	font-size: 14px;
	font-family: var(--heading-font);
}

.footer .social-links a {
	display: inline-block;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
	font-size: 16px;
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	margin-right: 10px;
	transition: 0.3s;
	padding: 8px 12px;
}

.footer .social-links a:hover {
	color: var(--accent-color);
	border-color: var(--accent-color);
}

.footer h4 {
	font-size: 16px;
	font-weight: bold;
	position: relative;
	padding-bottom: 12px;
}

.footer .footer-links {
	margin-bottom: 30px;
}

.footer .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer .footer-links ul i {
	padding-right: 2px;
	font-size: 12px;
	line-height: 0;
}

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

.footer .footer-links ul li:first-child {
	padding-top: 0;
}

.footer .footer-links ul a {
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	display: inline-block;
	line-height: 1;
}

.footer .footer-links ul a:hover {
	color: var(--accent-color);
}

.footer .footer-contact p {
	margin-bottom: 5px;
}

.footer .copyright {
	padding: 25px 0;
	border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
	margin-bottom: 0;
}

.footer .credits {
	margin-top: 8px;
	font-size: 13px;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: -15px;
	z-index: 99999;
	background-color: var(--accent-color);
	width: 44px;
	height: 44px;
	border-radius: 50px;
	transition: all 0.4s;
}

.scroll-top i {
	font-size: 24px;
	color: var(--contrast-color);
	line-height: 0;
}

.scroll-top:hover {
	background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
	color: var(--contrast-color);
}

.scroll-top.active {
	visibility: visible;
	opacity: 1;
	bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	[data-aos-delay] {
		transition-delay: 0 !important;
	}
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
	color: var(--default-color);
	background-color: var(--background-color);
	padding: 120px 0 40px 0;
	text-align: center;
	position: relative;
}

.page-title h1 {
	font-size: 42px;
	font-weight: 700;
	margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	justify-content: center;
	padding: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
	padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
	content: "/";
	display: inline-block;
	padding-right: 10px;
	color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
	color: var(--default-color);
	background-color: var(--background-color);
	padding: 60px 0;
	scroll-margin-top: 90px;
	/*overflow: clip;*/
}

@media (max-width: 1199px) {

	section,
	.section {
		scroll-margin-top: 66px;
	}
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
	text-align: center;
	padding-bottom: 40px;
	position: relative;
}

.section-title h2 {
	font-size: 38px;
	font-weight: 800;
	margin-bottom: 10px;
	padding-bottom: 10px;
	position: relative;
	text-transform: capitalize;
}

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

.section-title p {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
	position: relative;
	padding-top: 100px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 50%, color-mix(in srgb, var(--accent-color), transparent 98%) 25%, transparent 50%);
	padding-bottom: 30px;
}

.hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent-color), transparent 92%), transparent 40%);
	pointer-events: none;
}

.hero .hero-content {
	position: relative;
	z-index: 1;
}

.hero .hero-content h1 {
	font-size: 48px;
	font-weight: 700;
	line-height: 50px;
	margin-bottom: 1.5rem;
}

.hero .hero-content h1 .accent-text {
	color: var(--accent-color);
}

@media (max-width: 992px) {
	.hero .hero-content {
		text-align: center;
		margin-bottom: 3rem;
	}

	.hero .hero-content h1 {
		font-size: 2.5rem;
	}

	.hero .hero-content .hero-buttons {
		justify-content: center;
	}
}

@media (max-width: 575px) {
	.hero .hero-content h1 {
		font-size: 2rem;
		line-height: 36px;
	}

	.hero .company-badge {
		margin-bottom: 10px !important;
	}
}

.hero .company-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
	border-radius: 50px;
	color: var(--accent-color);
	font-weight: 500;
}

.hero .company-badge i {
	font-size: 1.25rem;
}

.hero .btn-primary {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--contrast-color);
	padding: 0.75rem 2.5rem;
	border-radius: 50px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.hero .btn-primary:hover {
	background-color: color-mix(in srgb, var(--accent-color), black 20%);
	border-color: color-mix(in srgb, var(--accent-color), black 20%);
}

.hero .btn-link {
	color: var(--heading-color);
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
}

.hero .btn-link:hover {
	color: var(--accent-color);
}

.hero .btn-link i {
	font-size: 1.5rem;
	vertical-align: middle;
}

.hero .hero-image {
	position: relative;
	text-align: center;
	z-index: 1;
}

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

.hero .customers-badge {
	position: absolute;
	bottom: 10px;
	right: 30px;
	background-color: var(--surface-color);
	padding: 1rem;
	border-radius: 10px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	max-width: 300px;
	animation: float-badge 3s ease-in-out infinite;
	will-change: transform;
}

.hero .customers-badge .customer-avatars {
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}

.hero .customers-badge .avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: 2px solid var(--surface-color);
	margin-left: -8px;
}

.hero .customers-badge .avatar:first-child {
	margin-left: 0;
}

.hero .customers-badge .avatar.more {
	background-color: var(--accent-color);
	color: var(--contrast-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 600;
}

.hero .customers-badge p {
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--default-color), transparent 40%);
}

@media (max-width: 992px) {
	.hero .customers-badge {
		position: static;
		margin: 1rem auto;
		max-width: 250px;
	}
}

.hero .stats-row {
	position: relative;
	z-index: 1;
	margin-top: 5rem;
	background-color: var(--surface-color);
	border-radius: 20px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	padding-bottom: 1rem;
	border: 1px solid rgb(209, 228, 255);
}

.hero .stat-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 1rem;
}

.hero .stat-item .stat-icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
	border-radius: 50px;
	transition: 0.3s;
}

.hero .stat-item .stat-icon i {
	font-size: 1.5rem;
	color: var(--accent-color);
}

.hero .stat-item:hover .stat-icon {
	background-color: var(--accent-color);
}

.hero .stat-item:hover .stat-icon i {
	color: var(--contrast-color);
}

.hero .stat-item .stat-content {
	flex-grow: 1;
}

.hero .stat-item .stat-content h4 {
	font-size: 1.25rem;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.hero .stat-item .stat-content p {
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--default-color), transparent 40%);
	margin: 0;
}

@media (max-width: 575px) {
	.hero .stat-item {
		padding: 1.5rem;
	}
}

@keyframes float-badge {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-meta {
	color: var(--accent-color);
	font-weight: 600;
	margin-bottom: 1rem;
	display: inline-block;
}

.about .about-title {
	font-size: 1.75rem;
	margin-bottom: 1rem;
	line-height: 1.2;
	font-weight: 700;
}

@media (max-width: 992px) {
	.about .about-title {
		font-size: 2rem;
	}
}

.about .about-description {
	margin-bottom: 2rem;
	color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .feature-list-wrapper {
	margin-bottom: 1rem;
}

.about .feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.about .feature-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	font-size: 1rem;
}

.about .feature-list li i {
	color: var(--accent-color);
	font-size: 1.25rem;
}

.about .profile .profile-image {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
}

.about .profile .profile-name {
	font-size: 1.125rem;
	margin: 0;
}

.about .profile .profile-position {
	color: var(--accent-color);
	margin: 0;
	font-size: 0.875rem;
}

.about .contact-info {
	padding: 1rem 1.5rem;
	background-color: var(--surface-color);
	border-radius: 0.5rem;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	border: 1px solid rgb(209, 228, 255);
}

.about .contact-info i {
	color: var(--accent-color);
	font-size: 1.5rem;
}

.about .contact-info .contact-label {
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	font-size: 0.875rem;
	margin: 0;
}

.about .contact-info .contact-number {
	font-weight: 600;
	margin: 0;
}

.about .image-wrapper {
	position: relative;
}

@media (max-width: 992px) {
	.about .image-wrapper {
		padding-left: 0;
		margin-top: 3rem;
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}
}

@media (max-width: 992px) {
	.about .image-wrapper .images {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}
}

@media (max-width: 992px) {
	.about .image-wrapper .main-image {
		margin-left: 0;
	}
}

.about .image-wrapper .small-image {
	position: absolute;
	top: 20%;
	left: -10%;
	width: 45%;
	border: 8px solid var(--surface-color);
}

@media (max-width: 992px) {
	.about .image-wrapper .small-image {
		position: static;
		width: 100%;
		margin: 0 auto;
		border: 0;
	}
}

.about .image-wrapper .experience-badge {
	position: absolute;
	bottom: 5%;
	right: 5%;
	background-color: var(--accent-color);
	color: var(--contrast-color);
	padding: 1.5rem;
	border-radius: 0.5rem;
	text-align: center;
	min-width: 200px;
	animation: experience-float 3s ease-in-out infinite;
}

@media (max-width: 992px) {
	.about .image-wrapper .experience-badge {
		position: static;
		width: fit-content;
		margin: 0 auto;
	}
}

.about .image-wrapper .experience-badge h3 {
	color: var(--contrast-color);
	font-size: 2.5rem;
	margin: 0;
	line-height: 0.5;
}

.about .image-wrapper .experience-badge h3 span {
	font-size: 1rem;
	display: inline-block;
	margin-left: 0.25rem;
}

.about .image-wrapper .experience-badge p {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
}

@keyframes experience-float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features {}

.features .tab-content .tab-pane img {
	border: 12px solid #444;
	border-radius: 30px;
	min-height: 400px;
	object-fit: contain;
}

.features .nav-tabs {
	border: 0;
	background-color: color-mix(in srgb, var(--default-color), transparent 96%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	padding: 6px;
	width: auto;
}

.features .nav-item {
	margin: 0;
	padding: 0 5px 0 0;
}

.features .nav-item:last-child {
	padding-right: 0;
}

.features .nav-link {
	background-color: none;
	color: var(--heading-color);
	padding: 10px 30px;
	transition: 0.3s;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	height: 100%;
	border: 0;
	margin: 0;
}

@media (max-width: 468px) {
	.features .nav-link {
		padding: 8px 20px;
	}
}

.features .nav-link i {
	padding-right: 15px;
	font-size: 48px;
}

.features .nav-link h4 {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}

.features .nav-link:hover {
	border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.features .nav-link:hover h4 {
	color: var(--accent-color);
}

.features .nav-link.active {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

.features .nav-link.active h4 {
	color: var(--contrast-color);
}

.features .tab-content {
	margin-top: 30px;
}

.features .tab-pane h3 {
	color: var(--heading-color);
	font-weight: 700;
	font-size: 32px;
	position: relative;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.features .tab-pane h3:after {
	content: "";
	position: absolute;
	display: block;
	width: 60px;
	height: 3px;
	background: var(--accent-color);
	left: 0;
	bottom: 0;
}

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

.features .tab-pane ul li {
	padding-top: 10px;
	display: flex;
}

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

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

/*--------------------------------------------------------------
# Features Cards Section
--------------------------------------------------------------*/
.features-cards {
	--default-color: #555;
	--heading-color: #333;
	padding-top: 0;
}

.features-cards .feature-box {
	height: 100%;
	padding: 40px 30px;
	border-radius: 10px;
}

.features-cards .feature-box i {
	font-size: 44px;
	display: inline-block;
	line-height: 0;
	color: var(--accent-color);
	margin-bottom: 20px;
}

.features-cards .feature-box h4 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px 0;
}

.features-cards .feature-box p {
	font-size: 15px;
	margin-bottom: 0;
}

.features-cards .feature-box.orange {
	background-color: #fff3e2;
}

.features-cards .feature-box.orange i {
	color: #edb86e;
}

.features-cards .feature-box.blue {
	background-color: #deedfd;
}

.features-cards .feature-box.blue i {
	color: #20a5f8;
}

.features-cards .feature-box.green {
	background-color: #d5f1e4;
}

.features-cards .feature-box.green i {
	color: #48c88a;
}

.features-cards .feature-box.red {
	background-color: #fdeded;
}

.features-cards .feature-box.red i {
	color: #f28484;
}

/*--------------------------------------------------------------
# Features 2 Section
--------------------------------------------------------------*/

.features-2 {
	padding-top: 30px;
}

.features-2 .feature-item .feature-icon {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgb(13, 131, 253);
	border: 3px solid #fff;
	box-shadow: 0 0 5px 5px rgba(13, 131, 253, 0.1);
}

.features-2 .feature-item .feature-icon i {
	font-size: 24px;
	color: #fff;
}

.features-2 .feature-item .feature-content h3 {
	font-size: 24px;
	font-weight: 800;
	margin-bottom: 10px;
}

.features-2 .feature-item .feature-content p {
	color: color-mix(in srgb, var(--default-color), transparent 25%);
	font-size: 15px;
	margin-bottom: 0;
}

.features-2 .phone-mockup {
	position: relative;
	padding: 30px 0;
}

.features-2 .phone-mockup img {
	max-width: 300px;
	height: auto;
	/* filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));*/
}

@media (max-width: 991.98px) {
	.features-2 .feature-item {
		text-align: center !important;
		margin-bottom: 2rem;
	}

	.features-2 .feature-item .d-flex {
		flex-direction: column;
		text-align: center;
		justify-content: center !important;
	}

	.features-2 .phone-mockup {
		margin: 3rem 0;
	}
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
	padding-top: 0;
}

.call-to-action .container {
	background: var(--accent-color);
	color: var(--contrast-color);
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	padding: 1rem 2rem;
}

.call-to-action .content h2,
.call-to-action .content p {
	color: var(--contrast-color);
	position: relative;
	z-index: 2;
}

.call-to-action .btn-cta {
	background-color: color-mix(in srgb, var(--contrast-color) 15%, transparent);
	color: var(--contrast-color);
	padding: 12px 40px;
	border-radius: 50px;
	transition: all 0.3s ease;
	border: 2px solid var(--contrast-color);
	position: relative;
	z-index: 2;
}

.call-to-action .btn-cta:hover {
	background-color: var(--contrast-color);
	color: var(--accent-color);
}

.call-to-action .shape {
	position: absolute;
	pointer-events: none;
	z-index: 1;
}

.call-to-action .shape svg {
	width: 100%;
	height: 100%;
}

.call-to-action .shape svg path {
	fill: color-mix(in srgb, var(--contrast-color) 50%, transparent);
}

.call-to-action .shape-1 {
	width: 300px;
	height: 300px;
	top: -100px;
	right: -50px;
	opacity: 0.1;
	transform: rotate(45deg);
	animation: shapes-float 3s ease-in-out infinite;
}

.call-to-action .shape-2 {
	width: 200px;
	height: 200px;
	bottom: -50px;
	left: -50px;
	opacity: 0.15;
	transform: rotate(-15deg);
	animation: shapes-float 4s ease-in-out infinite;
}

.call-to-action .shape-3 {
	width: 150px;
	height: 150px;
	top: 20%;
	right: 15%;
	opacity: 0.08;
	transform: rotate(15deg);
}

.call-to-action .dots {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	color: var(--contrast-color);
}

.call-to-action .dots svg {
	width: 100%;
	height: 100%;
}

.call-to-action .dots-1 {
	width: 200px;
	height: 200px;
	top: -30px;
	left: 10%;
	opacity: 0.1;
	transform: rotate(15deg);
	animation: shapes-float 4s ease-in-out infinite;
}

.call-to-action .dots-2 {
	width: 150px;
	height: 150px;
	bottom: 20px;
	right: 15%;
	opacity: 0.15;
	transform: rotate(-10deg);
}

@keyframes shapes-float {

	0%,
	100% {
		transform: scale(0.8) rotate(45deg) translateY(0);
	}

	50% {
		transform: scale(0.8) rotate(45deg) translateY(-20px);
	}
}

@media (max-width: 992px) {
	.call-to-action .container {
		padding: 3rem 1.5rem;
	}

	.call-to-action .shape-1 {
		width: 200px;
		height: 200px;
	}

	.call-to-action .shape-2 {
		width: 150px;
		height: 150px;
	}

	.call-to-action .shape-3 {
		width: 100px;
		height: 100px;
	}

	.call-to-action .dots-1 {
		width: 150px;
		height: 150px;
	}

	.call-to-action .dots-2 {
		width: 120px;
		height: 120px;
	}

	.call-to-action .dots-3 {
		width: 80px;
		height: 80px;
	}
}

@media (max-width: 575px) {
	.call-to-action .container {
		border-radius: 0;
	}
}


/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/

.pricing {
	padding: 40px 0;
}

.pricing .section-title h2 {
	text-align: center;
	justify-content: center;
	font-size: 38px;
	font-weight: 800;
}

.pricing .pricing-card {
	height: 100%;
	padding: 2rem;
	background: var(--surface-color);
	border-radius: 1rem;
	transition: all 0.3s ease;
	position: relative;
}

.pricing .pricing-card:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pricing .pricing-card.popular {
	background: var(--accent-color);
	color: var(--contrast-color);
}

.pricing .pricing-card.popular h3,
.pricing .pricing-card.popular h4 {
	color: var(--contrast-color);
}

.pricing .pricing-card.popular .price .currency,
.pricing .pricing-card.popular .price .amount,
.pricing .pricing-card.popular .price .period {
	color: var(--contrast-color);
}

.pricing .pricing-card.popular .features-list li {
	color: var(--contrast-color);
}

.pricing .pricing-card.popular .features-list li i {
	color: var(--contrast-color);
}

.pricing .pricing-card.popular .btn-light {
	background: var(--contrast-color);
	color: var(--accent-color);
}

.pricing .pricing-card.popular .btn-light:hover {
	background: color-mix(in srgb, var(--contrast-color), transparent 10%);
}

.pricing .pricing-card .popular-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--contrast-color);
	color: var(--accent-color);
	padding: 0.5rem 1rem;
	border-radius: 2rem;
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.08);
}

.pricing .pricing-card h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.pricing .pricing-card .price {
	margin-bottom: 1.5rem;
}

.pricing .pricing-card .price .currency {
	font-size: 1.5rem;
	font-weight: 600;
	vertical-align: top;
	line-height: 1;
}

.pricing .pricing-card .price .amount {
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
}

.pricing .pricing-card .price .period {
	font-size: 1rem;
	color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pricing .pricing-card .description {
	margin-bottom: 2rem;
	font-size: 0.975rem;
}

.pricing .pricing-card h4 {
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

.pricing .pricing-card .features-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
}

.pricing .pricing-card .features-list li {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

.pricing .pricing-card .features-list li i {
	color: var(--accent-color);
	margin-right: 0.75rem;
	font-size: 1.25rem;
}

.pricing .pricing-card .btn {
	width: 100%;
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 500;
	border-radius: 50px;
}

.pricing .pricing-card .btn.btn-primary {
	background: var(--accent-color);
	border: none;
	color: var(--contrast-color);
}

.pricing .pricing-card .btn.btn-primary:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-title {
	font-size: 34px;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--heading-color);
}

.faq .faq-description {
	font-size: 1rem;
	color: var(--default-color);
	margin-bottom: 1rem;
}

.faq .faq-arrow {
	color: var(--accent-color);
	text-align: center;

}

.faq .faq-arrow svg {
	width: 120px;
	height: 120px;
}

.faq .faq-container .faq-item {
	background-color: var(--surface-color);
	position: relative;
	padding: 20px 20px;
	margin-bottom: 0;
	border-radius: 10px;
	overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
	margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	margin: 0 30px 0 0;
	transition: 0.3s;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.faq .faq-container .faq-item h3 .num {
	color: var(--accent-color);
	padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
	color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: 0.3s ease-in-out;
	visibility: hidden;
	opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
	margin-bottom: 0;
	overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 16px;
	line-height: 0;
	transition: 0.3s;
	cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
	color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
	color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
	grid-template-rows: 1fr;
	visibility: visible;
	opacity: 1;
	padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
	transform: rotate(90deg);
	color: var(--accent-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
	padding: 40px 0;
}

.contact .info-box {
	background-color: var(--accent-color);
	color: var(--contrast-color);
	padding: 2rem;
	border-radius: 1rem;
	height: 100%;
}

.contact .info-box h3 {
	color: var(--contrast-color);
	font-size: 2rem;
	margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
	.contact .info-box h3 {
		font-size: 1.75rem;
	}
}

.contact .info-box p {
	opacity: 0.8;
	margin-bottom: 2rem;
}

.contact .info-box a {
	color: var(--contrast-color);
}

@media (max-width: 992px) {
	.contact .info-box {
		padding: 1.5rem;
	}
}

.contact .info-item {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.contact .info-item:last-child {
	margin-bottom: 0;
}

.contact .info-item .icon-box {
	width: 3.5rem;
	height: 3.5rem;
	background-color: color-mix(in srgb, var(--contrast-color), transparent 85%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: 0.3s;
}

.contact .info-item .icon-box i {
	font-size: 1.5rem;
	color: var(--contrast-color);
}

.contact .info-item:hover .icon-box {
	background-color: color-mix(in srgb, var(--contrast-color), transparent 70%);
}

.contact .info-item .content h4 {
	color: var(--contrast-color);
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.contact .info-item .content p {
	margin-bottom: 0.25rem;
	font-size: 0.95rem;
}

.contact .info-item .content p:last-child {
	margin-bottom: 0;
}

.contact .contact-form {
	background-color: var(--surface-color);
	padding: 2rem;
	border-radius: 1rem;
	height: 100%;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
}

@media (max-width: 992px) {
	.contact .contact-form {
		padding: 1.5rem;
	}
}

.contact .contact-form h3 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

@media (max-width: 768px) {
	.contact .contact-form h3 {
		font-size: 1.75rem;
	}
}

.contact .contact-form p {
	color: color-mix(in srgb, var(--default-color), transparent 25%);
	margin-bottom: 2rem;
}

.contact .contact-form .form-control,
.contact .contact-form .form-select {
	padding: 0.375rem 1.25rem;
	border-color: color-mix(in srgb, var(--default-color), transparent 90%);
	border-radius: 0.5rem;
	background-color: color-mix(in srgb, var(--surface-color) 90%, white 5%);
	color: var(--default-color);
}

.contact .contact-form .form-control:focus,
.contact .contact-form .form-select:focus {
	box-shadow: none;
	border-color: var(--accent-color);
}

.contact .contact-form .form-control::placeholder,
.contact .contact-form .form-select::placeholder {
	color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.contact .contact-form .btn {
	background-color: var(--accent-color);
	color: var(--contrast-color);
	padding: 6px 15px;
	border-radius: 2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: 0.3s;
}

.contact .contact-form .btn i {
	font-size: 1.25rem;
}

.contact .contact-form .btn:hover {
	background-color: color-mix(in srgb, var(--accent-color), var(--contrast-color) 20%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
	/* Add your styles here */
}


/*--------------------------------------------------------------
# Dashboard Page Css
--------------------------------------------------------------*/


.dashboard-section {
	text-align: left;
}

.dashboard-banner {
	background: #0d83fd;
	border-radius: 20px;
	padding: 20px 30px;
	color: #fff;
	position: relative;
	min-height: 180px;
}

.dashboard-banner h4 {
	color: #fff;
	font-weight: bold;
	font-size: 24px;
}

.dashboard-banner img {
	position: absolute;
	max-height: 241px;
	top: -60px;
	right: 30px;
}

.dashboard-section h2 {
	font-weight: 600;
}

.linkBtn {
	background: #FFAD00;
	color: #1D1401;
	padding: 10px 20px;
	text-transform: capitalize;
	border-radius: 5px;
}

.linkBtn:hover {
	background: #000000;
	color: #fff;
}


/*--------------------------------------------------------------
# Dashboard Left
--------------------------------------------------------------*/
.dashboard-body h2 {
	margin-bottom: 20px;
	font-weight: 800;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 26px;
	margin-top: 0;
}

.dashboard-body h2 .breadcrumb {
	font-size: 14px;
	font-weight: normal;
	color: #666;
	margin: 0;
}

.dashboard-body h2 .breadcrumb span {
	margin: 0 5px;
}


.dashboard-body .service-box {transition: 0.5s;}

.dashboard-body .service-box+.service-box {
	margin-top: 30px;
}

.dashboard-body .service-box h4 {
	font-size: 20px;
	font-weight: 700;
	border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.dashboard-body .services-list {
	background-color: var(--surface-color);
	padding: 0px;
	box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
	padding: 10px;
}

.dashboard-body .services-list a {
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	background-color: color-mix(in srgb, var(--default-color), transparent 96%);
	display: flex;
	align-items: center;
	padding: 8px 15px;
	margin-top: 5px;
	transition: 0.3s;
	border-radius: 5px;
}

.dashboard-body .services-list a:first-child {
	margin-top: 0;
}

.dashboard-body .services-list a i {
	font-size: 16px;
	margin-right: 8px;
	color: var(--accent-color);
}

.dashboard-body .services-list a.active {
	color: var(--contrast-color);
	background-color: #004388;
}

.dashboard-body .services-list a.active i {
	color: var(--contrast-color);
}

.dashboard-body .services-list a:hover {
	background-color: #004388;
	color: var(--contrast-color);
}

.dashboard-body .services-list a:hover i {
	color: var(--contrast-color);
}


.dashboard-body .download-catalog a {
	color: var(--default-color);
	display: flex;
	align-items: center;
	padding: 10px 0;
	transition: 0.3s;
	border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.dashboard-body .download-catalog a:first-child {
	border-top: 0;
	padding-top: 0;
}

.dashboard-body .download-catalog a:last-child {
	padding-bottom: 0;
}

.dashboard-body .download-catalog a i {
	font-size: 24px;
	margin-right: 8px;
	color: var(--accent-color);
}

.dashboard-body .download-catalog a:hover {
	color: var(--accent-color);
}

.dashboard-body .help-box {
	background-color: var(--accent-color);
	color: var(--contrast-color);
	margin-top: 30px;
	padding: 30px 15px;
}

.dashboard-body .help-box .help-icon {
	font-size: 48px;
}

.dashboard-body .help-box h4,
.dashboard-body .help-box a {
	color: var(--contrast-color);
}

.dashboard-body .services-img {
	margin-bottom: 20px;
}


/*--------------------------------------------------------------
# Dashboard Right
--------------------------------------------------------------*/
.dashboard-body {
	padding: 40px 0;
}

.dashboard-body h3 {
	font-size: 20px;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

.dashboard-body h3 span {
	display: flex;
	align-items: center;
}

.dashboard-body h3 span,
.dashboard-body h3 span a {
	font-size: 16px;
	font-weight: normal;
	color: #000;
}

.dashboard-body h3 span i {
	color: #0d83fd;
}

.dashboard-body p {
	font-size: 14px;
	line-height: 18px;
}

.dashboard-body h3 span .form-select {
	width: 150px;
	margin: 0 10px;
	height: 30px;
	font-size: 13px;
	line-height: 14px;
}

.dashboard-body h3 span a {
	color: #555;
	font-weight: normal;
	font-size: 14px;
}

.dashboard-body h3 span a:hover {
	color: #0d83fd;
}

.boardBoxHolder {
	margin-bottom: 30px;
}

.boardBoxEach {
border: 5px solid #fafcff;
  border-radius: 20px;
  padding: 15px;
  display: block;
  transition: all 0.4s ease-in-out;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.boardBoxEach img {
	width: 74px;
	height: 74px;
	object-fit: cover;
	border-radius: 10px;
}

.boardBoxEach:hover {
	box-shadow: 0px 10px 60px rgba(13, 131, 253, 0.2);
}

.boardBottom {
	margin-top: 10px;
}

.boardBottom h4 {
	font-size: 16px;
	font-weight: 800;
}

.boardBottom p {
	color: #000;
	margin: 0;
	font-size: 14px;
	line-height: 18px;
}

.boardDivRight {
	display: flex;
	flex-direction: column;
	align-items: end;
}

.boardDivRight span {
	display: block;
}

span.smdiv-1 {
	color: #0d83fd;
}

span.smdiv-2 {
	background: #E3E3E3;
	color: #000;
	width: 50px;
	border-radius: 5px;
	padding: 2px 5px;
	text-align: center;
	margin-top: 10px;
}

.service-box-items {
	margin-bottom: 10px;
	background-color: #FAFAFA;
	border-radius: 16px;
	padding: 10px 15px;
	transition: all 0.4s ease-in-out;
	display: block;
	color: var(--black);
	box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.1);
  border: 5px solid #fff;
  margin: 10px;
}

.service-box-items .icon {
	color: var(--theme);
	font-size: 26px;
	transition: all 0.3s ease-in-out;
	background: #FAFAFA;
	width: 60px;
	height: 60px;
	border: 1px solid #E3E3E3;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.service-box-items .icon i {
	color: #12141D;
}

.service-box-items .content {
	margin-top: 10px;
}

.service-box-items .content h3 {
	margin-bottom: 10px;
	color: var(--black);
	font-size: 18px;
}

.service-box-items:hover,
.service-box-items.active {
	background-color: rgb(13, 131, 253);
	color: #fff;
	box-shadow: 0px 10px 60px rgba(13, 131, 253, 0.2);
}

.service-box-items:hover i,
.service-box-items.active i {
	color: #0d83fd;
}

.documentSection {
	padding: 20px 0;
	text-align: center;
}

.documentSection h2 {
	font-size: 20px;
	display: block;
}

.documentSection p {}

.btn-newDoc {
	color: var(--contrast-color);
	background: var(--accent-color);
	font-size: 14px;
	padding: 5px 20px;
	margin: 0 0 0 0px;
	border-radius: 50px;
	transition: 0.3s;
}

.btn-newDoc:hover {
	background: #000;
	color: #fff;
}


.pricePlan {
padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 5px solid #f8fbff;
  border-radius: 10px;
  box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.1);
  background: #f7f7f7;
}

.pricePlan p {
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 0;
}

.pricePlan p a {
	margin-right: 15px;
}

.planRight {}

.planRight a {
	color: var(--contrast-color);
	background: var(--accent-color);
	font-size: 14px;
	padding: 5px 20px;
	margin: 0 0 0 0px;
	border-radius: 50px;
	transition: 0.3s;
	display: inline-block;
}

.planRight a:hover {
	background: #000;
	color: #fff;
}




/*--------------------------------------------------------------
# Sign Up Page Css
--------------------------------------------------------------*/

.form-section {
	display: flex;
	align-items: center;
	background-size: cover;
	height: 100vh;

}

.form-bg {
	background: url(../img/form-bg.jpg) no-repeat center bottom;
	background-size: cover;
}

.form-section .img {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.form-section .wrap {
	width: 100%;
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 30px;
	-webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.44);
	-moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.44);
	box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.44);
}

.form-section .text-wrap,
.form-section .login-wrap {
	width: 100%;
}

.form-section .text-wrap {
	width: 100%;
	position: relative;
	z-index: 0;
}

.form-section .text-wrap:after {
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: '';
	opacity: .5;
	z-index: -1;
}

.form-section .text-wrap .text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	text-align: center;
	padding: 0 10%
}

.form-section .text-wrap img {
	max-height: 50px;
	margin-bottom: 30px;
}

@media (min-width: 992px) {
	.form-section .text-wrap {
		width: 50%;
	}
}

@media (min-width: 992px) {
	.form-section .login-wrap {
		width: 60%;
	}
}

.form-section .text-wrap .text {
	color: rgba(255, 255, 255, 0.8);
}

.form-section .text-wrap .text h2 {
	font-weight: 700;
	color: #fff;
	font-size: 30px;
	line-height: 32px;
}

.form-section .text-wrap p {
	line-height: 20px;
}

.form-section .login-wrap {
	position: relative;
	background: #fff;
}

.login-wrap h3 {
	font-weight: 700;
	font-size: 28px;
	text-transform: capitalize;
}

.login-wrap p {
	font-size: 14px;
	text-align: center;
}

.social-login-buttons {
	margin-top: 0;
	text-align: center;
}

.btn-link-1 {
	display: inline-block;
	margin: 5px;
	padding: 8px 20px 8px 20px !important;
	background: #19b9e7;
	font-size: 16px;
	font-weight: 300;
	color: #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.btn-link-1:hover,
.btn-link-1:focus,
.btn-link-1:active {
	outline: 0;
	opacity: 0.6;
	color: #fff;
}

.btn-link-1.btn-link-1-facebook {
	background: #4862a3;
}

.btn-link-1.btn-link-1-twitter {
	background: #55acee;
}

.btn-link-1.btn-link-1-google-plus {
	background: #dd4b39;
}

.btn-link-1 i {
	padding-right: 5px;
	vertical-align: middle;
	font-size: 20px;
	line-height: 20px;
}


.form-section .login-wrap h3 span {
	font-size: 16px;
	display: block;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.4);
}

.form-section .form-group label {
	font-weight: 500;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	margin-bottom: 5px;
	line-height: 16px;
}

.form-section .form-control {
	height: 34px;
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid #d1e4ff;
	color: #000;
	font-size: 14px;
	border-radius: 4px;
	-webkit-box-shadow: none;
	box-shadow: none;
	padding-left: 10px;
	padding-right: 10px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	.form-section .form-control {
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}
}

.form-section .form-control::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: rgba(0, 0, 0, 0.3) !important;
}

.form-section .form-control::-moz-placeholder {
	/* Firefox 19+ */
	color: rgba(0, 0, 0, 0.3) !important;
}

.form-section .form-control:-ms-input-placeholder {
	/* IE 10+ */
	color: rgba(0, 0, 0, 0.3) !important;
}

.form-control:-moz-placeholder {
	/* Firefox 18- */
	color: rgba(0, 0, 0, 0.3) !important;
}

.form-section .form-control:focus,
.form-section .form-control:active {
	outline: none !important;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-color: #0d6efd;
	background: rgba(0, 0, 0, 0.05);
}

.form-section textarea.form-control {
	height: inherit !important;
}

.form-section .social-wrap {
	text-align: center;
}

.form-section .social-wrap .or {
	position: relative;
	z-index: 0;
}

.form-section .social-wrap .or:after {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #e6e6e6;
	z-index: -1;
}

.form-section .social-wrap .or span {
	display: inline-block;
	background: #fff;
	padding: 0 20px;
}

.form-section .social-media {
	position: relative;
	width: 100%;
	margin-bottom: 5px;
}

.form-section .social-media .social-icon {
	display: block;
	width: 30px;
	height: 30px;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.05);
	font-size: 16px;
	margin-right: 10px;
	border-radius: 50%;
	background: transparent;
}

.form-section .social-media .social-icon span {
	color: #000;
}

.form-section .social-media .social-icon:hover,
.form-section .social-media .social-icon:focus {
	background: #0d6efd;
}

.form-section .social-media .social-icon:hover span,
.form-section .social-media .social-icon:focus span {
	color: #fff;
}

.form-section .checkbox-wrap {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 14px !important;
	font-weight: 400 !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-transform: capitalize !important;
	letter-spacing: 0 !important;
	color: rgba(0, 0, 0, 0.4) !important;
}

/* Hide the browser's default checkbox */
.form-section .checkbox-wrap input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.form-section .checkmark {
	position: absolute;
	top: 0;
	left: 0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.form-section .checkmark:after {
	content: "\f0c8";
	font-family: "FontAwesome";
	position: absolute;
	color: rgba(0, 0, 0, 0.1);
	font-size: 16px;
	margin-top: 0px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	.form-section .checkmark:after {
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}
}

/* Show the checkmark when checked */
.form-section .checkbox-wrap input:checked~.checkmark:after {
	display: block;
	content: "\f14a";
	font-family: "FontAwesome";
	color: rgba(0, 0, 0, 0.2);
}

/* Style the checkmark/indicator */
.form-section .checkbox-primary {
	color: #0d6efd;
}

.form-section .checkbox-primary input:checked~.checkmark:after {
	color: #0d6efd;
}

.form-section .btn {
	cursor: pointer;
	-webkit-box-shadow: none;
	box-shadow: none;
	font-size: 16px;
	padding: 6px 20px;
	text-transform: capitalize;
}

.form-section .btn:hover,
.form-section .btn:active,
.form-section .btn:focus {
	outline: none;
}

.form-section .btn.submit {
	background: #0d83fd;
	border: 1px solid #0d83fd;
	width: 100%;
	color: #fff;
	-webkit-box-shadow: 0px 10px 19px -16px rgba(0, 0, 0, 0.29);
	-moz-box-shadow: 0px 10px 19px -16px rgba(0, 0, 0, 0.29);
	box-shadow: 0px 10px 19px -16px rgba(0, 0, 0, 0.29);
}

.form-section .btn.submit:hover {
	border: 1px solid #0d6efd;
	background: linear-gradient(90deg, #0f4f92 0, #0d83fd 102.04%);
	color: #fff;
}

.form-section .btn.submit2 {
	background: #fff;
	border: 1px solid #0d83fd;
	width: 100%;
	color: #0d6efd;
	-webkit-box-shadow: 0px 10px 19px -16px rgba(0, 0, 0, 0.29);
	-moz-box-shadow: 0px 10px 19px -16px rgba(0, 0, 0, 0.29);
	box-shadow: 0px 10px 19px -16px rgba(0, 0, 0, 0.29);
}

.form-section .btn.submit2:hover {
	border: 1px solid #0d6efd;
	background: #0d83fd;
	color: #fff;
}

.notification {
	border: 1px solid green;
	padding: 5px 20px;
	text-align: center;
	color: green;
	font-size: 12px;
}

.notification2 {
	border: 1px solid red;
	padding: 5px 20px;
	text-align: center;
	color: red;
	font-size: 12px;
}

.termsDiv {
	font-size: 13px;
}

a.forgotPassword {
	display: block;
	text-align: right;
	font-size: 12px;
}

.inp-pass {
	position: relative;
}

.inp-pass-eye {
	position: absolute;
	padding: 2px 0;
	z-index: 2;
	top: 0;
	right: 8px;
	cursor: pointer;
	bottom: 0;
	display: flex;
	align-items: center;
}

.inp-pass-eye:hover i {
	color: #555;
}

.inp-pass-eye i {
	fill: #a1a1a1;
	width: 16px;
	height: 16px;
	display: flex;
}




/*--------------------------------------------------------------
# Tools Generation Page Css
--------------------------------------------------------------*/
.sec-1 {
	background: #f3f9ff;
	padding: 20px;
	border-radius: 20px;
}

.sec-1-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sec-1-header h2 {
	display: block;
	width: 100%;
	margin-bottom: 0;
	font-size: 18px;
}

.sec-1-header h2 span {
	display: block;
	font-size: 14px;
	font-weight: normal;
	margin-top: 5px;
	color: #666;
}

.sec-1-header h2 a {
	margin-left: 10px;
}

.sec-1-header h2 a i {
	font-size: 16px;
}

.sec-1-icon {
	background: #0d83fd;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	margin-right: 10px;
	width: 50px;
	height: 50px;
}

.sec-1-icon i {
	color: #fff;
	font-size: 30px;
}

.btnSubmit {
	background: #0d83fd;
	padding: 5px 30px;
	border-radius: 5px;
	color: #fff;
	font-size: 16px;
	text-transform: capitalize;
	height: 34px;
	border: 0;
	font-weight: bold;
	transition: 0.3s;
	min-width: 110px;
}

.btnSubmit a {
	color: #fff;
}

.btnSubmit:hover {
	background: #000;
}

.dr-main-keyword {
	padding-right: 207px;
	position: relative;
	margin-top: 10px;
}

.dr-field:first-child,
.dr-field-wo-margin {
	margin-top: 0;
}

.dr-field-name {
	position: relative;
	padding-left: 8px;
	margin-bottom: 5px;
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
}

.dr-field-cnt {
	position: absolute;
	top: 0;
	right: 0;
	color: #a1a1a1;
}

.drf-required {
	color: #e00000;
}

.inp,
.inp-el {
	border: 1px solid #d4e7fb;
	font-size: 14px;
	box-sizing: border-box;
	border-radius: 8px;
	padding: 6px 10px;
	width: 100%;
	color: #212121;
}

.dr-field .inp {
	font-size: 14px;
	line-height: 1;
	resize: vertical;
	font-weight: 300;
}

.dr-main-keyword-gen {
	position: absolute;
	top: 24px;
	right: 0;
}

.dr-main-keyword-gen .pa-btn-info {
	width: auto;
	height: 34px;
}

.pa-btn-info {
	line-height: 38px;
	height: 40px;
	padding: 0 12px;
}

.pa-btn-ref,
.pa-btn-info {
	background: #fff;
	border: 1px solid #6a4bff;
	color: #6a4bff;
}

.pa-btn {
	display: inline-block;
	background: #0d83fd;
	background: linear-gradient(90deg, #0f4f92 0, #0d83fd 102.04%);
	color: #fff;
	border: 0;
	border-radius: 5px;
	line-height: 40px;
	padding: 0 26px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	box-sizing: border-box;
}

.pa-btn:hover {
	background: #0f4f92;
}

.an-write {
	width: 60%;
	height: 23px;
	text-align: left;
	display: none;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	white-space: nowrap;
}

.an-write span {
	display: inline-block;
	height: 2px;
	border-radius: 4px;
	background: #fff;
	-moz-animation: line 2s infinite alternate;
	-webkit-animation: line 2s infinite alternate;
	animation: line 2s infinite alternate;
	-moz-animation-timing-function: cubic-bezier(0.86, 0, .07, 1);
	-webkit-animation-timing-function: cubic-bezier(0.86, 0, .07, 1);
	animation-timing-function: cubic-bezier(0.86, 0, .07, 1);
}

.an-write i {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.dr-field {
	margin-top: 10px;
}

.dr-box {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	position: relative;
}

.dr-empty-msg {
	color: #898caa;
	font-size: 14px;
	font-weight: 300;
}

.dr-save-btn {
	flex: 0 0 140px;
	font-weight: 300;
	text-align: right;
	padding-top: 5px;
}

.sec-2 {
	margin-top: 10px;
}

.sec-2-header {}

.sec-2-header h2 {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sec-2-header h2 span.dr-header-info {
	font-size: 14px;
	font-weight: normal;
	margin-top: 5px;
	color: #fff;
	background: #0d83fd;
	padding: 5px 15px;
	border-radius: 50px;
	text-transform: capitalize;
	font-weight: 600;
}


.settingsField {}

.settingsField label {
	margin-bottom: 10px;
	display: inherit;
	font-weight: 600;
	text-transform: capitalize;
}

.settingsField label span {
	color: #a1a1a1;
	float: right;
	font-weight: normal;
}

.tooltip-container {
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin-left: 5px;
	color: #666;
}

.tooltip {
	opacity: 0;
	z-index: 99;
	color: #000 !important;
	width: 290px;
	display: block;
	font-size: 14px;
	padding: 10px 10px;
	border-radius: 3px;
	text-align: left;
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	position: absolute;
	right: -80px;
	bottom: 40px;

}

.tooltip:before,
.tooltip:after {
	content: '';
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #ddd;
	position: absolute;
	bottom: -10px;
	left: auto;
	right: 80px;
	width: 20px;
	margin: 0 auto;
}

.tooltip-container:hover .tooltip,
a:hover .tooltip {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}


.settingsField select,
.settingsField select option {
	height: 34px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	border: 0;
	cursor: pointer;
	color: #666;
	border: 1px solid #d4e7fb;
	font-size: 14px;
}

.settingsField .dropdown button {
	background-color: #fff;
	min-width: 100%;
	width: max-content;
	height: 34px;
	border-radius: 5px;
	color: #000;
	padding: 0 44px 0 10px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	border: 1px solid #d4e7fb;
	font-size: 14px;
}

.settingsField .dropdown button img {
	margin: 0 5px 0 0;
}

.settingsField .dropdown button img,
.settingsField .dropdown-content li img {
	width: 28px;
}

.settingsField .dropdown button,
.settingsField .dropdown-content li {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
}

.settingsField .arrow-down {
	width: 0;
	height: 0;
	display: inline-block;
	vertical-align: middle;
	border: solid #000;
	border-width: 0 1px 1px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	margin: 0 0 0 5px;
	right: 20px;
	position: absolute;
	top: 12px;
}

.settingsField .dropdown button:hover {
	cursor: pointer;
}

/* Style for the dropdown content */
.settingsField .dropdown-content {
	display: none;
	position: absolute;
	margin: 1px 0 0 0;
	padding: 0;
	background-color: #f5f5f5;
	min-width: 100%;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	border-radius: 5px;
	overflow-y: scroll;
	max-height: 315px;
}

/* Style for the dropdown content items */
.settingsField .dropdown-content li {
	color: black;
	padding: 6px 16px;
	text-decoration: none;
	justify-content: start;
}

.settingsField .dropdown-content li img {
	margin: 0 10px 0px 0px;
}

/* Style for the dropdown content items on hover */
.settingsField .dropdown-content li:hover {
	background-color: #f1f1f1;
	cursor: pointer;
	color: blue;
	border-radius: 5px;
}

/* Show the dropdown content when the dropdown button is clicked */
.settingsField .dropdown:focus-within .dropdown-content {
	display: block;
}

/* Animate the dropdown content */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.settingsField .dropdown-content {
	animation: slideIn 0.3s ease-out;
}

/* Scrollbar styles */
::-webkit-scrollbar {
	width: 8px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: #c2c9d2;
}

.form-select option {
	font-family: "DM Sans", serif;
	padding: 10px;
}

.form-select.has-selection {
	color: #111;
	border-color: #111;
	font-weight: 600;
}

.form-select.has-selection:focus {
	box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}

.form-select option:checked,
.form-select option[selected] {
	color: #111;
	background-color: #f5f5f5;
}

.settingsField h5 {
	font-weight: 600;
	margin-bottom: 20px;
	font-size: 16px;
}

.form-group {
	margin-bottom: 15px;
}

.selectpicker {
	width: 100%;
}

.form-select {
	display: flex;
	justify-content: space-between;
	border: 1px solid #111;
	font-size: 14px;
	color: #111;
}

.form-select option span {}


.bigSelectBox {}

.bigSelectBox .dropdown {
	width: 100%;
	font-weight: 300;
	margin-bottom: 15px;

}

@media (min-width: 768px) {
	.bigSelectBox .dropdown {
		width: 100%;
	}
}

.dropdown__switch:checked+.dropdown__options-filter .dropdown__select {
	transform: scaleY(1);
	opacity: 1;
}

.dropdown__options-filter {
	width: 100%;
	cursor: pointer;
	margin-bottom: 5px !important;
}

.dropdown__filter {
	position: relative;
	display: flex;
	padding: .375rem 3.25rem .375rem .75rem;
	color: #666;
	background-color: #fff;
	line-height: 1.5;
	transition: 0.3s;
	list-style: none;
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	height: 34px;
	font-weight: normal;
	border-radius: var(--bs-border-radius);
	line-height: 20px;
	display: block;
	border: 1px solid #d4e7fb;
	font-size: 14px;
	margin: 0;
}

.dropdown__filter:focus {
	outline: none;
}

.dropdown__filter::after {
	position: absolute;
	top: 45%;
	right: 20px;
	content: "";
	width: 10px;
	height: 10px;
	border-right: 1px solid #595959;
	border-bottom: 1px solid #595959;
	transform: rotate(45deg) translateX(-45%);
	transition: 0.3s ease-in-out;
}

.dropdown__filter li span i {
	color: #0d83fd;
}

.dropdown__select {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 5px;
	overflow: hidden;
	transform: scaleY(0);
	transform-origin: top;
	border-radius: 18px;
	opacity: 0;
	transition: 0.2s ease-in-out;
	background: #fff;
	border: 1px solid #ddd;
	z-index: 9;
	padding: 0;
	max-height: 300px;
	overflow-y: scroll;

}

.dropdown__select-option {
	padding: 10px 20px;
	background-color: #fff;
	border-bottom: 1px solid #e9ecef;
	transition: 0.3s;
	display: flex;
	justify-content: space-between;
}

.dropdown__select-option:last-of-type {
	border-bottom: 0;
}

.dropdown__select-option:hover {
	background-color: #e9ecef;
}

.optionDiv {
	display: inline-block;
}

.optionDiv span {
	display: block;
	line-height: 20px;
}

.optionDiv2 {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 13px;
}

.optionDiv2 span {
	display: block;
	line-height: 20px;
	color: #0d83fd !important;
}

.dr-model-option-new {
	background: #5da551;
	color: #fff;
	border-radius: 2px;
	font-style: normal;
	font-size: 13px;
	padding: 2px 5px 2px 5px;
	font-weight: 500;
	margin-left: 10px;
}

.dr-model-option-hint {
	display: block;
}

.dropdown__filter-selected .dr-model-option-hint {
	display: none;
}

.sec-3 {
	margin-top: 20px;
}

.sec-3 a {
	margin-left: 10px;
	color: #b7b7b7;
	font-size: 18px;
}

.sec-3 a:hover {
	color: #0d83fd;
}

.sec-3-header {
	width: 100%;
}

.sec-3-header h2 {
	font-size: 22px;
}

.sec-3-header h2 span.dr-header-info {
	font-size: 14px;
	font-weight: normal;
	margin-top: 5px;
	color: #fff;
	background: #0d83fd;
	padding: 5px 15px;
	border-radius: 50px;
	text-transform: capitalize;
	font-weight: 600;
}


.brandSelectBox {
	padding: 20px;
	background: #f3f9ff;
	border-radius: 20px;
	border: 1px solid #0d83fd;
}

.brandSelectBox p,
.brandSelectBox .form-group {
	margin-bottom: 0;
}

.brandSelectBox select {
	height: 34px;
	border: 1px solid #0d83fd;
	font-size: 14px;
	line-height: 20px;
}

select {
	height: 34px;
}

.settingsField label {
	margin-bottom: 10px;
	display: inherit;
	text-transform: capitalize;
	font-size: 14px;

}

.settingsField label span {
	color: #a1a1a1;
	float: right;
	font-weight: normal;
	font-size: 14px;
}


.sec-4 {
	margin-top: 20px;
}

.sec-4 a {
	margin-left: 10px;
	color: #999;
	font-size: 14px;
}

.sec-4 a:hover {
	color: #0d83fd;
}

.sec-4-header {
	width: 100%;
}

.sec-4-header h2 {
	font-size: 22px;
}

.sec-4-header h2 span.dr-header-info {
	font-size: 14px;
	font-weight: normal;
	margin-top: 5px;
	color: #fff;
	background: #0d83fd;
	padding: 5px 15px;
	border-radius: 50px;
	text-transform: capitalize;
	font-weight: 600;
}

.sec-4 .form-group label {
	display: block;
	margin-bottom: 10px;
}

.sec-4 .form-group label span {
	float: right;
	color: #a1a1a1;
}

.sec-4 .form-group textarea {
	min-height: 80px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	border: 0;
	padding: 15px;
	border: 1px solid #d4e7fb;
	font-size: 14px;
}

.sec-4 .form-group textarea.form-control::placeholder,
.sec-4 .form-group textarea.form-select::placeholder {
	color: color-mix(in srgb, var(--default-color), transparent 50%);
}


.sec-5 {
	margin-top: 20px;
}

.sec-5 a {
	margin-left: 10px;
	color: #b7b7b7;
	font-size: 14px;
}

.sec-5 a:hover {
	color: #0d83fd;
}

.sec-5-header {
	width: 100%;
}

.sec-5-header h2 {
	font-size: 22px;
}

.sec-5-header h2 span.dr-header-info {
	font-size: 14px;
	font-weight: normal;
	margin-top: 5px;
	color: #fff;
	background: #0d83fd;
	padding: 5px 15px;
	border-radius: 50px;
	text-transform: capitalize;
	font-weight: 600;
}

.mediaHubFields {
	background: #f9efc5;
	padding: 30px;
	border-radius: 20px;
	border: 1px solid #e0d6a8;
}

.mediaHubFields label {
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	display: inherit;
	text-transform: capitalize;
	font-size: 14px;
}

.mediaHubFields label span {
	color: #a1a1a1;
}

.mediaHubFields select {
	color: #666;
}

.mediaHubFields label>span {}

.text-dark {
	color: #000;
}

.mediaHubFields .form-check input {
	border: 1px solid #9ebfe1;
}

.mediaHubFields .form-check label {
	font-size: 14px;
	font-weight: normal;
}

.seoPart {}

.seoPart {
	margin-top: 20px;
	font-size: 14px;
}

.seoPart a {
	margin-left: 10px;
	color: #b7b7b7;
	font-size: 18px;
}

.seoPart a:hover {
	color: #0d83fd;
}

.seoPart-header {
	width: 100%;
}

.seoPart-header h2 span.dr-header-info {
	font-size: 16px;
	font-weight: normal;
	margin-top: 5px;
	color: #fff;
	background: #0d83fd;
	padding: 5px 15px;
	border-radius: 50px;
	text-transform: capitalize;
	font-weight: 600;
}

.seoPart-header h2>span {
	display: flex;
	align-items: center;
}

.seoPart .form-group label {
	display: flex;
	margin-bottom: 10px;
	justify-content: space-between;
}

.seoPart .form-group label span {
	float: right;
	color: #a1a1a1;
}

.label2 {
	display: flex;
}

.label2 i {
	font-size: 28px;
}

.keyBtn {
	background: #fff;
	padding: 5px 20px;
	border-radius: 5px;
	color: #0d83fd;
	font-size: 14px;
	text-transform: capitalize;
	height: auto;
	font-weight: normal;
	transition: 0.3s;
	border: 1px solid #0d83fd;
}

.keyBtn:hover {
	background: #0d83fd;
	color: #fff;

}

.seoPart span {
	display: flex;
	gap: 10px;
	align-items: center;
}

.seoPart .form-group textarea {
	min-height: 100px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	border: 0;
	padding: 15px;
	font-size: 14px;
	border: 1px solid #d4e7fb;
}

.seoPart textarea.form-select::placeholder {
	color: color-mix(in srgb, var(--default-color), transparent 50%);
}


.structurePart {}

.structurePart {
	margin-top: 40px;
	font-size: 16px;
}

.structurePart h4 {
	font-size: 18px;
}

.structurePart a {
	margin-left: 10px;
	color: #b7b7b7;
	font-size: 14px;
}

.structurePart a:hover {
	color: #0d83fd;
}

.structurePart-header {
	width: 100%;
}

.structurePart-header h2 {
	font-size: 22px;
}

.structurePart-header h2 span.dr-header-info {
	font-size: 16px;
	font-weight: normal;
	margin-top: 5px;
	color: #fff;
	background: #0d83fd;
	padding: 5px 15px;
	border-radius: 50px;
	text-transform: capitalize;
	font-weight: 600;
}

.structurePart-header h2>span {
	display: flex;
	align-items: center;
}

.structurePart .form-group label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 15px;
}

.structurePart .form-group label span {
	float: right;
	color: #a1a1a1;
	font-size: 14px;
}

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

.structurePart ul li a {
	font-size: 14px;
	color: #0d83fd;
	border: 1px solid #0d83fd;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 0 1px;
	cursor: pointer;
}

.structurePart ul li a:hover {
	background: #0d83fd;
	color: #fff!important;
}

.structurePart .form-group textarea {
	min-height: 100px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	border: 0;
	padding: 15px;
	border: 1px solid #d4e7fb;
	font-size: 14px;
}

.structurePart textarea.form-select::placeholder {
	color: color-mix(in srgb, var(--default-color), transparent 50%);
}


.webLinkBox {
	padding: 20px;
	background: #f6e2cd;
	border-radius: 20px;
	border: 1px solid #d8b691;
}

.webLinkBox h4 {
	font-size: 18px;
	font-weight: 600;
}

.webLinkBox p,
.webLinkBox .form-group {
	margin-bottom: 0;
}

.webLinkBox select {
	height: 34px;
	border: 1px solid #d8b691;
}

.webLinkBox .form-group label {
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
}

.webLinkBox .form-group label span {
	color: #0d83fd;
}

.brandSelectBox label {
	margin-bottom: 10px;
	font-size: 14px;
}

.brandSelectBox h4 {
	font-size: 18px;
}

label {
	font-weight: 500;
}

.sec-6 {
	margin-top: 40px;
}

.sec-6 a {
	margin-left: 10px;
	color: #b7b7b7;
	font-size: 18px;
}

.sec-6 a:hover {
	color: #0d83fd;
}

.sec-6-header {
	width: 100%;
}

.sec-6-header h2 span.dr-header-info {
	font-size: 16px;
	font-weight: normal;
	margin-top: 5px;
	color: #fff;
	background: #0d83fd;
	padding: 5px 15px;
	border-radius: 50px;
	text-transform: capitalize;
	font-weight: 600;
}


.brandSelectBox2 {
	padding: 20px;
	background: #f7f4f4;
	border-radius: 20px;
	border: 1px solid #ddd;
}

.brandSelectBox2 p,
.brandSelectBox2 .form-group {
	margin-bottom: 0;
}

.brandSelectBox2 select {
	height: 34px;
	border: 1px solid #0d83fd;
}

.brandSelectBox2 h4 {
	font-size: 18px;
}

.brandSelectBox2 .form-group label {
	margin-bottom: 10px;
}

.sec-6-header h2 {
	font-size: 22px;
}

.sec-6-header span:last-child {
	color: #0d83fd;
	font-size: 16px;
	font-weight: normal;
}

.sec-7.structurePart label img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 10px;
}

.sec-7.structurePart label {
	display: flex;
	justify-content: left;
	margin-bottom: 10px;
	align-items: center;
}

.sec-7.structurePart .form-group {
	margin-bottom: 20px;
}

hr.new1 {
	border-top: 1px dashed #000000;
}

.sec-8 {
	margin-top: 20px;
}

.sec-8 a {
	margin-left: 10px;
	color: #b7b7b7;
	font-size: 18px;
}

.sec-8 a:hover {
	color: #0d83fd;
}

.sec-8-header {
	width: 100%;
}

.sec-8-header h2 {
	font-size: 22px;
}

.sec-8-header h2 span.dr-header-info {
	font-size: 16px;
	font-weight: normal;
	margin-top: 5px;
	color: #fff;
	background: #0d83fd;
	padding: 5px 15px;
	border-radius: 50px;
	text-transform: capitalize;
	font-weight: 600;
}

.sec-8-header span:last-child {
	color: #0d83fd;
	font-size: 16px;
	font-weight: normal;
}

.sec-8 p {}

.sec-8 ul {
	padding: 20px;
	background: #f3f9ff;
	border-radius: 20px;
	list-style: none;
	border: 1px solid #0d83fd;
}

.sec-8 ul li {
	position: relative;
	padding: 10px 10px 10px 30px;
	font-size: 14px;
}

.sec-8 ul li::before {
	position: absolute;
	content: "\f26a";
	font-family: "bootstrap-icons";
	color: #0d83fd;
	font-size: 16px;
	margin-right: 10px;
	left: 0;

}


.oc-switcher {
	margin: 22px 0;
	display: flex;
	justify-content: space-between;
	line-height: 1.5;
}

.oc-content .dr-checkbox input {
	margin-right: 10px;
}

.oc-rows-cnt {
	font-weight: 500;
	font-size: 16px;
	color: #a1a1a1;
	padding-right: 10px;
}

.oc-disabled .oc-rows-cnt {
	color: #c6c6c6;

}

.oc-magic {
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
}

.disabledBlock {
	width: 20%;
}

.disabledBlock span {
	display: block;
}

.oc-switcher {
	margin: 22px 0;
	display: flex;
	justify-content: space-between;
	line-height: 1.5;
}

.magicBtn {
	padding: 10px 30px;
	border-radius: 5px;
	color: #fff;
	font-size: 16px;
	text-transform: capitalize;
	height: auto;
	font-weight: normal;
	transition: 0.3s;
	width: 100%;
	background: #0d83fd;
	border: 1px solid #0d83fd;
}

.oc-disabled .magicBtn {
	padding: 5px 30px;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	text-transform: capitalize;
	height: auto;
	font-weight: normal;
	transition: 0.3s;
	width: 100%;
	background: #c7c7c7;
	border: 1px solid #c7c7c7;
}

.oc-disabled .disabledBlock {
	color: #b5b5b5;
}


.sec-9 {
	margin-top: 40px;
}

.sec-9 a {
	margin-left: 10px;
	color: #b7b7b7;
	font-size: 18px;
}

.sec-9 a:hover {
	color: #0d83fd;
}

.sec-9-header {
	width: 100%;
}

.sec-9-header h2 span.dr-header-info {
	font-size: 16px;
	font-weight: normal;
	margin-top: 5px;
	color: #fff;
	background: #0d83fd;
	padding: 5px 15px;
	border-radius: 50px;
	text-transform: capitalize;
	font-weight: 600;
}




.webLinkBox2 {
	padding: 20px;
	background: #f6e2cd;
	border-radius: 20px;
	border: 1px solid #d8b691;
}

.webLinkBox2 h4 {
	font-size: 18px;
	font-weight: 600;
}

.webLinkBox2 p,
.webLinkBox2 .form-group {
	margin-bottom: 5px;
}

.webLinkBox2 select {
	height: 34px;
	border: 1px solid #d8b691;
}

.webLinkBox2 .form-group label {
	display: flex;
	margin: 10px 0;
}

.webLinkBox2 .form-group label span {
	color: #0d83fd;
}


/*--------------------------------------------------------------
# Tools Bulk Article Generation Page Css
--------------------------------------------------------------*/


.tool_form p {
	margin: 20px 0;
}

.addRowTableHolder {
	overflow-x: scroll;
	box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
}

.add-row-table {
	margin-bottom: 0;
	background: #fff;
}

.add-row-table tr:first-child td a {
	display: none;
}

.add-row-table .remove {
	background: #f1f1f1;
}

.add-row-table .remove td {
	font-style: italic;
}

.table.add-row-table>tbody>tr>td {
	vertical-align: middle;
}

.add-row-table .input-group {
	width: 100%;
}

.add-row-table td input.form-control {
	font-size: 13px;
	padding: .575rem .75rem;
}

.add-row-table td textarea.form-control {
	height: 60px;
	resize: none;
}

.add-row-table .editable {
	border: none;
	padding: 0;
	margin: 0;
	text-shadow: none;
	box-shadow: none;
	border: var(--bs-border-width) solid var(--bs-border-color);
	padding: .375rem .75rem;
}

.tool_form .addBtn {
	cursor: pointer;
	padding: 5px 20px;
	border-radius: 5px;
	color: #0d83fd;
	border: 1px solid #0d83fd;
	background: #fff;
	font-size: 16px;
	text-transform: capitalize;
	font-weight: normal;
	transition: 0.3s;
	min-width: auto;
	margin-right: 20px;
	margin: 0 auto;
}

.add-row-table thead th span {
	color: red;
}

.add-row-table thead th button.generate-btn {
	color: #0d83fd;
	border: 1px solid #0d83fd;
	padding: 5px 15px;
	width: auto;
	text-transform: capitalize;
	background: #fff;
	margin-top: 10px;
	margin-left: 10px;
	border-radius: 5px;
	transition: 0.3s;
}

.add-row-table thead th button.generate-btn:hover {
	color: #fff;
	background: #0d83fd;
}

.add-row-table thead th:first-child {
	border-radius: 20px 0 0 0;
}

.add-row-table thead th:last-child {
	border-radius: 0 20px 0 0;
}

.add-row-table td,
.add-row-table th {
	padding: 15px 15px;
	font-size: 14px;
	vertical-align: middle;
}

.add-row-table tbody tr:last-child td {
	border-radius: 0 0 20px 20px;
	border: 0;
}

.tool_form .file {
	position: relative;
	background: #444;
	border: 1px solid #444;
	font-size: 14px;
	text-transform: capitalize;
}

.tool_form .file:hover {
	color: #fff;
	background: #0d83fd;
	border-color: #0d83fd;
}

.tool_form .file input {
	position: absolute;
	font-size: 50px;
	opacity: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.pricePopup {
	text-align: center;
	padding: 10px;
}

.pricePopup h3 {
	font-size: 26px;
	font-weight: bold;
	margin: 15px 0;
}

.pricePopup h5 {
	color: #0d83fd;
}

.package {
	margin-top: 30px;
}

.packageBox {
	padding: 20px 15px;
	border-radius: 20px;
	position: relative;
}

.packageBox h4 {
	font-size: 30px;
	font-weight: bold;
	margin: 8px 0;
}

.packageBox p {
	font-size: 18px;
	margin: 5px;
}

.packageBox h6 {
	font-size: 18px;
	font-weight: bold;
}

.color-1 {
	background: #f2f7fb;
	border: 1px solid #b8d2ec;
}

.color-2 {
	background: #cee6ff;
	border: 1px solid #0d83fd;
}

button.packageBtn {
	background: #fff;
	border: 1px solid #ddd;
	width: 100%;
	padding: 5px 10px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 18px;
}

.toptag {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: #0d83fd;
	color: white;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
}

.packageBottom {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 24px;
	margin-top: 20px;
}

.pack-rate {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #6B7280;
	font-size: 14px;
}

.btnSubmit2 {
	background: #0d83fd;
	padding: 8px 30px;
	border-radius: 10px;
	color: #fff;
	font-size: 18px;
	text-transform: capitalize;
	height: auto;
	border: 0;
	font-weight: bold;
	transition: 0.3s;
	min-width: 100%;
}

#cpnBtn,
#cpnBtn2 {
	margin-top: 10px;
	display: inline-block;
	font-size: 14px;
	background: #fff;
	padding: 5px 10px;
	border-radius: 50px;
}



.switches-container {
	width: 10rem;
	position: relative;
	display: flex;
	padding: 0;
	position: relative;
	background: #eee;
	line-height: 2rem;
	border-radius: 3rem;
	border: 1px solid #ddd;
}

/* input (radio) for toggling. hidden - use labels for clicking on */
.switches-container input {
	visibility: hidden;
	position: absolute;
	top: 0;
}

/* labels for the input (radio) boxes - something to click on */
.switches-container label {
	width: 50%;
	padding: 0;
	margin: 0;
	text-align: center;
	cursor: pointer;
	color: var(--switches-label-color);
	justify-content: space-around !important;
	margin: 0 !important;
}

/* switch highlighters wrapper (sliding left / right) 
    - need wrapper to enable the even margins around the highlight box
*/
.switch-wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	z-index: 3;
	transition: transform .5s cubic-bezier(.77, 0, .175, 1);
	/* transition: transform 1s; */
}

/* switch box highlighter */
.switch {
	border-radius: 3rem;
	background: var(--accent-color);
	color: #fff;
	height: 100%;
	line-height: 34px;
}

/* switch box labels
    - default setup
    - toggle afterwards based on radio:checked status 
*/
.switch div {
	width: 100%;
	text-align: center;
	opacity: 0;
	display: block;
	color: var(--switch-text-color);
	transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
	will-change: opacity;
	position: absolute;
	top: 0;
	left: 0;
}

/* slide the switch box from right to left */
.switches-container input:nth-of-type(1):checked~.switch-wrapper {
	transform: translateX(0%);
}

/* slide the switch box from left to right */
.switches-container input:nth-of-type(2):checked~.switch-wrapper {
	transform: translateX(100%);
}

/* toggle the switch box labels - first checkbox:checked - show first switch div */
.switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
	opacity: 1;
}

/* toggle the switch box labels - second checkbox:checked - show second switch div */
.switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
	opacity: 1;
}


/*======= Tab Css =========*/


.profileTab {
	width: 100%;
}

.profileTab nav .nav-tabs {
	display: flex;
	gap: 30px;
}

.profileTab nav .nav-tabs button.nav-link.active {
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 2px solid #0d83fd;
	color: #0d83fd;
	border-top: 2px solid #0d83fd;
  border-radius: 0;
}

.profileTab nav .nav-tabs button.nav-link {
	border: 0;
	border-bottom: 2px solid #eee;
	border-top: 2px solid #fff;
	color: #000;
	font-size: 18px;
}

.profileTab .tab-content {
	padding: 0;
	background: #fff;
}



.dp-ibox {
	position: relative;
	border: 1px solid #dddddd;
	border-radius: 5px;
	padding: 8px 0 8px 24px;
	margin-top: 16px;
}

.dp-ibox-name {
	font-size: 14px;
	line-height: 23px;
	color: #686868;
}

.dp-ibox-value {
	font-weight: 300;
	font-size: 18px;
	line-height: 28px;
	color: #212121;
}

.dp-ibox-btn {
	position: absolute;
	right: 18px;
	top: 15px;
	margin-right: 0;
	display: inline-block;
	background: #fff;
	border: 1px solid #0d83fd;
	color: #0d83fd;
	border-radius: 4px;
	line-height: 30px;
	padding: 5px 26px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
}

.dp-ibox-btn:hover {
	background: #0d83fd;
	color: #fff;
}

.updateForm {
	padding: 0 20px 20px;
}

.updateForm p {
	text-align: center;
}

.dpr-head {
	font-size: 24px;
	line-height: 29px;
	margin-bottom: 13px;
	text-align: center;
	margin: 20px 0;
}

.inp,
.inp-el {
	border: 1px solid #e0e0e0;
	box-sizing: border-box;
	border-radius: 4px;
	padding: 13px 20px;
	width: 100%;
	color: #212121;
	height: 40px;
}

.dpr-next-inp {
	margin-top: 16px;
}

.dpr-btns {
	margin-top: 19px;
	text-align: center;

}

.btn-sm {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	border-radius: 4px;
	height: 40px;
	padding: 10px 12px;
	background: #0d83fd;
	padding: 5px 30px;
	border-radius: 5px;
	color: #fff;
	border: 1px solid #0d83fd;
}

.btn-sm:hover {
	border: 1px solid #0d83fd;
}

.btn-link {
	border: 1px solid #f9f9f9;
	background: #eee;
}

.btn-link:hover,
.btn-link:active {
	background: #eee;
	color: #686868;
	border: 1px solid #eee;
}

.dpr-btns .btn:first-child {
	margin-right: 15px;
}

.int-content {
	padding: 17px 0 0 0;
}

.int-box {
	border: 1px solid #E0E0E0;
	border-radius: 5px;
	padding: 25px;
	margin-top: 20px;
}

.int-box:first-child {
	margin-top: 0;
}

.dpr-header {
	height: 40px;
	line-height: 40px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
}

.int-box .logo {
	width: 40px;
	height: 40px;
	fill: #636363;
	display: inline-block;
	vertical-align: top;
	margin-right: 18px;
}

.dpr-header h2 {
	font-size: 24px;
	line-height: 40px;
	color: #000000;
	display: inline;
	margin: 0;
}

.dpr-header i {
	font-size: 30px;
}

.dpr-header-help {
	display: inline-block;
	margin: 2px 0 0 10px;
	vertical-align: top;
}

.dpr-header h2 a i {
	font-size: 18px;
}

.dpr-header .btn-sm {
	display: inline-block;
	vertical-align: top;
	min-width: 130px;
	text-align: center;
}

.dpr-header .btn-sm:hover {
	background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
	color: #fff;
}

.btn-sm-submit,
.ip-btn {
	background: #0d83fd;
}

.oaik-input {
	display: inline-block;
	width: 400px;
	height: 40px;
	margin-right: 15px;
	position: relative;
}

.oaik-input .inp {
	position: absolute;
	top: -1px;
	height: 40px;
}

.oaik-add-btn {
	overflow: hidden;
	width: 100px;
	color: #fff;
}

#openai_form {
	display: flex;
}

.oaik-add-btn:hover {
	background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
	color: #fff;
}

#notifForm {}

.notif-section {
	margin-bottom: 20px;
}

.nf-name {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
}

.nf-event {}

.nf-save-btn {
	display: inline-block;
	background: #0d83fd;
	background: #0d83fd;
	color: #fff;
	border: 0;
	border-radius: 4px;
	line-height: 30px;
	padding: 5px 26px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	box-sizing: border-box;
}

.nf-save-btn:hover {
	background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.barGraphDiv {}

.bx--graph-header {
	font-weight: 300;
	font-size: 24px;
}

.barGraphDiv .overlay {
	fill: #3d70b2;
	opacity: 0.1;
	display: none;
	pointer-events: none;
}

.barGraphDiv .line {
	stroke-width: 2;
	stroke: #FF00FF;
	fill: none;
	pointer-events: none;
}

.barGraphDiv .axis path {
	stroke: #5A6872;
}

.tick line {
	stroke: #5A6872;
}

.tick text {
	fill: #5A6872;
}

.graph-container {
	position: relative;
	overflow-x: scroll;
}

.barGraphDiv .tooltip {
	font-weight: 700;
	padding-left: 1rem 2rem;
	background-color: #fff;
	position: absolute;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
	border: 1px solid #DFE3E6;
	padding: 0.25rem 0.5rem;
	pointer-events: none;
	display: none;
}

.barGraphDiv .tooltip:after {
	content: "";
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #fff;
}

.y path {
	display: none;
}

.barGraphDiv .label {
	font-size: 10px;
	font-weight: 700;
	fill: #5A6872;
	text-anchor: middle;
}

.int-box2 {
	border: 1px solid #E0E0E0;
	border-radius: 5px;
	padding: 15px 25px;
	margin-top: 37px;
}

.social-dpr-header {
	height: 40px;
	line-height: 40px;
	display: flex;
	justify-content: space-between;
}

.social-dpr-header .leftText h2 {
	margin-bottom: 0;
}

.social-dpr-header .leftText h2 a {
	font-size: 16px;
}

/*--------------------------------------------------------------
# Humanizer Page Css
--------------------------------------------------------------*/

.humanizer-sec textarea {
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	border: 0;
	padding: 15px;
	min-height: 120px;
	margin-bottom: 10px;
	border: 1px solid #d4e7fb;
}

.hm-button-box {
	margin-top: 10px;
	line-height: 40px;
	display: flex;
	justify-content: space-between;
	padding-bottom: 0;
}

.hm-words-counter {
	color: #0d83fd;
	font-size: 14px;
}

.hm-limits {
	color: #0d83fd;
	font-size: 14px;
	white-space: nowrap;
	margin-right: 15px;
}

.pa-btn-info {
	line-height: 38px;
	height: 40px;
	padding: 0 12px;
}

.pa-btn {
	display: inline-block;
	background: #0d83fd;
	background: #0d83fd;
	color: #fff;
	border: 0;
	border-radius: 4px;
	line-height: 30px;
	padding: 0 26px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
}

.hm-button-box {
	margin-top: 10px;
	line-height: 40px;
	display: flex;
	justify-content: space-between;
	padding-bottom: 0;
}

.hm-column50 {
	width: 50%;
}

.hm-words-counter {
	color: #0d83fd;
	font-size: 14px;
}

.hm-btn {
	display: inline-block;
	position: relative;
	height: 25px;
	line-height: 25px;
	margin: 8px 12px 0 0;
	font-size: 14px;
}

.hm-btn button {
	border: 0;
	padding: 0;
	background: transparent;
	color: #44444f;
	cursor: pointer;
	line-height: 25px;
}

.hm-btn button:disabled {
	color: #999;
	cursor: default;
}

.hm-btn button svg {
	margin-right: 10px;
	display: inline-block;
	vertical-align: top;
	width: 23px;
	height: 25px;
	fill: #696969;
	stroke: #696969;
}

.hm-btn button:disabled {
	color: #999;
	cursor: default;
}

.hm-btn:last-child {
	margin-right: 0;
}


.topBrowsePart {}

.drop-zone {
	max-width: 100%;
	height: 120px;
	padding: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 500;
	font-size: 20px;
	cursor: pointer;
	color: #cccccc;
	border: 2px dashed #0d83fd;
	border-radius: 10px;
}

.drop-zone--over {
	border-style: solid;
}

.drop-zone__input {
	display: none;
}

.drop-zone__thumb {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
	background-color: #cccccc;
	background-size: cover;
	position: relative;
}

.drop-zone__thumb::after {
	content: attr(data-label);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 5px 0;
	color: #ffffff;
	background: rgba(0, 0, 0, 0.75);
	font-size: 14px;
	text-align: center;
}

.btnGrp {
	display: flex;
}

/* profile menu */
.btn-create {
	color: var(--contrast-color);
	background: var(--accent-color);
	font-size: 14px;
	padding: 4px 20px;
	margin: 0 0 0 30px;
	border-radius: 50px;
	transition: 0.3s;
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: center;
}

.btn-create span {
	font-size: 20px;
	font-weight: bold;
	display: inline-block;
}

.btn-create:hover {
	background-color: color-mix(in srgb, var(--accent-color), black 20%);
	border-color: color-mix(in srgb, var(--accent-color), black 20%);
	color: #fff;
}

.profile {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	text-align: end;
}

.profile .user h5 {
	font-size: 14px;
}

.profile h3 {
	text-align: end;
	line-height: 1;
	margin-bottom: 4px;
	font-weight: 600;
}

.profile p {
	line-height: 1;
	font-size: 14px;
	opacity: .6;
}

.profile .img-box {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #ccc;
}

.profile .img-box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* menu (the right one) */

.menu {
	position: absolute;
	top: calc(100% + 0px);
	right: 16px;
	width: 150px;
	min-height: 100px;
	background: #fff;
	box-shadow: 0 0px 20px rgba(0, 0, 0, .2);
	opacity: 0;
	transform: translateY(-10px);
	visibility: hidden;
	transition: 300ms;
}

.menu::before {
	content: '';
	position: absolute;
	top: -7px;
	right: 14px;
	width: 15px;
	height: 15px;
	background: #fff;
	transform: rotate(45deg);
	z-index: -1;
}

.menu.active {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

/* menu links */

.menu ul {
	position: relative;
	display: flex;
	flex-direction: column;
	z-index: 10;
	background: #fff;
	padding: 10px;
}

.menu ul li {
	list-style: none;
	border-radius: 5px;
}

.menu ul li:hover {
	background-color: var(--accent-color);

}

.menu ul li a {
	text-decoration: none;
	color: #000;
	display: flex;
	align-items: center;
	padding: 3px 5px;
	gap: 6px;
	font-size: 13px;

}

.menu ul li a:hover {
	color: #fff;
}

.menu ul li a i {
	font-size: 1.2em;
}




/*--------------------------------------------------------------
# Article Builder Page Css
--------------------------------------------------------------*/
.table.cust-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 580px;
}

.table.cust-table td,
.table.cust-table th {
	border: 1px solid #ddd;
	padding: 8px;
	font-size: 14px;
	color: #444;
	vertical-align: middle;
}

.table.cust-table td input,
.table.cust-table th input {
	border: 1px solid #ddd;
}

table.table.cust-table tbody tr.selected {
	background-color: #eee;
}

.table.cust-table tr:hover {
	background-color: #ddd !important;
}

.table.cust-table th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #004388;
	color: white;
	border-left: 0;
}

.cust-table thead th:first-child {
	border-radius: 10px 0 0 0;
	border-top: 0;
	text-align: center;
}

.cust-table thead th:last-child {
	border-radius: 0 10px 0 0;
	border-right: 0;
	border-top: 0;
	text-align: center;
}

.cust-table tbody tr td:first-child,
.cust-table tbody tr td:last-child {
	text-align: center;
}




.tbleDivHolder {
	display: flex;
	align-items: center;
}

.artIc-Right {}

.artIc-Right h4 {
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 5px;
}

.artIc-Right p {
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 0;
}

.art-icon {
	background: #0d83fd;
	padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	margin-right: 10px;
	width: 30px;
	height: 30px;
}

.art-icon i {
	color: #fff;
	font-size: 20px;

}

.table-row {
	cursor: pointer;
}

span.checkIc {
	display: inline-block;
	margin: 0 auto;
	color: green;
	font-size: 26px;
	width: 100%;
	text-align: center;
	animation: scaleUp 0.4s ease-in-out;
}

@keyframes scaleUp {
	from {
		transform: scale(0.8);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

span.percentage {
	transition: all 0.3s ease-in-out;
}


.tableDrop {}

#navbarDropdown::after {
	display: none;
}

.tableDrop ul li a {
	font-size: 14px;
}

.tableDrop ul li a:hover {
	background: #deeaf4;
}

.topFilter {}

.topFilter h3 {
	display: flex;
}

.topFilter h3 .form-group {
	display: flex;
	align-items: center;
	margin: 0;
}

.topFilter h3 .form-group label {
	font-size: 14px;
	min-width: 80px;
}

.topFilter h3 span {
	color: #666;
	font-size: 13px;
}


.cust-table.article-builder-tbl thead tr th:last-child {
	min-width: 70px;
}





/*--------------------------------------------------------------
# Blog Page Css
--------------------------------------------------------------*/

.blogBody {}

.blogDetailsTable {}

table.blogDetailsTable {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 0 0 20px;
	padding: 0;
	width: 100%;

}

table.blogDetailsTable caption {
	font-size: 16px;
	margin: .5em 0 .75em;
}

table.blogDetailsTable tr {
	background-color: #f3f9ff;
	border: 1px solid #ddd;
	padding: .35em;
}

table.blogDetailsTable tr td:first-child {
	width: 50px;
	border-radius: 10px 0 0 0;
}

table.blogDetailsTable tr td:last-child {
	width: 100px;
	text-align: center;
}

table.blogDetailsTable th,
table.blogDetailsTable td {
	padding: 20px;
	text-align: left;
}

table.blogDetailsTable th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

table.blogDetailsTable td a {
	background: #0d83fd;
	color: #fff;
	padding: 5px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	margin-right: 10px;
	border: 1px solid #0d83fd;
}

table.blogDetailsTable td a:hover {
	background: #fff;
	color: #0d83fd;

}

@media screen and (max-width: 991px) {
	.blogBody {
		margin-top: 40px;
	}

	table.blogDetailsTable {
		border: 0;
	}

	table.blogDetailsTable caption {
		font-size: 1.3em;
	}

	table.blogDetailsTable thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	table.blogDetailsTable tr {
		border-bottom: 3px solid #ddd;
		display: block;
		margin-bottom: .625em;
	}

	table.blogDetailsTable td {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: 16px;
		text-align: left;
		padding: 10px 20px;
	}

	table.blogDetailsTable tr td:first-child {
		width: 100%;
	}

	table.blogDetailsTable tr td:last-child {
		width: 200px;
	}

	table.blogDetailsTable tr td .art-icon {
		width: 50px;
		height: 50px;
	}

	table.blogDetailsTable tr td .art-icon i {
		color: #fff;
		font-size: 30px;
	}

	table.blogDetailsTable td::before {
		/*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	table.blogDetailsTable td:last-child {
		border-bottom: 0;
	}
}

.blogPageTopPart {
	border: 1px solid #ccc;
	margin: 0 0 20px;
	background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.seoScore {
	padding: 20px 20px;
}

.seoScore h4 {
	font-size: 18px;
}

.seoScore h4 a {
	margin-left: 10px;
}

.countBlock {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #ccc;
	background: #fff;
}

.countBlock h5 {
	background: linear-gradient(102deg, rgba(15, 79, 146, 1) 22%, rgba(13, 131, 253, 1) 100%);
	text-align: center;
	padding: 10px;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 0;
}

.countBlock p {
	text-align: center;
	padding: 10px;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: bold;
}

.circle_percent {
	font-size: 100px;
	width: 110px;
	height: 110px;
	position: relative;
	background: #eee;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	margin: 0 auto;
}

.circle_inner {
	position: absolute;
	left: 0;
	top: 0;
	width: 110px;
	height: 110px;
	clip: rect(0 .5em 110px 0em);
}

.round_per {
	position: absolute;
	left: 0;
	top: 0;
	width: 110px;
	height: 110px;
	background: var(--accent-color);
	clip: rect(0 110px 110px .5em);
	transform: rotate(180deg);
	transition: 1.05s;
}

.percent_more .circle_inner {
	clip: rect(0 .5em 110px 0em);
}

.percent_more:after {
	position: absolute;
	left: .5em;
	top: 0em;
	right: 0;
	bottom: 0;
	background: var(--accent-color);
	content: '';
}

.circle_inbox {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background: #fff;
	z-index: 3;
	border-radius: 50%;
}

.percent_text {
	position: absolute;
	font-size: 22px;
	font-weight: bold;
	left: 50%;
	top: 33%;
	transform: translate(-50%, -50%);
	z-index: 3;
}

.subText {
	font-size: 14px;
	position: absolute;
	left: 30%;
	top: 64%;
	transform: translate(-20%, -50%);
	z-index: 3;
	line-height: 13px;
	font-weight: 600;
	text-align: center;
}

.scorebottom {
	background: #fff;
	padding: 10px 20px;
	border-top: 1px solid #ddd;
}

.dp-info {
	margin-top: 0px;
	padding: 0;
	display: flex;
	justify-content: space-between;
	line-height: 40px;
}

.btn-sm {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	border-radius: 4px;
	height: 40px;
	padding: 10px 12px;
}

.btn-link {
	background: transparent;
	color: #686868;
	text-decoration: none;
}

.dp-meta-box {
	background: #fff;
	padding: 27px 45px 24px 45px;
	border: 1px dashed #0d83fd;
	border-radius: 8px;
	position: relative;
	margin-top: 30px;
}

.dp-meta-cols {
	display: flex;
}

.dp-meta-value {
	width: 82%;
	font-size: 16px;
	line-height: 24px;
	white-space: pre-wrap;
}

.dp-meta-btn {
	width: 18%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.dp-meta-btn-wrp {
	position: relative;
}

.dp-meta-copy {
	border: 0;
	padding: 0;
	background: transparent;
	color: #44444f;
	line-height: 25px;
	cursor: pointer;
}

.dp-meta-copy:hover {
	opacity: 0.6;
}

.dp-meta-copy svg {
	margin-right: 10px;
	display: inline-block;
	vertical-align: top;
	width: 23px;
	height: 25px;
	fill: #696969;
}

.dp-meta-name,
.dp-meta-len {
	position: absolute;
	letter-spacing: .1px;
	line-height: 1;
	padding: 0 10px;
	color: #0d83fd;
	top: -7px;
	background: #fff;
}

.dp-meta-name {
	left: 35px;
}

.dp-meta-len {
	right: 35px;
}

.articleHolder {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}

.articleHolder h3 {
	font-size: 26px;
	font-weight: 800;
}

.articleHolder p {
	line-height: 24px;
	font-size: 14px;
}

.articleHolder img {
	width: 100%;
	margin-bottom: 20px;
}

.articleHolder h4 {
	font-size: 22px;
	font-weight: 800;
}

.articleHolder ul {
	margin: 20px 0;
}

.articleHolder table {
	margin-bottom: 20px;
}

.articleHolder table th,
.articleHolder table td {
	padding: 10px 16px;
	border: 1px solid #ccc;
}

.faqSec {
	margin: 20px 0;
	;
}

.faqSec h4 {
	margin-bottom: 20px;
}

.faqSec p {}

.faqSec p span {
	display: block;
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 10px;
}

.leftText {
	display: flex;
	align-items: center;
	gap: 10px;
}

.leftText img {
	width: 30px;
}

.pa-rbox-info {
	display: flex;
	gap: 20px;
	font-size: 16px;
}

.bil-trial-box {
	padding: 20px 30px;
	background: #f3f9ff;
	border-radius: 5px;
}

.dp-ibox-btn2 {
	margin-right: 0;
	display: inline-block;
	background: #fff;
	border: 1px solid #0d83fd;
	color: #0d83fd;
	border-radius: 4px;
	line-height: 30px;
	padding: 5px 26px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
}

.dp-ibox-btn2:hover {
	background: #0d83fd;
	color: #fff !important;
}

.billingContent {
	padding: 17px 0 0 0;
}

.billingContent h3 {
	margin-top: 30px;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}

.bil-cancel-box {
	margin-top: 30px;
	font-size: 14px;
	line-height: 1.6;
}

.bil-cancel-warn {
	margin-bottom: 19px;
	font-size: 12px;
	line-height: 23px;
	color: #686868;
}

.bil-cancel-btn {
	width: 127px;
	height: 36px;
	background: #f5f6f9;
	border-radius: 4px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #212121;
	border: 0;
	cursor: pointer;
	text-transform: capitalize;
}

.bil-cancel-btn:hover {}

.priceTab {
	max-width: 80%;
}

.switcher {
	margin-top: 30px;
	display: flex;
	justify-content: center;
	gap: 30px;
	align-items: center;
}

.switcher span {
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
}

.month {
	margin-right: 10px;
}

.switcher .active {
	background: #0c82fc;
	padding: 10px 30px;
	border-radius: 50px;
	color: #fff;
}

.pricing-inner h2 {
	text-align: center;
	justify-content: center;
	font-size: 38px;
}

.pricing-inner .section-title {
	border-bottom: 1px solid #ddd;
}

.no-article {
	text-align: center;
	border: 1px solid #ddd;
	padding: 4%;
}

.no-article h3 {
	text-align: center;
	display: block;
}

.no-article .btn-create {
	margin: 0;
}

.no-article img {
	width: 100px;
	margin-bottom: 20px;
}





/*-------------------------------------------------------*/
/* Pricing Tables
/*-------------------------------------------------------*/
.pricing-table {
	margin-top: 30px;
	background-color: #fff;
	text-align: center;
	overflow: hidden;
	padding: 0px 20px 30px;
	margin-bottom: 20px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	position: relative;
	border: 1px solid #eee;
	border-radius: 20px;
	height: 90%;
}

.pricing-table--best .pricing-table__price,
.pricing-table--best .pricing-table__currency {
	color: #000;
}

.pricing-table__ribbon {
	background-color: #0c82fc;
	position: absolute;
	padding: 9px 50px;
	color: #fff;
	left: -40px;
	top: 30px;
	font-family: "Karla", sans-serif;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	background: #4193d6;
	/* Old browsers */
	background: -moz-linear-gradient(left, #4193d6 0%, #0c82fc 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #4193d6), color-stop(100%, #0c82fc));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #4193d6 0%, #0c82fc 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #4193d6 0%, #0c82fc 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(left, #4193d6 0%, #0c82fc 100%);
	/* IE10+ */
	background: linear-gradient(to right, #4193d6 0%, #0c82fc 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4193d6", endColorstr="#39bad6", GradientType=0);
	/* IE6-9 */
}

.pricing-table__icon {
	display: block;
	font-size: 56px;
	color: #929292;
}

.pricing-table__title {
	font-size: 20px;
	margin-top: 22px;
	margin-bottom: 10px;
	justify-content: center !important;
}

.pricing-table__price-box {
	padding: 0 0 0px;
	color: #212121;

}

.pricing-table__currency {
	display: inline-block;
	vertical-align: top;
	margin: 0px 2px 0 0;
	font-size: 40px;
	font-weight: 600;
	line-height: 50px;
}

.pricing-table__price {
	font-size: 40px;
	font-weight: 600;
	line-height: 50px;
}

.pricing-table__term {
	font-size: 16px;
	display: block;
	color: #929292;
}

.pricing-table__features {
	color: #929292;
	font-size: 15px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.pricing-table__features h4 {
	font-weight: 600;
	margin: 15px 0;
	font-size: 20px;
}

.pricing-table__features p {
	font-size: 18px;
	line-height: 24px;
	font-weight: normal;
}

.pricing-table__features li {
	padding: 12px 0;
}

.btn-disabled {
	padding: 10px 10px;
	display: block;
	border: 1px solid #7abcff;
	border-radius: 10px;
	max-width: 200px;
	margin: 0 auto;
	color: #7abcff;
}

ul.planList {
	position: relative;
	text-align: left;
	list-style: none;
	padding-left: 0;
	margin-top: 30px;
}

ul.planList li {
	font-size: 16px;
	line-height: 20px;
	padding: 2px 0;
	position: relative;
	padding-left: 40px;
}

ul.planList li::before {
	content: "\f26e";
	position: absolute;
	left: 0;
	font-size: 26px;
	color: green;
	font-family: bootstrap-icons !important;
	top: 0;
}

.ipti-btn {
	margin-bottom: 15px;
}

.pricing-table>p {
	font-size: 20px;
	margin-top: 20px;
}


.choose-tariff {
	padding: 10px 10px;
	display: block;
	border: 1px solid #0c82fc;
	border-radius: 10px;
	max-width: 300px;
	margin: 0 auto;
	color: #fff;
	background: #0c82fc;
	width: 200px;
	font-size: 18px;
	font-weight: 600;
}

.choose-tariff:hover {
	background-color: color-mix(in srgb, var(--accent-color), black 20%);
}

.ct-badge-new {
	display: inline-block;
	border-radius: 4px;
	background: #0c82fc;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	padding: 3px 5px;
	letter-spacing: 0;
	font-style: normal;
	margin-left: 2px;
	vertical-align: text-bottom;
}

.pricing-table__features .form-select {
	height: 40px;
	font-weight: 600;
	font-size: 16px;
	border-radius: 10px;
	padding: 0 20px;
	border: 1px solid #0c82fc;
	max-width: 230px;
	margin: 0 auto;
}

.pricing-table__features .form-select option {
	font-size: 14px;
	font-weight: normal;
}

.item-pro {
	border: 1px solid #0c82fc;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
	background: #dcedff;
}

.pricing-table__title.large,
.pricing-table__title.medium {
	color: #0c82fc;
}

.freeTable ul li::before {
	color: orange;
}

@media only screen and (max-width: 639px) {
	.pricing-table {
		padding: 50px 20px 60px;
	}
}

.faq-section {
	width: 80%;
	margin: 0 auto;
}

.pricing-inner {
	padding: 30px 0 0;
}

#accordionFaq .accordion-item h2.accordion-header {
	margin-bottom: 0 !important;
}




/*--------------------------------------------------------------
# Article Details Page Css
--------------------------------------------------------------*/


.article-body {
	padding: 40px 0;
}

.OuterDiv {
	width: 70%;
	margin: 50px auto;
}

.OuterDiv h3 {
	font-weight: 600;
	margin-bottom: 20px;
}

.OuterDiv img {
	margin: 0 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

.OuterDiv p {
	font-size: 16px;
}

.content-block {
	margin-bottom: 30px;
}

.article-body h2 {
	margin-bottom: 20px;
	font-weight: 800;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 26px;
	margin-top: 0;
}

.article-body h2 .breadcrumb {
	font-size: 14px;
	font-weight: normal;
	color: #666;
	margin: 0;
}

.article-body h2 .breadcrumb span {
	margin: 0 5px;
}



.big-search-area {}


.big-search-area .search-container {
	width: 100%;
	display: block;
	margin: 0 auto;
	position: relative;
}

.big-search-area input#search-bar {
	margin: 0 auto;
	width: 100%;
	height: 60px;
	padding: 0 20px;
	font-size: 1rem;
	border: 1px solid #D0CFCE;
	outline: none;
	border-radius: 14px;
	background: #395777;
	color: #fff;
}

.big-search-area input#search-bar:focus {
	border: 1px solid #008ABF;
	transition: 0.35s ease;
	color: #fff;
}

.big-search-area input#search-bar:focus::-webkit-input-placeholder {
	transition: opacity 0.45s ease;
	opacity: 0;

}

.big-search-area input#search-bar:focus::-moz-placeholder {
	transition: opacity 0.45s ease;
	opacity: 0;
}

.big-search-area input#search-bar:focus:-ms-placeholder {
	transition: opacity 0.45s ease;
	opacity: 0;
}

.big-search-area input:placeholder {
	color: #fff;
	opacity: 1;
}

.big-search-area .search-icon {
	position: absolute;
	width: 45px;
	height: 60px;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 24px;
}

.big-search-area .search-icon:hover {
	opacity: 0.7;

}

/* Blockquote style */
.content-block blockquote {
	background: #f2f9ff;
	color: #617a91;
	font-size: 17px;
	font-style: italic;
	border: 1px solid #2e87e7;
	border-radius: 4px;
	padding: 20px;
	margin: 1.5em 10px;
	clear: both;
}

.content-block blockquote:before {
	color: #2e87e7;
	content: open-quote;
	font-size: 4em;
	line-height: 0.1em;
	margin-right: 0.25em;
	vertical-align: -0.4em;
}

.content-block blockquote,
q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

#feedback-button-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

#positive-button,
#negative-button {
	background: #fff;
	border: 1px solid #d2e0ef;
	width: 100px;
	height: 100px;
	border-radius: 10px;
}

#positive-button:hover,
#negative-button:hover {
	background: #0d83fd;
}

#positive-button img,
#negative-button img {
	width: 40px;
	margin: 0 auto;
}

#need-help-container {
	text-align: center;
	text-align: center;
	background: #fff;
	padding: 20px;
}

#need-help-container p {
	margin-bottom: 0;
}

#feedback-container p {
	text-align: center;
	font-size: 16px;
}

.bottomPartDiv {
	background: #f3f9ff;
	padding: 30px;
}



.eachWord {
	margin: 10px 0;
}

.eachWord span {
	margin-right: 5px;
	border: 1px solid #e2ecf7;
	padding: 3px 30px 3px 10px;
	border-radius: 5px;
	display: inline-block;
	line-height: 20px;

	background: #eaf2fb;
	position: relative;
}

.eachWord span a {
	color: #0d83fd;
	font-size: 14px;
	margin: 0;
}

.eachWord span a::before {
	content: "\f623";
	font-family: bootstrap-icons !important;
	position: absolute;
	right: 7px;
	font-size: 16px;
	top: 4px;
	bottom: 0;
	color: #75b1ee;
}

span.tabLink {
	color: var(--accent-color);
}

.voiceCount {
	background: #d9ecff;
	padding: 5px 10px;
	color: #000 !important;
}

.upgradeBtn {
	color: #0d83fd !important;
	padding: 5px 10px;
	border-radius: 5px;
}

.upgradeBtn:hover {
	color: #fff !important;
	background: #0d83fd;
}

.upgradeBtn:hover i {
	color: #fff !important;
}

.gx-5 {
	gap: 10px;
}

.create-brand-voice {
	text-align: center;
	padding: 40px 0;
	border-top: 1px solid #eee;
}

.inactive {
	display: inline-block;
	background: #ccc;
	background: #ccc;
	color: #999;
	border: 0;
	border-radius: 4px;
	line-height: 30px;
	padding: 6px 26px;
	cursor: none;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
	pointer-events: none;
}

#footer {
	height: 400px;
}

#sidebar {
	max-height: 100%;
	/* Adjust 100px based on header height */
	overflow-y: auto;
	position: sticky;
	top: 100px;
	/* Same as above - height of fixed header */
	min-width: 320px;
	transition: 0.3s;
	padding: 10px;
}

body.scrolled .service-box {
	margin-top: 100px;
	transition: 0.5s;
}

#dashboard-body .col-lg-3 {
	position: relative;
}

/*====== Blog page(checkbox function css) 03-04-2025 =======*/


/*====== Blog page(checkbox function css) 03-04-2025 =======*/


.box {
	display: none;
}

.dp-meta-value input,
.dp-meta-value textarea {
	border: 0;
	width: 100%;
}

.dp-meta-value input:focus,
.dp-meta-value textarea:focus {
	border: 0;
	outline: none;
}

.post-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 53px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}

.post-btn .single-btn {
	position: relative;
	display: block;
}

.post-btn .single-btn h6 {
	display: block;
	font-size: 15px;
	line-height: 25px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.post-btn .single-btn h6 a {
	position: relative;
	display: inline-block;
	color: #000;
}

.post-btn .single-btn.prev-btn h6 a {
	padding-left: 32px;
	color: #999;
}

.post-btn .single-btn.prev-btn h6 a:hover,
.post-btn .single-btn.prev-btn h6 a:hover i,
.post-btn .single-btn.next-btn h6 a:hover,
.post-btn .single-btn.next-btn h6 a:hover i {
	color: var(--accent-color);
}

.post-btn .single-btn.prev-btn h6 a i {
	position: absolute;
	left: 0px;
	top: 0;
	font-size: 24px;
}

.post-btn .single-btn h5 {
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 26px;
	font-weight: 700;
}

.post-btn .single-btn.next-btn {
	text-align: right;
}

.post-btn .single-btn.next-btn h6 a {
	padding-right: 32px;
}

.post-btn .single-btn.next-btn h6 a i {
	position: absolute;
	top: 0;
	right: 0px;
	font-size: 24px;
}

.topButtons a {
	color: #000;
	background: #fff;
	font-size: 16px;
	padding: 10px 20px;
	margin: 0 0 0 30px;
	border-radius: 50px;
	transition: 0.3s;
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: center;
	font-weight: 600;
	border: 1px solid #000;
}

.topButtons a:hover {
	background: var(--accent-color);
	border-color: color-mix(in srgb, var(--accent-color), black 20%);
	color: #fff;
}

.topButtons a img {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}

.topButtons button {
	color: #000;
	background: #fff;
	font-size: 16px;
	padding: 10px 20px;
	margin: 0 0 0 30px;
	border-radius: 50px;
	transition: 0.3s;
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: center;
	font-weight: 600;
	border: 1px solid #000;
}

.topButtons button:hover {
	background: var(--accent-color);
	border-color: color-mix(in srgb, var(--accent-color), black 20%);
	color: #fff;
}

.topButtons button img {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}


/*=============== New Sign In/ Sign Up Page Css =============*/


.errorMsg {margin-top: 5px;}
.errorMsg p {color: red;}

.successMsg {margin-top: 5px;}
.successMsg p {color: green;}

.formHolerDiv {}

.formDiv {}

.formDiv h2 {
	text-align: center;
	margin-bottom: 20px;
}

.formDiv form {
	max-width: 370px;
	margin: 0 auto;
}

.formDiv form input {
	padding: 10px 20px;
	border-radius: 80px;
}

.formDiv form button[type="submit"] {
	color: var(--contrast-color);
  background-color: var(--accent-color);
	padding: 12px 20px;
	border-radius: 80px;
	width: 100%;
	margin: 10px 0;
}
.formDiv form button[type="submit"]:hover {background: #000;}
.formDiv form p {text-align: center;}

.orHolder {
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	align-items: center;
  }
  .orLine {
	height: 1px;
	background-color: #ddd;
  }
  .orName {
	margin: 0 20px;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 510;
  }


.OtherloginBtton {}
.OtherloginBtton button {
	padding: 12px 20px;
  width: 100%;
  border-radius: 80px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 10px 0 0;
  text-align: left;
}
.OtherloginBtton button i {margin-right: 10px; font-size: 20px;}

.OtherloginBtton button img {width: 20px; height: 20px;}

.OtherloginBtton button:hover {background: #ececec;}


.form_footer {margin-top: 40px;}
.formFooterLink {color: gray; text-align: center;display: block;}
.formFooterLink a {margin: 0 10px; color: #444; text-decoration: underline;font-size:14px;}
.separator::before {
	content: " | ";
  }


  .phRoot {
	position: relative;
  }
  .phfieldFootprint {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: stretch;
	height: 3.25rem;
	border-radius: 100px;
	line-height: 1.5rem;
	color: var(--text-primary);
	font-size: 1rem;
	width: 100%;
	border: 1px solid #ddd;
	padding: 0 20px;
  }
  .phtypeableLabel {
	cursor: var(--cursor);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
  }

  .phtypeableLabelTextPositioner {
	--placeholder-transition: transform .08s ease-in-out;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0 20px;
	display: flex;
	align-items: center;
	transition: var(--placeholder-transition);
	transform: translateY(-50%);
  }
  .phtypeableLabelText {
	--horizontal-padding: 6px;
	background-color: #fff;
	padding: 1px 10px;
	transition: 3s;
	color: #666;
	font-size:14px;
	line-height: 1;
	font-weight: normal;
	cursor: var(--cursor);
	transform: translate(calc(-1 * var(--horizontal-padding)));
  }
  .phinputDecorationCountryCode {
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
	margin-right: var(--padding-SM);
  }
  .phinputDecorationCountryCode::before {
	content: "+";
  }
  .phinput{
	background-color: transparent;
	outline: none;
	border: 0;
	font: inherit;
	width: 100%;
	padding: 0;
  }
  .phinput::placeholder {
	opacity: 0;
  }


  

/*======== Country code with flag css =========*/


.form-group .ph-code > label {margin-left:50px;}

.form-group .iti .form-control::placeholder {
  color: #ccc;
  opacity: 1;
}
.iti {
  position: relative;
  display: inline-block;
width: 100%;  }
  .iti * {
    box-sizing: border-box;
    -moz-box-sizing: border-box; }
  .iti__hide {
    display: none; }
  .iti__v-hide {
    visibility: hidden; }
  .iti input, .iti input[type=text], .iti input[type=tel] {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 36px;
    margin-right: 0; }
  .iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 1px; }
  .iti__selected-flag {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 6px 0 16px; }
  .iti__arrow {
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #555; }
    .iti__arrow--up {
      border-top: none;
      border-bottom: 4px solid #555; }
  .iti__country-list {
    position: absolute;
    z-index: 99;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 0 -1px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    background-color: white;
    border: 1px solid #CCC;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; }
    .iti__country-list--dropup {
      bottom: 100%;
      margin-bottom: -1px; }
    @media (max-width: 500px) {
      .iti__country-list {
        white-space: normal; } }
  .iti__flag-box {
    display: inline-block;
    width: 20px; }
  .iti__divider {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #CCC; }
  .iti__country {
    padding: 5px 10px;
    outline: none; }
  .iti__dial-code {
    color: #999; }
  .iti__country.iti__highlight {
    background-color: rgba(0, 0, 0, 0.05); }
  .iti__flag-box, .iti__country-name, .iti__dial-code {
    vertical-align: middle; }
  .iti__flag-box, .iti__country-name {
    margin-right: 6px;color: #000; }
  .iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
    padding-right: 6px;
    padding-left: 52px;
    margin-left: 0; }
  .iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
    right: auto;
    left: 0; }
  .iti--allow-dropdown .iti__flag-container:hover {
    cursor: pointer; }
    .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
      background-color: rgba(0, 0, 0, 0.05); }
  .iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
  .iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
    cursor: default; }
    .iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
    .iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
      background-color: transparent; }
  .iti--separate-dial-code .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0); }
  .iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 6px; color: #000;}
  .iti--container {
    position: absolute;
    top: -1000px;
    left: -1000px;
    z-index: 1060;
    padding: 1px; }
    .iti--container:hover {
      cursor: pointer; }

.iti-mobile .iti--container {
  top: 30px;
  bottom: 30px;
  left: 30px;
  right: 30px;
  position: fixed; }

.iti-mobile .iti__country-list {
  max-height: 100%;
  width: 100%; }

.iti-mobile .iti__country {
  padding: 10px 10px;
  line-height: 1.5em; }

.iti__flag {
  width: 20px; }
  .iti__flag.iti__be {
    width: 18px; }
  .iti__flag.iti__ch {
    width: 15px; }
  .iti__flag.iti__mc {
    width: 19px; }
  .iti__flag.iti__ne {
    width: 18px; }
  .iti__flag.iti__np {
    width: 13px; }
  .iti__flag.iti__va {
    width: 15px; }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
      background-size: 5652px 15px; } }
  .iti__flag.iti__ac {
    height: 10px;
    background-position: 0px 0px; }
  .iti__flag.iti__ad {
    height: 14px;
    background-position: -22px 0px; }
  .iti__flag.iti__ae {
    height: 10px;
    background-position: -44px 0px; }
  .iti__flag.iti__af {
    height: 14px;
    background-position: -66px 0px; }
  .iti__flag.iti__ag {
    height: 14px;
    background-position: -88px 0px; }
  .iti__flag.iti__ai {
    height: 10px;
    background-position: -110px 0px; }
  .iti__flag.iti__al {
    height: 15px;
    background-position: -132px 0px; }
  .iti__flag.iti__am {
    height: 10px;
    background-position: -154px 0px; }
  .iti__flag.iti__ao {
    height: 14px;
    background-position: -176px 0px; }
  .iti__flag.iti__aq {
    height: 14px;
    background-position: -198px 0px; }
  .iti__flag.iti__ar {
    height: 13px;
    background-position: -220px 0px; }
  .iti__flag.iti__as {
    height: 10px;
    background-position: -242px 0px; }
  .iti__flag.iti__at {
    height: 14px;
    background-position: -264px 0px; }
  .iti__flag.iti__au {
    height: 10px;
    background-position: -286px 0px; }
  .iti__flag.iti__aw {
    height: 14px;
    background-position: -308px 0px; }
  .iti__flag.iti__ax {
    height: 13px;
    background-position: -330px 0px; }
  .iti__flag.iti__az {
    height: 10px;
    background-position: -352px 0px; }
  .iti__flag.iti__ba {
    height: 10px;
    background-position: -374px 0px; }
  .iti__flag.iti__bb {
    height: 14px;
    background-position: -396px 0px; }
  .iti__flag.iti__bd {
    height: 12px;
    background-position: -418px 0px; }
  .iti__flag.iti__be {
    height: 15px;
    background-position: -440px 0px; }
  .iti__flag.iti__bf {
    height: 14px;
    background-position: -460px 0px; }
  .iti__flag.iti__bg {
    height: 12px;
    background-position: -482px 0px; }
  .iti__flag.iti__bh {
    height: 12px;
    background-position: -504px 0px; }
  .iti__flag.iti__bi {
    height: 12px;
    background-position: -526px 0px; }
  .iti__flag.iti__bj {
    height: 14px;
    background-position: -548px 0px; }
  .iti__flag.iti__bl {
    height: 14px;
    background-position: -570px 0px; }
  .iti__flag.iti__bm {
    height: 10px;
    background-position: -592px 0px; }
  .iti__flag.iti__bn {
    height: 10px;
    background-position: -614px 0px; }
  .iti__flag.iti__bo {
    height: 14px;
    background-position: -636px 0px; }
  .iti__flag.iti__bq {
    height: 14px;
    background-position: -658px 0px; }
  .iti__flag.iti__br {
    height: 14px;
    background-position: -680px 0px; }
  .iti__flag.iti__bs {
    height: 10px;
    background-position: -702px 0px; }
  .iti__flag.iti__bt {
    height: 14px;
    background-position: -724px 0px; }
  .iti__flag.iti__bv {
    height: 15px;
    background-position: -746px 0px; }
  .iti__flag.iti__bw {
    height: 14px;
    background-position: -768px 0px; }
  .iti__flag.iti__by {
    height: 10px;
    background-position: -790px 0px; }
  .iti__flag.iti__bz {
    height: 14px;
    background-position: -812px 0px; }
  .iti__flag.iti__ca {
    height: 10px;
    background-position: -834px 0px; }
  .iti__flag.iti__cc {
    height: 10px;
    background-position: -856px 0px; }
  .iti__flag.iti__cd {
    height: 15px;
    background-position: -878px 0px; }
  .iti__flag.iti__cf {
    height: 14px;
    background-position: -900px 0px; }
  .iti__flag.iti__cg {
    height: 14px;
    background-position: -922px 0px; }
  .iti__flag.iti__ch {
    height: 15px;
    background-position: -944px 0px; }
  .iti__flag.iti__ci {
    height: 14px;
    background-position: -961px 0px; }
  .iti__flag.iti__ck {
    height: 10px;
    background-position: -983px 0px; }
  .iti__flag.iti__cl {
    height: 14px;
    background-position: -1005px 0px; }
  .iti__flag.iti__cm {
    height: 14px;
    background-position: -1027px 0px; }
  .iti__flag.iti__cn {
    height: 14px;
    background-position: -1049px 0px; }
  .iti__flag.iti__co {
    height: 14px;
    background-position: -1071px 0px; }
  .iti__flag.iti__cp {
    height: 14px;
    background-position: -1093px 0px; }
  .iti__flag.iti__cr {
    height: 12px;
    background-position: -1115px 0px; }
  .iti__flag.iti__cu {
    height: 10px;
    background-position: -1137px 0px; }
  .iti__flag.iti__cv {
    height: 12px;
    background-position: -1159px 0px; }
  .iti__flag.iti__cw {
    height: 14px;
    background-position: -1181px 0px; }
  .iti__flag.iti__cx {
    height: 10px;
    background-position: -1203px 0px; }
  .iti__flag.iti__cy {
    height: 14px;
    background-position: -1225px 0px; }
  .iti__flag.iti__cz {
    height: 14px;
    background-position: -1247px 0px; }
  .iti__flag.iti__de {
    height: 12px;
    background-position: -1269px 0px; }
  .iti__flag.iti__dg {
    height: 10px;
    background-position: -1291px 0px; }
  .iti__flag.iti__dj {
    height: 14px;
    background-position: -1313px 0px; }
  .iti__flag.iti__dk {
    height: 15px;
    background-position: -1335px 0px; }
  .iti__flag.iti__dm {
    height: 10px;
    background-position: -1357px 0px; }
  .iti__flag.iti__do {
    height: 14px;
    background-position: -1379px 0px; }
  .iti__flag.iti__dz {
    height: 14px;
    background-position: -1401px 0px; }
  .iti__flag.iti__ea {
    height: 14px;
    background-position: -1423px 0px; }
  .iti__flag.iti__ec {
    height: 14px;
    background-position: -1445px 0px; }
  .iti__flag.iti__ee {
    height: 13px;
    background-position: -1467px 0px; }
  .iti__flag.iti__eg {
    height: 14px;
    background-position: -1489px 0px; }
  .iti__flag.iti__eh {
    height: 10px;
    background-position: -1511px 0px; }
  .iti__flag.iti__er {
    height: 10px;
    background-position: -1533px 0px; }
  .iti__flag.iti__es {
    height: 14px;
    background-position: -1555px 0px; }
  .iti__flag.iti__et {
    height: 10px;
    background-position: -1577px 0px; }
  .iti__flag.iti__eu {
    height: 14px;
    background-position: -1599px 0px; }
  .iti__flag.iti__fi {
    height: 12px;
    background-position: -1621px 0px; }
  .iti__flag.iti__fj {
    height: 10px;
    background-position: -1643px 0px; }
  .iti__flag.iti__fk {
    height: 10px;
    background-position: -1665px 0px; }
  .iti__flag.iti__fm {
    height: 11px;
    background-position: -1687px 0px; }
  .iti__flag.iti__fo {
    height: 15px;
    background-position: -1709px 0px; }
  .iti__flag.iti__fr {
    height: 14px;
    background-position: -1731px 0px; }
  .iti__flag.iti__ga {
    height: 15px;
    background-position: -1753px 0px; }
  .iti__flag.iti__gb {
    height: 10px;
    background-position: -1775px 0px; }
  .iti__flag.iti__gd {
    height: 12px;
    background-position: -1797px 0px; }
  .iti__flag.iti__ge {
    height: 14px;
    background-position: -1819px 0px; }
  .iti__flag.iti__gf {
    height: 14px;
    background-position: -1841px 0px; }
  .iti__flag.iti__gg {
    height: 14px;
    background-position: -1863px 0px; }
  .iti__flag.iti__gh {
    height: 14px;
    background-position: -1885px 0px; }
  .iti__flag.iti__gi {
    height: 10px;
    background-position: -1907px 0px; }
  .iti__flag.iti__gl {
    height: 14px;
    background-position: -1929px 0px; }
  .iti__flag.iti__gm {
    height: 14px;
    background-position: -1951px 0px; }
  .iti__flag.iti__gn {
    height: 14px;
    background-position: -1973px 0px; }
  .iti__flag.iti__gp {
    height: 14px;
    background-position: -1995px 0px; }
  .iti__flag.iti__gq {
    height: 14px;
    background-position: -2017px 0px; }
  .iti__flag.iti__gr {
    height: 14px;
    background-position: -2039px 0px; }
  .iti__flag.iti__gs {
    height: 10px;
    background-position: -2061px 0px; }
  .iti__flag.iti__gt {
    height: 13px;
    background-position: -2083px 0px; }
  .iti__flag.iti__gu {
    height: 11px;
    background-position: -2105px 0px; }
  .iti__flag.iti__gw {
    height: 10px;
    background-position: -2127px 0px; }
  .iti__flag.iti__gy {
    height: 12px;
    background-position: -2149px 0px; }
  .iti__flag.iti__hk {
    height: 14px;
    background-position: -2171px 0px; }
  .iti__flag.iti__hm {
    height: 10px;
    background-position: -2193px 0px; }
  .iti__flag.iti__hn {
    height: 10px;
    background-position: -2215px 0px; }
  .iti__flag.iti__hr {
    height: 10px;
    background-position: -2237px 0px; }
  .iti__flag.iti__ht {
    height: 12px;
    background-position: -2259px 0px; }
  .iti__flag.iti__hu {
    height: 10px;
    background-position: -2281px 0px; }
  .iti__flag.iti__ic {
    height: 14px;
    background-position: -2303px 0px; }
  .iti__flag.iti__id {
    height: 14px;
    background-position: -2325px 0px; }
  .iti__flag.iti__ie {
    height: 10px;
    background-position: -2347px 0px; }
  .iti__flag.iti__il {
    height: 15px;
    background-position: -2369px 0px; }
  .iti__flag.iti__im {
    height: 10px;
    background-position: -2391px 0px; }
  .iti__flag.iti__in {

    background-position: -2413px 0px; }
  .iti__flag.iti__io {
    height: 10px;
    background-position: -2435px 0px; }
  .iti__flag.iti__iq {
    height: 14px;
    background-position: -2457px 0px; }
  .iti__flag.iti__ir {
    height: 12px;
    background-position: -2479px 0px; }
  .iti__flag.iti__is {
    height: 15px;
    background-position: -2501px 0px; }
  .iti__flag.iti__it {
    height: 14px;
    background-position: -2523px 0px; }
  .iti__flag.iti__je {
    height: 12px;
    background-position: -2545px 0px; }
  .iti__flag.iti__jm {
    height: 10px;
    background-position: -2567px 0px; }
  .iti__flag.iti__jo {
    height: 10px;
    background-position: -2589px 0px; }
  .iti__flag.iti__jp {
    height: 14px;
    background-position: -2611px 0px; }
  .iti__flag.iti__ke {
    height: 14px;
    background-position: -2633px 0px; }
  .iti__flag.iti__kg {
    height: 12px;
    background-position: -2655px 0px; }
  .iti__flag.iti__kh {
    height: 13px;
    background-position: -2677px 0px; }
  .iti__flag.iti__ki {
    height: 10px;
    background-position: -2699px 0px; }
  .iti__flag.iti__km {
    height: 12px;
    background-position: -2721px 0px; }
  .iti__flag.iti__kn {
    height: 14px;
    background-position: -2743px 0px; }
  .iti__flag.iti__kp {
    height: 10px;
    background-position: -2765px 0px; }
  .iti__flag.iti__kr {
    height: 14px;
    background-position: -2787px 0px; }
  .iti__flag.iti__kw {
    height: 10px;
    background-position: -2809px 0px; }
  .iti__flag.iti__ky {
    height: 10px;
    background-position: -2831px 0px; }
  .iti__flag.iti__kz {
    height: 10px;
    background-position: -2853px 0px; }
  .iti__flag.iti__la {
    height: 14px;
    background-position: -2875px 0px; }
  .iti__flag.iti__lb {
    height: 14px;
    background-position: -2897px 0px; }
  .iti__flag.iti__lc {
    height: 10px;
    background-position: -2919px 0px; }
  .iti__flag.iti__li {
    height: 12px;
    background-position: -2941px 0px; }
  .iti__flag.iti__lk {
    height: 10px;
    background-position: -2963px 0px; }
  .iti__flag.iti__lr {
    height: 11px;
    background-position: -2985px 0px; }
  .iti__flag.iti__ls {
    height: 14px;
    background-position: -3007px 0px; }
  .iti__flag.iti__lt {
    height: 12px;
    background-position: -3029px 0px; }
  .iti__flag.iti__lu {
    height: 12px;
    background-position: -3051px 0px; }
  .iti__flag.iti__lv {
    height: 10px;
    background-position: -3073px 0px; }
  .iti__flag.iti__ly {
    height: 10px;
    background-position: -3095px 0px; }
  .iti__flag.iti__ma {
    height: 14px;
    background-position: -3117px 0px; }
  .iti__flag.iti__mc {
    height: 15px;
    background-position: -3139px 0px; }
  .iti__flag.iti__md {
    height: 10px;
    background-position: -3160px 0px; }
  .iti__flag.iti__me {
    height: 10px;
    background-position: -3182px 0px; }
  .iti__flag.iti__mf {
    height: 14px;
    background-position: -3204px 0px; }
  .iti__flag.iti__mg {
    height: 14px;
    background-position: -3226px 0px; }
  .iti__flag.iti__mh {
    height: 11px;
    background-position: -3248px 0px; }
  .iti__flag.iti__mk {
    height: 10px;
    background-position: -3270px 0px; }
  .iti__flag.iti__ml {
    height: 14px;
    background-position: -3292px 0px; }
  .iti__flag.iti__mm {
    height: 14px;
    background-position: -3314px 0px; }
  .iti__flag.iti__mn {
    height: 10px;
    background-position: -3336px 0px; }
  .iti__flag.iti__mo {
    height: 14px;
    background-position: -3358px 0px; }
  .iti__flag.iti__mp {
    height: 10px;
    background-position: -3380px 0px; }
  .iti__flag.iti__mq {
    height: 14px;
    background-position: -3402px 0px; }
  .iti__flag.iti__mr {
    height: 14px;
    background-position: -3424px 0px; }
  .iti__flag.iti__ms {
    height: 10px;
    background-position: -3446px 0px; }
  .iti__flag.iti__mt {
    height: 14px;
    background-position: -3468px 0px; }
  .iti__flag.iti__mu {
    height: 14px;
    background-position: -3490px 0px; }
  .iti__flag.iti__mv {
    height: 14px;
    background-position: -3512px 0px; }
  .iti__flag.iti__mw {
    height: 14px;
    background-position: -3534px 0px; }
  .iti__flag.iti__mx {
    height: 12px;
    background-position: -3556px 0px; }
  .iti__flag.iti__my {
    height: 10px;
    background-position: -3578px 0px; }
  .iti__flag.iti__mz {
    height: 14px;
    background-position: -3600px 0px; }
  .iti__flag.iti__na {
    height: 14px;
    background-position: -3622px 0px; }
  .iti__flag.iti__nc {
    height: 10px;
    background-position: -3644px 0px; }
  .iti__flag.iti__ne {
    height: 15px;
    background-position: -3666px 0px; }
  .iti__flag.iti__nf {
    height: 10px;
    background-position: -3686px 0px; }
  .iti__flag.iti__ng {
    height: 10px;
    background-position: -3708px 0px; }
  .iti__flag.iti__ni {
    height: 12px;
    background-position: -3730px 0px; }
  .iti__flag.iti__nl {
    height: 14px;
    background-position: -3752px 0px; }
  .iti__flag.iti__no {
    height: 15px;
    background-position: -3774px 0px; }
  .iti__flag.iti__np {
    height: 15px;
    background-position: -3796px 0px; }
  .iti__flag.iti__nr {
    height: 10px;
    background-position: -3811px 0px; }
  .iti__flag.iti__nu {
    height: 10px;
    background-position: -3833px 0px; }
  .iti__flag.iti__nz {
    height: 10px;
    background-position: -3855px 0px; }
  .iti__flag.iti__om {
    height: 10px;
    background-position: -3877px 0px; }
  .iti__flag.iti__pa {
    height: 14px;
    background-position: -3899px 0px; }
  .iti__flag.iti__pe {
    height: 14px;
    background-position: -3921px 0px; }
  .iti__flag.iti__pf {
    height: 14px;
    background-position: -3943px 0px; }
  .iti__flag.iti__pg {
    height: 15px;
    background-position: -3965px 0px; }
  .iti__flag.iti__ph {
    height: 10px;
    background-position: -3987px 0px; }
  .iti__flag.iti__pk {
    height: 14px;
    background-position: -4009px 0px; }
  .iti__flag.iti__pl {
    height: 13px;
    background-position: -4031px 0px; }
  .iti__flag.iti__pm {
    height: 14px;
    background-position: -4053px 0px; }
  .iti__flag.iti__pn {
    height: 10px;
    background-position: -4075px 0px; }
  .iti__flag.iti__pr {
    height: 14px;
    background-position: -4097px 0px; }
  .iti__flag.iti__ps {
    height: 10px;
    background-position: -4119px 0px; }
  .iti__flag.iti__pt {
    height: 14px;
    background-position: -4141px 0px; }
  .iti__flag.iti__pw {
    height: 13px;
    background-position: -4163px 0px; }
  .iti__flag.iti__py {
    height: 11px;
    background-position: -4185px 0px; }
  .iti__flag.iti__qa {
    height: 8px;
    background-position: -4207px 0px; }
  .iti__flag.iti__re {
    height: 14px;
    background-position: -4229px 0px; }
  .iti__flag.iti__ro {
    height: 14px;
    background-position: -4251px 0px; }
  .iti__flag.iti__rs {
    height: 14px;
    background-position: -4273px 0px; }
  .iti__flag.iti__ru {
    height: 14px;
    background-position: -4295px 0px; }
  .iti__flag.iti__rw {
    height: 14px;
    background-position: -4317px 0px; }
  .iti__flag.iti__sa {
    height: 14px;
    background-position: -4339px 0px; }
  .iti__flag.iti__sb {
    height: 10px;
    background-position: -4361px 0px; }
  .iti__flag.iti__sc {
    height: 10px;
    background-position: -4383px 0px; }
  .iti__flag.iti__sd {
    height: 10px;
    background-position: -4405px 0px; }
  .iti__flag.iti__se {
    height: 13px;
    background-position: -4427px 0px; }
  .iti__flag.iti__sg {
    height: 14px;
    background-position: -4449px 0px; }
  .iti__flag.iti__sh {
    height: 10px;
    background-position: -4471px 0px; }
  .iti__flag.iti__si {
    height: 10px;
    background-position: -4493px 0px; }
  .iti__flag.iti__sj {
    height: 15px;
    background-position: -4515px 0px; }
  .iti__flag.iti__sk {
    height: 14px;
    background-position: -4537px 0px; }
  .iti__flag.iti__sl {
    height: 14px;
    background-position: -4559px 0px; }
  .iti__flag.iti__sm {
    height: 15px;
    background-position: -4581px 0px; }
  .iti__flag.iti__sn {
    height: 14px;
    background-position: -4603px 0px; }
  .iti__flag.iti__so {
    height: 14px;
    background-position: -4625px 0px; }
  .iti__flag.iti__sr {
    height: 14px;
    background-position: -4647px 0px; }
  .iti__flag.iti__ss {
    height: 10px;
    background-position: -4669px 0px; }
  .iti__flag.iti__st {
    height: 10px;
    background-position: -4691px 0px; }
  .iti__flag.iti__sv {
    height: 12px;
    background-position: -4713px 0px; }
  .iti__flag.iti__sx {
    height: 14px;
    background-position: -4735px 0px; }
  .iti__flag.iti__sy {
    height: 14px;
    background-position: -4757px 0px; }
  .iti__flag.iti__sz {
    height: 14px;
    background-position: -4779px 0px; }
  .iti__flag.iti__ta {
    height: 10px;
    background-position: -4801px 0px; }
  .iti__flag.iti__tc {
    height: 10px;
    background-position: -4823px 0px; }
  .iti__flag.iti__td {
    height: 14px;
    background-position: -4845px 0px; }
  .iti__flag.iti__tf {
    height: 14px;
    background-position: -4867px 0px; }
  .iti__flag.iti__tg {
    height: 13px;
    background-position: -4889px 0px; }
  .iti__flag.iti__th {
    height: 14px;
    background-position: -4911px 0px; }
  .iti__flag.iti__tj {
    height: 10px;
    background-position: -4933px 0px; }
  .iti__flag.iti__tk {
    height: 10px;
    background-position: -4955px 0px; }
  .iti__flag.iti__tl {
    height: 10px;
    background-position: -4977px 0px; }
  .iti__flag.iti__tm {
    height: 14px;
    background-position: -4999px 0px; }
  .iti__flag.iti__tn {
    height: 14px;
    background-position: -5021px 0px; }
  .iti__flag.iti__to {
    height: 10px;
    background-position: -5043px 0px; }
  .iti__flag.iti__tr {
    height: 14px;
    background-position: -5065px 0px; }
  .iti__flag.iti__tt {
    height: 12px;
    background-position: -5087px 0px; }
  .iti__flag.iti__tv {
    height: 10px;
    background-position: -5109px 0px; }
  .iti__flag.iti__tw {
    height: 14px;
    background-position: -5131px 0px; }
  .iti__flag.iti__tz {
    height: 14px;
    background-position: -5153px 0px; }
  .iti__flag.iti__ua {
    height: 14px;
    background-position: -5175px 0px; }
  .iti__flag.iti__ug {
    height: 14px;
    background-position: -5197px 0px; }
  .iti__flag.iti__um {
    height: 11px;
    background-position: -5219px 0px; }
  .iti__flag.iti__un {
    height: 14px;
    background-position: -5241px 0px; }
  .iti__flag.iti__us {
    height: 11px;
    background-position: -5263px 0px; }
  .iti__flag.iti__uy {
    height: 14px;
    background-position: -5285px 0px; }
  .iti__flag.iti__uz {
    height: 10px;
    background-position: -5307px 0px; }
  .iti__flag.iti__va {
    height: 15px;
    background-position: -5329px 0px; }
  .iti__flag.iti__vc {
    height: 14px;
    background-position: -5346px 0px; }
  .iti__flag.iti__ve {
    height: 14px;
    background-position: -5368px 0px; }
  .iti__flag.iti__vg {
    height: 10px;
    background-position: -5390px 0px; }
  .iti__flag.iti__vi {
    height: 14px;
    background-position: -5412px 0px; }
  .iti__flag.iti__vn {
    height: 14px;
    background-position: -5434px 0px; }
  .iti__flag.iti__vu {
    height: 12px;
    background-position: -5456px 0px; }
  .iti__flag.iti__wf {
    height: 14px;
    background-position: -5478px 0px; }
  .iti__flag.iti__ws {
    height: 10px;
    background-position: -5500px 0px; }
  .iti__flag.iti__xk {
    height: 15px;
    background-position: -5522px 0px; }
  .iti__flag.iti__ye {
    height: 14px;
    background-position: -5544px 0px; }
  .iti__flag.iti__yt {
    height: 14px;
    background-position: -5566px 0px; }
  .iti__flag.iti__za {
    height: 14px;
    background-position: -5588px 0px; }
  .iti__flag.iti__zm {
    height: 14px;
    background-position: -5610px 0px; }
  .iti__flag.iti__zw {
    height: 10px;
    background-position: -5632px 0px; }

.iti__flag {
  height: 15px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("../img/flags.png");
  background-repeat: no-repeat;
  background-color: #DBDBDB;
  background-position: 20px 0; 
  
  }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
      /*background-image: url("../img/flags@2x.png");*/} }

.iti__flag.iti__np {
  background-color: transparent; }

/*============= Css 06-08-2025 ================*/

.articleHolder h1 {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
.articleHolder ul {list-style-type: square;margin-bottom: 20px;}
.articleHolder ul li {line-height: 30px;}

.articleHolder h2 {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
.articleHolder iframe {margin-bottom: 30px;}

.articleHolder ol {list-style: none;padding: 0;}
.articleHolder ol li {position: relative;}
.articleHolder ol li  strong {font-size: 18px; padding-left: 20px;}
.articleHolder ol li  strong::before {position: absolute; content: 'Q.';left: 0; top: 0;}
.articleHolder ol li p {margin-bottom: 10px;}

#nav-notifications #notifForm .notif-section {padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
#nav-syndication .int-content .int-box2 {margin:0 0 20px;}


/*============== Css 23-01-2026 ===============*/
/*
.wp-settingsform {}
.btn-grp {}
.btn-grp .btn-success {background-color: #004388;}
*/

#facebook_control, #telegram_control, #email_control, #twitter_control {text-align:right;}



/*--------------------------------------------------------------
# Responsive Css
--------------------------------------------------------------*/

@media (max-width:1440px) {
	.structurePart .form-group label {
		display: block;
	}

	.structurePart ul li a {
		display: inline-block;
		margin-bottom: 5px;
	}

}

@media (max-width:1360px) {
	.dpr-header {
		display: block;
		height: auto;
	}

	.dpr-header h2 {
		font-size: 20px;
	}

}

@media (max-width:1200px) {
	.pricePlan {
		display: block;
	}

	.planRight {
		margin-top: 30px;
	}

	.page-title {
		padding: 100px 0 20px 0;
	}

	.big-search-area input#search-bar {
		height: 50px;
	}

	.big-search-area .search-icon {
		height: 50px;
		font-size: 20px;
	}

	.OuterDiv {
		width: 100%;
	}

	.form-check-inline {
		margin-bottom: 20px;
		margin-right: 0;
	}

	.structurePart .form-group label span {
		float: none;
		margin-bottom: 10px;
		display: block;
	}

	#sidebar {
		max-width: 250px;
	}

}

@media (max-width: 991px) {
	.dashboard-banner {
		min-height: auto;
		text-align: center;
	}

	.dashboard-banner img {
		position: relative;
		top: 0;
		right: 0;
		left: 0;
		margin: 30px auto 0;
		display: block;
	}

	.topFilter {
		margin-top: 40px;
	}

	.brandSelectBox .form-group,
	.brandSelectBox2 .form-group {
		margin-bottom: 10px;
	}

	.sec-1 {
		margin-top: 20px;
	}

	.dashboard-body h3 {
		display: block;
	}

	.dashboard-body h3 span {
		margin-top: 20px;
	}

	.topFilter h3 .form-select {
		margin: 0 0 0px;
	}

	.tableHolder {
		overflow-x: scroll;
	}

	.oc-magic {
		display: block;
		padding: 0 10px;
	}

	.oc-disabled .disabledBlock {
		display: inline-block;
		vertical-align: top;
		padding-right: 10px;
	}

	.disabledBlock {
		width: 24%;
	}

	.pa-rbox-info {
		display: block;
	}

	.pa-rbox-info span {
		display: block;
	}

	.bil-trial-box {
		padding: 10px 30px;
	}

	.bil-cancel-warn {
		font-size: 14px;
		line-height: 18px;
	}

	.dashboard-body h3 span a {
		font-size: 16px;
	}

	#sidebar {
		width: auto;
		height: auto;
		position: relative !important;
		max-width: 100% !important;
		float: none;
	}

	.countBlock {
		margin-bottom: 10px;
	}
}

@media (max-width: 768px) {
	.rightBtns {
		display: grid;
		gap: 10px;
	}

	.header .header-container {
		padding: 10px 15px 10px 15px;
		border-radius: 15px;
		width: 96%;
	}

	.dashboard-body {
		padding: 80px 0;
	}

	.add-row-table td,
	.add-row-table th {
		padding: 15px 5px;
	}

	.add-row-table thead th button.generate-btn {
		padding: 5px 5px;
		min-height: 60px;
	}

	.tooltip {
		width: 200px;
	}

	.faq-section {
		width: 100%;
	}

	.page-title {
		padding: 130px 0 20px 0;
	}

	.OuterDiv {
		margin: 30px auto;
	}

	.add-row-table td,
	.add-row-table th {
		min-width: 160px;
	}

	.add-row-table thead th button.generate-btn {
		min-height: 40px;
	}

	#addRow td:last-child a i {
		font-size: 14px;
	}

	.switches-container {
		width: 6rem;
	}

	.form-section .text-wrap .text {
		position: relative;
	}

	.profileTab {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.dp-meta-cols {
		display: block;
	}

	.dp-meta-btn {
		width: 100%;
	}

	.dp-meta-value {
		margin-bottom: 15px;
	}

	.dp-meta-value {
		width: 100%;
	}

	.dp-meta-box {
		padding: 27px 25px 24px 25px;
	}

	.topFilter h3 {
		display: block;
	}

	.topFilter h3 .dp-publish-btn {
		margin-top: 20px;
	}

	.dp-info {
		display: block;
		text-align: center;
	}

	.dp-info div:first-child {
		float: left;
		margin-right: 20px;
	}

	.dp-info .btn-sm {
		padding: 10px 0px;
		margin-right: 20px;
	}

	.articleHolder {
		margin-top: 20px;
	}

	.footer .footer-about .logo img {
		max-height: 24px;
	}

	.dashboard-body h2 i {
		font-size: 20px;
	}

	.sec-1-header {
		display: block;
	}

	.sec-1-header h2 {
		margin-bottom: 20px;
	}

	.tool_form .addBtn {
		margin: 0 0 0 10px;
	}

	.sec-1-icon {
		margin-bottom: 10px;
	}

	.add-row-table td,
	.add-row-table th {
		padding: 15px 15px;
	}

	.settingsField .col-lg-4.mt-5,
	.settingsField .col-lg-8.mt-5,
	.structurePart .row.mt-5 {
		margin-top: 20px !important;
	}

	.structurePart {
		margin-top: 20px;
	}

	.dr-main-keyword {
		padding-right: 0;
	}

	.dr-main-keyword-gen {
		position: relative;
		margin-top: 10px;
	}

	.settingsField .row.gy-4 {
		--bs-gutter-y: 1rem;
	}

	.mediaHubFields {
		padding: 20px;
	}

	.seoPart .form-group textarea {
		margin-top: 20px;
	}

	.profileTab nav .nav-tabs {
		gap: 10px;
		justify-content: center;
	}

	.leftText {
		margin-bottom: 10px;
	}

	.int-box {
		padding: 15px;
		margin-top: 15px;
	}
}


@media (max-width:480px) {
	.header .header-container {
		padding: 10px 10px 10px 10px;
		margin: 0 auto;
		border-radius: 0;
	}

	.header {
		padding-top: 0px;
	}

	.about .about-title {
		font-size: 26px;
	}

	.hero .hero-content h1 br {
		display: none;
	}

	.header .logo img {
		max-height: 30px;
	}

	.hero {
		padding-top: 70px;
	}

	.hero .stats-row {
		margin-top: 20px !important;
	}

	.hero .stat-item {
		padding: 0 1.5rem;
	}

	.features-2,
	.about,
	.features,
	.features-cards {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.features-2 {
		padding-top: 0;
		padding-bottom: 20px;
	}

	.features .tab-pane h3,
	.pricing .section-title h2 {
		font-size: 26px;
	}

	.about .image-wrapper {
		margin-top: 1rem;
	}

	.call-to-action {
		padding: 0;
	}

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

	.features-2 .phone-mockup {
		margin: 0;
		padding: 0;
	}

	.faq .faq-title {
		font-size: 26px;
	}

	.faq .faq-container .faq-item {
		padding: 10px 0;
		margin-bottom: 0;
	}

	.contact .section-title {
		padding-bottom: 30px;
	}

	.contact .contact-form .form-control,
	.contact .contact-form .form-select {
		padding: 8px 15px;
	}

	.faq .faq-container .faq-item h3 {
		margin: 0 40px 0 0;
	}

	.switches-container {
		width: 6rem;
	}

	.pricing-table {
		padding: 20px;
		margin-top: 0px;
	}

	.pricing-table {
		height: auto;
	}

	.pricing .pricing-card {
		padding: 1rem;
	}

	.pricing .pricing-card .description {
		margin-bottom: 1rem;
	}

	.pricing .pricing-card .features-list li {
		margin-bottom: 0;
	}

	.pricing .pricing-card.popular h3 {
		margin-top: 20px;
	}

	.pricing .pricing-card .price .amount {
		font-size: 2.5rem;
	}

	.switcher {
		display: block;
		margin-top: 20px;
	}

	.switcher span {
		display: block;
		margin: 24px 0;
	}

	.pricing-inner {
		padding: 0;
	}

	.priceTab {
		max-width: 100%;
	}

	.dashboard-body {
		padding: 40px 0 0;
	}

	.tbleDivHolder {
		display: block;
	}

	.topMargin {
		padding-top: 70px !important;
		padding-bottom: 0;
	}

	.content-block blockquote {
		font-size: 14px;
	}

	.dr-box {
		display: block;
	}

	.dr-save-btn {
		text-align: left;
	}

	.mediaHubFields {
		padding: 30px 20px;
	}

	.dashboard-body h3 span .form-select {
		width: 120px;
	}

	.rightBtns {
		display: flex;
		gap: 0;
		justify-content: right;
		margin: 0;
		padding: 0;
	}

	.service-box-items {
		height: 97%;
		padding: 10px 10px;
	}

	.page-title {
		padding: 100px 0 20px 0;
	}

	.footer .footer-top {
		padding-top: 20px;
	}

	.form-section {
		align-items: normal;
		padding: 30px 0;
	}

	.login-wrap h3 {
		font-size: 22px;
	}

	.form-section .text-wrap img {
		max-height: 34px;
	}

	.humanizer-sec textarea {
		min-height: 70px;
	}

	.features .tab-content .tab-pane img {
		border: 4px solid #444;
		border-radius: 20px;
		min-height: 200px;
	}

	.features-cards .feature-box {
		padding: 20px 20px;
	}

	.features-cards .feature-box i {
		margin-bottom: 10px;
	}

	.faq-9 {
		padding: 30px 0;
	}

	.faq .faq-container .faq-item {
		padding: 10px 0 0;
	}

	.rightBtns li:last-child {
		margin-left: 10px;
	}

	.about .feature-list li {
		margin-bottom: 0;
	}

	.about .image-wrapper .main-image,
	.about .image-wrapper .small-image {
		height: 150px;
		object-fit: cover;
		object-position: 100% 30%;
	}

	.contact .contact-form p {
		margin-bottom: 1rem;
	}

	.webLinkBox .form-group label {
		display: block;
	}

	.webLinkBox .form-group label span {
		display: block;
	}

	.sec-6-header h2,
	.sec-6-header span:last-child {
		display: block;
	}

	.disabledBlock {
		width: 100%;
	}

	.sec-9 {
		margin-top: 20px;
	}

	.dp-ibox-btn {
		position: initial;
		top: 0;
		margin-top: 10px;
		padding: 5px 16px;
	}

	.oaik-input {
		display: block;
		width: 100%;
	}

	#openai_form {
		display: block;
	}

	.oaik-input {
		margin-bottom: 10px;
	}

	.billingContent h3 {
		margin-top: 20px;
	}

	.pricing-inner h2 {
		font-size: 26px;
	}

	.pricing-table__title.large,
	.pricing-table__title.medium {
		margin-top: 0;
	}
}

@media (max-width:400px) {
	.btn-create {
		padding: 4px 10px;
		margin: 0;
	}

	.header .logo img {
		max-height: 24px;
	}

	.profile .img-box {
		width: 28px;
		height: 28px;
	}

	.profile .user h5 {
		display: none;
	}

	.switches-container {
		width: 5rem;
	}

}