/*
Template Name: NewsZ - Online Newspaper, Journal, and Magazine HTML Website Template.
Author: MhrTheme
Version: 1.0.0

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
Template.

This files contents are outlined below >>>>

Search Each Section As It Comments, You Will Get The Right Section.

*******************************************
*******************************************

==== CSS INDEX

Imported CSS
Default CSS
Button CSS
Section Area CSS
Go Top CSS
Header Area CSS
Footer Area CSS
Page Title Area CSS
Coming Soon Area CSS
404 Page Error Area CSS
Accordion Area CSS
Team Area CSS
Testimonial Area CSS
Blog Area CSS
Pagination Area CSS
Blog Sidebar Area CSS
Blog Details Area CSS
About Area CSS
Counter Area CSS
Tabs Area CSS
Contact Area CSS
Photo Gallery Area CSS
Main Slider Area CSS
Breaking News Area CSS
Top View Area CSS
Banner Area CSS
Dark Homepage CSS
RTL Homepage CSS
Ad Area CSS

/*

/*
Imported CSS
<<<<======================================================>>>>*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

/*
Default CSS
<<<<======================================================>>>>*/
:root {
  --mainColor: #016fa9;
  --secondaryColor: #f36c20;
  --bgColor: #f9fafb;
  --headingColor: #354a5e;
  --whiteColor: #ffffff;
  --backgroundColor: #f1efef;
  --blackColor: #222222;
  --subheading: #767777;
  --borderColor: #c9c9c9;
  --green: #66c7c7;
  --tomato: #ef6a61;
  --primaryColor: #016fa9;
  /* #0d96e4; */
  --fontSize: 16px;
  --transition: 0.5s;
  --border-radius: 4px;
  --font-primary: "DM Sans", sans-serif;
  --font-secondary: "Poppins", sans-serif;
  --transition: 0.5s;
  --box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  --bg-dashboard: #0d96e4;
}

.primary-color {
  color: var(--mainColor) !important;
}

body {
  padding: 0;
  font-family: var(--font-primary);
}

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

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

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: slider-content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  font-size: 16px;
  color: var(--whiteColor);
  padding: 16px 30px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-transform: capitalize;
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  line-height: 1;
  background-color: var(--mainColor);
  border: none;
}

button,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  color: var(--whiteColor);
  background-color: #02517a;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
.form-select {
  min-height: 48px;
  color: #4b4b4b;
  border: 1px solid rgb(216, 216, 216);
  background-color: rgb(246 246 246 / 60%);
  border-radius: 8px;
  font-size: 15px;
  padding: 10px 20px;
  width: 100%;
}

textarea {
  color: #4b4b4b;
  border: 1px solid rgb(216, 216, 216);
  background-color: rgb(246 246 246 / 60%);
  border-radius: 8px;
  font-size: 15px;
  padding: 10px 20px;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
.form-select:focus,
textarea:focus {
  color: #000000;
  background-color: rgb(246, 246, 246);
  -webkit-box-shadow: unset;
  box-shadow: unset;
  outline: 0;
  border: 1px solid var(--mainColor) !important;
}

textarea {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    font-size: 15px;
    padding: 14px 24px;
  }
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

select:focus {
  box-shadow: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

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

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

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

abbr,
acronym {
  cursor: help;
}

mark,
ins {
  text-decoration: none;
}

big {
  font-size: 125%;
}

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

figure {
  margin: 1em 0;
}

table {
  width: 100%;
}

.fa-twitter::before {
  position: relative;
  /* bottom: 1px; */
  font-size: 12px;
  top: 1px;
  content: "𝕏" !important;
}

.footer-social-info1 li a .fa-twitter::before {
  font-size: 15px;
}

.bxl-twitter::before {
  position: relative;
  bottom: 3px;
  font-size: 17px;
  content: "𝕏" !important;
}

.single-team-inner .fa-twitter::before,
.single-team-inner .bxl-twitter::before {
  bottom: 0px;
}

/* Links
--------------------------------------------- */
a:hover,
a:active {
  outline: 0;
}

a {
  display: inline-block;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  color: var(--mainColor);
  text-decoration: none !important;
}

a:hover {
  text-decoration: none;
  color: var(--blackColor);
}

a:focus {
  text-decoration: none;
}

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

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

.bypostauthor {
  display: block;
}

#reply-title {
  margin: 10px 0;
  font-size: 1.2rem;
}

#reply-title small {
  display: block;
  margin-top: 10px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gallery-caption {
  display: block;
}

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

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

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

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

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

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

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

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

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

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

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

.alignright {
  /*rtl:ignore*/
  float: right;

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

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

/* Buttons
--------------------------------------------- */
button {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

button:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--headingColor);
  font-weight: 600;
  font-family: var(--font-secondary);
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  vertical-align: middle;
}

.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 20px;
  margin-bottom: 20px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--mainColor);
}

.owl-theme .owl-dots {
  line-height: 1;
}

.owl-theme .owl-dots .owl-dot span {
  background-color: var(--blackColor);
  width: 20px;
  height: 5px;
  border-radius: 4px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin-top: 0;
  margin-bottom: 0;
}

.owl-theme .owl-dots .owl-dot:hover span {
  background-color: var(--mainColor);
}

.owl-theme .owl-dots .owl-dot.active span {
  background-color: var(--mainColor);
  width: 30px;
}

p {
  font-size: 16px;
  line-height: 1 rem;
}

p:last-child {
  margin-bottom: 0;
}

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

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

.form-control,
input[type="search"] {
  height: 50px;
  color: #4b4b4b;
  border: 1px solid 1px solid rgb(216, 216, 216);
  background-color: rgb(246 246 246 / 60%);
  /* border-radius: 5px !important; */
  font-size: 15px;
  padding: 10px 20px;
  width: 100%;
}

.form-control::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder {
  color: #495057;
}

.form-control:-ms-input-placeholder,
input[type="search"]:-ms-input-placeholder {
  color: #495057;
}

.form-control::-ms-input-placeholder,
input[type="search"]::-ms-input-placeholder {
  color: #495057;
}

.form-control::placeholder,
input[type="search"]::placeholder {
  color: #495057;
}

.form-control:focus,
input[type="search"]:focus {
  color: #000000 !important;
  background-color: #eef6fa !important;
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important;
  outline: 0 !important;
  /* border: 1px solid var(--mainColor) !important; */
}

.form-control:hover:focus,
.form-control:focus,
input[type="search"]:hover:focus,
input[type="search"]:focus {
  -webkit-box-shadow: unset;
  box-shadow: unset;
  background: #eef6fa;
}

/* 
textarea.form-control {
    height: auto;
} */

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px;
}

.ptb-70 {
  padding-top: 70px;
  padding-bottom: 50px;
}

.pt-70 {
  padding-top: 70px;
}

.pb-70 {
  padding-bottom: 70px;
}

.ptb-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pt-40 {
  padding-top: 40px;
}

.pb-40 {
  padding-bottom: 40px;
}

.ptb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pt-20 {
  padding-top: 20px;
}

.pb-20 {
  padding-bottom: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.pl-55 {
  padding-left: 55px;
}

.bg-color {
  background-color: var(--bgColor);
}

.black-color {
  background-color: #121212;
}

.page .entry-content {
  padding-top: 40px;
  padding-bottom: 40px;
}

.page .entry-content h1,
.page .entry-content h2,
.page .entry-content h3,
.page .entry-content h4,
.page .entry-content h5,
.page .entry-content h6 {
  margin-bottom: 1rem;
}

.page.elementor-page .entry-content {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 419px) {
  .auto-container {
    max-width: 240px;
  }
}

@media (min-width: 420px) {
  .auto-container {
    max-width: 340px;
  }
}

@media (min-width: 576px) {
  .auto-container {
    max-width: 450px;
  }
}

@media (min-width: 992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 992px;
  }

  .auto-container {
    max-width: 700px;
  }
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1100px;
  }

  .auto-container {
    max-width: 1000px;
  }

  .sign-up-page-modal {
    width: 550px;
  }
}

.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  padding-right: 40px;
  padding-left: 40px;
}

.container-block-fluid {
  padding-right: 20px;
  padding-left: 20px;
}

@media (max-width: 767px) {
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    padding-right: var(--bs-gutter-x, 0.75rem) !important;
    padding-left: var(--bs-gutter-x, 0.75rem) !important;
  }

  .container-block-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
}

.container-fluid .row,
.container-block-fluid .row {
  padding: 0;
  margin: 0;
}

.container-fluid .full-col,
.container-block-fluid .full-col {
  padding: 0;
}

/*
Preloader Area CSS
<<<<======================================================>>>>*/
.preloader {
  position: fixed;
  z-index: 999999;
  background: var(--bgColor);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.preloader .lds-ripple {
  height: 100px;
  width: 100px;
  position: relative;
}

.preloader .lds-ripple .loader {
  border: 0 solid transparent;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  top: calc(50vh - 75px);
  left: calc(50vw - 75px);
}

.preloader .lds-ripple .loader:before {
  content: "";
  border: 1em solid var(--mainColor);
  border-radius: 50%;
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;
  opacity: 0;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.preloader .lds-ripple .loader:after {
  content: "";
  border: 1em solid var(--mainColor);
  border-radius: 50%;
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;
  opacity: 0;
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes loader {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

/*
Button CSS
<<<<======================================================>>>>*/
.default-btn {
  font-size: 16px;
  color: var(--whiteColor);
  padding: 16px 26px;
  line-height: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-transform: capitalize;
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  background-color: var(--mainColor);
}

.default-btn.icon {
  padding: 16px 30px 16px 60px;
}

.default-btn.icon i {
  position: absolute;
  left: 30px;
  top: 50%;
  right: initial;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 20px;
}

.default-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--mainColor);
  z-index: -1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.default-btn::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background-color: var(--mainColor);
  z-index: -1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.default-btn.active {
  color: var(--whiteColor);
  background-color: var(--blackColor);
  margin-right: 10px;
}

.default-btn.active::before {
  background-color: var(--mainColor);
}

.default-btn.active::after {
  background-color: var(--mainColor);
}

.default-btn:hover {
  color: var(--whiteColor);
}

.default-btn:hover::before {
  width: 50.2%;
}

.default-btn:hover::after {
  width: 50.2%;
}

.default-btn.extra-btn {
  margin: 20px auto;
  width: fit-content;
  display: flex;
}

.blog-area .default-btn.extra-btn {
  margin: 40px auto 20px;
}

/*
Section Area CSS
<<<<======================================================>>>>*/
.section-title {
  max-width: 900px;
  /* ----------------------------------------------------------------bkjsaofieu ----------------------------------------------------------------------*/
  margin: 20px auto 60px;
  text-align: center;
  position: relative;
}

.section-title::after {
  position: absolute;
  content: "";
  width: 25%;
  height: 4px;
  background: var(--mainColor);
  bottom: -10px;
  right: 38%;
  /* left: 0; */
}

.section-title2::after {
  position: absolute;
  content: "";
  width: 25%;
  height: 4px;
  background: var(--mainColor);
  bottom: -30px;
  /* right: 38%; */
  left: 0;
}

.container-block-fluid .section-title {
  padding: 0 20px;
}

.section-title span {
  color: var(--mainColor);
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.section-title h2 {
  font-size: 40px;
  margin-bottom: 15px;
  position: relative;
  display: block;
}

.section-title h2:last-child {
  margin-bottom: 0;
}

.section-title.white-title span {
  color: var(--whiteColor);
}

.section-title.white-title h2 {
  color: var(--whiteColor);
}

.section-title.white-title p {
  color: var(--whiteColor);
}

/*
Go Top Area CSS
<<<<======================================================>>>>*/
.go-top {
  position: fixed;
  cursor: pointer;
  top: 120%;
  right: 5%;
  background-color: var(--mainColor);
  z-index: 4;
  width: 40px;
  text-align: center;
  height: 42px;
  line-height: 42px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.9s;
  transition: 0.9s;
}

.go-top i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  color: var(--whiteColor);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 25px;
}

.go-top:hover {
  color: var(--whiteColor);
  background-color: var(--blackColor);
}

.go-top:hover i {
  color: var(--whiteColor);
}

.go-top.active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  right: 4%;
  top: 85.2%;
}

/*
Header Area CSS
<<<<======================================================>>>>*/
.main-header {
  position: relative;
  z-index: 180;
  margin-bottom: 0px;
  border-bottom: 1px solid #c8c8c8;
}

@media only screen and (max-width: 767px) {
  .main-header.style-two .header-ad {
    display: none;
  }

  .main-header.style-two .main-mainmenu {
    padding: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .main-header.style-two .header-ad {
    display: none;
  }

  .main-header.style-two .main-mainmenu {
    padding: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-header.style-two .header-ad {
    max-width: 600px;
    padding: 15px 55px 0px 50px;
  }

  .main-header.style-two .main-mainmenu {
    padding: 0;
  }

  .main-header.style-two .mainmenu > li {
    padding-top: 4px;
  }
}

@media only screen and (min-width: 992px) {
  .main-header.style-two .mainmenu {
    justify-content: center;
    border-top: 1px solid #e2e5e9;
    margin-top: 20px;
    transition: none;
  }

  .main-header.style-two .main-mainmenu.main-sticky .mainmenu {
    margin: 0;
    border: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .main-header.style-two .header-ad {
    padding: 15px 55px 0 50px;
    max-width: 900px;
  }

  /* .shorts-modal-dialog {
        max-width: 60vw !important;


    } */

  .main-header.style-two .mainmenu > li {
    padding-top: 8px;
  }
}

.main-header .header-navbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.header-logo {
  width: 14rem;
}

.main-header .header-navbar .header-logo a {
  display: block;
}

.main-header .header-navbar .header-logo .dark-version-logo {
  display: none;
}

.main-header .header-navbar .header-logo .sticky-logo {
  display: none;
}

.footer-logo {
  width: 13rem;
}

.responsive-gap-5 {
  gap: 3rem !important;
}

@media only screen and (max-width: 991px) {
  .main-header .header-navbar .header-logo img {
    width: 150px;
    height: auto !important;
  }

  .header-action {
    margin-right: 0;
  }
}

.main-header .header-navbar .header-main-nav {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0 30px 0 50px;
}

@media only screen and (max-width: 1199px) {
  .main-header .header-navbar .header-main-nav {
    margin: 0 20px;
  }
}

/* .container{
  max-width: 1100px;
} */
@media only screen and (max-width: 991px) {
  .main-header .header-navbar .header-main-nav {
    margin: 0;
  }
}

.main-header.header-style-1
  .main-mainmenu.main-sticky
  .header-navbar
  .header-logo
  .light-version-logo {
  display: none;
}

.main-header.header-style-1
  .main-mainmenu.main-sticky
  .header-navbar
  .header-logo
  .sticky-logo {
  display: block;
}

.main-header.header-style-2 .main-mainmenu {
  padding: 50px 80px;
}

@media only screen and (max-width: 1199px) {
  .main-header.header-style-2 .main-mainmenu {
    padding: 35px 15px;
  }
}

@media only screen and (max-width: 575px) {
  .main-header.header-style-2 .main-mainmenu {
    padding: 30px 0;
  }
}

.main-header.header-style-2 .main-mainmenu.main-sticky {
  padding: 15px 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .main-header.header-style-2 .main-mainmenu.main-sticky {
    padding: 15px;
  }

  .image-expand .modal-body img {
    width: 100%;

    height: 450px !important;
  }

  .h-450 {
    height: 200px;
  }
}

@media only screen and (max-width: 1199px) {
  .main-header.header-style-2 .main-mainmenu.main-sticky {
    padding: 15px;
  }
}

@media only screen and (max-width: 575px) {
  .main-header.header-style-2 .main-mainmenu.main-sticky {
    padding: 15px 0;
  }
}

.main-header.header-style-2 .main-mainmenu .mainmenu {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.main-header.header-style-3
  .main-mainmenu.main-sticky
  .header-navbar
  .header-logo
  .light-version-logo {
  display: none;
}

.main-header.header-style-3
  .main-mainmenu.main-sticky
  .header-navbar
  .header-logo
  .sticky-logo {
  display: block;
}

@media only screen and (max-width: 1299px) {
  .main-header.header-style-1 .header-main-nav {
    margin: 0 10px;
  }

  .sign-in-modal-dialog {
    max-width: 425px;
  }
}

@media only screen and (max-width: 991px) {
  .main-header.header-style-1 .header-main-nav {
    margin: 0;
  }
}

@media only screen and (max-width: 991px) {
  .main-header.header-style-1 .mainmenu-nav {
    background-color: var(--bgColor);
  }
}

.main-header.header-style-1 .mobile-nav-header .mobile-nav-logo .light-mode {
  display: none;
}

.main-header.header-style-1 .mobile-nav-header .mobile-nav-logo .dark-mode {
  display: block;
}

.main-header.header-style-1 .mobile-nav-header .mobile-menu-close {
  background-color: var(--whiteColor);
  color: var(--blackColor);
  border: none;
}

.main-header.header-style-1 .main-mainmenu.main-sticky {
  background-color: var(--blackColor);
}

@media only screen and (max-width: 1199px) {
  .main-header.header-style-1 .mainmenu li {
    margin: 0 10px;
  }
}

.main-header.header-style-1 .mainmenu li a::before {
  background-color: var(--whiteColor);
}

.main-header.header-style-1 .header-action .header-btn .main-btn {
  display: block;
}

.main-mainmenu {
  padding: 10px 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.main-mainmenu-style-two {
  padding: 5px 0;
}

.main-mainmenu.main-sticky {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  background-color: var(--whiteColor);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  -webkit-animation: headerSlideDown 0.8s ease forwards;
  animation: headerSlideDown 0.2s ease forwards;
}

.main-mainmenu.main-sticky .header-action .sidemenu-btn .btn-wrap span {
  background-color: var(--mainColor);
  /* background-color: var(--whiteColor); */
}

.main-mainmenu.main-sticky .header-action .social-icon-list li a {
  color: var(--blackColor) !important;
}

.main-mainmenu.main-sticky .header-action .social-icon-list li a:hover {
  color: var(--mainColor) !important;
  text-decoration: none;
}

.mainmenu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mainmenu > li {
  margin: 0 16px;
}

.mainmenu li:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 1199px) {
  .mainmenu > li {
    margin: 0 5px;
  }

  .mainmenu li:first-child {
    margin-left: 7px;
  }
}

.mainmenu > li > a {
  font-weight: 500;
  line-height: 60px;
  height: 60px;
  display: block;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  color: var(--blackColor);
}

.mainmenu > li > a::before {
  content: "";
  height: 2px;
  width: 0;
  position: absolute;
  bottom: 12px;
  left: 0;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.mainmenu > li > a:hover {
  color: var(--mainColor);
}

.mainmenu > li > a:hover::before {
  opacity: 1;
  width: 100%;
}

.mainmenu > li > a.active {
  color: var(--mainColor);
}

.mainmenu > li > a.active::before {
  width: 100%;
  opacity: 1;
}

.mainmenu > .menu-item-has-children {
  position: relative;
}

.mainmenu > .menu-item-has-children > a {
  position: relative;
  margin-right: 20px;
  color: var(--blackColor);
}

.mainmenu > .menu-item-has-children > a::after {
  content: "\e9f8";
  font-family: "boxicons" !important;
  font-weight: 400;
  font-size: 18px;
  position: absolute;
  top: 0;
  right: -20px;
}

.mainmenu
  > .menu-item-has-children
  .main-submenu
  .menu-item-has-children
  > a::after {
  content: "\e9f8";
  font-family: "boxicons" !important;
  font-weight: 400;
  font-size: 18px;
  position: absolute;
  top: 5px;
  margin-left: 5px;
}

.mainmenu > .menu-item-has-children .main-submenu {
  position: absolute;
  top: 100%;
  /* left: 20px; */
  width: max-content;
  background: var(--whiteColor);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  /* min-width: 265px; */
  padding: 15px 10px;
  border-radius: 4px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  list-style: none;
  margin: 0;
  box-shadow: 0 13px 48px 0 rgba(0, 0, 0, 0.15);
}

.mainmenu > .menu-item-has-children2 .main-submenu {
  position: absolute;
  top: 100%;
  /* left: 20px; */
  right: 0;
  width: max-content;
  background: var(--whiteColor);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  /* min-width: 265px; */
  padding: 15px 10px;
  border-radius: 4px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  list-style: none;
  margin: 0;
  box-shadow: 0 13px 48px 0 rgba(0, 0, 0, 0.15);
}

/* @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .mainmenu>.menu-item-has-children .main-submenu {
        min-width: 215px;
    }
} */

@media only screen and (min-width: 992px) {
  .mainmenu > .menu-item-has-children.mega-menu .main-submenu {
    width: 430px;
  }

  .mainmenu > .menu-item-has-children.mega-menu .main-submenu li {
    float: left;
    margin: 5px 10px;
    width: 110px;
  }
}

.mainmenu > .menu-item-has-children .main-submenu-menu {
  position: absolute;
  top: 100%;
  left: 20px;
  background: var(--whiteColor);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  min-width: 250px;
  padding: 15px 10px;
  border-radius: 4px;
  -webkit-transition: 0.4s;
  transition: 0.3s;
  list-style: none;
  margin: 0;
  box-shadow: 0 13px 48px 0 rgba(0, 0, 0, 0.15);
}

.mainmenu > .menu-item-has-children .main-submenu li,
.mainmenu > .menu-item-has-children .main-submenu-menu li {
  margin: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

.mainmenu > .menu-item-has-children .main-submenu li a,
.mainmenu > .menu-item-has-children .main-submenu-menu li a {
  position: relative;
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 4px;
  display: block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  color: var(--blackColor);
}

.mainmenu > .menu-item-has-children .main-submenu-menu li a {
  position: relative;
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 4px;
  display: block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  color: var(--blackColor);
}

.mainmenu > .menu-item-has-children .main-submenu li a:hover,
.mainmenu > .menu-item-has-children .main-submenu-menu li a:hover {
  color: var(--mainColor);
}

.mainmenu > .menu-item-has-children .main-submenu li a.active,
.mainmenu > .menu-item-has-children .main-submenu-menu li a.active {
  color: var(--mainColor);
}

.mainmenu > .menu-item-has-children .main-submenu.categories li a.active,
.mainmenu > .menu-item-has-children .main-submenu-menu.categories li a.active {
  color: var(--blackColor);
}

.mainmenu > .menu-item-has-children .main-submenu.categories li a:hover,
.mainmenu > .menu-item-has-children .main-submenu-menu.categories li a:hover {
  color: var(--mainColor);
}

.mainmenu > .menu-item-has-children:hover .main-submenu {
  opacity: 1;
  visibility: visible;
  z-index: 9;
  left: 0px;
}

.mainmenu > .menu-item-has-children2:hover .main-submenu {
  opacity: 1;
  visibility: visible;
  z-index: 9;
  right: 0px !important;
  left: auto;
}

.mainmenu
  > .menu-item-has-children
  ul
  li.menu-item-has-children:hover
  .main-submenu-menu {
  opacity: 1;
  visibility: visible;
  z-index: 9;
  left: -260px;
  top: 0;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.mainmenu + .menu-item-has-children:hover .main-submenu li:nth-child(1n) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.mainmenu .menu-item-has-children:hover .main-submenu li:nth-child(2n) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(3n) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(4n) {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(5n) {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(6n) {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(7n) {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(8n) {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(9n) {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(10n) {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(11n) {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.mainmenu > .menu-item-has-children:hover .main-submenu li:nth-child(12n) {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.header-action > ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.header-action > ul > li {
  margin-right: 30px;
}

.header-action > ul > li:last-child {
  margin-right: 0;
}

.header-action .sidemenu-btn {
  margin-right: 0;
  /* margin-top: 10px; */
}

.header-action .sidemenu-btn .btn-wrap {
  height: 60px;
  width: 60px;
  border: none;
  border-radius: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (max-width: 991px) {
  .header-action .sidemenu-btn .btn-wrap {
    height: 50px;
    width: 50px;
  }
}

.header-action .sidemenu-btn .btn-wrap span {
  height: 3px;
  width: 34px;
  background-color: var(--blackColor);
  margin-bottom: 6px;
  border-radius: 10px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.header-action .sidemenu-btn .btn-wrap span:last-child {
  margin-bottom: 0;
}

.header-action .sidemenu-btn .btn-wrap:focus {
  box-shadow: none;
}

.header-action .sidemenu-btn .btn-wrap.btn-dark {
  background-color: #fff;
  /* background-color: var(--blackColor); */
}

.header-action .sidemenu-btn .btn-wrap.btn-dark span {
  /* background-color: var(--whiteColor); */
  background-color: var(--mainColor);
}

@media only screen and (max-width: 575px) {
  .header-action .header-social-link {
    display: none;
  }
}

.header-action .social-icon-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -15px;
}

.header-action .social-icon-list li {
  margin: 15px;
}

.header-action .social-icon-list li a {
  font-size: 20px;
}

@media only screen and (max-width: 991px) {
  .header-action .social-icon-list li a {
    color: var(--blackColor);
  }
}

.header-action .social-icon-list li a:hover {
  color: var(--mainColor);
}

.header-action .header-btn {
  margin-right: 0;
}

@media only screen and (max-width: 1399px) {
  .header-action .header-btn .main-btn {
    padding: 15px 40px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-action .header-btn .main-btn {
    padding: 15px 25px;
  }
}

@media only screen and (max-width: 991px) {
  .header-action .header-btn {
    margin-right: 30px;
  }
}

@media only screen and (max-width: 575px) {
  .header-action .header-btn {
    display: none;
  }
}

@media only screen and (min-width: 992px) {
  .header-action .mobile-menu-btn {
    display: none;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-action .header-btn.search {
    margin-left: 15px;
  }
}

@media only screen and (min-width: 1200px) {
  .header-action .header-btn.search {
    margin-left: 30px;
  }
}

.header-action .mobile-menu-btn .btn-wrap {
  height: 50px;
  width: 50px;
  padding: 5px 0px;
}

.header-action .my_switcher {
  margin-left: 20px;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  line-height: 52px;
  padding: 0;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .header-action .my_switcher {
    margin-left: 15px;
  }
}

.header-action .my_switcher ul {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.header-offcanvasmenu {
  width: 60vw;
  min-width: 300px;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
}

@media only screen and (max-width: 1199px) {
  .header-offcanvasmenu {
    width: 70vw;
  }
}

.header-offcanvasmenu .offcanvas-header {
  padding: 50px 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .header-offcanvasmenu .offcanvas-header {
    padding: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .header-offcanvasmenu .offcanvas-header {
    padding: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .header-offcanvasmenu .offcanvas-header {
    padding: 30px 30px 0;
  }
}

.header-offcanvasmenu .offcanvas-header .btn-close {
  margin: 0;
  font-size: 22px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (max-width: 991px) {
  .header-offcanvasmenu .offcanvas-header .btn-close {
    font-size: 14px;
  }
}

.header-offcanvasmenu .offcanvas-header .btn-close:hover {
  color: var(--mainColor);
  opacity: 1;
}

.header-offcanvasmenu .offcanvas-header .btn-close:focus {
  border: none;
  box-shadow: none;
}

.header-offcanvasmenu .offcanvas-body {
  padding: 50px 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .header-offcanvasmenu .offcanvas-body {
    padding: 50px;
  }
}

@media only screen and (max-width: 1199px) {
  .header-offcanvasmenu .offcanvas-body {
    padding: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .header-offcanvasmenu .offcanvas-body {
    padding: 30px;
  }
}

.header-offcanvasmenu .offcanvas-body .side-nav-search-form {
  position: relative;
  margin-bottom: 70px;
}

@media only screen and (max-width: 991px) {
  .header-offcanvasmenu .offcanvas-body .side-nav-search-form {
    margin-bottom: 40px;
  }
}

.header-offcanvasmenu .offcanvas-body .side-nav-search-form .search-field {
  font-size: 40px;
  height: auto;
  border: none;
  border-bottom: 2px solid var(--color-gray-3);
  border-radius: 0;
  padding: 5px 0;
}

@media only screen and (max-width: 991px) {
  .header-offcanvasmenu .offcanvas-body .side-nav-search-form .search-field {
    font-size: 20px;
  }
}

.header-offcanvasmenu
  .offcanvas-body
  .side-nav-search-form
  .search-field:focus {
  box-shadow: none;
}

.header-offcanvasmenu
  .offcanvas-body
  .side-nav-search-form
  .side-nav-search-btn {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  padding: 0;
}

.header-offcanvasmenu
  .offcanvas-body
  .side-nav-search-form
  .side-nav-search-btn
  i {
  font-weight: 400;
  font-size: 24px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (max-width: 991px) {
  .header-offcanvasmenu
    .offcanvas-body
    .side-nav-search-form
    .side-nav-search-btn
    i {
    font-size: 18px;
  }
}

.header-offcanvasmenu
  .offcanvas-body
  .side-nav-search-form
  .side-nav-search-btn:hover
  i {
  color: var(--mainColor);
}

.header-offcanvasmenu .offcanvas-body .main-navigation {
  margin: -30px 0;
  margin-top: -45px;
}

@media only screen and (max-width: 991px) {
  .header-offcanvasmenu .offcanvas-body .main-navigation {
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .header-offcanvasmenu .offcanvas-body .main-navigation {
    margin: -20px 0;
    margin-bottom: 40px;
  }
}

.header-offcanvasmenu .offcanvas-body .main-navigation li {
  margin: 30px 0;
}

@media only screen and (max-width: 767px) {
  .header-offcanvasmenu .offcanvas-body .main-navigation li {
    margin: 20px 0;
  }
}

.header-offcanvasmenu .offcanvas-body .main-navigation li a {
  color: var(--blackColor);
  font-size: 36px;
  font-weight: 500;
}

@media only screen and (max-width: 1199px) {
  .header-offcanvasmenu .offcanvas-body .main-navigation li a {
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .header-offcanvasmenu .offcanvas-body .main-navigation li a {
    font-size: 20px;
  }
}

.header-offcanvasmenu .offcanvas-body .main-navigation li a:hover {
  color: var(--mainColor);
}

.header-offcanvasmenu .offcanvas-body .main-navigation li a.active {
  color: var(--mainColor);
}

.header-offcanvasmenu .offcanvas-body .contact-inner .title {
  font-size: 18px;
  line-height: 1;
  color: var(--blackColor);
  font-weight: 500;
  display: block;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1199px) {
  .header-offcanvasmenu .offcanvas-body .contact-inner .title {
    font-size: 16px;
  }
}

.header-offcanvasmenu .offcanvas-body .contact-inner .address {
  margin-bottom: 40px;
}

@media only screen and (max-width: 991px) {
  .header-offcanvasmenu .offcanvas-body .contact-inner .address {
    margin-bottom: 25px;
  }
}

.header-offcanvasmenu .offcanvas-body .contact-inner .address a {
  display: block;
  margin-bottom: 10px;
}

.header-offcanvasmenu .offcanvas-body .contact-inner .address a i {
  margin-right: 20px;
}

.header-offcanvasmenu .offcanvas-body .contact-inner .address p {
  margin-bottom: 0;
}

.header-offcanvasmenu .offcanvas-body .contact-inner .social-share {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -15px -6px;
}

.header-offcanvasmenu .offcanvas-body .contact-inner .social-share li {
  margin: 15px 6px;
}

.header-offcanvasmenu .offcanvas-body .contact-inner .social-share li a {
  color: var(--whiteColor);
  font-size: 16px;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 53px;
  display: block;
  border-radius: 100%;
  background-color: var(--mainColor);
  text-align: center;
}

.header-offcanvasmenu .offcanvas-body .contact-inner .social-share li a:hover {
  background-color: var(--blackColor);
}

.mobile-nav-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e5e9;
}

.mobilemenu-active .main-header.style-two .header-navbar {
  border-bottom: 1px solid #e2e5e9;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

@media only screen and (min-width: 992px) {
  .mobile-nav-header {
    display: none;
  }
}

.mobile-nav-header .mobile-nav-logo {
  width: 150px;
  line-height: 1;
}

.mobile-nav-header .mobile-nav-logo .dark-mode {
  display: none;
}

.mobile-nav-header .mobile-menu-close {
  background-color: transparent;
  height: 30px;
  width: 30px;
  border: 2px solid var(--blackColor);
  border-radius: 10px;
  color: var(--blackColor);
  font-size: 14px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  line-height: 1;
  padding: 0;
}

.mobile-nav-header .mobile-menu-close:hover {
  background-color: var(--mainColor);
  border-color: var(--mainColor);
  color: var(--whiteColor);
}

@media only screen and (max-width: 991px) {
  .main-mainmenu.main-sticky {
    -webkit-animation: none;
    animation: none;
  }

  .mainmenu-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -300px;
    background-color: var(--whiteColor);
    width: 300px;
    padding: 20px 10px;
    -webkit-transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-clip: padding-box;
    outline: 0;
  }

  .mainmenu-nav.show {
    left: 0;
  }

  .mainmenu-nav .mainmenu {
    display: block;
    height: 100%;
    overflow: auto;
  }

  .mainmenu-nav .mainmenu > li {
    border-bottom: 1px solid var(--blackColor);
  }

  .mainmenu-nav .mainmenu > li > a {
    height: 50px;
    line-height: 50px;
  }

  .mainmenu-nav .mainmenu > li > a::before {
    display: none;
  }

  .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu {
    display: none;
    position: initial;
    visibility: visible;
    opacity: 1;
    min-width: 100%;
    box-shadow: none;
    padding: 0 0 10px;
    -webkit-transition: initial;
    transition: initial;
  }

  .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu-menu {
    display: block;
    position: initial;
    visibility: visible;
    opacity: 1;
    min-width: 100%;
    box-shadow: none;
    padding: 0 0 10px;
    -webkit-transition: initial;
    transition: initial;
    left: 0;
    background: transparent;
    margin-left: 20px;
  }

  .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu li a {
    padding: 7px 10px;
  }

  .mainmenu-nav .mainmenu .menu-item-has-children.menu-item-open .main-submenu {
    display: block;
  }

  .main-header.header-style-1
    .mainmenu-nav
    .mainmenu
    .menu-item-has-children
    .main-submenu {
    background-color: var(--bgColor);
  }
}

@-webkit-keyframes headerSlideDown {
  0% {
    margin-top: -50px;
    opacity: 0;
  }

  30% {
    margin-top: -10px;
    opacity: 0;
  }

  100% {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes headerSlideDown {
  0% {
    margin-top: -50px;
    opacity: 0;
  }

  30% {
    margin-top: -10px;
    opacity: 0;
  }

  100% {
    margin-top: 0;
    opacity: 1;
  }
}

.header-action ul li .language-switcher {
  margin-right: -3px;
}

.header-action ul li .language-switcher .dropdown-toggle {
  padding: 0;
  border: none;
  background-color: transparent;
}

.header-action ul li .language-switcher .dropdown-toggle::after {
  display: none;
}

.header-action ul li .language-switcher .dropdown-toggle img {
  width: 35px;
  border-radius: 5px;
  border: 3px solid var(--bgColor);
  position: relative;
  top: -1px;
}

.header-action ul li .language-switcher .dropdown-toggle span {
  display: inline-block;
  margin-left: 3px;
  font-weight: 600;
  color: var(--blackColor);
}

.header-action ul li .language-switcher .dropdown-toggle span i {
  position: relative;
  font-size: 18px;
  top: 3px;
  margin-left: -3px;
}

.header-action ul li .language-switcher .dropdown-menu {
  opacity: 0;
  float: unset;
  border: none;
  padding: 15px;
  display: block;
  border-radius: 0;
  margin-top: 12px;
  visibility: visible;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
}

.header-action ul li .language-switcher .dropdown-menu .dropdown-item {
  padding: 0;
  color: var(--blackColor);
  margin-bottom: 10px;
  font-weight: 600;
}

.header-action
  ul
  li
  .language-switcher
  .dropdown-menu
  .dropdown-item:last-child {
  margin-bottom: 0;
}

.header-action ul li .language-switcher .dropdown-menu .dropdown-item img {
  width: 40px;
  border-radius: 5px;
  border: 3px solid var(--whiteColor);
}

.header-action ul li .language-switcher .dropdown-menu .dropdown-item span {
  display: inline-block;
  margin-left: 8px;
}

.header-action ul li .language-switcher .dropdown-menu .dropdown-item:hover,
.header-action ul li .language-switcher .dropdown-menu .dropdown-item:focus {
  background-color: transparent !important;
}

.header-action ul li .language-switcher .dropdown-menu .dropdown-item:active,
.header-action ul li .language-switcher .dropdown-menu .dropdown-item.active {
  color: var(--blackColor);
  background-color: transparent;
}

.header-action ul li .language-switcher .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.header-action .search-box {
  cursor: pointer;
  color: var(--blackColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  line-height: 1;
  display: inline-block;
  font-size: 22px;
  position: relative;
  margin-right: -5px;
  top: 2px;
}

.header-action .search-box:hover {
  color: var(--mainColor);
}

/*================================================
Search Overlay CSS
=================================================*/
.search-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.search-overlay .search-overlay-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.search-overlay .search-overlay-layer:nth-child(1) {
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.search-overlay .search-overlay-layer:nth-child(2) {
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.3s ease-in-out 0.3s;
  transition: all 0.3s ease-in-out 0.3s;
}

.search-overlay .search-overlay-layer:nth-child(3) {
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-transition: all 0.9s ease-in-out 0.6s;
  transition: all 0.9s ease-in-out 0.6s;
}

.search-overlay .search-overlay-close {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 50px;
  z-index: 2;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  -webkit-transition: all 0.9s ease-in-out 1.5s;
  transition: all 0.9s ease-in-out 1.5s;
  opacity: 0;
  visibility: hidden;
}

.search-overlay .search-overlay-close .search-overlay-close-line {
  width: 100%;
  height: 3px;
  float: left;
  margin-bottom: 5px;
  background-color: var(--whiteColor);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.search-overlay .search-overlay-close .search-overlay-close-line:nth-child(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.search-overlay .search-overlay-close .search-overlay-close-line:nth-child(2) {
  margin-top: -7px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.search-overlay .search-overlay-close:hover .search-overlay-close-line {
  background: var(--mainColor);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.search-overlay .search-overlay-form {
  -webkit-transition: all 0.9s ease-in-out 1.4s;
  transition: all 0.9s ease-in-out 1.4s;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  z-index: 2;
  max-width: 500px;
  width: 500px;
}

.search-overlay .search-overlay-form form {
  position: relative;
}

.search-overlay .search-overlay-form form .input-search {
  display: block;
  width: 100%;
  height: 60px;
  border: none;
  border-radius: 30px;
  color: var(--blackColor);
  padding: 2px 0 0 25px;
}

.search-overlay .search-overlay-form form .input-search:focus {
  background-color: white;
}

.search-overlay
  .search-overlay-form
  form
  .input-search::-webkit-input-placeholder {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  letter-spacing: 0.5px;
  color: var(--blackColor);
}

.search-overlay .search-overlay-form form .input-search:-ms-input-placeholder {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  letter-spacing: 0.5px;
  color: var(--blackColor);
}

.search-overlay .search-overlay-form form .input-search::-ms-input-placeholder {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  letter-spacing: 0.5px;
  color: var(--blackColor);
}

.search-overlay .search-overlay-form form .input-search::placeholder {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  letter-spacing: 0.5px;
  color: var(--blackColor);
}

.search-overlay
  .search-overlay-form
  form
  .input-search:focus::-webkit-input-placeholder {
  color: transparent;
}

.search-overlay
  .search-overlay-form
  form
  .input-search:focus:-ms-input-placeholder {
  color: transparent;
}

.search-overlay
  .search-overlay-form
  form
  .input-search:focus::-ms-input-placeholder {
  color: transparent;
}

.search-overlay .search-overlay-form form .input-search:focus::placeholder {
  color: transparent;
}

.search-overlay .search-overlay-form form button {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 50px;
  color: var(--whiteColor);
  height: 50px;
  border-radius: 50%;
  background-color: var(--mainColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: none;
  font-size: 20px;
  line-height: 50px;
  padding: 0;
}

.search-overlay .search-overlay-form form button:hover {
  background-color: var(--blackColor);
  color: var(--whiteColor);
}

.search-overlay .search-overlay-form form button i {
  position: relative;
  top: 2px;
  left: 1px;
}

.search-overlay.search-overlay-active.search-overlay {
  opacity: 1;
  visibility: visible;
}

.search-overlay.search-overlay-active.search-overlay .search-overlay-layer {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.search-overlay.search-overlay-active.search-overlay .search-overlay-close {
  opacity: 1;
  visibility: visible;
}

.search-overlay.search-overlay-active.search-overlay .search-overlay-form {
  opacity: 1;
  visibility: visible;
}

/*
Footer Area CSS
<<<<======================================================>>>>*/
.footer-area {
  background: #121212;
  background-size: cover;
}

.footer-area .footer-top .footer-title {
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  color: var(--whiteColor);
  letter-spacing: 0;
  position: relative;
  margin-bottom: 30px;
  text-transform: uppercase;
  padding-bottom: 14px;
}

.footer-area .footer-top .footer-title:after {
  content: "";
  width: 50px;
  height: 4px;
  background: var(--mainColor);
  position: absolute;
  bottom: -4px;
  right: 0;
  left: 0;
  margin-left: 0;
  border-radius: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 0;
}

.footer-area .footer-top .site-map li {
  margin-bottom: 13px;
}

.footer-area .footer-top .site-map li a {
  font-size: 16px;
  color: var(--whiteColor);
}

.footer-area .footer-top .site-map li a:hover {
  color: var(--mainColor);
}

.footer-area .footer-top .site-map li:last-child {
  margin-bottom: 0;
}

.footer-area .footer-social li {
  display: inline;
  margin-right: 10px;
}

.footer-area .footer-social li a i {
  padding: 0;
  font-size: 15px;
  margin-right: 3px;
  transition: all 0.8s ease;
  background: #1c2024;
  width: 33px;
  height: 33px;
  line-height: 33px;
  border-radius: 0;
  color: #fff;
  text-align: center;
  border: 1px solid #fff;
}

.footer-area .footer-social li a i:hover {
  color: var(--whiteColor);
  background: var(--mainColor);
  border: 1px solid var(--mainColor);
}

.footer-area .footer-social li:last-child {
  margin: 0;
}

.footer-area .footer-top .address-widget li {
  padding: 0px 0px 15px 40px;
  position: relative;
}

.footer-area .footer-top .address-widget li .desc {
  color: var(--whiteColor);
}

.footer-area .footer-top .address-widget li .desc a {
  color: var(--whiteColor);
}

.link-effect a {
  color: var(--whiteColor);
}

.link-effect a:hover {
  color: var(--mainColor);
}

.footer-area .footer-top .address-widget li .desc a:hover {
  color: var(--mainColor);
}

.footer-area .footer-top .address-widget li i {
  color: var(--mainColor);
  position: absolute;
  left: 0px;
}

.footer-area .footer-top .address-widget li i:before {
  font-size: 20px;
}

.footer-area .footer-top .widget-desc {
  margin: 0;
}

.footer-area .footer-top p {
  margin: 25px 0 0;
  position: relative;
  color: var(--whiteColor);
}

.footer-area .footer-top p input[type="email"] {
  border: none;
  background: #fff;
}

.footer-area .footer-top p input[type="submit"] {
  border: none;
  border-radius: 0px;
  margin-top: 15px;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.5s ease;
}

.footer-area .footer-top p input[type="submit"]:hover {
  opacity: 0.9;
}

.footer-area .footer-top p ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #0a0a0a;
  opacity: 1;
}

.footer-area .footer-top p ::-moz-placeholder {
  /* Firefox 19+ */
  color: #0a0a0a;
  opacity: 1;
}

.footer-area .footer-top p :-ms-input-placeholder {
  /* IE 10+ */
  color: #0a0a0a;
  opacity: 1;
}

.footer-area .footer-top p :-moz-placeholder {
  /* Firefox 18- */
  color: #0a0a0a;
  opacity: 1;
}

.footer-area .footer-bottom {
  padding: 20px 0;
  background: #000;
}

.footer-area .footer-bottom .copyright p {
  margin: 0;
  color: var(--whiteColor);
  margin-right: 10px;
}

/*================================================
Page Title Area CSS
=================================================*/
.page-title-area {
  z-index: 1;
  position: relative;
  /* background: -webkit-gradient(linear, left top, right top, from(var(--mainColor)), to(var(--secondaryColor)));
  background: linear-gradient(90deg, var(--mainColor) 0%, var(--secondaryColor) 100%); */
  padding-top: 100px;
  padding-bottom: 100px;
}

.page-title-area2 {
  z-index: -1 !important;
}

.page-title-area {
  /* top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  z-index: -1; */
  /* opacity: .2; */
  height: 100%;
  /* position: absolute; */
  background-image: url(../../assets/img/header_banner_2.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-title-content {
  text-align: center;
}

.page-title-content1 p {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.page-title-content h2 {
  margin-bottom: 0;
  color: var(--whiteColor);
  font-size: 45px;
}

.page-title-content ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
  margin-bottom: 0;
  margin-top: 12px;
}

.listicles-search-area-inner {
  /* position: absolute !important; */
  margin-top: -60px;
  /* left: 19vw; */
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.search-area-list {
  position: relative;
}

.page-title-content ul li {
  font-size: 17px;
  position: relative;
  display: inline-block;
  margin-left: 13px;
  margin-right: 13px;
}

.page-title-content ul li.active {
  color: var(--whiteColor);
}

.page-title-content ul li::before {
  top: 50%;
  opacity: 0.7;
  right: -26px;
  content: "\e9f9";
  position: absolute;
  color: var(--whiteColor);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "boxicons";
  font-size: 24px;
}

.page-title-content ul li a {
  color: var(--whiteColor);
}

.page-title-content ul li a:hover {
  color: var(--bgColor);
  opacity: 0.7;
}

.page-title-content ul li:last-child {
  margin-right: 0;
}

.page-title-content ul li:last-child::before {
  display: none;
}

.page-title-content ul li:first-child {
  margin-left: 0;
}

/*================================================
Coming Soon Area CSS
=================================================*/
.coming-soon-area {
  height: 100vh;
  position: relative;
  z-index: 1;
  background: var(--bgColor);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../../assets/img/coming-soon.jpg);
}

.coming-soon-content {
  max-width: 700px;
  background: var(--whiteColor);
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  padding: 40px;
  -webkit-box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
  box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
  margin-left: auto;
  margin-right: auto;
}

.coming-soon-content .logo {
  display: block;
  margin-bottom: 30px;
}

.coming-soon-content span.subtitle {
  font-size: 18px;
  margin: 10px 0;
  color: var(--mainColor);
}

.coming-soon-content h2 {
  font-size: 35px;
  margin: 10px 0;
}

.coming-soon-content #timer {
  margin: 30px 0 40px 0;
}

.coming-soon-content #timer div {
  background-color: var(--blackColor);
  color: var(--whiteColor);
  width: 100px;
  height: 105px;
  border-radius: 5px;
  font-size: 35px;
  font-weight: 700;
  margin-left: 10px;
  margin-right: 10px;
}

.coming-soon-content #timer div span {
  display: block;
  margin-top: -2px;
  font-size: 15px;
  font-weight: 500;
}

/*==========================
404 Page Error Area CSS
============================*/
.page-error-content {
  text-align: center;
}

.page-error-content h3 {
  font-size: 35px;
  margin-bottom: 20px;
  margin-top: 45px;
}

.page-error-content p {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.page-error-content .default-btn {
  margin-top: 30px;
}

/*==========================
Accordion Area CSS
============================*/
.faq-accordion .accordion .accordion-item {
  border-radius: 5px;
  display: block;
  margin: 40px 20px;
  border: 0;
}

.faq-accordion .accordion .accordion-item:first-child {
  margin: 20px;
}

.faq-accordion .accordion .accordion-item:last-child {
  margin: 20px;
}

.faq-accordion .accordion .accordion-title {
  text-decoration: none;
  position: relative;
  display: block;
  font-size: 18px;
  font-weight: 600;
  /* border: 1px solid rgba(0, 0, 0, .125); */
  z-index: 1;
}

.faq-accordion .accordion .accordion-title i {
  /* position: absolute; */
  font-size: 12px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.faq-accordion .accordion .accordion-title.active i {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.faq-accordion .accordion .accordion-content {
  display: none;
  position: relative;
  margin-top: -6px;
  padding: 0px 23px;
  /* background-color: var(--whiteColor); */
  font-size: 16px;
  /* border: 1px solid rgba(0, 0, 0, .125); */
}

.faq-accordion .accordion .accordion-content.show {
  display: block;
}

.faq-accordion .accordion .accordion-title {
  /* background: var(--bgColor); */
  border-radius: 0;
  color: var(--blackColor);
  padding: 18px 17px 17px 0px;
}

.faq-accordion .accordion .accordion-title i {
  /* display: none; */
  /* background-color: var(--whiteColor); */
  color: var(--blackColor);
  /* height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    top: 2px;
    right: auto;
    left: 2px; */
  margin-left: 20px;
}

/* 
.faq-accordion .accordion .accordion-title.active {
    background: -webkit-gradient(linear, left top, right top, from(var(--secondaryColor)), to(var(--mainColor)));
    background: linear-gradient(to right, var(--secondaryColor), var(--mainColor));
    color: var(--whiteColor);
} */

/* .faq-accordion .accordion .accordion-title.active i::before {
    content: "\eaf8";
} */

.faq-accordion .accordion .accordion-content {
  background-color: transparent;
}

/*================================================
Team Area CSS
=================================================*/
.single-team-inner {
  background: var(--bgColor);
  position: relative;
  margin: 5px;
}

.bg-color .single-team-inner {
  background: var(--whiteColor);
}

.single-team-inner .thumb {
  overflow: hidden;
}

.single-team-inner .thumb img {
  -webkit-transition: 0.4s;
  transition: 0.9s;
  width: 100%;
}

.single-team-inner .details-inner {
  padding: 20px;
  position: relative;
}

.single-team-inner .details-inner h4 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}

.single-team-inner .details-inner h4 a {
  color: var(--blackColor);
}

.single-team-inner .details-inner p {
  color: var(--mainColor);
  margin-bottom: 0;
}

.single-team-inner .hover-details-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mainColor);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.single-team-inner .hover-details-wrap h4 {
  font-size: 20px;
  margin-bottom: 0;
  color: var(--whiteColor);
}

.single-team-inner .hover-details-wrap h4 a {
  color: var(--whiteColor);
}

.single-team-inner .hover-details-wrap p {
  margin-bottom: 0;
  color: var(--whiteColor);
}

.single-team-inner .hover-details-wrap .hover-details-inner {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin-top: 40px;
}

.single-team-inner:hover .thumb img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.single-team-inner:hover .hover-details-wrap {
  visibility: visible;
  opacity: 1;
}

.single-team-inner:hover .hover-details-wrap .hover-details-inner {
  margin-top: 0;
}

.single-team-inner:hover .hover-details-wrap h4:hover a {
  color: var(--whiteColor);
  text-decoration: underline;
}

/********* Social Media *********/
.social-media {
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.social-media li {
  display: inline-block;
  margin-right: 0 !important;
  margin: 0 2px;
}

.social-media li a {
  height: 28px;
  width: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  background: var(--whiteColor);
  color: var(--mainColor);
  font-size: 14px;
}

.social-media li a.facebook {
  color: #3b5999;
  border-color: #3b5999;
}

.social-media li a.twitter {
  color: #55acee;
  border-color: #55acee;
}

.social-media li a.instagram {
  color: #e4405f;
  border-color: #e4405f;
}

.social-media li a.youtube {
  color: #cd201f;
  border-color: #cd201f;
}

.social-media li a:hover {
  background: var(--blackColor);
  color: var(--whiteColor);
}

.social-media li:first-child {
  margin-left: 0;
}

.social-media li:last-child {
  margin-right: 0;
}

.team-details-page .thumb {
  margin-right: 40px;
}

.team-details-page .thumb img {
  width: 100%;
}

.team-details-info h3 {
  margin-bottom: 0;
}

.team-details-info .designation {
  color: var(--mainColor);
  margin-bottom: 20px;
}

.team-details-info .content {
  margin-bottom: 22px;
}

.team-details-info .details-info {
  margin: 0;
  padding: 0;
}

.team-details-info .details-info li {
  list-style: none;
  margin-bottom: 8px;
}

.team-details-info .details-info li:last-child {
  margin-bottom: 0;
}

.team-details-info .social-media {
  margin-top: 30px;
}

.team-details-info .social-media li a {
  border: 1px solid var(--mainColor);
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 16px;
}

.team-details-info .social-media li a:hover {
  border: 1px solid var(--blackColor);
}

.single-skill-inner-details {
  margin-right: 40px;
}

.single-skill-inner {
  padding: 30px;
}

.single-skill-inner h3 {
  font-size: 20px;
  margin-bottom: 20px;
}

.single-skill-inner .skill-list {
  margin-bottom: 30px;
}

.single-skill-inner .skill-list h6 {
  margin-bottom: 5px;
}

.single-skill-inner .skill-list span {
  color: var(--mainColor);
}

.single-skill-inner .skill-list p {
  margin-top: 10px;
  margin-bottom: 0;
}

.progress-item {
  margin-bottom: 25px;
}

.progress-item .progress-count-wrap {
  position: absolute;
  top: -35px;
  right: 16px;
}

.progress-item.add-progress-start .progress-count-wrap {
  position: absolute;
  top: -35px;
  right: -5px;
}

.progress-item.add-progress-full .progress-count-wrap {
  position: absolute;
  top: -35px;
  right: 11px;
}

.progress-item .progress-count.counting {
  font-weight: 600;
  font-size: 16px;
  color: var(--headingColor);
}

.progress-item .counting-icons {
  padding-top: 2px;
  padding-left: 2px;
  position: absolute;
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  color: var(--headingColor);
}

.progress-item .progress-bg {
  position: relative;
  height: 5px;
  border-radius: 30px;
  background: var(--blackColor);
}

.progress-item .progress-bg .progress-rate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  border-radius: 30px;
  background: var(--mainColor);
  -webkit-transition: 2.5s;
  transition: 2.5s;
}

/*================================================
Testimonial Area CSS
=================================================*/
.feedback-area {
  background-color: var(--bgColor);
}

.feedback-content {
  z-index: 1;
  max-width: 700px;
  position: relative;
  border-radius: 20px;
  background-color: var(--secondaryColor);
  padding: 70px 90px 90px 70px;
  margin-top: 20px;
  margin-left: 20px;
}

.feedback-content .rating {
  margin-bottom: 12px;
}

.feedback-content .rating i {
  color: #fe824c;
  font-size: 18px;
  line-height: 1;
}

.feedback-content p {
  font-size: 18px;
}

.feedback-content .client-info {
  margin-top: 25px;
}

.feedback-content .client-info img {
  border: 1px solid var(--bgColor);
  width: 58px;
  border-radius: 50%;
  border-top: none;
  height: 58px;
}

.feedback-content .client-info .title {
  margin-left: 15px;
}

.feedback-content .client-info .title h3 {
  margin-bottom: 5px;
  font-size: 18px;
}

.feedback-content .client-info .title span {
  display: block;
  font-size: 14px;
  color: var(--paragraphColor);
}

.feedback-content::before {
  position: absolute;
  content: "\ee32";
  line-height: 1;
  opacity: 0.07;
  bottom: 15%;
  z-index: -1;
  right: 40%;
  font-family: "boxicons";
  font-size: 120px;
}

.feedback-content::after {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  z-index: -2;
  position: absolute;
  border-radius: 20px;
  background-color: var(--whiteColor);
  margin-top: -20px;
  margin-left: -20px;
  margin-right: 20px;
  margin-bottom: 20px;
  -webkit-box-shadow: 0 0 20px 3px rgb(0 0 0 / 5%);
  box-shadow: 0 0 20px 3px rgb(0 0 0 / 5%);
}

.review-area {
  position: relative;
  z-index: 1;
}

.review-content {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 30px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 30px;
}

.review-content .sub-title {
  display: block;
  margin-bottom: 8px;
  color: var(--mainColor);
  font-weight: 600;
  font-size: 14px;
}

.review-content h2 {
  margin-bottom: 10px;
  font-size: 36px;
}

.review-content .single-review-box {
  margin-top: 40px;
  margin-right: 40px;
  margin-bottom: 0;
}

.review-content:hover .review-slides.owl-theme .owl-nav {
  opacity: 1;
  visibility: visible;
}

.single-review-box {
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.single-review-box .rating {
  margin-bottom: 10px;
}

.single-review-box .rating i {
  line-height: 1;
  font-size: 18px;
  color: #fe824c;
}

.single-review-box p {
  font-size: 18px;
}

.single-review-box .client-info {
  margin-top: 30px;
}

.single-review-box .client-info img {
  border-radius: 50%;
  width: 70px;
  display: inline-block;
  border-top: none;
  height: 70px;
}

.single-review-box .client-info .title {
  margin-left: 15px;
}

.single-review-box .client-info .title h5 {
  font-size: 18px;
  margin-bottom: 7px;
  color: var(--mainColor);
}

.single-review-box .client-info .title span {
  display: block;
  font-size: 15px;
  color: var(--paragraphColor);
}

.single-review-box::before {
  content: "\ee32";
  position: absolute;
  right: 100px;
  z-index: -1;
  line-height: 1;
  opacity: 0.07;
  bottom: 0;
  font-family: "boxicons";
  font-size: 100px;
}

.review-slides .item img {
  display: inline-block;
  width: auto;
}

.review-slides.owl-theme .owl-nav {
  top: 50%;
  opacity: 0;
  right: -30px;
  margin-top: 0;
  position: absolute;
  visibility: hidden;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.review-slides.owl-theme .owl-nav [class*="owl-"] {
  padding: 0;
  width: 40px;
  height: 40px;
  margin: 10px 0;
  display: block;
  font-size: 25px;
  line-height: 45px;
  border-radius: 50%;
  color: var(--mainColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--bgColor);
}

.bg-color .review-slides.owl-theme .owl-nav [class*="owl-"] {
  background-color: var(--whiteColor);
}

.review-slides.owl-theme .owl-nav [class*="owl-"]:hover {
  background-color: var(--mainColor);
  color: var(--whiteColor);
}

.review-image {
  border-radius: 20px;
  padding-left: 15px;
}

.review-area .review-image img {
  border-radius: 20px;
}

/*================================================
Blog Area CSS
=================================================*/
.infographics-content-area {
  margin: 0;
  /* padding: 20px 0; */
  padding: 0 28px;
  position: relative;
  /* z-index: -1; */
}

.single-blog-inner {
  overflow: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin-bottom: 20px;
  padding: 20px;
}

.single-blog-inner-info {
  padding: 20px 0 20px !important;
}

.single-blog-inner2 {
  padding: 0 !important;
}

.single-blog-inner2 .details h4 {
  min-height: 40px !important;
  margin-top: 0 !important;
}

.single-blog-inner2 .details {
  height: 66px;
  overflow: hidden;
  margin-bottom: 15px !important;
}

.footer-social-info {
  display: flex;
  justify-content: end;
  column-gap: 10px;
  /* padding: 20px; */
}

.download-info {
  margin-left: 20px;
}

.single-blog-inner .share-area-wrap {
  position: relative;
}

.single-blog-inner .share-area-wrap:hover .share-hover-icons {
  visibility: visible;
  opacity: 1;
}

.single-blog-inner .share-wrap {
  cursor: pointer;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.single-blog-inner .share-wrap.active {
  color: var(--mainColor);
}

.single-blog-inner .share-hover-icons {
  display: inline-block;
  background-color: var(--mainColor);
  padding: 3px 6px 2px 6px;
  width: auto;
  position: absolute;
  border-radius: 3px;
  right: 0;
  top: -40px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.single-blog-inner .share-hover-icons ul {
  margin: 0;
  padding: 0;
}

.single-blog-inner .share-hover-icons ul li {
  display: inline-block;
  list-style: none;
}

.single-blog-inner .share-hover-icons ul li a {
  color: #fff;
  padding: 0 2px;
  font-size: 13px;
}

.single-blog-inner .share-hover-icons ul li a:hover {
  color: var(--heading-color);
}

.single-blog-inner .share-hover-icons.active {
  visibility: visible;
  opacity: 1;
}

.single-blog-inner .share-hover-icons:after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: -4px;
  -webkit-transform: rotate(53deg);
  transform: rotate(53deg);
  height: 11px;
  width: 10px;
  background: var(--mainColor);
}

.single-blog-inner .blog-thumb-slider {
  margin-bottom: 20px;
}

.single-blog-inner .thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.single-blog-inner2 .thumb {
  background-color: #f7f7f791;
}

.single-blog-inner .thumb .video-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.single-blog-inner .thumb a {
  display: block;
  text-align: center;
}

.single-blog-inner .thumb img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.9s;
  transition: 0.9s;
  width: -webkit-fill-available;
}

.blog-list .single-blog-inner .thumb img {
  width: 100%;
}

.blog-list .single-blog-inner .details h4 {
  min-height: 0;
}

.single-blog-inner .thumb .blog-meta {
  background: var(--mainColor);
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 0;
  margin: 0;
  padding: 10px 15px;
}

.single-blog-inner .thumb .blog-meta.black-color {
  background: var(--blackColor);
}

.single-blog-inner .thumb .blog-meta li {
  color: #fff;
}

.single-blog-inner .blog-meta {
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
}

.single-blog-inner .blog-meta li {
  display: inline-block;
  margin-right: 30px;
  color: #8a8a8a;
  font-size: 14px;
}

.single-blog-inner .blog-meta li i {
  margin-right: 4px;
  color: var(--whiteColor);
  font-size: 10px;
}

.single-blog-inner .blog-meta li:last-child {
  margin-right: 0;
}

.single-blog-inner .details {
  position: relative;
}

.single-blog-inner .details h2 {
  margin-bottom: 3px;
}

.single-blog-inner .details h2:hover a {
  color: var(--mainColor);
}

.single-blog-inner .details h4 {
  font-size: 20px;
}

.col-lg-6.col-md-6 .single-blog-inner .details h4 {
  min-height: 60px;
}

.single-blog-inner .details h4 a {
  color: var(--blackColor);
}

.single-blog-inner .details h4 a:hover {
  color: var(--mainColor);
}

.single-blog-inner .details .title {
  margin-bottom: 17px;
}

.single-blog-inner .details p {
  margin-bottom: 20px;
}

.single-blog-inner2 .details p {
  margin-bottom: 0px;
}

.single-blog-inner .details .read-more-text {
  font-weight: 600;
}

.single-blog-inner .details .read-more-btn {
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  background: var(--mainColor);
  display: inline-block;
  color: #fff;
  border-radius: 50%;
  position: relative;
  left: 50%;
  bottom: 0;
  margin-left: -23px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.single-blog-inner .details .read-more-btn i {
  font-size: 30px;
  top: 50%;
  position: relative;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.single-blog-inner:hover .thumb img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.single-blog-inner .thumb {
  margin-bottom: 0;
}

.single-blog-inner .details {
  background: var(--bgColor);
  padding: 15px;
  margin: 0;
}

.bg-color .single-blog-inner .details {
  background-color: var(--whiteColor);
}

.single-blog-inner:hover .details .read-more-btn {
  background: var(--blackColor);
}

@media only screen and (min-width: 1200px) {
  .blog-area.category-area .single-blog-inner .details {
    padding: 17px 20px;
  }
}

.blog-area.blog-style-two .main-slider-area .blog-details-right-area {
  margin-top: 20px;
}

.blog-details-right-area-forum {
  width: 100%;
}

.blog-details-right-area-forum .search-widget {
  position: relative;
  border: 2px solid var(--borderColor);
}

.word-count-limit {
  position: absolute;
  right: 10px;
  bottom: 10px;

  font-weight: 500;
}

.blog-details-right-area-forum .search-widget .search-form textarea {
  width: 100%;
  background-color: transparent;
  min-height: 300px;
  background-color: var(--borderColor) !important;
}

.blog-details-right-area-forum
  .search-widget
  .search-form
  textarea::placeholder {
  font-size: 2rem;
}

.forum-reply-submit {
  display: flex;
  justify-content: flex-start;
  align-items: end;
}

.blog-area.blog-style-two .single-blog-inner {
  padding: 20px 0;
}

.blog-area.blog-style-two .single-blog-inner .details h4 {
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 13px;
}

@media only screen and (max-width: 767px) {
  .blog-area.blog-style-two .main-slider-area {
    padding: 0;
  }

  .blog-area.blog-style-two
    .main-slider-area
    .blog-details-right-area
    .blog-widget:last-child {
    margin-bottom: 15px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-area.blog-style-two .main-slider-area {
    padding: 0;
  }

  .blog-area.blog-style-two
    .main-slider-area
    .blog-details-right-area
    .blog-widget:last-child {
    margin-bottom: 15px;
  }

  .main-slider-area .single-blog-inner .details h4 {
    min-height: 0;
    margin-bottom: 15px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-area.blog-style-two .single-blog-inner .details h4 {
    font-size: 16px;
  }
}

.main-slider-area {
  position: relative;
  /* z-index: -1; */
}

/*================================================
Pagination Area CSS
=================================================*/
.pagination-area {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
}

.pagination-area .page-numbers {
  width: 45px;
  height: 45px;
  line-height: 45px;
  color: var(--blackColor);
  text-align: center;
  display: inline-block;
  position: relative;
  margin-left: 3px;
  margin-right: 3px;
  font-size: 17px;
  background-color: var(--bgColor);
  border: 1px solid #ebebeb;
}

.pagination-area .page-numbers:hover {
  color: var(--whiteColor);
  border-color: var(--mainColor);
  background-color: var(--mainColor);
}

.pagination-area .page-numbers i {
  font-size: 20px;
  top: 2px;
  position: relative;
}

.pagination-area .page-numbers.current {
  color: var(--whiteColor);
  border-color: var(--mainColor);
  background-color: var(--mainColor);
}

/*================================================
Blog Sidebar Area CSS
=================================================*/
.blog-details-right-area.blog-left-sidebar {
  padding: 0 20px;
  margin-top: 20px;
}

.blog-details-right-area.blog-right-sidebar {
  padding: 0 20px;
  margin-top: 20px;
}

.blog-details-right-area .blog-widget {
  margin-bottom: 40px;
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.blog-details-right-area .blog-widget:last-child {
  margin-bottom: 20px;
}

.blog-details-right-area .blog-widget2:last-child {
  margin-bottom: 0 !important;
  border-radius: var(--border-radius);
}

.blog-details-right-area .blog-widget ul li a {
  font-size: 15px;
}

.blog-details-right-area .blog-widget .title {
  padding-bottom: 10px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 25px;
  font-size: 20px;
  position: relative;
}

.blog-details-right-area .blog-widget .title::before {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 50px;
  height: 1px;
  background-color: var(--mainColor);
}

.blog-details-right-area .blog-widget.search-widget .search-form {
  position: relative;
}

.blog-details-right-area .blog-widget.search-widget .search-form .form-control {
  height: 50px;
  border: 1px solid var(--whiteColor);
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  padding: 10px;
  width: 100%;
}

.blog-widget2 {
  padding: 0px !important;
  margin-top: 10px;
}

.search-form1 button {
  height: 60px !important;
}

.form-control1 {
  height: 60px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #d2d2d2 !important;
}

.form-control {
  border: 1px solid rgb(216, 216, 216);
}

.news-banner {
  border: 1px solid #e2e5e9;
  background: var(--bgColor);
  margin-bottom: 20px;
}

.blog-details-right-area
  .blog-widget.search-widget
  .search-form
  .form-control:focus {
  border-color: var(--mainColor) !important;
}

.search-text {
  color: var(--headingColor);
  font-size: 20px;
  font-weight: 600;
}

.ad-wrapper .blog-widget2 {
  margin-top: 0 !important;
}

.blog-details-right-area .blog-widget.search-widget .search-form button {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
  background-color: #fff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.search-form1 button {
  background-color: none !important;
}

.blog-details-right-area .blog-widget.search-widget .search-form button:hover {
  background-color: #fff;
}

.blog-details-right-area .blog-widget.search-widget .search-form button i {
  color: #6c757d;
  position: relative;
  top: 2px;
  right: 5px;
}

.blog-details-right-area .blog-widget.recent-post-widget ul li {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
  margin-bottom: 10px;
  height: 92px;
}

.blog-details-right-area .blog-widget.recent-post-widget ul li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.blog-details-right-area .blog-widget.recent-post-widget ul li a {
  position: relative;
  display: block;
  padding-left: 120px;
}

.blog-details-right-area .blog-widget.recent-post-widget ul li a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 80px;
}

.blog-details-right-area .blog-widget.recent-post-widget ul li a span {
  display: block;
  margin-bottom: 5px;
  color: #545454;
  font-size: 14px;
  font-weight: 500;
}

.blog-details-right-area .blog-widget.recent-post-widget ul li a span:hover {
  color: var(--mainColor);
}

.blog-details-right-area .blog-widget.recent-post-widget ul li a h3 {
  font-size: 15px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-weight: 500;
}

.blog-details-right-area .blog-widget.recent-post-widget ul li a h3:hover {
  color: var(--mainColor);
}

.blog-details-right-area .blog-widget.recent-post-widget ul li a {
  color: #545454;
}

.blog-details-right-area .blog-widget.recent-post-widget ul li a:hover {
  color: var(--mainColor);
}

.blog-details-right-area .blog-widget.archives-widget ul li {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.blog-details-right-area .blog-widget.archives-widget ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.blog-details-right-area .blog-widget.archives-widget ul li a {
  position: relative;
  display: block;
  color: #545454;
}

.blog-details-right-area .blog-widget.archives-widget ul li a span {
  display: block;
  margin-bottom: 5px;
  color: #545454;
  float: right;
}

.blog-details-right-area .blog-widget.archives-widget ul li a:hover {
  color: var(--mainColor);
}

.blog-details-right-area .blog-widget.archives-widget ul li a:hover span {
  color: var(--mainColor);
}

.blog-details-right-area .blog-widget.categories-widget ul li {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.blog-details-right-area .blog-widget.categories-widget ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.blog-details-right-area .blog-widget.categories-widget ul li a {
  position: relative;
  display: block;
  color: #545454;
}

.blog-details-right-area .blog-widget.categories-widget ul li a span {
  display: block;
  margin-bottom: 5px;
  color: #545454;
  float: right;
}

.blog-details-right-area .blog-widget.categories-widget ul li a:hover {
  color: var(--mainColor);
}

.blog-details-right-area .blog-widget.categories-widget ul li a:hover span {
  color: var(--mainColor);
}

.blog-details-right-area .blog-widget.tags-widget ul li {
  border: 1px solid #eeeeee;
  padding: 10px 8px;
  margin-right: 5px;
  margin-bottom: 10px;
  display: inline-block;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.blog-details-right-area .blog-widget.tags-widget ul li a {
  position: relative;
  display: block;
  color: #545454;
}

.blog-details-right-area .blog-widget.tags-widget ul li:hover {
  background-color: var(--mainColor);
}

.blog-details-right-area .blog-widget.tags-widget ul li:hover a {
  color: var(--whiteColor);
}

/*================================================
Blog Details Area CSS
=================================================*/
.blog-details-left-area {
  padding: 20px;
}

.blog-details-left-area .blog-details-img img {
  width: 100%;
  height: 70vh;
}

.blog-details-left-area .blog-details-single-post {
  margin-bottom: 30px;
}

.blog-details-left-area .blog-details-single-post h3 {
  font-size: 25px;
  margin-bottom: 15px;
}

.blog-details-left-area .blog-details-single-post ul {
  margin-bottom: 15px;
}

.blog-details-left-area .blog-details-single-post ul li {
  display: inline-block;
  padding: 0 10px;
  font-size: 15px;
}

.blog-details-left-area .blog-details-single-post ul li i {
  color: var(--mainColor);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.blog-details-left-area .blog-details-single-post ul li:first-child {
  padding-left: 0;
  padding-right: 0;
}

.blog-details-left-area .blog-details-single-post ul li:last-child {
  padding-left: 0;
  padding-right: 0;
}

.blog-details-left-area .blog-details-single-post ul li a {
  color: #545454;
}

.blog-details-left-area .blog-details-single-post ul li a i {
  color: var(--mainColor);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.blog-details-left-area .blog-details-single-post ul li a:hover {
  color: var(--mainColor);
}

.blog-details-left-area .blog-details-single-post ul li a:hover i {
  color: var(--mainColor);
}

.blog-details-left-area .blog-details-single-post ul li i {
  position: relative;
  top: 1px;
  margin-right: 5px;
}

.blog-details-left-area .blog-details-single-post .blog-details-img {
  margin-bottom: 30px;
}

.blog-details-left-area .blockquote {
  background-color: var(--mainColor);
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  padding: 25px 30px;
  margin-bottom: 0px;
  overflow: hidden;
  border-radius: 5px;
}

.main-slider-listicles {
  padding: 0 !important;
}

.full-col2 {
  background-color: #ecf5fe;
  margin-bottom: 30px;
  /* margin-top: 30px; */
}

.blog-meta2 {
  display: flex !important;
  column-gap: 30px;
}

.blog-meta3 {
  background-color: transparent !important;
}

.blog-meta3 ul li {
  color: black !important;
  font-weight: 500 !important;
}

.blog-meta3 ul li i {
  color: var(--mainColor) !important;
}

.footer-social-info1 li a i {
  padding: 0;
  font-size: 15px;
  margin-right: 3px;
  transition: all 0.8s ease;
  background: #1c2024;
  width: 25px;
  height: 25px;
  line-height: 27px;
  border-radius: 0;
  color: #fff;
  text-align: center;
}

.single-blog-inner2 .blog-meta li {
  margin-right: 5px !important;
}

.blog-details-left-area .blockquote::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100%;
  height: 100%;
  background-image: url(../img/blog/quate.png);
  /* background-image: url("{{ asset('assets-frontend/img/blog/quate.png') }}"); */
  background-position: top left;
  background-repeat: no-repeat;
}

.blog-details-left-area .blockquote::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: var(--mainColor);
}

.blog-details-left-area .blockquote p {
  font-size: 15px;
  color: #fff;
  font-style: italic;
}

.blog-details-left-area .blockquote span {
  font-size: 16px;
  color: var(--mainColor);
}

.blog-details-left-area .single-post-2 h3 {
  font-size: 25px;
  margin-bottom: 20px;
}

.blog-details-left-area .single-post-2 p {
  margin-bottom: 30px;
}

.blog-details-left-area .blog-details-sheare {
  margin-bottom: 35px;
}

.blog-details-left-area .blog-details-sheare .blog-sheare-tag ul li {
  display: inline-block;
  background-color: var(--mainColor);
  padding: 5px 10px;
}

.blog-details-left-area .blog-details-sheare .social-icon {
  line-height: 1;
  text-align: right;
}

.blog-details-left-area .blog-details-sheare .social-icon .share {
  position: relative;
  top: -3px;
}

.blog-details-left-area .blog-details-sheare .social-icon li {
  display: inline-block;
}

.blog-details-left-area .blog-details-sheare .social-icon li a {
  padding: 0 5px;
}

.blog-details-left-area .blog-details-sheare .social-icon li a i {
  font-size: 20px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.blog-details-left-area .blog-details-sheare .social-icon li a:hover {
  color: #122738;
}

.blog-details-left-area .prev-next {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
  margin-bottom: 30px;
}

.blog-details-left-area .prev-next::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  height: 80%;
  width: 1px;
  background-color: #eeeeee;
}

.blog-details-left-area .prev-next .prev-post {
  font-size: 18px;
}

.blog-details-left-area .prev-next .prev-post a {
  color: #545454;
}

.blog-details-left-area .prev-next .prev-post a:hover {
  color: var(--mainColor);
}

.blog-details-left-area .prev-next .prev-post i {
  position: relative;
  top: 5px;
  color: var(--mainColor);
  font-size: 25px;
}

.blog-details-left-area .prev-next .next-post {
  font-size: 18px;
  float: right;
}

.blog-details-left-area .prev-next .next-post a {
  color: #545454;
}

.blog-details-left-area .prev-next .next-post a:hover {
  color: var(--mainColor);
}

.blog-details-left-area .prev-next .next-post i {
  position: relative;
  top: 5px;
  color: var(--mainColor);
  font-size: 25px;
}

.blog-details-left-area .profile {
  background-color: var(--whiteColor);

  padding: 0 30px;
  margin-top: 40px;
  position: relative;
  padding-left: 196px;
}

.blog-details-left-area .profile2 {
  background-color: var(--backgroundColor);
  padding: 0px;
  margin-top: 0px;
  box-shadow: none;
}

.blog-details-left-area .profile img {
  top: 27px;
  left: 12px;
  height: 160px;
  width: 160px;
}

.blog-details-left-area .profile .social-icon {
  line-height: 1;
}

.blog-details-left-area .profile .social-icon .share {
  position: relative;
  top: -3px;
}

.blog-details-left-area .profile .social-icon li {
  display: inline-block;
}

.blog-details-left-area .profile .social-icon li a {
  padding: 0 5px;
}

.blog-details-left-area .profile .social-icon li a i {
  font-size: 20px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.blog-details-left-area .profile .social-icon li a:hover {
  color: #122738;
}

.blog-details-left-area .comments-wrap {
  padding-top: 40px;
}

.blog-details-left-area .comments-wrap .title {
  font-size: 22px;
  margin-bottom: 40px;
}

.blog-details-left-area .comments-wrap ul {
  margin-bottom: 40px;
}

.blog-details-left-area .comments-wrap ul li {
  position: relative;
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  padding: 30px;
  padding-left: 150px;
  margin-bottom: 40px;
}

.q-ans .comments-wrap {
  padding-top: 0;
}

.q-ans .comments-wrap ul li {
  position: relative;
  background-color: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 5px 10px 10px 10px;
  padding-left: 55px;
  margin-bottom: 0;
}

.first-reply {
  padding-left: 80px !important;
}

.sec-reply {
  padding-left: 80px !important;
}

.sec-reply img {
  left: 15px !important;
}

.third-reply {
  padding-left: 140px !important;
}

.third-reply img {
  left: 80px !important;
  border-radius: 50%;
  position: absolute;
  width: 35px !important;
  height: 35px !important;
  top: 15px;
  z-index: 3;
}

.q-ans1 .comments-wrap ul li {
  position: relative;
  background-color: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 5px 10px 10px 0px;
  /* padding-left: 100px; */
  margin-bottom: 0;
}

.answer-modal {
  padding: 0;
  transition: 0.1s;
  transform-origin: left;
  border-radius: 0;
}

.answer-modal:focus {
  box-shadow: none;
}

.answer-modal:hover {
  border-bottom: 1px solid var(--blackColor);
  color: var(--mainColor);
}

.view-more-ans:hover {
  border-bottom: 1px solid var(--mainColor);
}

.blog-details-left-area .comments-wrap ul li:last-child {
  margin-bottom: 0;
}

.resources-inner {
  padding: 20px 0 !important;
}

.blog-details-left-area .comments-wrap ul li img {
  border-radius: 50%;
  position: absolute;
  top: 35px;
  left: 30px;
}

.q-ans .comments-wrap ul li img {
  border-radius: 50%;
  position: absolute;
  width: 45px;
  height: 45px;
  top: 15px;
  left: 0;
  z-index: 1;
}

.ans-third-reply {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 170px;
  top: -130px;
  left: 45px;
  background-color: transparent;
  border-left: 1px solid var(--borderColor);
  border-bottom: 1px solid var(--borderColor);
}

.ans-fourth-reply {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 170px;
  top: -130px;
  left: 90px;
  background-color: transparent;
  border-left: 1px solid var(--borderColor);
  border-bottom: 1px solid var(--borderColor);
}

.fourth-reply {
  padding-left: 165px !important;
}

.fourth-reply img {
  left: 105px !important;
}

.reply-line {
  /* border-radius: 50%; */
  position: absolute;
  z-index: 2;
  width: 1px;
  height: 150px;
  top: -110px;
  left: 33px;
  background-color: var(--borderColor);
}

.reply-line2 {
  position: absolute;
  z-index: 2;
  width: 1px;
  height: 507px;
  top: -480px;
  left: 45px;
  background-color: var(--borderColor);
}

.q-ans-sec {
  max-width: 1015px;
}

.q-ans .comments-wrap ul {
  margin-bottom: 10px;
}

.q-ans1 .comments-wrap ul {
  margin-bottom: 0px;
}

.healthforum-ans .more-ans {
  background-color: var(--borderColor);
  padding: 10px;
  width: 100%;
}

.like-reply-forum {
  padding: 5px 0 0;
}

.like-reply-forum .reply {
  padding-left: 7px;
}

.like-forum {
  /* border-right: 1px solid var(--blackColor); */
  padding-right: 7px;
}

.like-reply {
  padding: 20px 0 0;
}

.like-reply .reply {
  padding-left: 7px;
}

.relevant-ans {
  margin: 20px 65px 0 55px;
}

.relevant-ans1 {
  margin: 5px 0px 0;
}

.relevant-ans p {
  padding-right: 10px;
  margin-bottom: 0;
}

.like-forum .like-dis2 {
  color: var(--mainColor) !important;
}

.like-forum .like-dis2 span {
  margin-bottom: 0 !important;
}

.like-forum .like-dis2:hover {
  color: var(--blackColor) !important;
}

.blog-details-left-area2 {
  padding: 20px 0;
}

.left-side-question {
  background-color: var(--backgroundColor);
  /* position: relative; */
  margin-top: -10px;
}

.hForum .hforum-question {
  position: sticky;
  top: 45px;
  height: 750px;
  z-index: 1;
  /* margin-top: 200px; */
  width: 100%;
}

.forum-profile {
  /* margin-bottom: auto;*/
  bottom: 0;
}

.hForum .hforum-question ul li h3 {
  margin: 0;
}

.hforum-question .inner-forum-qPerson {
  min-width: 90px;
  border-radius: 50%;
}

.hforum-question .blog-details-left-area {
  padding: 20px 0;
}

.question-inner {
  /* margin-top: 40px; */
  padding: 30px 20px 20px 20px;
  position: relative;
}

.share-forum {
  position: absolute;
  left: -30px;
  top: 54px;
}

.share-modal {
  position: absolute;
  z-index: 2;
  right: -30px !important;
  top: 54px;
}

.share-forum .social-media2 li a i {
  padding: 0;
  font-size: 20px;
  margin-right: 3px;
  transition: all 0.8s ease;
  background: var(--bgColor);
  border: 1px solid var(--borderColor);
  width: 45px;
  height: 45px;
  line-height: 45px;
  /* border-radius: 50%; */
  /* color: var(--blackColor); */
  text-align: center;
}

.share-modal .social-media2 li a i {
  padding: 0;
  font-size: 20px;
  margin-right: 3px;
  transition: all 0.8s ease;
  background: var(--bgColor);
  border: 1px solid var(--borderColor);
  width: 45px;
  height: 45px;
  line-height: 45px;
  /* border-radius: 50%; */
  /* color: var(--blackColor); */
  text-align: center;
}

.share-modal .social-media2 li a .fa-twitter::before {
  font-size: 22px;
}

.share-forum .social-media2 li a i:hover {
  background: var(--mainColor);
  color: #ffffff;
}

.share-modal .social-media2 li a i:hover {
  background: var(--mainColor);
  color: #ffffff;
}

/* answer-modal{
  padding: 0;
  transition: .1s;
  transform-origin: left;
}
.answer-modal:focus{
  box-shadow: none;
}
.answer-modal:hover{
  border-bottom: 1px solid var(--blackColor);
  color: var(--mainColor);

} */
.answer-modal a {
  background-color: var(--bgColor);
}

/* .answer-modal-inner-forum {
    padding: 10px 30px;
    border-radius: 20px;
    
    border: 1px solid var(--secondaryColor);
} */

/* .answer-modal-inner-forum a {
    font-weight: 500;
    transition: .2s ease-in-out;

} */

/* .answer-modal-inner-forum:hover {

    background-color: var(--mainColor);
    color: #ffffff;

} */

/* .answer-modal-inner-forum:hover a {

    color: var(--backgroundColor) !important;

} */

.hForum .hforum-answers::-webkit-scrollbar {
  width: 0;
}

.hforum-answers {
  padding: 30px 0;
}

.blog-details-left-area .comments-wrap ul li h3 {
  margin-bottom: 5px;
  font-size: 18px;
}

.blog-details-left-area .comments-wrap ul li span {
  margin-bottom: 10px;
  display: block;
  font-size: 15px;
}

.blog-details-left-area .comments-wrap ul li p {
  margin-bottom: 0;
}

.blog-details-left-area .comments-wrap ul li a {
  position: absolute;
  top: 30px;
  right: 30px;
}

.q-ans .comments-wrap ul li a {
  position: static !important;
}

.ml-30 {
  margin-left: 30px;
}

.ml-55 {
  margin-left: 55px;
}

.blog-details-left-area .comments-wrap ul .ml-30 {
  margin-left: 30px;
}

.blog-details-left-area .contact-area .contact-wrap .contact-title {
  text-align: left !important;
  margin-bottom: 30px;
}

.blog-details-left-area .contact-area .contact-wrap .contact-title h2 {
  font-size: 25px;
}

.comment-wrap {
  background-color: var(--whiteColor);

  padding: 30px 15px;
}

.comment-wrap .comment-title {
  margin-bottom: 20px;
  padding: 0 15px;
}

.comment-wrap .comment-title h2 {
  font-size: 20px;
}

.comment-wrap .form-title {
  margin-top: 20px;
  margin-bottom: 20px;
}

.comment-wrap input[type="checkbox"] {
  position: relative;
  top: 1px;
  right: 5px;
}

.comment-wrap form label {
  float: left;
}

.comment-wrap form .nice-select {
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.comment-wrap .form-group {
  padding: 15px;
}

.comment-wrap .default-btn {
  margin: 15px 15px 0 15px;
}

.footer-social-list {
  display: flex;
  justify-content: end;
  column-gap: 10px;
  padding: 20px 30px 20px 20px;
}

.footer-social-list i {
  padding: 0;
  font-size: 15px;
  margin-right: 3px;
  transition: all 0.8s ease;
  background: #1c2024;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 0;
  color: #fff;
  text-align: center;
}

/*================================================
About Area CSS
=================================================*/
.about-style-one {
  position: relative;
}

.content-box,
.image-box,
.inner-box {
  padding: 20px;
}

.content_block_5 .content-box {
  position: relative;
}

.content_block_5 .content-box .sec-title {
  margin-bottom: 33px;
}

.content_block_5 .content-box .sec-title span {
  color: var(--mainColor);
  font-weight: 600;
}

.content_block_5 .content-box .sec-title h2 {
  position: relative;
  display: block;
  font-size: 30px;
  line-height: 48px;
  font-weight: 600;
  margin-bottom: 20px;
}

.content_block_5 .content-box .sec-title .title-shape {
  position: relative;
  width: 100px;
  height: 4px;
  background: var(--mainColor);
}

.content_block_5 .content-box h4 {
  display: block;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin-bottom: 17px;
}

.content_block_5 .content-box p {
  margin-bottom: 27px;
}

.content_block_5 .content-box .list li {
  position: relative;
  display: block;
  margin-bottom: 10px;
  padding-left: 30px;
}

.content_block_5 .content-box .list li:last-child {
  margin-bottom: 0px;
}

.content_block_5 .content-box .list li i {
  position: absolute;
  left: 0px;
  top: 3px;
  color: var(--mainColor);
  font-size: 18px;
}

.about-style-one .image-box {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 5px;
  margin: 0;
}

.about-style-one .image-box img {
  width: 100%;
  border-radius: 5px;
}

.about-style-one .image-box::before {
  position: absolute;
  top: -30%;
  left: 0;
  width: 150%;
  height: 150%;
  background: rgba(255, 255, 255, 0.3);
  content: "";
  -webkit-transition: -webkit-transform 0.9s;
  transition: transform 0.9s;
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg)
    translate3d(0, -100%, 0);
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg)
    translate3d(0, -100%, 0);
}

.about-style-one .image-box:hover::before {
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg)
    translate3d(0, 100%, 0);
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg)
    translate3d(0, 100%, 0);
}

.feature-block-one .inner-box {
  position: relative;
  display: block;
  overflow: hidden;
}

.feature-block-one:last-child .inner-box {
  margin-bottom: 0px;
}

.feature-block-one .inner-box .image {
  position: relative;
  display: block;
  overflow: hidden;
  background: #252638;
  border-radius: 5px;
  margin: 0;
}

.feature-block-one .inner-box .image img {
  width: 100%;
  border-radius: 5px;
  transition: all 500ms ease;
}

.feature-block-one .inner-box:hover .image img {
  opacity: 0.1;
}

.feature-block-one .inner-box .image:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 10%,
    rgba(0, 0, 0, 0.2) 50%
  );
  left: 0px;
  bottom: 0px;
  z-index: 1;
  transition: all 500ms ease;
}

.feature-block-one .inner-box .text {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.feature-block-one .inner-box .text a {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #ffffff;
  font-size: 14px;
  text-align: center;
  border-radius: 50%;
  color: #2b2c3d;
}

.feature-block-one .inner-box:hover .text a {
  color: #ffffff;
  box-shadow: 0px 0px 0px 5px rgba(228, 30, 47, 0.5);
}

.feature-block-one .inner-box h4 {
  position: relative;
  display: block;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #ffffff;
}

.feature-block-one .inner-box h4:before {
  position: absolute;
  content: "";
  width: 4px;
  height: 4px;
  left: 30px;
}

.feature-block-one .inner-box h4:after {
  position: absolute;
  content: "";
  width: 50px;
  height: 4px;
  left: 38px;
}

.feature-block-one .inner-box .text h4 {
  position: absolute;
  left: 0px;
  bottom: 22px;
  padding: 16px 20px 0px 30px;
  opacity: 1;
  transition: all 500ms ease;
}

.feature-block-one .inner-box:hover .text h4 {
  opacity: 0;
}

.feature-block-one .inner-box .text h4:before,
.feature-block-one .inner-box .text h4:after {
  top: 0px;
}

.feature-block-one .inner-box .overlay-content {
  position: absolute;
  left: 0px;
  bottom: 0px;
  padding: 0px 20px 0px 40px;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: all 500ms ease;
}

.feature-block-one .inner-box:hover .overlay-content {
  bottom: 33px;
  opacity: 1;
  visibility: visible;
}

.feature-block-one .inner-box .overlay-content h4 {
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.feature-block-one .inner-box .overlay-content h4:before,
.feature-block-one .inner-box .overlay-content h4:after {
  bottom: 0px;
  background-color: var(--mainColor);
}

.feature-block-one .inner-box .overlay-content h4:before {
  left: 0px;
}

.feature-block-one .inner-box .overlay-content h4:after {
  left: 8px;
}

.feature-block-one .inner-box .overlay-content p {
  color: var(--bgColor);
}

.about-content .top-title {
  color: var(--mainColor);
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}

.about-content {
  margin-right: 40px;
}

.about-content h2 {
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 20px;
  font-weight: 600;
}

.about-content p {
  margin-bottom: 30px;
}

.about-content ul {
  margin-bottom: 35px;
}

.about-content ul li {
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 15px;
  position: relative;
  padding-left: 35px;
}

.about-content ul li:last-child {
  margin-bottom: 0;
}

.about-content ul li i {
  display: inline-block;
  background-color: var(--bgColor);
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  font-size: 16px;
  color: var(--mainColor);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  top: -3px;
  left: 0;
}

.about-content ul li:hover i {
  background-color: var(--mainColor);
  color: #ffffff;
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

.about-img {
  background-image: url(../../assets/img/about/about-4.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: relative;
}

/*================================================
Counter Area CSS
=================================================*/
.single-counter {
  text-align: center;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin: 20px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  padding: 30px;
  position: relative;
}

/*
.single-counter i {
    background-color: #def5ee;
    color: var(--mainColor);
    font-size: 30px;
    line-height: 1;
    display: block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto 25px;
    border-radius: 50%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
} */

.single-counter p {
  color: var(--mainColor);
  line-height: 1;
  margin-bottom: 0;
  font-size: 18px;
  padding: 8px 12px;
  border: 1px solid var(--borderColor);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.single-counter h2 {
  color: var(--blackColor);
  line-height: 1;
  font-size: 40px;
  margin-top: -8px;
  margin-bottom: 10px;
}

.single-counter:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

.single-counter:hover i {
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
}

/*================================================
Video Area CSS
=================================================*/
.video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.video-btn {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 89px;
  text-align: center;
  border-radius: 50px;
  color: var(--mainColor);
  position: relative;
  top: 3px;
  z-index: 1;
  background-color: rgba(250, 103, 103, 0.5);
}

.video-btn i {
  font-size: 50px;
  font-weight: 700;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 4px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}

.video-btn::after,
.video-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  bottom: 0;
  left: 0;
  border-radius: 50px;
  background-color: rgba(250, 103, 103, 0.5);
}

.video-btn::before {
  -webkit-animation: ripple 1.6s ease-out infinite;
  animation: ripple 1.6s ease-out infinite;
}

.video-btn::after {
  -webkit-animation: ripple 1.6s ease-out infinite;
  animation: ripple 1.6s ease-out infinite;
}

.video-btn:hover {
  background-color: var(--mainColor);
}

.video-btn:hover i {
  color: #ffffff;
}

.video-btn:hover::after,
.video-btn:hover::before {
  background-color: var(--mainColor);
}

@-webkit-keyframes ripple {
  0%,
  35% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}

@keyframes ripple {
  0%,
  35% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}

/*================================================
Tabs Area CSS
=================================================*/
.tabs_item {
  display: none;
}

.tabs_item .row {
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.tabs_item:first-child {
  display: block;
}

.choose-tab .tabs {
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  text-align: center;
  margin-bottom: 40px;
  margin-top: 40px;
}

.choose-tab .tabs li {
  display: inline-block;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  padding: 20px 95px;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.choose-tab .tabs li:last-child {
  border-right: none;
}

.choose-tab .tabs li:hover {
  color: var(--mainColor);
}

.choose-tab .tabs li.current {
  color: var(--mainColor);
}

.why-choose-wrap {
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  border-radius: 4px;
  padding: 40px;
}

.why-choose-wrap .why-choose-content {
  margin-bottom: 0;
}

.why-choose-wrap .why-choose-content h2 {
  font-size: 30px;
}

.why-choose-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  border-radius: 4px;
  position: relative;
}

.why-choose-img .video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.why-choose-img.bg-1 {
  background-image: url(../../assets/img/about/about-1.jpg);
}

.why-choose-img.bg-2 {
  background-image: url(../../assets/img/about/about-5.jpg);
}

.why-choose-img.bg-3 {
  background-image: url(../../assets/img/about/about-6.jpg);
}

/*================================================
Contact Area CSS
=================================================*/
.contact-info-area .single-contact-info {
  text-align: center;
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.08);
  background-color: var(--whiteColor);
  padding: 40px;
  -webkit-transition: all 0.5s;
  transition: all 0.3s;
  border-radius: 4px;
}

.contact-info-area .single-contact-info i {
  display: block;
  color: var(--mainColor);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-size: 30px;
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  line-height: 60px;
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
}

.contact-info-area .single-contact-info h3 {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-size: 22px;
}

.contact-info-area .single-contact-info a {
  color: #545454;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  display: block;
  font-size: 15px;
}

.contact-info-area .Contact-Page-social-share i {
  padding: 0 !important;
  font-size: 15px !important;
  margin-right: 3px !important;
  margin-bottom: 0 !important;
  margin-left: auto;
  transition: all 0.8s ease !important;
  background: #d7d8d9 !important;
  width: 35px !important;
  height: 35px !important;
  line-height: 35px !important;
  border-radius: 0 !important;
  color: var(--mainColor) !important;
  text-align: center !important;
}

.contact-info-area .single-contact-info:hover {
  border: 1px solid var(--mainColor);
}

.contact-info-are .contact-info-area .single-contact-info:hover i {
  color: var(--mainColor) !important;
  border-color: var(--whiteColor);
  background-color: var(--whiteColor);
}

.contact-info-area .single-contact-info:hover h3 {
  color: var(--mainColor);
}

.contact-info-area .single-contact-info:hover a {
  color: var(--mainColor);
}

.contact-info-area .contact-info-col {
  padding: 20px;
}

/* CONTACT FORM STYLE */
.contact-area .contact-wrap {
  padding: 25px;
  text-align: center;
}

.contact-area .contact-wrap .default-btn {
  margin-top: 10px;
}

#msgSubmit {
  margin-top: 30px;
  font-size: 20px;
}

.contact__msg {
  display: none;
}

.hidden {
  display: none;
}

.contact-wrap {
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.08);
  padding: 30px;
}

.contact-wrap .contact-form-col {
  padding: 15px;
}

.contact-wrap .contact-title {
  margin-bottom: 30px;
}

.contact-wrap .contact-title h2 {
  font-size: 20px;
}

.get-in-touch {
  padding: 20px;
}

.get-in-touch ul li i {
  float: left;
  margin-top: 2px;
  margin-right: 10px;
  font-size: 20px;
  color: var(--mainColor);
}

.get-in-touch h3 {
  font-size: 30px;
  margin-bottom: 20px;
}

.get-in-touch p {
  color: #323347;
  margin-bottom: 20px;
}

.get-in-touch ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.get-in-touch ul li {
  padding: 15px 0;
}

.get-in-touch ul li:last-child {
  margin-bottom: 0;
}

.get-in-touch ul li span {
  font-size: 16px;
  font-weight: 600;
  color: var(--mainColor);
  display: block;
  margin-bottom: 10px;
}

.contact-form {
  padding: 0 20px;
}

.contact-form h3 {
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.contact-form form label {
  width: 100%;
}

.contact-form .contact-form-col {
  padding: 15px 0;
}

.contact-form form input,
.contact-form form textarea {
  border-radius: 0;
  height: 60px;
  border: 1px solid #ebebeb;
  background-color: var(--bgColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  width: 100%;
  padding: 0.5rem 1rem;
}

.contact-form form input:focus,
.contact-form form textarea:focus {
  outline: 0 none;
}

.contact-form form input::-webkit-input-placeholder,
.contact-form form textarea::-webkit-input-placeholder {
  color: var(--mainColor);
}

.contact-form form input:-ms-input-placeholder,
.contact-form form textarea:-ms-input-placeholder {
  color: var(--mainColor);
}

.contact-form form input::-ms-input-placeholder,
.contact-form form textarea::-ms-input-placeholder {
  color: var(--mainColor);
}

.contact-form form input::placeholder,
.contact-form form textarea::placeholder {
  color: var(--mainColor);
}

.contact-form form input:focus,
.contact-form form textarea:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--mainColor);
}

.contact-form-area .contact-form form input[type="submit"]:focus {
  outline: none;
}

.contact-form form textarea {
  height: auto;
}

.contact-form-area .contact-form form input[type="submit"] {
  display: inline-block;
  text-align: center;
  background-color: var(--mainColor);
  color: var(--whiteColor);
  border: 2px solid var(--mainColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
  z-index: 1;
  border-radius: 5px;
  -webkit-box-shadow: 3px 3px #ebebeb;
  box-shadow: 3px 3px #ebebeb;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 16px;
  font-weight: 600;
}

.contact-form-area .contact-form form input[type="submit"]::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  content: "";
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.contact-form form input[type="submit"]:hover {
  color: var(--mainColor);
  border: 2px solid var(--mainColor);
  background-color: transparent;
}

.contact-form form input[type="submit"]:hover::before {
  opacity: 0;
  visibility: hidden;
}

.contact-form label,
.contact-wrap label {
  margin-bottom: 10px;
  font-size: 15px;
}

/* GOOGLE MAP STYLE */
.map-area iframe {
  height: 500px;
  width: 100%;
}

.contact-form-area .contact-map {
  margin-top: 30px;
}

.contact-map iframe {
  width: 100%;
  display: block;
  border: none;
  border-radius: 20px;
}

/*================================================
Photo Gallery Area CSS
=================================================*/
.image-gallery-area .section-title {
  margin-bottom: 80px;
}

.image-gallery-area .gallery-g-mb-30 {
  margin-bottom: 24px;
}

.image-gallery-area {
  overflow: hidden;
}

.image-gallery-area .gallery {
  position: relative;
}

.image-gallery-area .gallery .full-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
}

.image-gallery-area .gallery .full-screen i {
  font-size: 50px;
  color: var(--whiteColor);
}

.image-gallery-area .gallery:hover .full-screen {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

/*================================================
Video Gallery Area CSS
=================================================*/
.video-area .section-title {
  margin-bottom: 80px;
}

.video-btn-one {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 0;
  color: var(--main-color);
  position: relative;
  top: 3px;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.video-btn-one i {
  font-size: 80px;
  color: var(--mainColor);
  position: absolute;
  top: 0;
  left: 6px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}

.video-btn-one::after,
.video-btn-one::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  bottom: 0;
  left: 0;
  border-radius: 0;
  border-radius: 50%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-animation: ripple 1.6s ease-out infinite;
  animation: ripple 1.6s ease-out infinite;
  background-color: rgba(255, 255, 255, 0.9);
}

.video-btn-one:hover::before,
.video-btn-one:hover::after {
  background-color: rgba(255, 255, 255, 0.9);
}

@-webkit-keyframes ripple {
  0%,
  35% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}

@keyframes ripple {
  0%,
  35% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}

/*
Video wave Style*/
.video-btn-two span {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  content: "";
  display: block;
  border-radius: 50%;
  width: 90px;
  height: 90px;
}

.video-btn-two span::after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.1px solid var(--mainColor);
  -webkit-animation: videoTwo 8s linear infinite;
  animation: videoTwo 8s linear infinite;
}

.video-btn-two span::before {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.1px solid var(--mainColor);
  -webkit-animation: videoTwo 8s linear infinite;
  animation: videoTwo 8s linear infinite;
}

.video-btn-two span:nth-child(1)::after {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.video-btn-two span:nth-child(1)::before {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.video-btn-two span:nth-child(2)::after {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.video-btn-two span:nth-child(2)::before {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.video-btn-two span:nth-child(3)::after {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.video-btn-two span:nth-child(3)::before {
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
}

.video-btn-two span:nth-child(4)::after {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.video-btn-two i {
  width: 90px;
  height: 90px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  background: var(--whiteColor);
  color: var(--mainColor);
  border: 5px solid var(--mainColor);
  font-size: 60px;
}

.video-btn-two.video-btn-3 i {
  color: var(--mainColor);
  border-color: var(--mainColor);
}

.video-btn-two.video-btn-3 span::before {
  border: 0.1px solid var(--mainColor);
}

.video-btn-two.video-btn-3 span::after {
  border: 0.1px solid var(--mainColor);
}

@-webkit-keyframes videoTwo {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translate(-50%, -50%) scale(5);
    transform: translate(-50%, -50%) scale(5);
    opacity: 0;
  }
}

@keyframes videoTwo {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translate(-50%, -50%) scale(5);
    transform: translate(-50%, -50%) scale(5);
    opacity: 0;
  }
}

.video-content {
  max-width: 1010px;
  margin: auto;
  text-align: center;
  background-image: url(../../assets/img/video/video-bg-1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  padding-top: 150px;
  padding-bottom: 150px;
  position: relative;
  z-index: 1;
}

.video-content.bg-2 {
  background-image: unset;
  padding: 0;
}

.video-content.bg-2 img {
  border-radius: 50%;
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
  border: 5px solid var(--whiteColor);
}

.video-content.bg-2::before {
  display: none;
}

.video-content.bg-2 .video-btn-center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.video-content.bg-5 {
  background-image: url(../../assets/img/video/video-bg-4.jpg);
  border: 5px solid var(--whiteColor);
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
}

.video-content.bg-5::before {
  display: none;
}

.video-content.bg-5 .video-btn-center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.video-content.bg-7 {
  background-image: url(../../assets/img/video/video-bg-3.jpg);
  border-radius: 0;
  /* margin-right: 30px; */
}

.video-content.bg-7::before {
  display: none;
}

.video-content.bg-9 {
  background-image: url(../../assets/img/video/video-bg-2.jpg);
  padding-top: 150px !important;
  padding-bottom: 150px !important;
  /* border-radius: 15px; */
}

.video-content.bg-9::before {
  display: none;
}

.video-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(45deg, #38c8f3 0%, #38c8f3 0%, #397fe7 100%);
  opacity: 0.9;
  z-index: -1;
}

.video-content h3 {
  color: var(--whiteColor);
  font-size: 40px;
  margin-bottom: 0;
  margin-top: 30px;
}

.video-bg {
  padding-left: 30px;
  padding-top: 20px;
  background-color: #e5f6ff;
  border-radius: 0 225px 225px 0;
}

.video-bg2 {
  margin-top: 20px !important;
}

.listicles-pills {
  display: flex;
  column-gap: 10px;
  /* z-index: 10; */
  flex-wrap: wrap;
}

.common-pills {
  background-color: var(--mainColor);
  color: aliceblue;
  border-radius: var(--border-radius);
  padding: 3px 15px;
  font-size: 0.6rem;
  font-weight: 500;
  margin-top: 5px;
  position: relative;
  text-transform: uppercase;
  z-index: 2;
  width: fit-content;
}

.common-pills2 {
  background-color: #ffffff;
  color: var(--mainColor);
  border-radius: var(--border-radius);
  border: 1px solid var(--mainColor);
  padding: 1px 15px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 5px;
  position: relative;
  text-transform: uppercase;
  z-index: 2;
}

.common-pills4 {
  background-color: transparent;
  color: #fff;
  border-radius: var(--border-radius);
  border: 2px solid var(--whiteColor);
  padding: 2px 15px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 5px;
  position: relative;
  /* text-transform: uppercase; */
  cursor: pointer;
  z-index: 2;
  transition: 0.3s ease-in-out;
}

.common-pills4:hover {
  background-color: #fff;
  color: var(--mainColor);
  /* border: 2px solid var(--mainColor); */
}

.top-view-area3 {
  padding: 20px 0 0px 43px !important;
  margin-bottom: -107px !important;
  /* background-color: transparent !important; */
}

.top-view-area3 .title {
  border: 0 !important;
  font-size: 36px !important;
  z-index: 2;
  /* background-color: transparent !important; */
}

.video-bg p {
  padding-right: 50px;
}

.video-bg h2 {
  font-size: 36px;
  margin-bottom: 20px;
  margin-top: 12vh;
}

.heading-lists {
  border: 1px solid #d9d5d5;
  padding: 10px 22px;
  border-radius: 5px;
  margin-left: 2px;
  margin: 10px 0;
  /* box-shadow: rgba(0, 0, 0, 0.16) 0px 4px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; */
}

.heading-lists p {
  font-size: 18px;
  font-weight: 500;
  /* margin-top: 20px; */
  position: relative;
}

/* .short-head::before {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 60px;
  height: 1px;
  background-color: var(--mainColor);
} */

.video-bg .video-btn-one i {
  color: #d14327;
}

.style-line {
  --bs-text-opacity: 1;
  /* color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; */
  color: var(--mainColor);
  position: relative;
}

.style-line::after {
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 9.37'%3E%3Cpath fill='%230d96e4' d='M202.47,9.37A1191.26,1191.26,0,0,0,1.79,7.48,1.67,1.67,0,0,1,0,5.92H0A1.76,1.76,0,0,1,1.63,4.21c67-5.71,133.83-5.43,200.8-.27A2.75,2.75,0,0,1,205,6.88h0A2.6,2.6,0,0,1,202.47,9.37Z'/%3E%3C/svg%3E"); */
}

.style-line::after {
  content: "";
  position: absolute;
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  left: 50%;
  bottom: -0.1em;
  width: 110%;
  height: 0.3em;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.video-area-style-three {
  background-image: url(../../assets/img/video/video-bg-3.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  padding-top: 200px;
  padding-bottom: 200px;
  position: relative;
  z-index: 1;
}

.video-area-style-three::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.video-area-style-three .video-bg {
  background-color: transparent;
  padding-left: 0;
}

.video-area-style-three .video-bg h2 {
  color: var(--whiteColor);
}

.video-area-style-three .video-bg p {
  color: var(--whiteColor);
}

.video-style-four .video-bg {
  background-color: transparent;
  padding-left: 0;
}

.video-style-four .bg-4 {
  background-image: unset;
  padding: 0;
  position: relative;
}

.video-style-four .bg-4::before {
  display: none;
}

.video-style-four .bg-4 .video-btn-center {
  position: absolute;
  bottom: 200px;
  right: 200px;
}

.video-play-btn {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 70px;
  display: inline-block;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background-color: #db3945;
  color: var(--mainColor);
  border: 5px solid #464d4b;
}

.video-play-btn i {
  position: relative;
  top: -7px;
  left: 4px;
  color: var(--whiteColor);
}

.video-area-style-five .video-content {
  border-radius: 0;
}

.video-area-style-five .video-content::before {
  display: none;
}

.video-area-style-five {
  background-image: url(../../assets/img/video/video-bg-6.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  padding-top: 100px;
  position: relative;
  z-index: 1;
}

.video-area-style-five::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #ffffff;
  z-index: -1;
}

.video-area-style-five::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.video-area-style-six .video-bg {
  background-color: var(--whiteColor);
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
}

.video-area-style-seven .video-bg {
  background-color: var(--whiteColor);
  -webkit-box-shadow: none;
  box-shadow: none;
  padding-left: 0;
}

.video-area-style-seven .video-content-wrap {
  background-image: url(../../assets/img/video/video-bg-9.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  padding: 50px 40px;
  border-radius: 0 10px 10px 0;
}

.video-area-style-seven .pl-0 {
  padding-left: 0;
}

.video-area-style-seven .pr-0 {
  padding-right: 0;
}

.video-area-style-seven .video-content {
  position: relative;
  padding: 0;
}

/*================================================
Main Slider Area CSS
==================================================*/
.main-slider {
  padding: 0 20px;
}

.main-slider-area .owl-carousel .owl-stage .owl-item {
  left: -0.5px;
}

.main-slider-area .blog-details-right-area .blog-widget {
  padding: 15px;
}

.main-slider-area .blog-details-right-area .blog-widget.recent-post-widget {
  padding: 15px 15px 0 15px;
}

.main-slider-area .blog-widget.recent-post-widget ul li a h3 {
  font-size: 14px;
  line-height: 18px;
}

.main-slider-area .blog-widget.recent-post-widget ul li a {
  padding-left: 95px;
}

.main-slider-area .blog-widget.recent-post-widget ul li a img {
  width: 85px;
  height: 65px;
}

.main-slider-area .single-blog-inner {
  padding: 0 0 20px;
  overflow: visible;
}

.main-slider-area .single-blog-inner:last-child {
  padding: 0;
}

@media only screen and (max-width: 767px) {
  .main-slider {
    padding: 0 0 30px;
  }

  .main-slider-area .blog-details-right-area .blog-widget:last-child {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .main-slider {
    padding: 0 0 40px;
  }

  .main-slider-area .blog-details-right-area .blog-widget:last-child {
    margin-bottom: 40px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-slider-area .blog-details-right-area .blog-widget.recent-post-widget {
    padding: 15px 10px 0 10px;
  }

  .main-slider-area
    .blog-details-right-area
    .blog-widget.recent-post-widget
    ul
    li {
    height: 94px;
  }

  .main-slider-area
    .blog-details-right-area
    .blog-widget.recent-post-widget
    ul
    li
    a {
    padding-left: 80px;
  }

  .main-slider-area
    .blog-details-right-area
    .blog-widget.recent-post-widget
    ul
    li
    a
    img {
    width: 70px;
    height: 55px;
  }

  .main-slider-area
    .blog-details-right-area
    .blog-widget.recent-post-widget
    ul
    li
    a
    h3 {
    font-size: 13px;
    line-height: 16px;
  }
}

.main-slider-image {
  position: relative;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  max-height: 500px;
  padding-top: 200px;
  padding-bottom: 200px;
}

.main-slider-image-aboutUs {
  background-color: #fff;
  height: 600px !important;
  padding-top: 0px;
  padding-bottom: 0px;
}

.main-slider-content {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 30px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 25px;
  padding-right: 25px;
  margin-left: 30px;
  margin-right: 30px;
  color: #ffffff;
  text-align: center;
}

.main-slider-content-2 {
  background: transparent;
  bottom: auto;
  top: 0;
  padding-top: 0;
  margin-right: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.main-slider-content-fInner {
  padding-left: 0;
  padding-right: 0;
}

.main-slider-content h1 {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
  color: var(--whiteColor);
}

.main-slider-image-aboutUs h1 {
  color: var(--blackColor);
  font-size: 20px;
}

.main-slider-content p {
  color: var(--whiteColor);
  font-size: 15px;
}

.main-slider-image-aboutUs p {
  color: var(--blackColor);
  font-size: 17px;
}

.main-slider.owl-theme .owl-nav {
  top: 50%;
  right: 25px;
  margin-top: 0;
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
}

.main-slider.owl-theme .owl-nav [class*="owl-"] {
  padding: 0;
  width: 40px;
  height: 40px;
  margin: 8px 0;
  display: block;
  font-size: 25px;
  border-radius: 0;
  position: relative;
  color: var(--blackColor);
  background: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.main-slider.owl-theme .owl-nav [class*="owl-"] i {
  right: 0;
  left: 0;
  top: 50%;
  margin-top: 1px;
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.main-slider.owl-theme .owl-nav [class*="owl-"]:hover {
  background-color: var(--mainColor);
  color: var(--whiteColor);
}

.main-slider.owl-theme:hover .owl-nav {
  opacity: 1;
  visibility: visible;
}

@media only screen and (max-width: 767px) {
  .main-slider-content {
    bottom: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .main-slider-content h1 {
    font-size: 14px;
  }

  .main-slider-content p {
    font-size: 13px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .main-slider-content h1 {
    font-size: 17px;
  }

  .main-slider-content p {
    font-size: 14px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-slider-content h1 {
    font-size: 17px;
  }

  .main-slider-content p {
    font-size: 14px;
  }
}

/*================================================
Breaking News Area CSS
=================================================*/
.breaking-news-content {
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
  padding-left: 185px;
  /* border: 1px solid #e2e5e9; */
  background: var(--bgColor);
  margin-bottom: 20px;
  margin-top: 10px;
}

.breaking-news-content1 {
  border: 0px !important;
  margin-bottom: 12px !important;
}

.breaking-news-content span {
  background-color: var(--mainColor);
  color: var(--whiteColor);
  padding: 5px 20px;
  position: absolute;
  top: 12px;
  left: 12px;
}

.breaking-news-content span::before {
  content: "";
  position: absolute;
  top: 12px;
  right: -5px;
  width: 10px;
  height: 10px;
  background-color: var(--mainColor);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.breaking-news-content p {
  color: var(--blackColor);
}

.breaking-news-content a p:hover {
  color: var(--mainColor);
}

@media only screen and (max-width: 767px) {
  .breaking-news-content {
    padding-left: 0;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }

  .breaking-news-content span {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 10px;
    text-align: center;
  }

  .breaking-news-content span::before {
    top: 27px;
    right: 0;
    left: 0;
    margin: auto;
  }

  .breaking-news-content p {
    padding: 0 15px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breaking-news-content {
    padding-left: 0;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }

  .breaking-news-content span {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 10px;
    text-align: center;
  }

  .breaking-news-content span::before {
    top: 27px;
    right: 0;
    left: 0;
    margin: auto;
  }

  .breaking-news-content p {
    padding: 0 15px;
  }
}

/*================================================
Top View Area CSS
=================================================*/
.top-view-area {
  padding: 10px 20px 10px 30px;
}

.top-view-area .title {
  /* padding-bottom: 10px; */
  border-bottom: 1px solid #eeeeee;
  /* margin-bottom: 25px; */
  font-size: 20px;
  position: relative;
  margin-bottom: 7px;
}

.top-view-area .title::before {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 70px;
  height: 1px;
  background-color: var(--mainColor);
}

@media only screen and (max-width: 767px) {
  .top-view-area {
    padding: 0 0 15px 3px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .top-view-area {
    padding: 0 0 20px 0;
  }
}

/*================================================
Banner Area CSS
==================================================*/
.banner-area .container-fluid .row {
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.banner-single-blog-post {
  position: relative;
  margin-bottom: 24px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  height: 300px;
  overflow: hidden;
}

.banner-single-blog-post::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(transparent),
    to(rgba(0, 0, 0, 0.9))
  );
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9));
}

.banner-single-blog-post .banner-single-blog-post-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
}

.banner-single-blog-post {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.9s;
  transition: 0.9s;
}

.banner-single-blog-post:hover {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

.banner-single-blog-post.style-one:hover {
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
}

.banner-single-blog-post .banner-single-blog-post-content h3 {
  font-size: 18px;
  margin-bottom: 15px;
  line-height: 1.3;
}

.banner-single-blog-post .banner-single-blog-post-content h3 a {
  color: var(--whiteColor);
}

.banner-single-blog-post .banner-single-blog-post-content h3 a:hover {
  color: var(--mainColor);
}

.banner-single-blog-post .banner-single-blog-post-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.banner-single-blog-post .banner-single-blog-post-content ul li {
  display: inline-block;
  color: var(--whiteColor);
  font-size: 14px;
  position: relative;
  padding-right: 10px;
  margin-right: 10px;
  padding-bottom: 10px;
  text-transform: capitalize;
}

.banner-single-blog-post .banner-single-blog-post-content ul li i {
  margin-right: 5px;
}

.banner-single-blog-post .banner-single-blog-post-content ul li::before {
  content: none;
}

.banner-single-blog-post
  .banner-single-blog-post-content
  ul
  li:last-child::before {
  content: none;
}

.banner-single-blog-post .banner-single-blog-post-content ul li a {
  color: var(--whiteColor);
}

@media only screen and (max-width: 767px) {
  .banner-single-blog-post .banner-single-blog-post-content {
    padding: 10px;
  }

  .banner-single-blog-post .banner-single-blog-post-content h3 {
    font-size: 15px;
  }

  .banner-area .col-lg-6 .row .col-lg-6:last-child .banner-single-blog-post {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-single-blog-post .banner-single-blog-post-content {
    padding: 10px;
  }

  .banner-single-blog-post .banner-single-blog-post-content h3 {
    font-size: 16px;
  }

  .banner-area .col-lg-6 .row .col-lg-6:nth-child(3) .banner-single-blog-post,
  .banner-area .col-lg-6 .row .col-lg-6:nth-child(4) .banner-single-blog-post {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-single-blog-post .banner-single-blog-post-content {
    padding: 10px;
  }

  .banner-single-blog-post .banner-single-blog-post-content h3 {
    font-size: 15.2px;
    line-height: 1.2;
  }
}

@media only screen and (min-width: 992px) {
  .banner-area .col-lg-6 .row .col-lg-6:nth-child(3) .banner-single-blog-post,
  .banner-area .col-lg-6 .row .col-lg-6:nth-child(4) .banner-single-blog-post {
    margin-bottom: 0;
  }

  .banner-single-blog-post.style-one {
    height: 100% !important;
  }
}

/*================================================
Dark Homepage CSS
=================================================*/
body.dark-homepage {
  background-color: var(--blackColor);
}

.dark-homepage .header-action .sidemenu-btn .btn-wrap.btn-dark {
  background-color: var(--whiteColor);
}

.dark-homepage .header-action .sidemenu-btn .btn-wrap.btn-dark span {
  background-color: #fff;
  /* background-color: var(--blackColor); */
}

.dark-homepage .mainmenu > li > a:hover {
  color: var(--mainColor);
}

.dark-homepage .mainmenu > li > a.active {
  color: var(--mainColor);
}

.dark-homepage .mainmenu > .menu-item-has-children > a {
  color: var(--whiteColor);
}

.dark-homepage .main-mainmenu.main-sticky {
  background-color: #121212;
}

@media only screen and (max-width: 991px) {
  .dark-homepage .mainmenu > .menu-item-has-children > a {
    color: var(--blackColor);
  }
}

@media only screen and (min-width: 992px) {
  .dark-homepage .mainmenu > li > a {
    color: var(--whiteColor);
  }
}

.dark-homepage .header-action ul li .language-switcher .dropdown-toggle span {
  color: var(--whiteColor);
}

.dark-homepage .header-action .search-box {
  color: var(--whiteColor);
}

.dark-homepage .section-title,
.dark-homepage .section-title h2 {
  color: var(--whiteColor);
}

.black-color .section-title,
.black-color .section-title h2 {
  color: var(--whiteColor);
}

.dark-homepage .owl-theme .owl-dots .owl-dot span,
.black-color .owl-theme .owl-dots .owl-dot span {
  background-color: var(--whiteColor);
}

.dark-homepage .owl-theme .owl-dots .owl-dot.active span,
.black-color .owl-theme .owl-dots .owl-dot.active span {
  background-color: var(--mainColor);
}

.dark-homepage .owl-theme .owl-dots .owl-dot:hover span,
.black-color .owl-theme .owl-dots .owl-dot:hover span {
  background-color: var(--mainColor);
}

/*================================================
RTL Homepage CSS
=================================================*/
.rtl-homepage .team-slider,
.rtl-homepage .review-slides,
.rtl-homepage .blog-slider,
.rtl-homepage .main-slider,
.rtl-homepage .breaking-news-slider {
  direction: ltr;
}

.rtl-homepage .header-action ul li .language-switcher .dropdown-toggle span {
  margin-left: 0px;
  margin-right: 3px;
}

.rtl-homepage
  .header-action
  ul
  li
  .language-switcher
  .dropdown-menu
  .dropdown-item
  span {
  margin-right: 8px;
  margin-left: 0;
}

.rtl-homepage .search-overlay .search-overlay-form form .input-search {
  padding: 2px 25px 0 0;
}

.rtl-homepage .search-overlay .search-overlay-form form button {
  left: 5px;
  right: initial;
}

.rtl-homepage
  .blog-details-right-area
  .blog-widget.search-widget
  .search-form
  button {
  right: initial;
  left: 0;
}

.rtl-homepage
  .blog-details-right-area
  .blog-widget.search-widget
  .search-form
  button
  i {
  right: initial;
  left: 8px;
}

.rtl-homepage .row .single-blog-inner .blog-meta li {
  margin-left: 30px;
  margin-right: initial;
}

.rtl-homepage .row .single-blog-inner .blog-meta li i {
  margin-right: initial;
  margin-left: 4px;
}

.rtl-homepage .ad-area .ad-logo {
  padding-left: 0;
  padding-right: 40px;
}

.rtl-homepage .ad-area .ad-text {
  padding-left: 0;
  padding-right: 40px;
}

.rtl-homepage .ad-area .default-btn {
  margin-left: 0;
  margin-right: 40px;
}

.bg-light-b {
  background-color: #18387845;
}

@media only screen and (max-width: 767px) {
  .rtl-homepage .row .single-blog-inner .blog-meta li {
    margin-left: 10px;
    margin-right: initial;
  }

  .rtl-homepage .ad-area .ad-logo {
    padding-left: 0;
    padding-right: 0;
  }

  .rtl-homepage .ad-area .ad-text {
    padding-left: 5px;
    padding-right: 5px;
  }

  .rtl-homepage .ad-area .default-btn {
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rtl-homepage .header-action .header-btn {
    margin-left: 0;
    margin-right: 0;
  }

  .rtl-homepage .header-action .header-btn.search {
    margin-left: 10px;
    margin-right: 30px;
  }
}

.search-blog-input {
  margin-left: auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .rtl-homepage .header-action .header-btn.search {
    margin-left: 0;
    margin-right: 15px;
  }

  .rtl-homepage .row .single-blog-inner .blog-meta li {
    margin-left: 10px;
    margin-right: initial;
  }
}

@media only screen and (min-width: 1300px) {
  .story-details-img {
    height: 550px;
    border-radius: var(--border-radius);
    width: 100%;
  }
}

@media only screen and (min-width: 1200px) {
  .rtl-homepage .header-action .header-btn {
    margin-left: 0;
    margin-right: 30px;
  }

  .rtl-homepage .header-action .header-btn.search {
    margin-left: 0;
    margin-right: 30px;
  }
}

/*================================================
Ad Area CSS
=================================================*/
.ad-area .ad-wrapper {
  border: 10px solid #f1f1f1;
  background-image: no-repeat scroll center 0;
  background-size: cover;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
  color: #ffffff;
  padding: 40px 0px;
  margin: 0 10px;
}

.listicles-search-area .ad-wrapper {
  background-image: none !important;
  background-color: #ffffff !important;
  border: 1px solid #f1f1f1 !important;
  border-radius: 6px;
  padding: 20px 10px !important;
  /* width: 1175px !important; */
  margin: 0 !important;
}

.ad-area .ad-wrapper:before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: #000000;
  opacity: 0.35;
  z-index: -1;
}

.listicles {
  margin-bottom: 30px;
}

.listicles-search-area .ad-wrapper::before {
  opacity: 1 !important;
  background-color: #ffffff !important;
  border-radius: 6px;
}

.ad-area .ad-logo {
  width: 47%;
  float: left;
  font:
    700 35px/50px "Open Sans",
    sans-serif;
  border-right: 1px solid rgba(255, 255, 255, 0.302);
  text-align: center;
  padding-left: 40px;
}

.ad-area .ad-text {
  width: 53%;
  float: right;
  font:
    600 14px/24px "Roboto",
    sans-serif;
  letter-spacing: 2.8px;
  padding-left: 40px;
}

.add-text-forum {
  /* width: 53%; */
  float: right;
  font:
    600 14px / 24px "Roboto",
    sans-serif;
  letter-spacing: 2.8px;
  padding-left: 40px;
  text-align: center;
}

.ad-area .default-btn {
  margin-left: 40px;
  background-color: var(--whiteColor);
  color: var(--blackColor);
}

.ad-area .default-btn:hover {
  color: var(--whiteColor);
}

@media only screen and (max-width: 767px) {
  .ad-area .ad-logo {
    font-size: 22px;
    width: 100%;
    padding-left: 0;
    border: 0;
  }

  .ad-area .ad-text {
    text-align: center;
    padding: 0px 5px;
    width: 100%;
    font-size: 13px;
    line-height: 24px;
  }

  .ad-area .default-btn {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ad-area .ad-logo {
    font-size: 30px;
    width: 100%;
    padding-left: 0;
    border: 0;
  }

  .ad-area .ad-text {
    text-align: center;
    padding: 0px 5px;
    width: 100%;
    font-size: 14px;
    line-height: 24px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ad-area .ad-logo {
    font:
      700 30px/50px "Open Sans",
      sans-serif;
    border: 0;
  }

  .ad-area .ad-text {
    padding-left: 50px;
  }
}

.info-img-zoom {
  position: fixed;
  width: 100vw;
  height: 100vh;
  /* background-color: #000; */
  top: 10vh;
  left: 15vw;
  z-index: 10;
}

.img-zoom {
  /* background-color: #000; */
  position: fixed;

  /* background-color: #000;/ */
  top: 10vh;
  left: 15vw;
  z-index: 10;
  top: 10vh;
  left: 15vw;
}

.single-blog-inner11 {
  margin: 0 !important;
}

.details-wrap2 {
  background-color: #f2f2f2;
}

.single-blog-inner3 {
  border: 1px solid var(--borderColor);
}

.health-forum {
  margin: 10px 0 50px 0;
  padding: 20px 0;
}

.forum-questions .all-qa {
  padding: 0;
}

.health-forum-inner {
  /* border-left: 1px solid var(--borderColor); */
  /* border-right: 1px solid var(--borderColor); */
  border-radius: var(--border-radius);
}

.health-forum-inner .question-head .q-img {
  border: 1px solid #2a76c4;
  border-radius: 50px;
  padding: 5px;
  margin-right: 10px;
  width: 45px;
  height: 45px;
}

.health-forum-inner .forum-qa {
  border: 1px solid var(--borderColor);
  padding: 10px 0;
  position: relative;
  margin: 20px 0;
}

.health-forum-inner .q-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 0%;
  background-color: var(--mainColor);
  transition: 0.3s ease-in-out;
  transform-origin: top;
}

.forum-qa:hover .q-line {
  height: 100%;
}

.health-forum-inner .question-head .question {
  font-size: 22px;
}

.health-forum-inner .question-head .q-date {
  color: var(--subheading);
  line-height: 1rem;
}

.health-forum-inner .q-count {
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.health-forum-inner .q-count p {
  color: var(--subheading);
}

.q-ans .blog-details-left-area {
  padding: 0 !important;
}

.q-ans {
  padding-top: 0 !important;
}

.health-forum-inner .forum-qa .q-ans p {
  color: #4f5152;
}

.healthForum-btn input {
  transition: 0.4s ease-in-out;
}

.healthForum-btn input:hover {
  background-color: #000;
}

.page-title-area3 {
  position: static !important;
}

.resource-card {
  padding: 20px 0;
  border-bottom: 1px solid var(--borderColor);
  box-shadow: var(--box-shadow);
}

.resource-card p {
  margin-bottom: 5px;
}

/* .file-pill2{
  padding: 5px;
} */

.like-dis {
  cursor: pointer;
  outline: 0;
  color: var(--bgColor) !important;
}

.likeCount:hover {
  cursor: pointer;
}

.like-dis img {
  width: 25px !important;
  height: auto !important;
}

.like-dis .round-like {
  width: 15px;
}

.like-dis2 i {
  padding: 0 !important;
}

.btn:focus {
  outline: none;
  border: none;
}

.like-info {
  position: relative;
}

/* new */
.reaction-menu {
  display: none;
  position: absolute;
  bottom: 20px;
  padding: 0 5px 5px;

  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
  /* new added start */
  right: -19px;
  /* new added end */
}

.reaction-menu-forum {
  width: max-content;
  padding: 0 15px;
}

.reaction-menu-forum.active {
  display: block;
}

.reaction-menu .reaction i {
  font-size: 22px;
  padding: 5px;
  border-radius: 50%;
  transition: 0.3s;
  margin-right: 0;
}

.reaction-menu .reaction .fa-thumbs-up {
  background-color: var(--bs-blue);
  color: white !important;
}

.reaction-menu .reaction .fa-heart {
  background-color: #ff3737;
  color: white !important;
}

.reaction-menu .reaction .fa-lightbulb-o {
  background-color: #ffc937;
  color: white !important;
  padding: 5px 10px;
}

.reaction-menu .reaction .fa-handshake-o {
  background-color: rgb(107, 243, 107);
  color: white !important;
  padding: 5px 3px;
  font-size: 20px;
}

.reaction-menu .reaction i:hover {
  transform: scale(1.9) translate(0, -10px);
}

.reaction-menu.active {
  display: flex;
}

.reaction-menu-forum {
  display: none;
  position: absolute;
  bottom: 20px;

  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.reaction-menu-forum .reaction i {
  color: var(--blackColor) !important;
}

.reaction-menu-forum .reaction i:hover {
  color: var(--mainColor) !important;
}

.reaction {
  width: 30px;
  font-size: 20px;
  cursor: pointer;
  margin: 5px 5px;
  margin-bottom: 0 !important;
}

.reaction img {
  width: 100%;
  border-radius: 50%;
  height: auto !important;
}

.reaction-menu .reaction1:hover {
  transform: scale(1.9) translate(0, -10px) !important;
}

.reaction-menu .reaction2:hover {
  transform: scale(1.9) translate(0, -10px) !important;
}

.reaction-menu .reaction3:hover {
  transform: scale(1.9) translate(0, -10px) !important;
}

.reaction-menu .reaction4:hover {
  transform: scale(1.9) translate(0, -10px) !important;
}

.reaction-menu .reaction5:hover {
  transform: scale(1.9) translate(0, -10px) !important;
}

.q-person {
  border-radius: 50%;
  width: 65px !important;
  height: 65px !important;
  margin-right: 10px;
  left: 0 !important;
}

.question-person-section {
  position: sticky;
  top: 60px;
  z-index: 2;
  background-color: #ffffff;
  padding: 25px 0;
  border-bottom: 1px solid var(--borderColor);
}

.question-person1 {
  border-radius: 50%;
  margin-right: 10px;
  width: 28px;
  height: 28px;
}

.question-dot {
  margin-bottom: 8px;
}

.question-dot2 {
  margin-bottom: 8px !important;
}

.full-img-bg {
  /* display: none; */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: #00000063;
}

.full-img {
  position: absolute;
  top: 30%;
  left: 30%;
  background-color: var(--borderColor);
}

.forum-slider .owl-stage-outer {
  border: 1px solid var(--borderColor);
  border-radius: var(--border-radius);
  background-color: var(--bgColor);
  padding-top: 3vh;
}

.forum-slider .main-slider-image {
  position: relative;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  /* max-height: 250px; */
  padding-top: 215px;
  padding-bottom: 0px;
}

.forum-slider .main-slider-image .main-slider-content {
  /* border: 1px solid var(--borderColor); */
  margin: 0;
  background-color: transparent;
  bottom: 1vh;
}

.forum-slider .main-slider-image .main-slider-content .forum-qcard {
  border: 1px solid var(--bgColor);
  padding: 10px;
  margin: 0 6px 0 5px;
  background-color: var(--blackColor);
  min-height: 157px;
  /* overflow: hidden; */
}

.forum-slider .main-slider-image .main-slider-content .forum-qcard:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.forum-slider
  .main-slider-image
  .main-slider-content
  .forum-qcard
  .forumcard-question {
  text-align: start;
  font-size: small;
}

.forum-slider
  .main-slider-image
  .main-slider-content
  .forum-qcard
  .forumcard-answer-count {
  text-align: end;
  font-size: small;
}

.forum-question-rating {
  padding: 140px 10px 50px 0;
}

.forum-question-rating .row .col-5 input {
  background-color: var(--bgColor);
  color: var(--mainColor);
  padding: 15px 25px;
  border: 1px solid var(--mainColor);
  border-radius: 30px;
}

.forum-question-rating .row .col-5 input:hover {
  background-color: var(--mainColor);
  color: var(--backgroundColor);
}

.forum-report-modal .report1,
.forum-report-modal .report2,
.forum-report-modal .report3,
.forum-report-modal .report4,
.forum-report-modal .report5:hover {
  cursor: pointer;
}

.report5-inner-li:hover {
  cursor: pointer;
}

.report5-inner-li:hover i {
  color: var(--mainColor);
}

.answer-person {
  border-radius: 50%;
  position: static !important;
  width: 20px !important;
  height: 20px !important;

  z-index: 1;
}

.qperson-ans {
  border-radius: 50%;
  width: 70px !important;
  height: 70px !important;
  margin-right: 10px;
}

.helpfulmodal-footer-btn button {
  border: 1px solid var(--borderColor);
  padding: 5px 50px;
  font-weight: 500;
}

.helpfulmodal-footer-btn button:hover {
  background-color: var(--mainColor);
  color: white;
}

.privacy-content {
  position: relative;
}

.left-image-sticky {
  position: sticky;
  top: 80px;
}

.sign-up-header-content i {
  color: var(--mainColor);
  /* background-color: var(--bs-blue); */
  border-radius: var(--border-radius);
  box-shadow: none;
  font-size: 30px !important;
}

.sign-up-content .sign-in-with-btn {
  padding: 10px 50px;
  background-color: var(--bgColor);
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  transition: 0.2s ease-in-out;
}

.sign-in-with-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
}

.form-group-edited {
  /* border: 1ps solid #c9c9c9 !important; */
  position: relative;
}

.form-group-edited .required {
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: white;
  padding: 0 5px;
  font-weight: 600;
  color: #545454;
  border-radius: 20px;
}

.required-star {
  color: var(--mainColor);
}

.sign-up-content .sign-in-with-btn .fa-linkedin {
  color: var(--mainColor);
}

.sign-up-content .sign-in-with-btn p {
  color: var(--blackColor);
}

.footer-signup {
  bottom: 0;
  width: 100%;
  /* margin-top: 20px; */
  z-index: 2;
}

.sign-up-header {
  padding: 10px 0;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.sign-up-header .header-logo {
  width: 150px !important;
}

.forget-password {
  padding: 80px 0;
}

.password-reset-content {
  /* border: 1px solid #c9c9c9 !important; */
  border-radius: var(--border-radius);
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.user-d .form-check-label {
  color: #545454;
}

.image-expand .modal-content {
  background-color: transparent !important;
}

.image-expand .modal-body img {
  width: 100%;
  /* height: 100%; */
  /* height: fit-content; */
}

.info2-4card .single-blog-inner-info .thumb img {
  width: auto;
  height: auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1920px) {
  .single-blog-inner-info .thumb img {
    width: 900px;
    height: 450px;
    overflow: hidden;
  }

  .single-blog-inner .thumb .responsive-shorts-img {
    width: 592px;
    height: 350px;
    overflow: hidden;
  }

  .single-blog-inner-info .thumb details {
    overflow: hidden;
  }

  .reset-password img {
    max-width: 200px;
    margin-left: 40px;
  }

  .blog-dPerson {
    min-height: 287px;
  }
}

select {
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  border-radius: 5px;
  border: solid 2px #e8e8e8;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: 42px;
  line-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 20px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: auto;
}

.nice-select {
  display: none !important;
}

.like-count-icon .icon-count {
  position: absolute;
  padding: 3px 2px 2px;
  border-radius: 50%;
  border: 1px solid var(--backgroundColor);
  /* background-color: var(--mainColor); */
  color: white !important;
  font-size: 10px;
  line-height: 10px;
  top: -8px;
}

.like-count-icon .fa-thumbs-up {
  background-color: var(--bs-blue);
}

.like-count-icon .fa-heart {
  background-color: #ff3737;
}

.like-count-icon .fa-handshake-o {
  background-color: rgb(107, 243, 107);
}

.like-count-icon .fa-lightbulb-o {
  background-color: #ffc937;
}

.like-count-icon #icon1 {
  /* position: absolute; */
  width: 16px;
  height: auto !important;
}

.listicles-like-count-icon #icon1 {
  /* position: absolute; */
  width: 20px;
  height: auto !important;
}

.like-count-icon #icon-2 {
  margin-left: -9px;
}

.listicles-like-count-icon #icon-2 {
  margin-left: -13px;
}

.like-count-icon #icon2 {
  /* position: absolute; */
  width: 16px;
  height: auto !important;
  left: 9px;
}

.listicles-like-count-icon #icon2 {
  /* position: absolute; */
  width: 20px;
  height: auto !important;
}

.like-count-icon #icon-3 {
  margin-left: -8px;
}

.listicles-like-count-icon #icon-3 {
  margin-left: -11px;
}

.like-count-icon #icon3 {
  width: 16px;
  height: auto !important;
  /* position: absolute; */
  left: 17px;
}

.like-count-icon #icon4 {
  width: 16px;
  height: auto !important;
  /* position: absolute; */
  left: 17px;
}

.listicles-like-count-icon #icon3 {
  /* position: absolute; */
  width: 20px;
  height: auto !important;
}

.jsdnfkajs {
  margin: 0 3px 10px 2px;
}

.like-count-icon #icon5 {
  width: 16px;
  height: auto !important;
  /* position: absolute; */
  left: 17px;
}

.listicles-like-count-icon #icon4 {
  /* position: absolute; */
  width: 20px;
  height: auto !important;
}

.listicles-like-count-icon #icon5 {
  /* position: absolute; */
  width: 20px;
  height: auto !important;
}

.reaction-modal .modal-header button {
  background-color: white;
  color: var(--blackColor);
  font-size: 20px;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  border: 1px solid var(--borderColor);
  transition: 0.2s;
}

.reaction-modal .modal-header button:hover {
  background-color: var(--borderColor);
  /* padding: 9px 20px; */
}

.reaction-modal .reaction-person-profile .react-person {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.react-count button:hover {
  color: var(--mainColor);
}

.details-author {
  background-color: #ebe8e8 !important;
}

.author-d {
  /* border: 1px solid var(--borderColor); */
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  min-height: 520px;
}

.author-right-side {
  min-height: 520px !important;
}

.left-image-sticky {
  border-top: 1px solid var(--bgColor);
}

.header-main-logo {
  width: auto;
  height: 48px !important;
}

/* ----------------------------------------------------article footer card------------------------------------------------ */

/* .responsive-cards-article .thumb {
  height: 224px;
  width: 284px;
  object-fit: contain;

} */

/* .responsive-cards-article .thumb img {
  aspect-ratio: 4/2.9;
} */

.listicles-like .like-info .like-dis .fa-thumbs-up {
  font-size: 28px;
  filter: drop-shadow(0 0 0.08rem black);
  color: white !important;
}

.like-info .reaction-menu .reaction {
  position: relative;
  transition: 0.3s;
}

.like-info .reaction-menu .reaction:before {
  content: attr(data-tooltip);
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.3s;
  padding: 0 3px;
  background-color: var(--blackColor);
  font-size: 8px !important;
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 100;
  white-space: nowrap;
}

.like-info .reaction-menu .reaction:hover:before {
  opacity: 1;
}

.listicle-card .top-view-area .listicle-card-heading {
  width: 25vw;
}

#responsive-image {
  width: -webkit-fill-available;
}

.listicle-card-social-list {
  padding: 20px 0px 20px 20px;
}

.for-responsive {
  display: none;
}

.responsive-like-sec {
  padding-left: 34px;
}

.download-resource {
  flex-direction: column;
}

.where-to-buy-img {
  gap: 10px;
}

@media only screen and (min-width: 1800px) and (max-width: 1930px) {
  .blog-cards .single-team-inner .blog-card-thumb {
    min-height: 396px;
    object-fit: contain;
  }

  .blog-cards .single-team-inner .blog-card-thumb img {
    aspect-ratio: 4/4;
  }

  .button_wrapowiehgo {
    margin-right: 30px;
  }

  .responsive-cards-article .thumb {
    min-height: 202px;
    min-width: 284px;
    object-fit: contain;
  }

  .responsive-cards-article .thumb img {
    aspect-ratio: 4/2.8;
  }
}

@media only screen and (min-width: 1599px) and (max-width: 1920px) {
  .image-expand .modal-body img {
    width: 100%;

    height: 650px !important;
  }
}

@media only screen and (min-width: 1500px) and (max-width: 1800px) {
  .blog-cards .single-team-inner .blog-card-thumb {
    min-height: 250px;
    object-fit: contain;
  }

  .button_wrapowiehgo {
    margin-right: 30px;
  }

  .blog-cards .single-team-inner .blog-card-thumb img {
    aspect-ratio: 4/4;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1500px) {
  .blog-cards .single-team-inner .blog-card-thumb {
    min-height: 260px;
    object-fit: contain;
  }

  .qperson-ans {
    border-radius: 50%;
    width: 50px !important;
    height: 50px !important;
    margin-right: 10px;
  }

  .p-container {
    max-width: 1290px;
  }

  .list-grid-icon {
    font-size: 20px !important;
  }

  .blog-cards .single-team-inner .blog-card-thumb img {
    aspect-ratio: 4/4;
  }
}

@media only screen and (max-width: 1500px) {
  .answer-modal-inner-forum {
    font-size: 13px;
  }

  .listicle-card .top-view-area .listicle-card-heading {
    width: auto;
  }

  .listicle-card .top-view-area3 {
    margin-bottom: -30px !important;
  }

  .listicle-card .top-view-area3 .title {
    font-size: 28px !important;
  }

  .listicle-card .video-bg p {
    padding-right: 30px;
  }
}

@media only screen and (min-width: 700px) and (max-width: 1200px) {
  .blog-cards .single-team-inner .blog-card-thumb {
    min-height: 200px;
    object-fit: contain;
  }

  .blog-cards .single-team-inner .blog-card-thumb img {
    aspect-ratio: 4/4;
  }
}

@media only screen and (min-width: 1900px) {
  .responsive-cards-article {
    min-height: 215px !important;
  }

  .responsive-cards-article .thumb {
    min-height: 214px;
    min-width: 284px;
    object-fit: contain;
  }

  .responsive-cards-article .details-author {
    min-height: 215px;
  }

  .responsive-cards-article .details-author .read-more-btn {
    height: 37px;
    width: 37px;
    line-height: 37px;
    bottom: 7px;
  }

  .responsive-cards-article .thumb img {
    aspect-ratio: 4/3;
  }
}

@media only screen and (min-width: 1650px) and (max-width: 1900px) {
  .responsive-cards-article .thumb {
    min-height: 228px;
    min-width: 248px;
    object-fit: contain;
  }

  .responsive-cards-article .details-author {
    min-height: 228px;
  }

  .responsive-cards-article .details-author p {
    font-size: 15px;
  }

  .responsive-cards-article .details-author .read-more-btn {
    height: 40px;
    width: 40px;
    line-height: 40px;
    bottom: 22px;
  }

  .responsive-cards-article .thumb img {
    aspect-ratio: 4/3.67;
  }
}

@media only screen and (min-width: 1435px) and (max-width: 1650px) {
  .responsive-cards-article .thumb {
    min-height: 226px;
    min-width: 169px;
    object-fit: contain;
  }

  .responsive-cards-article .details-author h4 {
    font-size: 16px;
  }

  .responsive-cards-article .details-author p {
    font-size: 15px;
  }

  .responsive-cards-article .thumb img {
    min-height: 226px;
    min-width: 169px;
  }

  .responsive-cards-article .details-author {
    min-height: 226px;
  }

  .responsive-cards-article .details-author .read-more-btn {
    height: 40px;
    width: 40px;
    line-height: 40px;
    bottom: 6px;
  }
}

@media only screen and (max-width: 1000px) {
  .for-responsive {
    display: block;
  }

  .responsive-leftSide-none {
    display: none;
  }
}

/* --------------------------------------------------------------------------------------style for product pages------------------------------------------------------------------------------- */

.top-header {
  background-color: var(--mainColor);
  padding: 15px 0;
}

.top-header-section {
  padding: 15px 0;
}

.btn-submit2 {
  height: 38px;
  width: 38px;
  background: var(--tomato);
  position: relative;
  right: -15px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.gow-search-div input {
  width: 90%;
  color: var(--whiteColor);

  padding: 0 !important;
  height: auto !important;
}

.user-icon i {
  height: 35px;
  width: 35px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  text-align: center;
  line-height: 35px;
  font-size: 14px;
}

.log-in-rege a {
  color: #000;
  text-decoration: none;

  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.br-1 {
  border-right: 1px solid #000;
  padding-right: 10px;
}

.wishlist i {
  height: 35px;
  width: 35px;
  background: var(--green);
  color: var(--whiteColor);
  text-align: center;
  line-height: 36px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.gow-search-div {
  color: #aeaeae;
  border: 1px solid #d6d6d6;
  width: 500px;
  padding: 7px 20px 7px 20px;
  border-radius: 50px;
}

.btn-submit2 {
  height: 38px !important;
  width: 38px !important;
  background: var(--tomato);
  position: relative;
  padding: 0 !important;
  border-radius: 50% !important;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.cart-counter {
  position: absolute;
  /* content: ''; */
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  background: var(--tomato);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 600;

  right: -7px;
  top: -9px;
}

.btn-header {
  padding: 10px 0px;
}

.btm-header-menu-container ul li {
  margin-right: 20px;
}

.btm-header-menu-container ul li a {
  text-decoration: none;
  color: #000;

  text-transform: uppercase;
  font-size: 14px !important;
  font-weight: 500;
}

.btm-header-menu-container ul li a:hover {
  color: var(--mainColor);
}

.btm-header-menu-container ul li:last-child {
  margin-right: 0px !important;
}

.hover-list {
  padding: 4px 10px;
  background: var(--primaryColor);
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.hover-list a {
  color: #fff !important;
}

.fa-home {
  color: var(--primaryColor);
  font-size: 20px;
}

.page-info-rank a::before {
  position: absolute;
  content: " >";
  right: -18px;
  top: 0;
  color: var(--tomato);
}

.page-info-rank a {
  color: #000;
  position: relative;
  font-size: 14px;
}

.page-info-rank a:not(:first-child) {
  padding-left: 20px;
}

.page-info-rank a:last-child::before {
  content: " ";
}

.page-info-rank a:last-child {
  color: var(--tomato);
}

.goc-mega-menu {
  padding: 15px 25px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 5px 15px rgb(0 0 0 / 10%) !important;
  position: absolute;
  left: 0;
  right: 0;
  margin: 2px 100px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  transition: all 0.3s ease-in-out;
  display: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  z-index: 9;
}

.mega-menu-title {
  color: var(--primaryColor);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}

.btm-header-menu-container ul li {
  margin-right: 20px;
}

.btm-header-menu-container ul li a {
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
  font-size: 14px !important;
}

.goc-mega-menu ul li a {
  text-decoration: none;
  color: #000;
  text-transform: none;
  font-size: 14px !important;
}

.mega-menu-product-img-link {
  width: 120px !important;
  background: #ddeff4 !important;
  padding: 10px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.hover-list-sensory:hover .goc-mega-menu {
  display: block;
}

.sdfgh {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #d4d4d445;
}

.QqFHMw {
  width: fit-content;
  text-decoration: none;
  padding: 10px 35px;
  border-radius: var(--border-radius);

  /* font-weight: 600; */
}

.w-600 {
  font-weight: 600;
}

.S89fXM {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 30px 0 30px 400px;
  background-color: var(--backgroundColor);
}

.Th5eUU {
  color: var(--mainColor);
}

.sticky {
  position: sticky !important;
  top: 75px;
}

.sticky-button .p-30 {
  padding: 30px 0 30px 0;
}

.sticky-bottom {
  position: sticky !important;
  bottom: 0px;
  z-index: 4;
}

.sticky2 {
  position: sticky;
  top: 75px;
  margin: 20px 0;
}

.product-section {
  padding: 0 0 60px 0;
}

.product-section .slider {
  background: transparent !important;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:before {
  content: "←";
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.product-section .slick-list {
  padding: 0px !important;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list {
  opacity: 1;
  /* height: 1566px; */
  transform: translate3d(0px, -335px, 0px);
}

.productGalleryCard {
  border: 1px solid #d0d0d0;
  padding: 14px 10px;
  display: block;
  border-radius: 10px;
  margin-bottom: 12px;
  width: 90px;
  cursor: pointer;
}

.main-product-img {
  margin-left: 1% !important;
  border: 1px solid #d0d0d0;
  padding: 3% 30px 2%;
  border-radius: 10px;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Product-share {
  position: absolute;
  content: "";
  top: 24px;
  right: 16px;
}

.share-open i {
  border: 1.5px solid #afafaf;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 17px;
  color: #000 !important;
  margin-left: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.product-cart-btn {
  float: none !important;
  display: inline-block !important;
  padding: 13px 15px !important;
  width: fit-content !important;
  background: #055ddf !important;
  border-radius: 4px !important;
  margin-right: 10px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  outline: none;
  color: var(--whiteColor);
  font-weight: 700;
  border: none;
}

.product-cart-btn:hover {
  background-color: #0348af !important;
}

.product-buy-btn {
  float: none !important;
  display: inline-block !important;
  padding: 13px 15px !important;
  width: 150px !important;
  background: #198754 !important;
  border-radius: 4px !important;
  margin-right: 10px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  outline: none;
  color: var(--whiteColor);
  font-weight: 700;
  border: none;
}

.product-buy-btn:hover {
  background-color: #116840 !important;
  color: #fff;
}

.product-buy-btn2 {
  float: none !important;
  display: inline-block !important;
  padding: 13px 15px !important;
  background: var(--primaryColor) !important;
  border-radius: 4px !important;
  margin-right: 10px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  outline: none;
  color: var(--whiteColor);
  font-weight: 700;
  border: none;
}

.product-buy-btn2:hover {
  background-color: #055783 !important;
  color: #fff;
}

.goc-w-100 {
  width: 100% !important;
}

.productGalleryCard {
  border: 1px solid #d0d0d0;
  padding: 14px 10px;
  display: block;
  border-radius: 10px;
  margin-bottom: 12px;
  width: 90px;
  cursor: pointer;
}

.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.modal-star {
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--primaryFont);
}

.bg-green {
  background-color: #388e3c;
}

.bm-primary {
  border-bottom: 1px solid #d0d0d0;
  padding-bottom: 6px;
}

.color-tomato {
  color: var(--tomato);
}

.product-inner-page-list li {
  color: #6a6a6a;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 20px !important;
  padding-left: 15px;
  position: relative;
}

.product-inner-page-list li::before {
  position: absolute;
  content: "";
  top: 5px;
  left: 0px;
  height: 7px;
  width: 7px;
  border: 2px solid var(--primaryColor);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.product-page-price-section {
  padding: 10px 0px;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  /* margin-bottom: 10px; */
}

.mrp {
  text-transform: uppercase;
  color: #000;
  font-size: 14px;
  font-family: var(--primaryFont);
  font-weight: 600;
}

.old-price {
  color: var(--primaryColor);
  font-size: 16px;
}

.new-price {
  color: var(--black);
  font-size: 20px;
}

.discount-bg {
  padding: 15px 0px 36px;
  width: 50px;
  background: url(../img/discount.png) no-repeat;
  background-size: auto;
  text-align: center;
  color: #fff;
  font-weight: 600;
  margin-top: -10px;
}

.rc-product {
  margin-bottom: 20px;
  padding: 15px 0px;
  /* border-top: 1px solid #e6e6e6; */
  border-bottom: 1px solid #e6e6e6;
}

.rc-product-card img {
  width: 70px;
  height: 70px;
  border: 2px solid var(--bg-dashboard);
  border-radius: 100%;
}

.del-location {
  position: absolute;
  left: 2px;
  top: 14px;
  color: #6a6a6a;
}

.goc-del-input {
  outline: none;
  border: none !important;
  padding: 6px 24px !important;
  border-bottom: 2px solid var(--mainColor) !important;
  width: 100% !important;
}

.check {
  color: var(--mainColor);
  position: absolute;
  top: 14px;
  right: 0px;
  cursor: pointer;
  font-weight: 600;
}

.ex-del {
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0px 2px;
}

.epic-input {
  height: 53px;
  line-height: 53px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e0e6f6;
  height: 53px;
  box-shadow: none;
  padding-left: 20px;
  width: 100%;
  padding: 11px 15px 13px 15px;
  /* color: #333; */
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.goc-text-countdown {
  position: absolute;
  right: 5%;
  top: 28%;
  color: var(--primaryColor);
  font-family: var(--primaryFont);
}

.inputBox span {
  position: absolute;
  top: 16px;
  left: 10px;
  color: #a0abb8;
  font-size: 14px;
  pointer-events: none;
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
  -moz-transition: top 0.5s;
  -ms-transition: top 0.5s;
  -o-transition: top 0.5s;
}

.product-color-choice-img img {
  width: 66px;
  border: 2px solid transparent;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  cursor: pointer;
}

.product-color-choice-img .product-color-img,
.product-plane-color .product-color-img {
  appearance: none;
  -ms-progress-appearance: none;
}

.more-anchor {
  display: inline-flex;
  align-items: center;
  color: #2874f0;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--primaryFont);
  cursor: pointer;
}

.color-choice-container {
  margin-right: 8px;
}

label {
  display: inline-block;
  /* font-weight: 500;     */
  color: #706f6f;
}

.product-plane-color span {
  display: inline-block;
  height: 34px;
  width: 34px;
  padding: 6px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  margin-right: 8px;
  cursor: pointer;
}

.product-plane-color span:last-child {
  margin-right: 0px !important;
}

.product-size-container .product-size-card {
  display: inline-block;
  padding: 6px 16px;
  font-size: 16px;
  color: #212121;
  border: 2px solid #f0f0f0;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  font-family: var(--primaryFont);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.size-active {
  border: 1px solid var(--mainColor) !important;
}

.more-anchor {
  display: inline-flex;
  align-items: center;
}

.more-anchor {
  color: #2874f0;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--primaryFont);
  cursor: pointer;
}

.add-info {
  display: block;
  font-family: var(--primaryFont);
  font-weight: 700;
  font-size: 18px;
}

.nav-tabs .nav-link.active {
  color: var(--mainColor) !important;
  background: var(--backgroundColor) !important;
  /* border-radius: 20px; */
}

.product-paragraph {
  color: #212121;
  font-size: 14px;
  font-family: var(--primaryFont);
  margin-bottom: 16px !important;
  line-height: 20px !important;
  padding-left: 0px;
}

.fbuy-img img {
  width: 112px;
  margin-bottom: 12px;
  height: 60px;
  object-fit: contain;
}

.fbuy-crad {
  position: relative;
  /* border: 1px solid #d0d0d0; */
  padding: 14px 15px;
  border-radius: 8px;
  /* height: 220px; */

  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.plus-icon::before {
  position: absolute;
  content: "+";
  right: -24px;
  top: 50%;
  transform: translateY(-100%);
  font-size: 30px;
  color: #c2c2c2;
  font-weight: 700;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
}

.fbuy-title-link {
  text-decoration: none;
  /* color: #333; */
  font-family: var(--mainColor);
  font-size: 14px;
}

.modal-star {
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
}

.modal-review-name {
  font-size: 12px;
  color: #878787;
  font-weight: 600;
  margin-right: 8px;
}

.f-buy-checkbox {
  position: absolute;
  right: 0px;
  cursor: pointer;
}

.f-buy-subtotal {
  position: relative;
}

.f-buy-subtotal.add-plus::before {
  position: absolute;
  content: "+";
  top: 50%;
  right: 0;
  color: #c2c2c2;
  font-size: 28px;
  font-weight: 600;
  transform: translateY(-50%);
}

.modal-review-name {
  font-size: 12px;
  color: #878787;
  font-weight: 600;
  margin-right: 8px;
}

.w-auto-goc {
  width: auto !important;
}

.border-py {
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 15px 0px !important;
}

.add-info {
  display: block;
  font-weight: 700;
  font-size: 18px;
}

.rate-product {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.26);
  border: none;
  font-size: 14px;
  /* color: #212121; */
  padding: 12px 28px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--mainColor);
  font-weight: 600;
}

.rate-anly {
  font-size: 32px;
}

.rateing-bar .star-indicator {
  font-size: 13px;
  font-family: var(--primaryFont);
  font-weight: 600;
}

.rateing-bar-bg {
  height: 5px;
  border-radius: 100px;
  background-color: #f0f0f0;
  position: relative;
  margin-top: 7px;
  margin-left: 7px;
  width: 100%;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
}

.rateing-bar-data {
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  border-radius: 100px;
}

.bg-yellow {
  background-color: #ff9f00 !important;
}

.bg-tomato {
  background: #ff6161 !important;
}

.progress-circle {
  font-size: 20px;
  margin: 20px;
  position: relative;
  padding: 0;
  width: 5em;
  height: 5em;
  background-color: #f0f0f0;
  border-radius: 50%;
  line-height: 5em;
}

.progress-circle {
  font-size: 20px;
}

.progress-circle span {
  position: absolute;
  line-height: 5em;
  width: 5em;
  text-align: center;
  display: block;
  color: #53777a;
  z-index: 2;
}

.value-bar {
  position: absolute;
  clip: rect(0, 2.5em, 5em, 0);
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.45em solid #388e3c;
  /* background-color: #4D642D; */
  box-sizing: border-box;
}

.progress-circle.p10 .value-bar {
  transform: rotate(36deg);
}

.progress-circle::after {
  border: none;
  position: absolute;
  top: 0.35em;
  left: 0.35em;
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 4.3em;
  height: 4.3em;
  background-color: white;
  content: " ";
}

.review-section-with-img {
  display: flex;
  flex-wrap: wrap;
  margin-right: 10px;
}

.review-img-container img {
  margin-bottom: 10px;
  display: inline-block;
}

.review-img-container img {
  height: 85px;
  width: 85px;
  object-fit: cover;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  cursor: pointer;
}

.more-product-container {
  position: relative;
}

.more-modal-num {
  position: absolute;
  left: 20px;
  top: 25px;
  color: var(--bs-body-bg);
  font-size: larger;
}

.more-modal-num:hover {
  cursor: pointer;
}

.review-img-container {
  margin-right: 8px;
}

.light-blue-bg {
  background: #f0f3ff !important;
}

.sec-pad {
  padding: 65px 0px 70px 0px;
}

.product-inner-product-name {
  color: #000;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 10px;
  padding-top: 25px;
}

.might-produt-img {
  width: 100px !important;
}

.m-show-now {
  margin-top: 16px;
  color: #fff;
  background: var(--mainColor);
  border-radius: 2px;
  border: none;
  padding: 8px 16px;
  box-shadow: none;
  text-decoration: none;
  display: inline-block;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.might-like-card {
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  padding: 16px 24px;
  margin: 0 15px;
}

.review-modal-content {
  padding: 20px 20px 20px 0px;
}

.review-modal-headline {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 600;
}

.modal-review-name {
  font-size: 12px;
  color: #878787;
  font-weight: 600;
  margin-right: 8px;
}

.modal-review-date {
  font-size: 11px;
  color: #878787;
}

.review-modal-img-bg {
  background: #000;
}

#newModalContent1 .modal-body {
  padding: 0;
}

.ask-btn {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.26);
  border: none;
  font-size: 14px;
  color: #212121;
  padding: 12px 60px;
  cursor: pointer;
  display: inline-block;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  font-weight: 500;
  transition: box-shadow 0.2s ease;
  vertical-align: super;
  text-decoration: none;
}

.review-section-with-img {
  display: flex;
  flex-wrap: wrap;
  margin-right: 10px;
}

.more-review-section-with-img img {
  height: 100px !important;
  width: 100px !important;
  object-fit: cover;
  margin-bottom: 14px;
}

.review-img-container img {
  margin-bottom: 10px;
  display: inline-block;
}

.view-more-step-two-modal .modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

#oldModalContent .modal-body {
  height: 456px;
  overflow-y: scroll;
}

#newModalContent .modal-body {
  padding: 0;
}

.back-to-modal {
  position: absolute;
  top: 20px;
  left: 26px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.back-to-modal span {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.back-to-modal span {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.goc-close-modal {
  background: transparent;
  border: navajowhite;
  outline: none;
  position: absolute;
  right: -76px;
  font-size: 30px;
  color: #fff;
  top: -14px;
}

.size-chart-table .table-gray th,
.size-chart-info td {
  padding: 12px 16px;
  font-size: 13px;
}

.size-chart-table .table-gray th,
.size-chart-info td {
  padding: 12px 16px;
  font-size: 13px;
}

.size-chart-table .table-gray {
  background-color: #f0f0f0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.size-chart-info {
  border-bottom: 1px solid #f0f0f0;
}

.size-chart-info td {
  text-transform: uppercase;
}

.product-size-container .size-out-of-stoke {
  color: #979797;
  border: 2px dashed #979797;
}

@media screen and (min-width: 991px) {
  .size-chart-table {
    border-right: 1px solid #f0f0f0;
  }

  .thum-img .slick-prev {
    top: -6%;
    transform: rotate(90deg);
    left: 44%;
  }

  .slick-prev,
  .slick-next {
    width: 9px !important;
  }

  .thum-img .slick-list {
    height: 480px !important;
  }

  .main-product-img {
    max-height: 520px !important;
    width: 100% !important;
  }

  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .mb-lg-0 {
    margin-bottom: 0 !important;
  }

  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }

  .thum-img .slick-next {
    top: inherit;
    bottom: -37px;
    right: 44%;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
  }

  .slick-prev,
  .slick-next {
    width: 9px !important;
  }

  .rc-product-card .col-lg-2 {
    width: 20% !important;
  }

  .review-modal-img-bg img {
    height: 450px;
    object-fit: contain;
  }

  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }

  .modal-xxl {
    max-width: 800px;
  }

  .modal-max {
    max-width: 800px;
  }
}

/* Slider */

.similar-product .slick-slide {
  margin: 0px 20px;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.filter-card {
  background: #e0e4ff;
  padding: 20px 16px;
  border-radius: var(--border-radius);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
}

.filter-title {
  font-size: 34px;
  color: #000;
  border-bottom: 1px solid #a0c4d0;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-weight: 600;
  letter-spacing: 3px;
}

.filter-box {
  padding: 12px 0px 0px;
  border-bottom: 1px solid #a0c4d0;
  margin-bottom: 8px;
}

.filter-box-header {
  margin-bottom: 16px;
  cursor: pointer;
}

.filter-heading {
  font-size: 20px;
  font-weight: 600;
}

.filter-icon {
  float: right;
}

.responsive-text-end {
  text-align: end !important;
}

.filter-box {
  padding: 12px 0px 0px;
  border-bottom: 1px solid #a0c4d0;
  margin-bottom: 8px;
}

.filter-box-content .filter-menu-list li a,
.goc-radio label {
  color: #000;
  font-size: 15px;
  text-decoration: none;
}

.filter-heading {
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}

.filter-icon i {
  display: block;
  height: 24px;
  width: 24px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background-color: var(--primaryColor);
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.rslider {
  height: 4px;
  position: relative;
  background: #9ec2cc !important;
  border-radius: 6px;
}

.rslider .progress {
  height: 100%;
  left: 0%;
  right: 0%;
  position: absolute;
  border-radius: 5px;
  background: var(--tomato);
}

.range-input {
  position: relative;
}

.range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  background: none;
  color: var(--mainColor);
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 !important;
  border: none !important;
}

.price-update {
  margin-top: 25px;
  margin-bottom: 10;
  font-size: 13px;
  color: #393939;
}

.rslider .progress {
  height: 100%;
  left: 0%;
  right: 0%;
  position: absolute;
  border-radius: 5px;
  background: var(--tomato) !important;
}

.filter-box-content .filter-menu-list li {
  padding: 5px 0px;
  position: relative;
  list-style-type: none !important;
}

.filter-box-content .filter-menu-list li .filter-link-icon::before {
  position: absolute;
  content: "+";
  right: 0;
  color: var(--mainColor);
  font-size: 25px !important;
  line-height: 1px !important;
  top: 12px;
  transform: translateY(-50%);
  z-index: 3;
  cursor: pointer;
  font-weight: 600;
}

.filter-pad .active {
  transition: all 0.3s ease-in-out;
  transform: rotate(-180deg);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.filter-box-content .filter-menu-list li .filter-link-icon.active::before {
  content: "-";
}

.filter-menu-list li ul {
  padding-right: 12px;
}

.filter-mega-menu-container {
  margin: 4px 0px;
}

.filter-box-content .filter-menu-list li .filter-link-icon .active::before {
  position: absolute;
  content: "-";
  right: 0;
  color: var(--mainColor);
  font-size: 25px !important;
  line-height: 1px !important;
  top: 12px;
  transform: translateY(-50%);
  z-index: 4;
  cursor: pointer;
  font-weight: 600;
}

.list-grid-icon.active i {
  color: var(--primaryColor);
}

.sensory-product-card-container {
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
}

.sensory-product-card-container {
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

.serach-result-product .sensory-product-card-container {
  margin-bottom: 25px;
}

.sensory-product-card-container::before {
  position: absolute;
  content: "";
  background: #fff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  top: 8px;
  bottom: 8px;
  left: 7px;
  right: -7px;
  z-index: -1;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.sensory-product-card-container:hover {
  transform: translateY(-1rem);
}

.sen-product-img-container {
  padding: 6px;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

/* .sensory-product-img {
    height: 272px !important;
    width: 100% !important;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
} */

.product-wish {
  position: absolute;
  bottom: -4%;
  right: 7%;
}

.wish-icon {
  height: 30px;
  width: 30px;
  line-height: 30px;
  background: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  color: #000;
  border: 1.5px solid #afafaf;
  text-align: center;
}

.sen-product-text-container {
  margin-top: 25px;
  padding: 0 10px;
}

.sen-product-name {
  display: block;
  color: #000;
  font-weight: 700;
  font-size: 20px;
}

.sen-product-sub {
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  margin: 10px 0px !important;
}

.read-more {
  margin: 16px 0px 10px !important;
}

.shop-btn {
  color: #fff;
  background: var(--mainColor);
  /* border-radius: var(--border-radius); */
  font-size: 1rem;
  display: block;
  width: 100px;
  padding: 10px 13px;
  width: fit-content;
  text-decoration: navajowhite;
  /* margin-top: 20px; */
}

.shop-btn:hover {
  color: #fff;
}

.fw-500 {
  font-weight: 500;
}

.w-35 {
  min-width: 35%;
}

.list-grid-icon {
  font-size: 27px;
  line-height: 0;
}

.list-grid-icon:hover {
  cursor: pointer;
}

.list-grid-icon:active {
  color: var(--mainColor);
}

.offcanvas-stiky {
  position: sticky;
  top: -16px;
  background: #fff;
  border-bottom: 1px solid #e0e6f7;
  padding-bottom: 10px;
}

.old-price {
  color: var(--primaryColor);
  /* font-size: 16px; */
}

.offcanvas-end {
  width: 40% !important;
}

.offcanvas-cart-card {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid #d0d0d0;
  margin-bottom: 16px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.offcanvas-cart-card img {
  width: 120px;
  margin-right: 10px;
}

.font-600 {
  font-weight: 600;
}

.offcanvas-cart {
  padding: 20px 0px 16px;
}

.sticky-product-name {
  position: sticky;
  top: 65px;
  z-index: 2;
  background-color: #ffffff;
}

/* -----------------------------------------------------range slider-------------------------------------------------- */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.range-slider {
  position: relative;
  height: 10px;
  width: 100%;
  border-radius: 15px;
  background-color: #c1bcbc;
}

.range-slider .progress {
  position: absolute;
  left: 0%;
  right: 0%;
  height: 100%;
  border-radius: 15px;
  background-color: #6d6dff;
}

.range-slider input[type="range"] {
  position: absolute;
  width: 100%;
  height: 22px;
  top: -5px;
  cursor: pointer;
  -webkit-appearance: none;
  pointer-events: none;
  background: none;
  outline: none;
  padding: 0;
}

.range-slider input:focus {
  border: none;
}

.range-slider .range-min::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 25px;
  height: 20px;
  background: #fcfcfc;
  border: 2px solid var(--mainColor);
  border-radius: 20px;
  opacity: 1;
}

.range-slider .range-max::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 25px;
  height: 20px;
  background: #fcfcfc;
  border: 2px solid var(--mainColor);
  border-radius: 20px;
  opacity: 1;
}

.numberVal input {
  background: none;
  border: none !important;
  padding: 0 !important;
  height: auto;
  line-height: 0;
}

.filter-dropdown-head:hover {
  cursor: pointer;
}

/*--------------------------------------------------------- product cart -------------------------------------------------------- */

.cart-inner-card {
  padding: 20px;
  background: #fff;
  border: 1px solid #e0e6f7;
  box-shadow: 0px 6px 15px rgba(64, 79, 104, 0.05);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  margin-bottom: 20px;
  position: relative;
}

.cart-inner-container {
  display: flex;
  align-items: center;
  justify-content: start;
}

.cart-inner-img {
  width: 150px;
  height: 150px;
  overflow: hidden;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 20px 20px 20px 0;
}

.cart-inner-img img {
  width: 100%;
  height: fit-content;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.cart-innner-produt-title {
  color: #000;
  font-size: 17px;
  font-weight: 600;
  display: block;
}

.color-paragraph {
  color: var(--paragraph);
}

.cart-dec {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrp {
  text-transform: uppercase;
  color: #000;
  font-size: 14px;
  font-family: var(--primaryFont);
  font-weight: 600;
}

.strike-text {
  text-decoration: line-through;
  display: inline-block;
}

.old-price {
  color: var(--primaryColor);
  font-size: 16px;
}

.quantity {
  float: right;
  display: flex;
  align-items: center;
  margin: 0 !important;
}

.quantity button.plus,
.quantity button.minus {
  background: #0d96e4;
  border: none;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 23px;
  font-size: 15px;
  color: #fff;
  border-radius: 50%;
  padding: 0;
}

.quantity input {
  text-align: center;
  height: 40px;
  border: 1px solid #d0d0d0;
  width: 65px !important;
  margin: 0 10px !important;
}

.delete-button {
  position: absolute;
  right: 3%;
  top: 8%;
}

.delete-button i {
  color: #d93025;
  cursor: pointer;
}

.cart-right {
  border-bottom: 1px solid #e0e6f7;
}

.card-price-details-div {
  padding-bottom: 10px;
  border-bottom: 2px dotted #e0e6f7;
}

.color-green {
  color: #388e3c;
}

.product-btn {
  text-decoration: none;
  padding: 14px 90px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  font-family: var(--primaryFont);
  font-weight: 600;
}

.buy-btn-cart {
  border: 1px solid var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
  transition: 0.4s ease-in-out;
}

.buy-btn-cart:hover {
  background-color: #02517a;
  color: #fff !important;
}

.width-70 {
  width: 10%;
}

.fonts-30 {
  font-size: 30px;
}

.wrapper-product {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #ffffff;
  border-radius: 10px;
}

.thumbnail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  position: relative;
}

.scroll-up,
.scroll-down {
  width: 100px;
  height: 30px;
  background: #eef9fd;
  color: #3d3c3c;
  border: none;
  /* border-radius: 50%; */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  border: 1px solid var(--borderColor);
  font-size: 18px;
  transition: 0.4s ease-in-out;
}

.scroll-up:hover,
.scroll-down:hover {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 2.95px 3.6px;
}

.thumbnail {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  height: 450px;
  /* Adjust as per your layout */
  scroll-behavior: smooth;
  width: 100px;
  overflow-y: hidden;
}

.thumbnailBox {
  border-radius: 4px;
  /* overflow: hidden; */
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 5px 0;
  height: 100px;
  cursor: pointer;
  border: 1px solid var(--borderColor);
  transition: border 0.3s ease;
  padding: 5px;
}

.thumbnailBox.active {
  border: 1px solid var(--borderColor);
}

.thumbnailBox img {
  width: auto;
  height: 80px;
  /* height: auto; */
  /* changes done by sawan */
}

.mainImage {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  width: 500px;
  height: 500px;
  border-radius: 10px;
  cursor: crosshair;
}

.bg-color {
  background-color: var(--bgColor);
}

.mainImage img {
  /* width: 100%; */
  /* height: 100%; */
  /* object-fit: cover; */
  transition: transform 0.3s ease;
}

.border-1p {
  border: 1px solid var(--borderColor) !important;
  border-radius: var(--border-radius) !important;
}

.resp-icon {
  display: none;
}

.login-change {
  padding: 10px 20px;
  border: 1px solid var(--borderColor);
  border-radius: var(--border-radius);
  background-color: var(--whiteColor);
}

.log-id-count {
  background-color: var(--backgroundColor);
  padding: 3px 10px;
  color: var(--mainColor);
  font-weight: 600;
}

.d-address-head .bg-white {
  /* background-color: var(--whiteColor); */
  border-radius: 2px;
}

.d-address-head {
  padding: 10px 20px;
  border: 1px solid var(--borderColor);
  border-radius: var(--border-radius);
  background-color: var(--mainColor);
}

.order-summary {
  padding: 10px 20px;
  /* border: 1px solid var(--borderColor); */
  border-radius: var(--border-radius);
  background-color: var(--whiteColor);
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.d-address h6 {
  color: var(--bgColor);
}

.order-count {
  background-color: var(--backgroundColor);
  padding: 3px 10px;
  color: var(--mainColor);
  font-weight: 600;
}

.adresses {
  padding: 30px 20px;
  background-color: var(--whiteColor);
  border-bottom: 1px solid var(--borderColor);
}

.main-address {
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  background-color: #e0e4ff;
}

.add-new-address {
  padding: 10px 20px;
  background-color: var(--whiteColor);
  border-bottom: 1px solid var(--borderColor);
  cursor: pointer;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.add-new-address span .fa-plus {
  margin-right: 34px;
  font-weight: 400 !important;
}

.VKzPTL {
  width: 100%;
}

.main-address .active {
  background-color: var(--bgColor);
}

.submit-d-adrress {
  padding: 16px 30px !important;
}

.cancle-address-form {
  background-color: var(--bgColor) !important;
  border: none !important;
  color: var(--mainColor);
}

.view-more-address {
  padding: 10px 15px;
  background-color: var(--whiteColor);
  border-bottom: 1px solid var(--borderColor);
  cursor: pointer;
}

.view-more-address h6 .fa-angle-down {
  padding-right: 34px;
}

.VTUEC- {
  display: inline-block;
  margin-left: 18px;
  width: calc(100% - 34px);
}

._7Csqyg {
  font-weight: 600;
  word-break: break-all;
  color: var(--blackColor);
}

._0eTOkm {
  font-size: 14px;
  font-weight: 600;
  color: var(--mainColor);
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  padding: 7px 20px;
  /* background-color: var(--backgroundColor); */
  /* border: 1px solid var(--borderColor); */
}

._0eTOkm:hover {
  background-color: var(--backgroundColor);
}

.FA45gW {
  background-color: var(--mainColor);
}

.remove-item h6 {
  color: var(--mainColor);
  cursor: pointer;
  transition: 0.2s;
}

.open-box-delivery img {
  width: 20px;
}

.open-box-delivery p {
  font-weight: 600;
  font-size: 12px;
}

.payment-assurance img {
  width: 30px;
}

.box-shadow {
  border: 1px solid var(--borderColor);
}

.order-summary .gst-invoice {
  font-weight: 600;
}

.order-summary .gst-invoice span {
  color: var(--mainColor);
  cursor: pointer;
  text-transform: capitalize;
}

.order-summary .confirmation-mail span {
  font-weight: 600;
}

.login-change .default-btn {
  border: 1px solid var(--borderColor);
  /* color: var(--mainColor); */
}

.login-id-name p {
  text-wrap: wrap;
}

.payment-options {
  padding: 20px 20px;
  background-color: var(--whiteColor);
  box-shadow: var(--box-shadow);
}

.active-payment {
  background-color: var(--bgColor) !important;
}

.payment-googlePay {
  padding: 10px 20px;
  background-color: var(--whiteColor);
  /* border: 1px solid var(--borderColor); */
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  cursor: pointer;
}

.payment {
  padding: 15px 20px;
  background-color: var(--whiteColor);
  border-bottom: 1px solid var(--borderColor);
  cursor: pointer;
}

.payment img,
.payment-googlePay img {
  width: 30px;
}

.remove-item h6:hover {
  color: var(--blackColor);
}

.VpZoP0 {
  text-transform: uppercase;
  font-size: 11px;
  color: #878787;
  vertical-align: middle;
  padding: 4px 7px;
  border-radius: 2px;
  background-color: #f0f0f0;
  font-weight: 500;
}

.H9XH1D {
  margin-top: 10px;
  display: block;
}

.login-id-name .id-name {
  font-weight: 500;
  color: var(--blackColor);
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--blackColor);
}

.login-id-name .login {
  font-weight: 600;
  color: var(--blackColor);
}

.login-id-name .fa-check {
  font-weight: 400 !important;
  color: #00903c;
}

.login-id-name p span {
  font-weight: 400;
  color: var(--blackColor);
}

.w-190 {
  width: 190px;
  font-size: 14px;
  padding: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.w-190-responsive {
  width: 190px;
  font-size: 14px;
  padding: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.atm-card-option {
  max-width: 500px;
}

.m2cjM {
  position: absolute;
  right: 8px;
  top: 16px;
  color: #fff;
  border-radius: 50% 50%;
  background: #c2c2c2;
  padding: 0 5px;
  cursor: pointer;
  line-height: 1.3;
}

.net-banking-options label {
  width: 330px;
}

.popular-banks {
  font-weight: 600;
}

#banks {
  display: block !important;
}

.iZtsl8 {
  border: 1px solid var(--borderColor);
  padding: 5px 10px;
}

.iZtsl8 img {
  width: 150px;
}

.w-400 {
  width: 330px !important;
}

.w-30 {
  width: 25px !important;
}

.we-30 {
  width: 30%;
}

.custom-theme-name-display {
  width: 100%;
  /* max-width: 350px; */
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.create-event .left-column .upload-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
}

.create-event .left-column .event-image-preview {
  display: inline-block;
  width: 100%;
  /* max-width: 350px; */
}

.create-event .left-column .event-image-preview img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 5px;
}

.create-event .left-column .event-image-preview .fa-camera-retro {
  color: var(--whiteColor);
}

/* .create-event .right-column .custom-privacy-input {
    background-color: var(--backgroundColor);

} */

.create-event .right-column .custom-input-audience {
  width: 250px;
  /* height: 40px; */
  border-radius: var(--border-radius);
}

.create-event .right-column .custom-input-type {
  width: 150px;
  /* height: 40px; */
  border-radius: var(--border-radius);
}

.create-event .right-column .custom-privacy-input:focus {
  border: none;
  box-shadow: var(--box-shadow);
}

.custom-title-input {
  font-weight: bold;
  font-size: 25px !important;
  border: 1px solid #979797 !important;
}

.date-time-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* background: #f7f7f7; */
  padding: 0;
  border-radius: var(--border-radius);
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  margin-bottom: 20px;
  width: 73%;
  border: 1px solid #979797 !important;
  /* box-shadow: var(--box-shadow) !important; */
  height: 200px;
}

.date-label-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
  justify-content: center;
  /* background-color: var(--bgColor); */
}

.date-label-wrapper .date-label {
  font-weight: 600;
}

.custom-date-input {
  padding-left: 40px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  background: #e8c9f6;
}

.custom-dropdown {
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  user-select: none;
  height: 200px;
}

.timezone-wrapper .dropdown-options {
  position: absolute;
}

.selected-option {
  display: flex;
  padding: 12px 12px;
  align-items: center;
  gap: 5px;
  border: 1px solid #979797;
  border-radius: var(--border-radius);
}

.custom-dropdown {
  position: relative;
  /* width: 200px; */
  cursor: pointer;
  border: 1px solid #979797;
  /* padding: 10px; */
  border-radius: 5px;
  background: #fff;
  height: auto;
}

.dropdown-options {
  display: none;
  position: absolute;
  width: 100%;
  z-index: 3;
  background: #fff;
  border: 1px solid #979797;
  border-radius: 5px;
  max-height: 200px;
  overflow-y: auto;
}

.option {
  padding: 10px;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  gap: 5px;
}

.option:hover {
  background: #f0f0f0;
}

.timezone-wrapper {
  gap: 20px;
  padding: 0;
  /* border-radius: 10px; */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  margin-bottom: 20px;
  width: 25%;
}

.event-choose #eventLocationTypeToggle {
  height: 18px;
}

.required-approval #approvalToggle {
  height: 18px;
}

.capacityDisplay .event-capacity-button:focus {
  box-shadow: none !important;
}

.capacityDisplay button:hover {
  border: none !important;
}

.right-column #eventcapacity {
  border: 1px solid var(--borderColor) !important;
  padding: 5px 20px;
}

.cancel-event {
  color: #000;
  background: var(--backgroundColor);
  border: 1px solid var(--borderColor);
  border-radius: var(--border-radius);
  display: block;
  padding: 7px 29px;
  font-weight: 500;
  margin-top: 20px;
}

.cancel-event:hover {
  border: 1px solid var(--blackColor);
  background-color: var(--bgColor);
}

.filepond--root .wedf {
  height: 100%;
}

.filepond--drop-label {
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}

.offcanvas-vghuio {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: #f1efef45;
}

#uploadImageModal .event-image-choose {
  background-color: var(--backgroundColor);
  border-radius: var(--border-radius);
  border: 1px solid var(--borderColor);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-cards .card-img {
  border-radius: 8px;
  max-width: 200px;
}

.event-location-hji {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 500px;
  padding-bottom: 56.25%;
}

.event-participants {
  position: relative;
  margin-top: 20px;
}

.event-participants .fa-user-circle {
  font-size: 20px;
  position: absolute;
  top: -10px;
}

.event-participants #fa1 {
  left: 0;
}

.event-participants #fa2 {
  left: 15px;
}

.event-participants #fa3 {
  left: 30px;
}

.text-success .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.bhjimk {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 500px;
  padding-bottom: 56.25%;
}

.event-cards .card-body {
  gap: 20px !important;
}

.border-1 {
  border: 1px solid var(--borderColor);
  border-radius: var(--border-radius) !important;
  /* padding: 10px 0 !important; */
}

.all-event-cards .nav-tabs .nav-item #upcoming-tab {
  padding: 0.5rem 33px;
}

.all-event-cards .nav-tabs .nav-item #past-tab {
  padding: 0.5rem 54px;
}

.see-more {
  color: var(--mainColor);
  cursor: pointer;
}

.see-more:hover {
  color: var(--blackColor);
}

#event-details-image img {
  height: 450px;
}

.event-details-info .content {
  width: fit-content;
}

#event-details-image .blog-meta .copy-link p {
  color: var(--whiteColor);
  cursor: pointer;
}

#event-details-image .blog-meta .copy-link p:hover {
  color: var(--blackColor);
}

.copied {
  transition: 0.3s;
}

.ticket-types .ticket-type {
  padding: 6px 18px;
  width: auto;
  min-height: 36px;
  border: 1px solid rgb(216, 216, 216);
  text-align: center;
  background: rgb(246 246 246 / 60%);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.ticket-types .ticket-type:hover {
  color: #00cc00;
  border: 1px solid #00cc00;
}

.ticket-types .ticket-type-options .active {
  color: #00cc00;
  border: 1px solid #00cc00;
  font-size: 0.8rem;
  background: rgb(244, 248, 255) !important;
}

.ticket-types .ticket-type-options .fa-check {
  display: none;
}

.ticket-types .ticket-type-options .active .fa-check {
  color: #00cc00;
  /* border: 1px solid var(--mainColor); */
  display: contents !important;
  font-size: 0.8rem;
}

.ticket-types .approve-type {
  padding: 13px;
  width: 100%;

  height: 50px;
  border: 1px solid #979797;
  text-align: center;
  border-radius: var(--border-radius);
  cursor: pointer;
}

.ticket-types .approve-type:hover {
  border: 1px solid var(--mainColor);
}

.ticket-types .approve-type-options .active {
  background-color: var(--mainColor);
  color: var(--whiteColor);
}

.ticket-types .status-type-options .active {
  background-color: var(--mainColor);
  color: var(--whiteColor);
}

.ticket-types .profession-type-options .fa-check {
  display: none;
}

.ticket-types .profession-type-options .active .fa-check {
  color: #00cc00;
  /* border: 1px solid var(--mainColor); */
  display: contents !important;
  font-size: 0.8rem;
}

.ticket-types .profession-type-options .active {
  color: #09b009;
  border: 1px solid #00db00;
  font-size: 0.8rem;
  background: rgb(244 255 248) !important;
}

.upload-btn {
  color: #fff;
  background: var(--mainColor);
  border-radius: var(--border-radius);
  font:
    400 16px "Josefin Sans",
    sans-serif;
  display: block;
  width: 100px;
  padding: 10px 29px;
  width: fit-content;
  text-decoration: navajowhite;
  margin-top: 20px;
}

.responsive-input,
.responsive-all-event-cards {
  display: none;
}

.modal-paid {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition:
    visibility 0s linear 0.25s,
    opacity 0.25s 0s,
    transform 0.25s;
}

.paid-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 24rem;
  border-radius: 0.5rem;
}

.paid-close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
}

.paid-close-button:hover {
  background-color: darkgray;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    visibility 0s linear 0s,
    opacity 0.25s 0s,
    transform 0.25s;
}

/* #event_title {
    height: auto; 
} */

.all-block-buttons {
  transition: 0.2s ease-in-out;
  margin-top: -34px;
}

/* .all-block-buttons .block-buttons {
    transition: .3s;
} */

.all-block-buttons .block-buttons {
  padding: 27px 30px;
  /* border: 1px solid var(--borderColor); */
}

/* .all-block-buttons .block-buttons:hover {
    border: 1px solid var(--mainColor);
    cursor: pointer;

} */

.Progress-type-options .active-progress {
  background-color: var(--mainColor) !important;
  color: var(--whiteColor) !important;
}

#physicalLocationFields {
  display: none;
}

/*------------------------------------------------------------- manage events page ---------------------------------------------------------------- */

.page-tab-buttons {
  display: flex;
  justify-content: space-around;
  cursor: pointer;
  border-bottom: 2px solid var(--borderColor);
}

.page-tab-buttons div {
  padding: 15px 20px;
  font-weight: bold;
  font-size: 1.1rem;
  /* color: #555; */
  transition:
    color 0.3s,
    border-bottom 0.3s;
}

.page-tab-buttons div.active {
  color: var(--mainColor);
  border-bottom: 3px solid var(--mainColor);
}

.page-tab-content.active {
  display: block;
}

.rounded {
  border-radius: var(--border-radius) !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.bhjio {
  background-color: var(--backgroundColor);
}

.jojvcw {
  background-color: var(--bgColor);
}

.jnovdvj {
  width: 39%;
}

.shadow {
  -webkit-box-shadow: var(--box-shadow) !important;
  box-shadow: var(--box-shadow) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.lnvnew {
  color: #7993ba;
}

.ljefw {
  border-radius: 50%;
}

.ljefw p {
  font-weight: 400;
}

.ljefw img {
  border-radius: 20px;
  height: 20px;
}

.vw-60 {
  width: 60%;
}

.icon-container {
  cursor: pointer;
}

.fw-medium {
  font-weight: 500 !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lwjebfoew {
  background-color: var(--backgroundColor);
}

.nwoqnofwq img {
  height: 25px;
}

.pqienfpnf {
  color: #757678;
  background-color: var(--bgColor);
  border: 1px solid var(--borderColor);
  text-align: center;
}

.pqienfpnf:hover {
  border: 1px solid var(--mainColor);
  background-color: #ffffff;
  color: #000;
}

.pqienfpnf a {
  color: #757678;
}

.pqienfpnf:hover a {
  color: #000;
}

.kjbobwq,
.addHosts-btn {
  background-color: var(--backgroundColor) !important;
  color: #757678;
}

.khbiugkhbib {
  background-color: #f7f7f7;
  color: #757678;
  text-align: center;
  border: 1px solid var(--borderColor);
  width: 100%;
}

.khbiugkhbib a {
  /* background-color: #f7f7f7; */
  color: #757678;
}

.khbiugkhbib:hover {
  background-color: #ffffff;
  border: 1px solid var(--mainColor);
  color: #000;
}

.khbiugkhbib:hover a {
  color: #000;
}

.urorjw {
  color: var(--blackColor);
}

.ouqbfouf {
  width: 37%;
  min-height: 200px;
}

.ouqbfouf .fa-xmark {
  position: absolute;
  top: 10px;
  right: 10px;
}

.kbwfowoq {
  width: 62%;
  min-height: 200px;
}

.jdnlaejf {
  background-color: var(--backgroundColor);
}

.uqroqiwl {
  color: #3cbd2c;
}

.pkfne-fmwk {
  height: 10px;
}

.pkfne-fmwk .bar1 {
  width: 0%;
  background-color: #3cbd2c;
}

.pkfne-fmwk .bar2 {
  width: 0%;
  background-color: #146aeb;
}

.pkfne-fmwk .bar3 {
  width: 100%;
  background-color: #e2e4e5;
}

.manager-jor {
  color: #3cbd2c;
  background-color: #e3f4e1;
  outline: none;
  border: none;
}

.ewkfnpkw img {
  border-radius: 50%;
}

.cancel-nlnfe {
  color: #fff;
  background-color: var(--mainColor);
}

.fw-400 {
  font-weight: 400;
}

.edit-host-btn {
  background-color: var(--backgroundColor);
  color: var(--blackColor);
}

.edit-host-btn:hover {
  background-color: var(--blackColor);
  color: var(--whiteColor);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--mainColor);
}

.card-radio input[type="radio"] {
  display: none;
}

#editShowHostOnEventlToggle {
  width: 50px;
}

.maslvjqp {
  list-style: disc;
}

.lkf-lek3 {
  color: #146aeb;
}

.kjeqfjblofj32 {
  background-color: #edecec;
  color: #757678;
  text-align: center;
  width: 100%;
}

.circle-lwejkn {
  background-color: #f7ddde;
}

#inviteGuestsModal {
  display: none;
}

#addHostsModal {
  display: none;
}

#editHostsModal {
  display: none;
}

#confirmCancellationModal {
  display: none;
}

#confirmCloseRegistrationModal {
  display: none;
}

.modal-dialog-jnwdovj {
  max-width: 800px;
}

.lknwrfpwe {
  padding-bottom: 0 !important;
}

.has-icon1 {
  width: 75%;
}

#dynamicContainer {
  min-height: 50vh;
}

.xmark-oqoD {
  cursor: pointer;
}

.has-icon .form-icon {
  right: 12px;
  /* z-index: 9; */
  color: #999;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.vh-40 {
  height: 40px;
}

.circle-lwejkn {
  border-radius: 50%;
}

.checkin-btn-kjabkfef {
  color: #fff;
  background-color: #3cbd2c;
  border: none;
  outline: none;
}

.onefpqifnep {
  background-color: var(--bgColor) !important;

  color: var(--blackColor) !important;
}

#rate-product-lwkqe {
  padding: 10px 37px !important;
}

#ask-now-ajkfn {
  padding: 10px 50px !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++dashboard bar graph css +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.overlay {
  fill: #3d70b2;
  opacity: 0.1;
  display: none;
  pointer-events: none;
}

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

.axis path {
  stroke: #5a6872;
}

.tick line {
  stroke: #5a6872;
}

.tick text {
  fill: #5a6872;
}

.graph-container {
  position: relative;
}

.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;

  &: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;
}

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

/* --------------------------------------------------------dashboard page side bar css--------------------------------------------------------------- */

.profile-card {
  background-color: var(--bgColor);

  text-align: center;

  border: 1px solid var(--borderColor);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.profile-bgImage {
  background-color: var(--bg-dashboard);
  height: 184px;
  border-radius: var(--border-radius);
  padding: 0;
}

/* .separate .fa-chevron-right {
    color: #646c70;
} */

/* ++++++++++++++++++++++++++++++++++++++++++dashboard side pannel nav link ++++++++++++++++++++++++++++++++ */
#accountSettingsCollapse {
  margin-left: 40px;
  margin-top: 10px;
}

#MyDiagnosticProfile {
  margin-left: 40px;
  margin-top: 10px;
}

#Knowledge {
  margin-left: 40px;
  margin-top: 10px;
}

#dailyActivitiesLog {
  margin-left: 40px;
  margin-top: 10px;
}

#DevelopmentalPlans {
  margin-left: 40px;
  margin-top: 10px;
}

#healthCareRecords {
  margin-left: 40px;
  margin-top: 10px;
}

#mystuffSettingsCollapse {
  margin-left: 40px;
  margin-top: 10px;
}

.cursor-pointer {
  cursor: pointer !important;
}

.track-order-help a {
  color: var(--blackColor);
}

.track-order-help a:hover {
  color: var(--mainColor);
}

#eventCollapse {
  margin-left: 40px;
  margin-top: 10px;
}

#SpecialNeedProducts {
  margin-left: 40px;
  margin-top: 10px;
}

#Forums {
  margin-left: 40px;
  margin-top: 10px;
}

#RatingsReviewsComments {
  margin-left: 40px;
  margin-top: 10px;
}

#PersonalTools {
  margin-left: 40px;
  margin-top: 10px;
}

#Collaborations {
  margin-left: 40px;
  margin-top: 10px;
}

#BillingPayments {
  margin-left: 40px;
  margin-top: 10px;
}

#Coupons-Offers {
  margin-left: 40px;
  margin-top: 10px;
}

#Alert {
  margin-left: 40px;
  margin-top: 10px;
}

#mySettings {
  margin-left: 40px;
  margin-top: 10px;
}

#myProfile {
  margin-left: 40px;
  margin-top: 10px;
}

#Dashboard {
  /* margin-left: 40px; */
  margin-top: 10px;
}

#giftcardSettingsCollapse {
  margin-left: 40px;
  margin-top: 10px;
}

.text-main-color {
  color: var(--mainColor);
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.resposive-image {
  height: 150px;
  /* width: auto; */
}

.might-like-card .resposive-image img {
  height: 100%;
  width: auto;
}

@media screen and (max-width: 1290px) {
  .resposive-image {
    height: 150px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .might-like-card .resposive-image img {
    height: 100%;
    width: auto;
  }

  .responsive-context {
    width: 100%;
  }
}

.width-45 {
  width: 45px !important;
}

.text-gray {
  color: var(--bs-gray-800);
}

.icon-box {
  width: 3.3rem;
  min-width: 3.3rem;
  height: 3.3rem;
}

.eye-icon {
  position: absolute;
  right: 18px;
  top: 18px;
}

.gst-change-btn {
  font-size: 16px;
  color: var(--mainColor);
  padding: 7px 16px;
  line-height: 1;
  background-color: white;
  border: 1px solid var(--mainColor);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-transform: capitalize;
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

.gst-change-btn:hover {
  background-color: var(--mainColor);
  color: white;
}

.responsive-resource-card-img {
  width: 130px;
  height: 150px;
  overflow: hidden;
}

.responsive-resource-card-img img {
  width: 100%;
  height: 100%;
}

.pills-countPill {
  border-radius: 50%;
  background-color: var(--bs-gray-400);
  /* color: #fff; */
  border: 1px solid var(--bs-gray-500);
}

.cart-pill {
  position: absolute;
  height: 18px;
  width: 18px;
  top: -8px;
  width: 18px;
  height: 18px;
  right: -8px;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  font-weight: 600;
  color: white;
  /* padding: 1px 2px; */
  /* border: 1px solid var(--mainColor); */
  background-color: #ff6161;
  /* background-color: var(--mainColor); */
  border-radius: 50%;
}

.category-pill {
  position: absolute;
  height: 18px;
  width: 18px;
  top: -8px;
  right: -8px;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  font-weight: 600;
  /* color: white; */
  color: var(--mainColor);
  /* padding: 1px 2px; */
  border: 1px solid var(--mainColor);
  background-color: #fff;
  /* background-color: #ff6161; */
  /* background-color: var(--mainColor); */
  border-radius: 50%;
}

.bottom-34 {
  bottom: 34px !important;
  top: auto !important;
}

.resource-count-pill {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid var(--mainColor);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 25px;
  /* margin-top: 5px; */
  color: var(--mainColor);
}

.Contact-Page-social-share .contact-social {
  margin-right: 5px !important;
}

.height-50 {
  height: 50px !important;
}

.top-auto {
  top: auto !important;
}

.width-125 {
  width: 154px !important;
}

.responsive-blog-img-h {
  height: 275px;
}

.feature-article-responsive-img {
  height: 450px;
}

#twitterhu i::before {
  font-size: 15px !important;
}

.auhtor-img-responsie {
  height: 426px;
}

.auhtor-img-responsie img {
  height: 100% !important;
}

.profile-card img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* margin-top: -95px; */
  border: 5px solid var(--borderColor);
}

.profile-card {
  background-color: var(--bgColor);

  text-align: center;

  border: 1px solid var(--borderColor);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

/* .separate .fa-chevron-right {
    color: #b0bec5;
} */

#accountSettingsCollapse {
  margin-left: 40px;
  margin-top: 10px;
}

#mystuffSettingsCollapse {
  margin-left: 40px;
  margin-top: 10px;
}

.cursor-pointer {
  cursor: pointer !important;
}

.track-order-help a {
  color: var(--blackColor);
}

.track-order-help a:hover {
  color: var(--mainColor);
}

#eventCollapse {
  margin-left: 40px;
  margin-top: 10px;
}

#giftcardSettingsCollapse {
  margin-left: 40px;
  margin-top: 10px;
}

.text-main-color {
  color: var(--mainColor);
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.edit-address-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 0px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.edit-dots {
  cursor: pointer;
  font-size: 18px;
  padding: 5px;
  user-select: none;
}

.edit-dropdown:hover .edit-address-dropdown-content {
  display: flex;
  flex-direction: column;
}

.edit-address-dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

.edit-address-dropdown-content p {
  color: black;
  padding: 12px 16px;
  /* text-decoration: none; */
  display: block;
  font-size: 14px;
}

.edit-address-dropdown-content a:hover {
  background-color: var(--borderColor);
}

.edit-address-dropdown-content p:hover {
  background-color: var(--borderColor);
}

.panEdit-form-group label {
  position: absolute;
  top: -11px;
  left: 10px;
  pointer-events: none;
  z-index: 3;
  background: #fff;
  padding: 0 10px;
  font-weight: 600;
}

.address-header {
  background-color: #f5f5f5;
}

.js-example-templating {
  height: 50px;
}

.js-example-templating:focus {
  border: 1px solid var(--mainColor) !important;
  box-shadow: none !important;
}

.event-filter {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  flex-wrap: wrap;
}

.gridjs-td .event-list-image {
  overflow: hidden;
  padding-top: 5px !important;
}

.border-radius-1 {
  border-radius: 5px !important;
}

.lfweknodot {
  width: 10px;
  height: 10px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}

/*---------------------------------------------------- Multi user participant ----------------------------------------------------- */

.user-guest-pills {
  position: relative;
}

.w-147 {
  width: 150px;
}

.user-guest-pills #guest1 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
  left: 0px;
  top: 0;
}

.user-guest-pills #guest2 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
  left: 15px;
  top: 0;
}

.user-guest-pills #guest3 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
  left: 30px;
  top: 0;
}

.guest-number {
  margin-left: 64px;
}

.db-event-sub {
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  margin: 7px 0px !important;
  /* max-width: 700px; */
}

.bg-blue {
  background-color: var(--bs-blue);
}

.event-card-footer-c {
  flex-wrap: wrap;
}

.h-517 {
  height: 590px;
}

@media only screen and (min-width: 1400px) {
  .blog-area.category-area .single-blog-inner .details h4 {
    font-size: 18px;
    min-height: 93px;
  }

  .responsive-author-dContent {
    height: 316px;
  }

  .modal-max {
    max-width: 1100px;
  }
}

.width-125 {
  width: 125px;
}

#lets-connect:hover {
  color: white;
}

.border-top {
  border-top: 1px solid var(--borderColor);
}

.left-line-d::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 39px;
  background: var(--mainColor);
  width: 4px;
  height: 60%;
}

.left-line-full-d::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  background: var(--mainColor);
  width: 4px;
  height: 100%;
}

.publish-time::before {
  content: "";
  position: absolute;
  left: -0.1px;
  top: 12px;
  background: var(--mainColor);
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.article-publish-time::before {
  content: "";
  position: absolute;
  left: -0.1px;
  top: 0px;
  background: var(--mainColor);
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.m-top-10 {
  margin-top: -10px;
}

.article-side-list {
  padding: 0.5rem 1rem;
  height: auto !important;
}

.text-right {
  text-align: right;
}

.article-category li {
  border: 1px solid #e64d2570 !important;
}

.sign-in-modal-dialog .modal-content .modal-body {
  border-radius: var(--border-radius);
}

.mw-550 {
  max-width: 550px;
}

#author-dImg {
  height: 70vh;
}

.social-icon-dissable {
  color: darkgray !important;
  cursor: no-drop !important;
}

.fsize-18::before {
  font-size: 18px !important;
}

.author-image-bd {
  width: 160px;
  height: 188px;
}

.bd-profile-image {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
}

/*-------------------------------------------------- login modal ---------------------------------------------------------- */
.mw-550 {
  max-width: 550px;
}

.mw-500 {
  max-width: 500px;
}

.modal-profile-profile-img {
  max-width: 100px;
  max-height: 100px;
}

.bg-aliceblue {
  background-color: aliceblue;
}

/*--------------------------------------------- innitail dashboard page  -------------------------------------------------------*/
.block-page-profile-sec {
  width: 120px;
  height: 120px;
  border: 3px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}

.block-page-profile-sec img {
  width: 100%;
  height: 100%;
}

.block-page-db {
  /* box-shadow: var(--box-shadow); */
  /* background-color: var(--bg-dashboard); */
  height: 200px;
}

.fontSize-50 {
  font-size: 50px;
}

.section-title3 {
  max-width: 900px;
  /* ----------------------------------------------------------------bkjsaofieu ----------------------------------------------------------------------*/
  margin: 20px auto 30px;
  text-align: center;
  position: relative;
}

.section-title3::after {
  position: absolute;
  content: "";
  width: 25%;
  height: 4px;
  background: var(--mainColor);
  bottom: -30px;
  /* right: 38%; */
  left: 0;
}

.section-title3 h2 {
  font-size: 30px;
  margin-bottom: 15px;
  position: relative;
  display: block;
}

.bottom-text-dashboard {
  letter-spacing: 1px;
}

.bg-light-blue {
  background-color: #0d96e4;
}

.text-light-blue {
  color: #0d96e4;
}

.fonts-18 {
  font-size: 18px;
}

.dashboard-contact-us {
  color: #fff;
}

.dashboard-contact-us:hover {
  color: var(--mainColor);
}

/*------------------------------ about us --------------------------------------------- */
.redline-heading {
  position: relative;
  width: 100px;
  height: 4px;
  background: var(--mainColor);
}

.height-150 {
  height: 150px;
}

.got-suggestion {
  font-size: 18px;

  font-weight: 600;
  color: var(--whiteColor);
}

.got-suggestion a {
  color: var(--whiteColor);
}

.got-suggestion a:hover {
  color: var(--mainColor) !important;
}

.list-style h3 {
  font-size: 1.25rem !important;
}

.list-style ul {
  list-style: disc !important;
  padding-left: 20px;
}

.list-style ul li {
  display: list-item !important;
  padding: 0px !important;
}

/*--------------------------------------------------------------- event --------------------------------------------------- */
.sensory-product-card-container {
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

.serach-result-product .sensory-product-card-container {
  margin-bottom: 25px;
}

.sensory-product-card-container::before {
  position: absolute;
  content: "";
  background: #fff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  top: 8px;
  bottom: 8px;
  left: 7px;
  right: -7px;
  z-index: -1;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.sensory-product-card-container:hover {
  transform: translateY(-0.2rem);
}

.sen-product-img-container {
  padding: 6px;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.sensory-product-img {
  height: 160px !important;
  width: 282px !important;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.product-wish {
  position: absolute;
  bottom: -4%;
  right: 7%;
}

.wish-icon {
  height: 30px;
  width: 30px;
  line-height: 30px;
  background: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  color: #000;
  border: 1.5px solid #afafaf;
  text-align: center;
}

.sen-product-text-container {
  /* margin-top: 25px; */
  padding: 0 10px;
}

.sen-product-name {
  display: block;
  color: #000;
  font-weight: 700;
  font-size: 20px;
}

.sen-product-sub {
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  margin: 7px 0px !important;
}

.user-guest-pills {
  position: relative;
}

.w-147 {
  width: 150px;
}

.user-guest-pills #guest1 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
  left: 0px;
  top: 0;
}

.user-guest-pills #guest2 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
  left: 15px;
  top: 0;
}

.user-guest-pills #guest3 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
  left: 30px;
  top: 0;
}

.guest-number {
  margin-left: 64px;
}

.db-event-sub {
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  margin: 7px 0px !important;
  /* max-width: 700px; */
}

.w-147 {
  width: 150px;
}

.answer-modal-inner-forum {
  padding: 10px 30px;
  border-radius: 4px;
  /* background-color: #ffe2da; */
  /* border: 1px solid var(--secondaryColor); */
}

.answer-modal-inner-forum a {
  font-weight: 500;
  transition: 0.2s ease-in-out;
}

.answer-modal-inner-forum:hover {
  background-color: var(--mainColor);
  color: #ffffff;
}

.answer-modal-inner-forum:hover a {
  color: var(--backgroundColor) !important;
}

.event-cards .card-body {
  gap: 20px !important;
}

.border-1 {
  border: 1px solid var(--borderColor);
  border-radius: var(--border-radius) !important;
  /* padding: 10px 0 !important; */
}

.nav-tabs .nav-link.active {
  color: var(--mainColor) !important;
  background: var(--backgroundColor) !important;
  /* border-radius: 20px; */
}

.goc-tab .nav-tabs .nav-link {
  border-color: transparent !important;
  background: transparent !important;
  color: #000;
}

.fonts-14 {
  font-size: 14px;
}

.lwfnwfopwd {
  width: fit-content;
  text-decoration: none;
  padding: 5px 20px;
  border-radius: var(--border-radius);
}

.text-btn {
  color: var(--mainColor);
  transition: 0.3s;
}

.text-btn:hover {
  color: var(--black);
}

.text-btn2 {
  color: var(--headingColor);
  transition: 0.3s;
}

.text-btn2:hover {
  color: var(--mainColor);
}

/* ----------------------------------------------------------stories card design ------------------------------------------------------------------------- */
.single-team-inner .story-hover-details-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    0deg,
    rgba(255, 98, 55, 0.9248074229691877) 0%,
    rgba(247, 194, 175, 0.24693627450980393) 53%,
    rgba(166, 168, 168, 0.26094187675070024) 100%
  );
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.single-team-inner .story-hover-details-wrap h4 {
  font-size: 20px;
  margin-bottom: 0;
  color: var(--whiteColor);
}

.single-team-inner .story-hover-details-wrap h4 a {
  color: var(--whiteColor);
}

.single-team-inner .story-hover-details-wrap p {
  margin-bottom: 0;
  color: var(--whiteColor);
}

.single-team-inner .story-hover-details-wrap .hover-details-inner {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin-top: 40px;
}

.single-team-inner:hover .thumb img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.single-team-inner:hover .story-hover-details-wrap {
  visibility: visible;
  opacity: 1;
}

.single-team-inner:hover .story-hover-details-wrap .hover-details-inner {
  margin-top: 0;
}

.single-team-inner:hover .story-hover-details-wrap h4:hover a {
  color: var(--whiteColor);
  text-decoration: underline;
}

/* .h-426{
    height: 426px;
} */
/* .h-426 img{
    height: 100%;
} */
.border-round1 {
  border: 1px solid var(--mainColor);
}

.fonts-18 {
  font-size: 18px !important;
}

.social-media-story {
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.social-media-story li {
  display: inline-block;
  margin-right: 0 !important;
  margin: 0 10px;
}

.social-media-story li a {
  height: 32px;
  width: 32px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  background: var(--whiteColor);
  color: var(--mainColor);
  font-size: 14px;
}

.social-media-story li a.facebook {
  color: #3b5999;
  border-color: #3b5999;
}

.social-media-story li a.twitter {
  color: #55acee;
  border-color: #55acee;
}

.social-media-story li a.instagram {
  color: #e4405f;
  border-color: #e4405f;
}

.social-media-story li a.youtube {
  color: #cd201f;
  border-color: #cd201f;
}

.social-media-story li a:hover {
  background: var(--blackColor);
  color: var(--whiteColor);
}

.social-media-story li:first-child {
  margin-left: 0;
}

.social-media-story li:last-child {
  margin-right: 0;
}

.story-details-photo2 {
  width: 47vw;
  min-width: 300px;
  aspect-ratio: 3/2;
}

.all-stories img {
  height: 47vh;
}

.story-details-photo2 {
  height: 60vh;
  display: flex;
}

.story-details-photo2 img {
  object-fit: cover;
  object-position: center center;
  height: auto;
  width: 100%;
}

/* ------------------------------------------------about us ------------------------------------------------------------ */
.counter-img {
  /* clip-path: ellipse(50% 55% at 50% 50%); */
  border-radius: 155px;
  height: 40vh;
  width: 38vw;
}

.under-line-counter {
  position: absolute;
  z-index: -1;
  bottom: 10%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--borderColor);
}

.w-200 {
  width: 180px;
}

.fs-1r {
  font-size: 1.1rem;
}

.section-title-counter::after {
  position: absolute;
  content: "";
  width: 25%;
  height: 4px;
  background: var(--mainColor);
  bottom: -10px;
  /* right: 38%; */
  left: 0;
}

.counter-area .counters-data {
  font-size: 14px;
}

.w-45 {
  width: 45px;
}

.w-500 {
  font-weight: 500;
}

.userid-menu {
  width: min-content;
}

.pad-a {
  padding: 7px 15px;
}

/*------------------------------------------------------ author card design  ---------------------------------------------------------- */
.abg-black {
  background-color: #a9c0a9;
}

.abg-red {
  background-color: #c38686;
}

.abg-blue {
  background-color: #6a80b5;
}

.author-card-d .author-card-inner {
  display: flex;
  justify-content: space-between;
}

.author-card-d .author-image-right {
  clip-path: circle(88.7% at 100% 50%);
  height: 278px;
  width: 415px;
  overflow: hidden;
}

.author-card-d .author-image-right img {
  height: 100%;
  width: 100%;
}

.author-card-d .author-footer-member {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 90%;
}

.author-card-d .author-profile-type span {
  clip-path: polygon(91% 0, 100% 50%, 91% 100%, 0 100%, 0 0);
  background-color: #c1b7b7de;
  color: #0c0c0c;
  padding: 1px 9px 1px 4px;
  font-size: 14px;
}

.author-card-d .author-card-content {
  /* background-color: green; */
  position: relative;
  z-index: 2;
  min-width: 287px;
  padding: 30px 2px 50px 20px;
}

.author-card-d .author-card-content .author-profile-type {
  gap: 0.5rem !important;
}

.author-card-d .author-card-content .author-card-particles img:nth-child(1) {
  position: absolute;
  z-index: -1;
  width: 34px;
  bottom: 33px;
  right: 0px;
  transform: rotate(70deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(2) {
  position: absolute;
  z-index: -1;
  width: 32px;
  top: 35px;
  right: 10px;
  transform: rotate(26deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(3) {
  position: absolute;
  z-index: -1;
  width: 46px;
  bottom: 60px;
  left: 10px;
  transform: rotate(-18deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(4) {
  position: absolute;
  z-index: -1;
  width: 30px;
  top: 95px;
  right: 99px;
  transform: rotate(60deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(5) {
  position: absolute;
  z-index: -1;
  width: 37px;
  top: 5px;
  left: 6px;
  transform: rotate(16deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(6) {
  position: absolute;
  z-index: -1;
  width: 45px;
  bottom: 12px;
  left: 118px;
  transform: rotate(136deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(7) {
  position: absolute;
  z-index: -1;
  width: 40px;
  top: 95px;
  right: 9px;
  transform: rotate(-18deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(8) {
  position: absolute;
  z-index: -1;
  width: 40px;
  top: 47px;
  right: 80px;
  transform: rotate(5deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(9) {
  position: absolute;
  z-index: -1;
  width: 45px;
  bottom: 14px;
  left: 33px;
  transform: rotate(98deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(10) {
  position: absolute;
  z-index: -1;
  width: 40px;
  top: 7px;
  left: 94px;
  transform: rotate(98deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(11) {
  position: absolute;
  z-index: -1;
  width: 40px;
  top: 82px;
  left: 3px;
  transform: rotate(98deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(12) {
  position: absolute;
  z-index: -1;
  width: 46px;
  bottom: 55px;
  right: 72px;
  transform: rotate(98deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(13) {
  position: absolute;
  z-index: -1;
  width: 30px;
  top: 64px;
  right: 37px;
  transform: rotate(98deg);
}

.author-card-d .author-card-content .author-card-particles img:nth-child(14) {
  position: absolute;
  z-index: -1;
  width: 30px;
  bottom: 88px;
  right: 150px;
  transform: rotate(98deg);
}

.card-radio {
  background-color: var(--backgroundColor);
}

.card-radio.selected {
  border: 2px solid var(--mainColor) !important;
  background-color: #ffffff;
}

.list-view-buttons {
  display: flex;
}

.card-view-buttons {
  display: none;
}

.event-card {
  display: flex;
}

.manage-eb {
  padding-top: 7px;
}

.list-view-buttons {
  display: flex;
}

.card-view-buttons {
  display: none;
}

.event-card {
  display: flex;
}

.manage-eb {
  padding-top: 7px;
}

.list-view-buttons {
  display: flex;
}

.card-view-buttons {
  display: none;
}

.event-card {
  display: flex;
}

.manage-eb {
  padding-top: 7px;
}

.list-view-buttons {
  display: flex;
}

.card-view-buttons {
  display: none;
}

.event-card {
  display: flex;
}

.manage-eb {
  padding-top: 7px;
}

/* -------------------------------------------------------------common header  ------------------------------------------------------------------*/

.right-banner-img {
}

.right-banner-img img {
  width: 100%;
  height: 100%;
}

.common-header .upper-section {
  padding: 0 40px;
}

.common-header .heading-dropdown {
  padding: 0 40px;
}

.bg-none {
  background-color: transparent !important;
}

.w-63 {
  width: 63%;
}

.w-37 {
  width: 37%;
}

.bg-light-blue {
  background-color: #66a1f754 !important;
  /* border: 1px solid #66a1f754; */
}

.bg-transparent {
  background-color: transparent !important;
}

.mt-auto {
  margin-top: auto;
}

.bx-shadow-none {
  box-shadow: none !important;
}

.fonts-14 {
  font-size: 14px;
}

.common-pills4 {
  background-color: transparent;
  color: #fff;
  border-radius: var(--border-radius);
  border: 2px solid var(--whiteColor);
  padding: 3px 15px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 5px;
  position: relative;
  /* text-transform: uppercase; */
  cursor: pointer;
  z-index: 2;
  transition: 0.3s ease-in-out;
}

.common-pills4:hover {
  background-color: #fff;
  color: var(--mainColor);
  /* border: 2px solid var(--mainColor); */
}

.text-blue {
  color: #000;
}

/*------------------------------------------------------------- testimonials about us ----------------------------------------------------------- */
.testimonial-main-slider .owl-item {
  width: 1072px !important;
}

.testimonial-aboutUs {
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  width: 100%;
}

.test-main-slider .owl-nav {
  top: 46% !important;
}

.testimonial-aboutUs .left-side-bg-test {
  height: 100%;
  width: 40%;
}

.testimonial-aboutUs .right-side-bg-test {
  width: 60%;
}

.common-header {
  min-height: 250px;
}

.testimonial-img-aboutus {
  height: 250px;
}

.w-250 {
  width: 290px;
  padding: 35px 10px 0 10px;
}

.testimonial-quate-bg {
  position: absolute;
  top: 20px;
  left: 0px;
  width: 110px !important;
  z-index: -1;
}

.fs-1vw {
  font-size: 0.9vw !important;
}

.maslvjqp {
  list-style: disc;
}

.list-view-buttons {
  display: flex;
}

.card-view-buttons {
  display: none;
}

.event-card {
  display: flex;
}

.manage-eb {
  padding-top: 7px;
}

.fs-13r {
  font-size: 1.3rem;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++ dashboard enhancements  +++++++++++++++++++++++++++++++++++++++++++++++++++*/
.profile-img-edit {
  position: absolute;
  border: 1px solid var(--borderColor);
  padding: 2px 8px;

  border-radius: var(--border-radius);
}

.profile-card .profile-heading {
  transition: var(--transition);
}

.profile-card .profile-heading:hover {
  color: var(--mainColor);
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++ my dashbaord page design ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.greeting-banner {
  background: #ffffff;
  position: relative;
  padding: 18px 18px 18px 20px;

  /* border: 1px solid var(--bgColor); */
  box-shadow: 0 0 20px 3px rgb(0 0 0 / 14%);
  border-radius: var(--border-radius);
  /* height: 105px; */
  overflow: hidden;
}

.greeting-banner .greeting-heading {
  margin-top: auto;
  margin-bottom: auto;
}

.greeting-banner-img1 {
  position: absolute;

  right: 0;
  top: 0;
  height: 120px;
}

.doctor-list-blk {
  background: #ffffff;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid var(--bgColor);
  box-shadow: var(--box-shadow);
}

.doctor-widget {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.border-right-bg:before {
  content: "";
  position: absolute;
  background: rgba(46, 55, 164, 0.2);
  height: 44px;
  width: 2px;
  right: 0;
}

.doctor-box-icon {
  width: 66px;
  height: 66px;
  background: #2e37a4;
  border-radius: 12px;
  margin-right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}

.doctor-content h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 600;
}

.doctor-content h3 span:last-child {
  font-size: 10px;
  border-radius: 20px;
  margin: auto;
  padding: 5px;
}

.doctor-content h3 span:nth-child(2) {
  font-size: 14px;
  color: rgb(51 52 72 / 20%);
}

.status-green,
a.status-green {
  background: rgba(0, 211, 199, 0.1);
  color: #00d3c7;
}

.status-pink,
a.status-pink {
  background-color: #ffe5f6;
  color: #ff01a2;
}

.teaching-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.steps-history {
  margin-bottom: 0;
  margin-right: 10px;
  align-items: baseline;
  display: inline-grid;
  padding: 0;
  width: 40px;
}

.steps-history li {
  margin-top: 5px;
  color: rgba(51, 53, 72, 0.5);
  font-weight: 500;
  list-style: none;
  font-size: 12px;
}

.activity-feed {
  list-style: none;
  margin-bottom: 0;
  margin-left: 5px;
  padding: 0;
  width: 100%;
  position: relative;
}

.activity-feed .feed-item:last-child {
  padding-bottom: 0;
}

.activity-feed .feed-item {
  padding-bottom: 20px;
  padding-left: 20px;
  position: relative;
}

.activity-feed::after {
  position: absolute;
  content: "";
  background: #e4e8eb;
  width: 2px;
  height: 100%;
  left: -2px;
  top: 10px;
  z-index: 0;
}

.comman-shadow {
  box-shadow: var(--box-shadow);
}

.dolor-activity .stick-line {
  text-decoration: line-through;
  color: rgba(51, 53, 72, 0.5);
}

.doctor-date-list li {
  list-style: none;
  color: #333548;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
}

.doctor-date-list li {
  list-style: none;
  color: #333548;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
}

.doctor-date-list li i {
  font-size: 6px;
}

.dolor-activity .stick-line {
  text-decoration: line-through;
  color: rgba(51, 53, 72, 0.5);
}

.active-doctor {
  border: 1px solid rgba(46, 55, 164, 0.2);
  box-shadow: 0px 25px 50px rgba(46, 55, 164, 0.07);
  border-radius: 14px;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.doctor-date-list .active-doctor span {
  color: #2e37a4;
}

.doctor-date-list .active-doctor span.ongoing-drapt {
  color: rgba(51, 52, 72, 0.5);
}

.ongoing-drapt i {
  background: #ffffff;
  border: 1px solid rgba(46, 55, 164, 0.2);
  box-shadow: 0px 25px 50px rgba(46, 55, 164, 0.07);
  border-radius: 6px;
  color: #2e37a4;
  width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}

.active-doctor::after {
  display: none;
}

.activity-feed .feed-item:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #333448;
  width: 7px;
  height: 7px;
  top: 10px;
  left: -4px;
  border-radius: 50px;
  z-index: 9;
}

.doctor-date-list li span {
  color: rgba(51, 53, 72, 0.5);
  font-size: 12px;
  font-weight: 500;
  padding-left: 15px;
}

.doctor-sub-list {
  padding: 10px;
  background: #ffffff;
  border: 1px solid rgba(46, 55, 164, 0.2);
  box-shadow: 0px 25px 50px rgba(46, 55, 164, 0.07);
  border-radius: 14px;
  width: 100%;
  position: absolute;
  z-index: 99;
  display: none;
}

.dropdown-menu.show {
  display: block;
}

.doctor-sub-list {
  position: absolute;
  inset: 0px auto auto 0px;
  margin: 0px;
  transform: translate(0px, 45px);
}

.new-dot {
  padding: 3px 10px;
  font-size: 12px;
  margin-left: auto;
  border-radius: 8px;
}

.doctor-date-list li {
  list-style: none;
  color: #333548;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
}

.schedule-time li {
  margin-right: 5px;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}

/*+++++++++++++++++++++++++++++++++++ 404 error page image height ++++++++++++++++++++++++++++++++++ */
.height-480 {
  height: 55vh;
}

.height-48 {
  height: 48px;
}

.add-new-address {
  border: 1px solid var(--borderColor);
}

.widthu-45 {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.bg-darks {
  background-color: var(--backgroundColor);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ add shipping address ui +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.cart-right-total-price {
  border-bottom: 1px solid var(--borderColor);
}

.delete-btn22 {
  color: var(--mainColor);
  border: 1px solid var(--borderColor);
  transition: 0.3s ease-in-out;
  border-radius: var(--border-radius);
}

.delete-btn22:hover {
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
}

.br-main {
  border-radius: var(--border-radius) !important;
}

.m-event-card-img {
  width: 39%;
}

.m-event-card-desc {
  width: 60%;
}

.article-line {
  float: left;
  position: relative;
  width: 150px;
  height: 3px;
  background: #dad0d0;
  margin-left: -12px;

  /* top: 200px;
    left: 750px; */
  &:before {
    position: absolute;
    width: 15px;
    height: 15px;
    background: rgb(48, 180, 241);
    content: "";
    top: -6px;
    border-radius: 50%;
  }

  &:after {
    position: absolute;
    width: 15px;
    height: 15px;
    background: rgb(48, 180, 241);
    content: "";
    top: -6px;
    right: -2px;
    border-radius: 50%;
  }

  .status {
    position: absolute;
    left: -20px;
    top: 20px;
    font-size: 14px;
  }

  .delivered-status {
    .status {
      left: -50px;

      &:nth-child(2) {
        left: 120px;
        white-space: nowrap;
        color: rgb(48, 180, 241);
      }
    }
  }

  #replacement2 {
    .status {
      left: -13px;

      &:nth-child(2) {
        left: 200px;
        white-space: nowrap;
        color: orange;
      }
    }
  }

  .inner-line-1,
  .inner-line-2,
  .inner-line-3 {
    width: 0%;
    height: 100%;
    background: rgb(48, 180, 241);
    animation: flow 2s ease-in forwards;
  }

  .inner-line-2 {
    -webkit-animation-delay: 2s;
  }

  .inner-line-3 {
    -webkit-animation-delay: 4s;
  }
}

.w-100 {
  width: 100% !important;
}

.w-1000p {
  width: 1000px !important;
}

.w-250p {
  width: 250px !important;
}

.article-line-2 {
  width: 250px;
}

.width-200 {
  width: 200px;
}

.event-check-line {
  float: left;
  position: relative;
  width: 245px;
  height: 3px;
  background: #dad0d0;
  margin-left: -12px;

  /* top: 200px;
    left: 750px; */
  &:before {
    position: absolute;
    width: 15px;
    height: 15px;
    background: var(--bg-dashboard);
    content: "";
    top: -6px;
    border-radius: 50%;
  }

  &:after {
    position: absolute;
    width: 15px;
    height: 15px;
    background: var(--bg-dashboard);
    content: "";
    top: -6px;
    right: -2px;
    border-radius: 50%;
  }

  .status {
    position: absolute;
    left: -20px;
    top: 20px;
    font-size: 14px;
  }

  .delivered-status {
    .status {
      left: -50px;

      &:nth-child(2) {
        left: 204px;
        white-space: nowrap;
        color: var(--mainColor);
      }
    }
  }

  #replacement2 {
    .status {
      left: -13px;

      &:nth-child(2) {
        left: 200px;
        white-space: nowrap;
        color: orange;
      }
    }
  }

  .inner-line-1,
  .inner-line-2,
  .inner-line-3 {
    width: 0%;
    height: 100%;
    background: var(--bg-dashboard);
    animation: flow 2s ease-in forwards;
  }

  .inner-line-2 {
    -webkit-animation-delay: 2s;
  }

  .inner-line-3 {
    -webkit-animation-delay: 4s;
  }
}

.iebiuqwbo {
  width: 45%;
}

.qbfqeoufokwjd {
  width: -webkit-fill-available;
}

.event-img {
  border-radius: 0 !important;
}

.ksjnugso {
  width: fit-content;
}

.container-review {
  display: flex;
  border-radius: 15px;
  gap: 75px;
  height: 200px;

  .chart {
    /* width: 500px; */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
  }

  .chart .rate-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    height: 30px;
    padding: 20px 0;
    padding: 10px;
  }

  .chart .rate-box > * {
    height: 100%;
    display: flex;
    /* align-items: center; */
    font-weight: 500;
    color: #444;
  }

  .rate-box .value {
    display: flex;
    align-items: center;
  }

  .rate-box .count {
    margin-bottom: 15px;
  }

  .rate-box .value:hover {
    color: rgb(218, 165, 32);
  }

  .chart .value {
    font-size: 18px;
    cursor: pointer;
  }

  .rate-box .progress-bar {
    border-width: 1px;
    position: relative;
    background-color: #cfd8dc91;

    height: 10px;
    border-radius: 100px;
    width: 350px;
  }

  .rate-box .progress-bar .progress {
    background-color: rgb(218, 165, 32);
    height: 100%;
    border-radius: 100px;
    transition: 300ms ease-in-out;
  }

  .global {
    height: 100%;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .one .fas {
    color: #cfd8dc;
  }

  .two {
    background: linear-gradient(to right, rgb(218, 165, 32) 0%, transparent 0%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    transition: 0.5s ease-in-out all;
  }

  .global > span {
    font-size: 36px;
    font-weight: 500;
  }

  .rating-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 10%;
  }

  .rating-icons span {
    position: absolute;
    display: flex;
    font-size: 25px;
    letter-spacing: 7px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
  }

  .total-reviews {
    font-size: 18px !important;
  }
}

.he-65 {
  height: 65px;
}

@media only screen and (min-width: 1750px) and (max-width: 1920px) {
  .modal-xxl {
    max-width: 1100px;
  }

  .modal-max {
    max-width: 1100px;
  }
}

@media only screen and (min-width: 1300px) and (max-width: 1750px) {
  .author-card-d .author-card-content {
    min-width: 220px;
    padding: 18px 2px 30px 15px;
  }

  .modal-xxl {
    max-width: 1000px;
  }

  .modal-max {
    max-width: 1100px;
  }

  .author-card-d .author-card-content h2 {
    font-size: 20px;
  }

  .author-card-d .author-card-content h4 {
    font-size: 14px;
  }

  .author-card-d .author-card-content .author-profile-type {
    gap: 0.25rem !important;
  }

  .author-card-d .author-profile-type span {
    clip-path: polygon(91% 0, 100% 50%, 91% 100%, 0 100%, 0 0);
    background-color: #fffbfa29;
    color: #0c0c0c;
    padding: 1px 9px 1px 4px;
    font-size: 12px;
  }

  .author-card-d .author-footer-member {
    bottom: 16px;
  }

  .author-card-d .author-footer-member p {
    font-size: 11px;
  }

  .author-card-d .author-image-right {
    clip-path: circle(79.7% at 100% 50%);
    height: 223px;
    width: 289px;
  }
}

@media only screen and (max-width: 1295px) {
  .m-event-card-img {
    width: 100%;
  }

  .w-1000p {
    width: 640px !important;
  }

  .w-250p {
    width: 200px !important;
  }

  .article-line-2 {
    width: 200px;
  }

  .manage-event-detail-card {
    flex-wrap: wrap;
  }

  .m-event-card-desc {
    width: 100%;
  }
}

.res-d-flex {
  display: block;
}

.resourcesDetails-image {
  position: sticky;
  top: 100px;
}

.resourcesDetails-image img {
  height: 75vh;
}

.flex-column-res-rev {
  flex-direction: column;
}

@media only screen and (min-width: 1150px) and (max-width: 1295px) {
  .author-card-d .author-image-right {
    clip-path: circle(81.7% at 100% 50%);
    height: 219px;
    width: 301px;
  }

  .author-card-d .author-card-content {
    /* background-color: green; */
    min-width: 215px;
    padding: 15px 2px 25px 15px;
  }

  .author-card-d .author-card-content h2 {
    font-size: 20px;
  }

  .modal-xxl {
    max-width: 1000px;
  }

  .author-card-d .author-card-content h4 {
    font-size: 14px;
  }

  .author-card-d .author-profile-type span {
    padding: 1px 9px 1px 4px;
    font-size: 11px;
  }

  .author-card-d .author-footer-member {
    bottom: 18px;
  }

  .author-card-d .author-footer-member p {
    font-size: 12px;
  }
}

@media only screen and (max-width: 900px) {
  .resourcesDetails-image {
    position: static;
  }

  .manage-eb {
    padding-top: 5px;
  }

  .w-35 {
    min-width: 100%;
  }

  .card-view-buttons {
    display: flex;
  }

  .list-view-buttons {
    display: none;
  }

  .card-view-buttons .answer-modal-inner-forum {
    font-size: 10px;
  }

  .event-card {
    display: flex;
    flex-direction: column;
  }

  .author-card-d .author-card-inner {
    flex-direction: column-reverse;
  }

  .manage-eb {
    padding-top: 5px;
  }

  .event-card {
    display: flex;
    flex-direction: column;
  }

  .card-view-buttons {
    display: flex;
  }

  .list-view-buttons {
    display: none;
  }

  .card-view-buttons .answer-modal-inner-forum {
    font-size: 10px;
  }

  .common-header .upper-section {
    padding: 0 15px;
  }

  .common-header .heading-dropdown {
    padding: 0 15px;
  }

  .author-card-d .author-image-right {
    clip-path: none;
    height: 350px;
    width: 100%;
  }

  .author-card-d .author-card-content {
    min-width: 100%;

    padding: 15px 10px 50px 10px;
  }

  .author-card-d .author-footer-member {
    position: absolute;
    left: 0;
    bottom: 12px;
    width: 90%;
  }
}

.responsive-p-4 {
  padding: 1.5rem !important;
}

.responsive-px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.d-profile-edit-circle {
  width: 300px;
  height: 300px;
  border-radius: 100%;
  min-width: 160px;
  min-height: 160px;
  overflow: hidden;
}

.dashborad-sidebar .fa {
  font-size: 25px;
}

.flex-wrap-res {
  flex-direction: row;
}

.p-5-responsive {
  padding: 3rem !important;
}

@media only screen and (max-width: 700px) {
  .resourcesDetails-image {
    position: static;
  }

  .p-5-responsive {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .w-100-responsive {
    width: 100%;
  }

  .flex-wrap-res {
    flex-direction: column;
  }

  .res-d-flex {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: between;
  }

  .d-profile-edit-circle {
    width: 200px;
    height: 200px;
  }

  .flex-column-res-rev {
    flex-direction: row;
  }

  .dashborad-sidebar .fa {
    font-size: 18px;
  }

  .w-190-responsive {
    width: auto;
    height: auto;
  }

  .responsive-p-4 {
    padding: 0.5rem !important;
  }

  .responsive-px-4 {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  .zGVBds2 {
    margin-top: 5px;
  }

  .submit-d-adrress {
    padding: 16px 16px !important;
  }

  .login-change {
    padding: 10px !important;
  }

  .product-btn {
    padding: 14px 40px;
  }

  .responsive-flex-column {
    flex-direction: column;
  }

  .answer-modal-inner-forum {
    font-size: 13px;
  }

  .modal-max {
    max-width: 650px;
  }

  .common-header {
    min-height: auto;
  }

  .text-sm-end {
    text-align: left !important;
  }

  .mainImage {
    width: 100%;
    height: 300px;
  }

  .responsive-view-pImage {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .article-status {
    display: none;
  }

  .responsive-view-LButtons {
    padding-left: 0 !important;
  }

  .responsive-view-RButtons {
    padding-right: 0 !important;
  }

  .common-header .search-form {
    flex-direction: column-reverse;
  }

  .common-header .w-63 {
    width: 100%;
  }

  .common-header .w-37 {
    width: 100%;
  }

  .common-header .right-banner-img {
    display: none;
  }

  .all-block-buttons .block-buttons {
    padding: 20px 20px;
  }

  .blog-details-left-area .blog-sheare-tag {
    margin-bottom: 0 !important;
  }

  .article-profile {
    flex-wrap: wrap;
  }

  .all-event-cards .nav-tabs .nav-item .nav-link {
    width: 100%;
    margin: 5px 0;
  }

  #eventsTab .nav-item {
    width: 100%;
  }

  /* .responsive-input,
    .responsive-all-event-cards {
        display: block;
    } */

  /* .lg-all-event-cards {
        display: none;
    } */

  .responsive-flex {
    flex-wrap: wrap;
  }

  .responsive-flex-rev {
    flex-wrap: wrap-reverse;
  }

  .responsive-flex-column {
    flex-direction: column;
    width: 100%;
  }

  .responsive-flex-column .custom-privacy-input {
    width: auto;
    margin: 10px 0;
  }

  .responsive-lg-view {
    display: none;
  }

  .cart-inner-container {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .create-event .date-section {
    flex-direction: column;
  }

  .date-time-wrapper {
    width: 100%;
  }

  .timezone-wrapper {
    width: 100%;
    height: auto;
  }

  .new-price {
    font-size: 18px;
  }

  .btm-header-menu-container ul {
    flex-direction: column;
    row-gap: 20px;
  }

  .goc-mega-menu {
    margin: 0 !important;
  }

  .wrapper-product {
    flex-direction: column-reverse;
  }

  .row-gap-1 {
    row-gap: 10px;
  }

  .sRes {
    display: block;
  }

  .thumbnail-container {
    flex-direction: row;
    overflow-x: scroll;
    width: 100% !important;
  }

  .offcanvas-end {
    width: 100% !important;
  }

  .thumbnail-container .thumbnail {
    flex-direction: row;
    width: auto !important;
    height: auto !important;
  }

  .thumbnailBox img {
    min-width: auto;
  }

  .responsive-dashboard-heading h2 {
    font-size: 1.2rem;
  }

  .profile-desc {
    font-size: 14px;
  }

  .block-page-profile-sec {
    height: 90px !important;
  }

  .block-page-db {
    height: auto !important;
  }

  .responsive-gap-5 {
    gap: 1.3rem !important;
  }

  .thumbnailBox {
    border-radius: 4px;
    /* overflow: hidden; */
    width: 50px;
    margin: 5px 0;
    height: 50px;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid var(--borderColor);
    transition: border 0.3s ease;
    /* padding: 10px; */
  }

  .similar-product .slick-slide {
    margin: 0 10px;
  }

  .product-size-container .product-size-card {
    margin: 5px;
  }

  #scroll {
    display: none;
  }

  .list-grid-div {
    display: none;
  }

  .cart-section .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  .listicles-search-area-inner {
    margin-top: 0;
  }

  .top-view-area3 {
    margin-bottom: 0 !important;
    padding: 20px 0 0px 26px !important;
  }

  .search-form1 {
    margin-top: 10px;
  }

  .responsive-like-sec {
    padding-left: 0 !important;
  }

  .hForum .hforum-question {
    position: sticky;
    top: 45px;
    height: 291px;
  }

  .login-id-name .login {
    font-size: small;
  }

  .responsive-text-end {
    text-align: start !important;
  }

  .mainImage {
    margin: 0;
  }

  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .review-modal-content {
    padding: 20px;
  }

  .review-modal-img-bg {
    display: flex;
    justify-content: center;
  }

  .hforum-question .question-inner h1 {
    font-size: 20px;
  }

  .left-side-question {
    position: sticky;
    top: 35px;
    z-index: 2;
  }

  .question-person-section {
    top: 326px;
    padding: 0;
  }

  .first-reply {
    padding-left: 0 !important;
  }

  .blog-details-left-area .comments-wrap {
    padding-top: 0 !important;
  }

  .qhead .answer-person {
    margin-bottom: 0 !important;
  }

  .qhead a {
    margin-top: 0 !important;
  }

  .goc-close-modal {
    right: 0px;
    top: 0;
    color: #000;
  }

  .resp-icon {
    display: block;
  }

  .main-icon {
    display: none;
  }

  .scroll-up,
  .scroll-down {
    display: none;
  }

  .product-paragraph {
    padding-left: 0;
  }

  .image-expand .modal-body img {
    max-width: 100%;
    max-height: 100%;
    margin-left: 0;
  }

  #response-Hforum-left {
    padding-left: 0 !important;
  }

  .q-ans .comments-wrap ul li a {
    margin-top: 0 !important;
  }

  .hforum-question .inner-forum-qPerson {
    max-width: 74px;
    min-width: 74px;
  }

  .forum-inner-qPerson {
    font-size: 20px;
  }

  .forum-blog-details-left-area .comments-wrap ul {
    margin-bottom: 0 !important;
  }

  .download-resource {
    flex-direction: row;
  }

  .footer-social-list {
    padding: 20px 30px 20px 15px;
  }

  .listicles-like ul li {
    padding-left: 20px;
  }

  .listicle-footer-responsive {
    padding-left: 15px !important;
  }

  .share-forum {
    top: 21px;
  }

  .share-modal {
    top: 21px;
  }

  .social-media2 {
    gap: 0.5rem !important;
  }

  .forum-question-rating .row {
    gap: 0.5rem;
  }

  .sec-reply {
    padding-top: 0 !important;
  }

  .third-reply {
    padding-left: 66px !important;
    padding-top: 0 !important;
  }

  .sec-reply {
    padding-left: 32px !important;
    padding-top: 0 !important;
  }

  .thumbnail-container {
    flex-direction: row;
  }

  #event-details-image img {
    max-height: 300px;
  }

  #event_end_timing {
    margin-left: 5px;
  }

  #eventImageUpdateModal {
    align-items: center;
    justify-content: center;
    width: -webkit-fill-available;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .cart-inner-img {
    width: 130px;
    height: 130px;
  }

  .iebiuqwbo {
    width: 100%;
  }

  .modal-max {
    max-width: 1100px;
  }

  .main-header.header-style-2 .main-mainmenu {
    padding: 35px 15px;
  }

  .team-details-info .content {
    font-size: 15px;
  }

  .auhtor-img-responsie {
    height: 287px;
  }

  .auhtor-img-responsie img {
    height: 100% !important;
  }

  .responsive-blog-img-h {
    height: 170px;
  }

  .blog-details-right-area .blog-widget.recent-post-widget ul li {
    height: 87px;
  }

  .feature-article-responsive-img {
    height: 355px;
  }

  .download-info {
    margin-left: 10px !important;
  }

  .single-blog-inner2 .blog-meta li {
    margin-right: 0 !important;
  }

  .footer-social-list i {
    padding: 0;
    font-size: 10px;
    margin-right: 3px;
    transition: all 0.8s ease;
    background: #1c2024;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 0;
    color: #fff;
    text-align: center;
  }

  .footer-social-list {
    column-gap: 5px;
  }

  .listicle-card-social-list {
    padding: 20px 0px 20px 5px;
  }
}

.top-0::before {
  top: 0 !important;
}

.dotksjdfo {
  margin: 0 3px 7px 3px;
}

#modal-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  font-size: 40px;
  font-weight: 300;
}

fieldset.star-rating {
  border: none;
  padding: 0;
  margin: 0;
  display: inline-grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-columns: 1fr;
  width: fit-content;

  & label {
    cursor: pointer;
    text-align: center;
  }

  & input {
    appearance: none;
    background-color: transparent;
    cursor: pointer;
    grid-row: 2;
    height: auto;
    margin: 0;
    padding: 0.2rem;
    text-align: center;
    transition: transform 0.2s ease-out;
    width: auto;
  }

  & input:after {
    color: #cfcece;
    content: "\2606\FE0E";
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(2rem * 1.5);
  }

  & input:hover:after {
    color: #daa520;
    content: "\2605\FE0E";
  }

  & input:checked:after {
    color: #daa520;
    content: "\2605\FE0E";
  }

  & input:has(~ input:hover):after,
  & input:has(~ input:checked):after,
  & input:has(~ input:focus):after {
    color: #daa520;
    content: "\2605\FE0E";
  }

  & input:hover ~ input:after {
    color: #eee;
    content: "\2606\FE0E";
  }

  @media (hover) {
    & input:hover {
      transform: scale(1.3);
    }

    & input:active {
      transform: scale(calc(1.3 + 0.3));
    }

    & input:active:after {
      animation: 0.1s linear 0s forwards star-rating-active-anim;
    }
  }
}

@keyframes star-rating-active-anim {
  from {
    color: var(--star-rating-star-color-hover);
  }

  to {
    color: #ff0;
  }
}

/* added by sawan start */
.btn-lg.btn-toggle {
  padding: 0;
  margin: 0 5rem;
  position: relative;
  height: 1.5rem;
  width: 3rem;
  border-radius: 3rem;
  color: #6b7381;
  background: #bdc1c8;
  margin-bottom: 1rem;
}

.btn-toggle.btn-lg > .switch {
  position: absolute;
  top: 0.12rem;
  left: 0.1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 1.875rem;
  background: #fff;
  transition: left 0.25s;
}

.btn-toggle.active {
  background-color: #ff8800;
}

.btn-toggle.btn-lg.active > .switch {
  left: 2rem;
  transition: left 0.25s;
}

.btn-lg.btn-toggle:after {
  content: "Active";
  right: -5rem;
  opacity: 0.5;
  line-height: 2.5rem;
  width: 5rem;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}

.btn-lg.btn-toggle.active:after {
  opacity: 1;
}

/* added by sawan end */
.success-message-container {
  position: relative;
  height: 80vh;
}

.success-message {
  text-align: center;

  max-width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.success-message__icon {
  max-width: 75px;
}

.success-message__title {
  /* color: #3DC480; */
  color: var(--mainColor);
  margin-top: 20px;
  transform: translateY(25px);
  opacity: 0;
  transition: all 200ms ease;

  .active & {
    transform: translateY(0);
    opacity: 1;
  }
}

.success-message__content {
  color: #747677;
  transform: translateY(25px);
  opacity: 0;
  transition: all 200ms ease;
  transition-delay: 50ms;

  .active & {
    transform: translateY(0);
    opacity: 1;
  }
}

.icon-checkmark {
  circle {
    /* fill: #3DC480; */
    fill: var(--mainColor);
    transform-origin: 50% 50%;
    transform: scale(0);
    transition: transform 200ms cubic-bezier(0.22, 0.96, 0.38, 0.98);
  }

  path {
    transition: stroke-dashoffset 350ms ease;
    transition-delay: 100ms;
  }

  .active & {
    circle {
      transform: scale(1);
    }
  }
}

.edit-address-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 0px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.edit-dots {
  cursor: pointer;
  font-size: 18px;
  padding: 5px;
  user-select: none;
}

.edit-dropdown:hover .edit-address-dropdown-content {
  display: flex;
  flex-direction: column;
}

/* -------------------added by sawan--------------------- */
.about-style-one .image-box2 img {
  max-height: 373px;
}

.mission-box {
  background: rgba(0, 0, 0, 1);
  color: white;
  padding: 20px;
  border-radius: 8px;
  animation: fadeIn 2s;
  opacity: 0.8;
}

.mission-box h2 {
  border-bottom: 1px solid var(--backgroundColor);
}

.mission {
  background-image: url(https://godsownchild.com/assets-frontend/img/banner2.png);
  object-fit: cover;
  background-size: cover;
  background-position: center;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
  overflow-x: hidden;
}

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

.user-guest-pills {
  position: relative;
}

.w-147 {
  width: 150px;
}

.user-guest-pills #guest1 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
  left: 0px;
  top: 0;
}

.user-guest-pills #guest2 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
  left: 15px;
  top: 0;
}

.user-guest-pills #guest3 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
  left: 30px;
  top: 0;
}

.guest-number {
  margin-left: 64px;
}

.db-event-sub {
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  margin: 7px 0px !important;
  /* max-width: 700px; */
}

.bg-blue {
  background-color: var(--bs-blue);
}

.event-card-footer-c {
  flex-wrap: wrap;
}

.common-header {
  min-height: 250px;
}

.doctor-avatar {
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.doctor-avatar img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.myOrders-action-btn .active {
  color: var(--mainColor);
}

.myOrders-action-btn .fa-pencil-square-o:hover {
  color: var(--blackColor);
}

.myOrders-action-btn .fa-question-circle-o:hover {
  color: var(--blackColor);
}

.myOrders-action-btn .fa-ban:hover {
  color: var(--blackColor);
}

.myOrders-action-btn .fa-undo:hover {
  color: var(--blackColor);
}

.fa-coins {
  content: "/f51e";
}

.hidden {
  display: none;
}

.myArticles-input-field label {
  position: absolute;
  top: -11px;
  left: 10px;
  pointer-events: none;
  z-index: 3;
  background: #fff;
  padding: 0 10px;
  font-weight: 600;
}

.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 8px;
}

.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}

.delivery-status-dot-green {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green;
}

.delivery-status-dot-orange {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff9f00;
}

.delivery-status-dot-red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff6161;
}

.delivery-status-dot-green-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: none;
  border: 2px solid green;
}

.d-my-orders {
  cursor: pointer;
}

.float-right {
  float: right;
}

.story-btn {
  transition: all 0.3s ease-in-out;
}

.story-btn:hover {
  background: #f4f8ff !important;
}

/*----------------------------------------------- status bar for delivery ---------------------------------------------------------- */

/* #delivery-progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400;
  }
  
  #delivery-progressbar .step0:before {
    font-family: FontAwesome;
    content: "\f10c";
    color: #fff;
  }
  
  #delivery-progressbar li:before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    background: #C5CAE9;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
  }
  
  
  #delivery-progressbar li:after {
    content: '';
    width: 100%;
    height: 5px;
    background: #C5CAE9;
    position: absolute;
    left: 0;
    top: 9px;
    z-index: -1;
  }
  
  #delivery-progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -50%;
  }
  
  #delivery-progressbar li:nth-child(2):after,
  #delivery-progressbar li:nth-child(3):after {
    left: -50%;
  }
  
  #delivery-progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%;
  }
  
  #delivery-progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  #delivery-progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  
  
  #delivery-progressbar li.active:before,
  #delivery-progressbar li.active:after {
    background: #1f6cff;
  }
  
  #delivery-progressbar li.active:before {
    font-family: FontAwesome;
    content: "\f00c";
  } */
.Delivery-status {
  width: 600px;
}

.delivery-status-card {
  width: 500px;
}

.line {
  float: left;
  position: relative;
  width: 150px;
  height: 3px;
  background: #dad0d0;
  margin-left: -12px;

  /* top: 200px;
    left: 750px; */
  &:before {
    position: absolute;
    width: 15px;
    height: 15px;
    background: green;
    content: "";
    top: -6px;
    border-radius: 50%;
  }

  .cancelled {
    &:after {
      position: absolute;
      width: 15px;
      height: 15px;
      background: orangered;
      content: "";
      top: -6px;
      right: -10px;
      border-radius: 50%;
    }
  }

  .delivered {
    &:after {
      position: absolute;
      width: 15px;
      height: 15px;
      background: green;
      content: "";
      top: -6px;
      right: -10px;
      border-radius: 50%;
    }
  }

  .replaced {
    &:after {
      position: absolute;
      width: 15px;
      height: 15px;
      background: orange;
      content: "";
      top: -6px;
      right: -10px;
      border-radius: 50%;
    }
  }

  .status {
    position: absolute;
    left: -20px;
    top: 20px;
    font-size: 14px;
  }

  .cancelled-status {
    .status {
      left: -50px;

      &:nth-child(2) {
        left: 120px;
        white-space: nowrap;
        color: orangered;
      }
    }
  }

  .delivered-status {
    .status {
      left: -50px;

      &:nth-child(2) {
        left: 120px;
        white-space: nowrap;
        color: green;
      }
    }
  }

  #replacement2 {
    .status {
      left: -13px;

      &:nth-child(2) {
        left: 200px;
        white-space: nowrap;
        color: orange;
      }
    }
  }
}

.replacement {
  width: 225px !important;
}

#refund-status {
  &:before {
    position: absolute;
    width: 15px;
    height: 15px;
    background: orange;
    content: "";
    top: -6px;
    border-radius: 50%;
  }
}

#refund-status {
  &:after {
    position: absolute;
    width: 15px;
    height: 15px;
    background: orange;
    content: "";
    top: -6px;
    right: -10px;
    border-radius: 50%;
  }
}

#refund-status {
  .status {
    left: -50px;

    &:nth-child(2) {
      left: 425px;
      white-space: nowrap;
      color: orange;
    }
  }
}

#refund-status {
  width: 450px;
}

.inner-line-1,
.inner-line-2,
.inner-line-3 {
  width: 0%;
  height: 100%;
  background: green;
  animation: flow 2s ease-in forwards;
}

#refund-status .inner-line-3 {
  background: orange;
}

/*
  * delay works only on GC
  */
.inner-line-2 {
  -webkit-animation-delay: 2s;
}

.inner-line-3 {
  -webkit-animation-delay: 4s;
}

#refund-status .inner-line-3 {
  -webkit-animation-delay: 2s !important;
}

@keyframes flow {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.color-gray {
  color: var(--color-gray-3);
}

.dashborad-sidebar .hover-menu-item {
  transition: 0.3s ease-in-out;
  background-color: #fff;
}

.dashborad-sidebar .hover-menu-item:hover {
  /* border-bottom: 1px solid var(--borderColor); */
  background: rgb(245, 245, 245);
  transform: scaleX(1.03);
}

.dashborad-sidebar .hover-menu-item:hover .collapse a {
  /* border-bottom: 1px solid var(--borderColor); */
  background: #fff;
}

.dashborad-sidebar .menu-item .collapse a {
  /* border-bottom: 1px solid var(--borderColor) !important; */
  background: #e6e8ee94;
  border-radius: var(--border-radius);
  transition: all 0.3s ease-in-out;
}

.dashborad-sidebar .menu-item .collapse a:hover {
  /* border-bottom: 1px solid var(--borderColor) !important; */
  background: rgb(234, 245, 255);
}

.accountSettingsCollapsejndsoa {
  /* background-color: #0d6efd !important;
    border-radius: var(--border-radius); */
  background-color: #f4f8ff !important;
  border-radius: var(--border-radius);
  border: 1px solid #119ee8 !important;
}

.accountSettingsCollapsejndsoa i {
  /* color: #ffffff !important; */
}

.accountSettingsCollapsejndsoa .d-rout-link {
  /* color: #ffffff !important; */
}

.about-style-one .image-box2 img {
  max-height: 373px;
}

.box-shadow-none {
  box-shadow: none;
}

.mission {
  background-image: url(https://godsownchild.com/assets-frontend/img/banner2.png);
  object-fit: cover;
  background-size: cover;
  background-position: center;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
  overflow-x: hidden;
}

.mission-box {
  background: rgba(0, 0, 0, 1);
  color: white;
  padding: 20px;
  border-radius: 8px;
  animation: fadeIn 2s;
  opacity: 0.8;
}

.mission-box h2 {
  border-bottom: 1px solid var(--backgroundColor);
}

.text-gray-400 {
  color: var(--bs-gray-500);
}

.bg-gray {
  background-color: #f5f7fa;
}

.text-green {
  color: #26a541;
}

.refund-account {
  list-style-type: disc;
}

.width-125 {
  width: 125px;
}

.width-75 {
  width: 75px;
}

.height-50p {
  height: 50px;
}

.border-bottom-1p {
  border-bottom: 1px solid var(--borderColor) !important;
}

.w-fit-content {
  width: fit-content;
}

.text-yellow {
  color: orange;
}

.bg-main-color {
  background-color: var(--mainColor) !important;
}

.width60 {
  width: 60%;
}

.width30 {
  width: 30%;
}

.db-article-img-input {
  padding-left: 90px;
}

.bx-shadow {
  box-shadow: var(--box-shadow);
}

.order-card {
  transition: 0.3s;
}

.order-card:hover {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 25px 0px;
}

/* ---------------------------------------------------------------user dashboard ui css -------------------------------------------------- */

.dashboard-card {
  border: 1px solid #e6e8ee;
  padding: 0;
  border-radius: 10px;
  margin-bottom: 24px;
}

.dashboard-card .dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e8ee;
  padding: 12px 20px;
  flex-wrap: wrap;
  row-gap: 15px;
}

.dashboard-card .dashboard-card-head .header-title h5 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}

.dashboard-card .dashboard-card-body {
  padding: 20px;
}

.health-records {
  margin-bottom: 20px;
}

.health-records span {
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  color: #012047;
}

.health-records.icon-orange span i {
  color: #e1580c;
}

.health-records span i {
  margin-right: 5px;
}

.health-records h3 {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
}

.health-records h3 sup {
  font-size: 12px;
  font-weight: 600;
  margin-left: 5px;
}

.health-records.icon-orange h3 sup {
  color: #04bd6c;
}

.health-records.icon-amber span i {
  color: #f59e0b;
}

.health-records.icon-dark-blue span i {
  color: #110efd;
}

.health-records.icon-dark-blue h3 sup {
  color: #e04f16;
}

.health-records.icon-blue span i {
  color: #3538cd;
}

.report-gen-date p {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  line-height: normal;
}

.report-gen-date p span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  background: #e6e8ee;
  flex-shrink: 0;
}

.chart-over-all-report {
  text-align: center;
  padding-left: 24px;
  border-left: 1px solid #e6e8ee;
}

.report-chart .circle-graph3 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.CircularProgressbar {
  width: 100%;
  vertical-align: middle;
}

.chart-over-all-report {
  text-align: center;
  padding-left: 24px;
  border-left: 1px solid #e6e8ee;
}

.CircularProgressbar .CircularProgressbar-trail {
  stroke: #d6d6d6;
  stroke-linecap: round;
}

.CircularProgressbar .CircularProgressbar-path {
  stroke: #3e98c7;
  stroke-linecap: round;
  -webkit-transition: stroke-dashoffset 0.5s ease 0s;
  transition: stroke-dashoffset 0.5s ease 0s;
}

.CircularProgressbar .CircularProgressbar-text {
  fill: #3e98c7;
  font-size: 20px;
  dominant-baseline: middle;
  text-anchor: middle;
}

.CircularProgressbar .CircularProgressbar-text {
  position: absolute;
  max-width: 100px;
  text-align: center;
  margin: auto;
  font-size: 7px;
}

.chart-over-all-report span.health-percentage {
  display: block;
  margin: 10px 0;

  margin: 15px;
}

.chart-over-all-report span.health-percentage {
  color: #465d7c;
}

.btn.btn-dark {
  background-color: var(--bg-dashboard);
  border: 1px solid var(--bg-dashboard);
  color: #fff;
}

.btn.btn-dark:hover {
  background-color: #fff;
  border: 1px solid var(--bg-dashboard);
  color: var(--bg-dashboard);
}

.rounded-pill {
  border-radius: 50rem !important;
}

.book-appointment-head {
  background: var(--bg-dashboard);
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background-image: url(https://doccure.dreamstechnologies.com/react/template/70476f8….png);
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 24px;
}

.book-appointment-head h3 {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 0;
}

.book-appointment-head h3 span {
  font-size: 14px;
  font-weight: 400;
  color: #e2edff;
  display: block;
  margin-bottom: 0;
}

.book-appointment-head .add-icon a {
  font-size: 16px;
  color: #ffffff;
}

.dashboard-card {
  border: 1px solid #e6e8ee;
  padding: 0;
  border-radius: 10px;
  margin-bottom: 24px;
}

.dashboard-card .dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e8ee;
  padding: 12px 20px;
  flex-wrap: wrap;
  row-gap: 15px;
}

.dashboard-card .dashboard-card-head .header-title h5 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}

.dashboard-card .dashboard-card-head .card-view-link a {
  color: #0e82fd;
  text-decoration: underline;
  font-weight: 500;
}

.dashboard-card .dashboard-card-body {
  padding: 20px;
}

.doctor-fav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doctor-fav-list .doctor-info-profile {
  display: flex;
  align-items: center;
}

.doctor-fav-list .doctor-info-profile .table-avatar {
  flex-shrink: 0;
}

.doctor-fav-list .doctor-info-profile .table-avatar img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-right: 10px;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0px;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info span {
  font-size: 14px;
  font-weight: 400;
}

.doctor-fav-list .cal-plus-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6e8ee;
  font-size: 16px;
  color: #012047;
}

.isax {
  font-family: "iconsax" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.doctor-fav-list + .doctor-fav-list {
  margin-top: 16px;
}

a {
  text-decoration: none;
  color: #2e3842;
}

.dashboard-slider {
  position: relative;
}

.dashboard-card {
  border: 1px solid #e6e8ee;
  padding: 0;
  border-radius: 10px;
  margin-bottom: 24px;
}

.dashboard-card .dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e8ee;
  padding: 12px 20px;
  flex-wrap: wrap;
  row-gap: 15px;
}

.dashboard-card .dashboard-card-head .header-title h5 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}

.dashboard-card-head .header-title h5 span {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #e6e8ee;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.dashboard-slider {
  .owl-nav {
    position: absolute;
    top: -60px;
    right: 0;
  }
}

.slide-nav-patient {
  font-size: 18px;
  color: #1e3259;
  background: none;
  text-shadow: none;
  top: 0;
  cursor: pointer;
  border: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 15px;
  border-radius: 50px;
}

.dashboard-card .dashboard-card-body {
  padding: 20px;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.common-slider .owl-nav button {
  border: 0;
  background: transparent;
  margin-top: 0;
}

.slick-margins-15 .slick-list {
  margin-right: -15px;
}

.slick-track:before {
  display: table;
  content: "";
}

.owl-nav button.owl-next {
  margin-left: 20px;
}

.appointment-dash-card {
  border: 1px solid #e6e8ee;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
}

.doctor-fav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doctor-fav-list .doctor-info-profile {
  display: flex;
  align-items: center;
}

.doctor-fav-list .doctor-info-profile .table-avatar {
  flex-shrink: 0;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0px;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info span {
  font-size: 14px;
  font-weight: 400;
}

.doctor-fav-list .cal-plus-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6e8ee;
  font-size: 16px;
  color: #012047;
}

.appointment-dash-card .date-time p {
  color: #012047;
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.appointment-dash-card .date-time p i {
  margin-right: 5px;
}

.appointment-dash-card .card-btns {
  display: flex;
  align-items: center;
}

.btn-gray {
  background: #e6e8ee;
  border: 1px solid #e6e8ee;
  color: #012047;
  box-shadow: inset 0 0 0 0 #fff;
}

.appointment-dash-card .card-btns a i {
  margin-right: 5px;
}

.health-records.icon-purple span i {
  color: #6938ef;
}

.btn.btn-gray {
  background: #e6e8ee;
  border-color: #e6e8ee;
  color: #012047;
}

/* .btn {
    border-radius: 44px;
    padding: 0.5rem 0.85rem;
    font-size: 14px;
    transition: all 0.5s;
    font-weight: 500;
} */

.apponiment-dates ul li a {
  border: 1px solid #e6e8ee;
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 15px;
  text-align: center;
  position: relative;
}

.apponiment-dates ul li a h5 span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  margin-top: 3px;
  color: #465d7c;
}

.apponiment-dates ul li a h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
}

.slick-margins-15 .slick-slide > div:first-child {
  margin-right: 15px;
}

.apponiment-dates ul li a.available-date:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #004fff;
  position: absolute;
  right: 6px;
  top: 6px;
}

.header-dropdown .dropdown-toggle {
  padding: 8px 15px 8px 8px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  color: #465d7c;
}

.apexcharts-canvas {
  position: relative;
  user-select: none;
}

.apexcharts-toolbar {
  position: absolute;
  z-index: 11;
  max-width: 176px;
  text-align: right;
  border-radius: 3px;
  padding: 0 6px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-card .dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e8ee;
  padding: 12px 20px;
  flex-wrap: wrap;
  row-gap: 15px;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

.doctor-fav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.past-appointment .doctor-fav-list {
  margin-bottom: 20px;
}

.doctor-fav-list .doctor-info-profile {
  display: flex;
  align-items: center;
}

.doctor-fav-list .doctor-info-profile .table-avatar {
  flex-shrink: 0;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0px;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info span {
  font-size: 14px;
  font-weight: 400;
}

.doctor-fav-list .badge {
  border-radius: 10px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  padding: 9px 7px;
}

.bg-orange {
  background: #e04f16;
}

.table-noti-info {
  display: flex;
  align-items: center;
}

.table-noti-info .table-noti-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #e8ecf6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 10px;
}

.table-noti-info .table-noti-icon.color-violet {
  color: #6938ef;
}

.table-noti-info .table-noti-message h6 {
  color: #465d7c;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: normal;
}

.table-noti-info .table-noti-message h6 a {
  color: #465d7c;
}

.table-noti-info .table-noti-message h6 span {
  font-weight: 500;
  color: #012047;
}

.table-noti-info .table-noti-message h6 a:hover {
  color: var(--mainColor);
}

.table-noti-info .table-noti-message h6 a:hover span {
  color: var(--mainColor);
}

.table-noti-info .table-noti-message .message-time {
  font-size: 14px;
  color: #012047;
}

.table-noti-info .table-noti-icon.color-blue {
  color: #0e82fd;
}

.table-noti-info .table-noti-icon.color-red {
  color: #ff0000;
}

.table-noti-info .table-noti-icon.color-yellow {
  color: #ffca18;
}

.dashboard-card .dashboard-card-head .card-view-link a.add-new {
  text-decoration: none;
  color: #465d7c;
  padding-right: 15px;
  margin-right: 15px;
  border-right: 1px solid #e6e8ee;
  font-size: 14px;
}

.doctor-fav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doctor-fav-list .doctor-info-profile {
  display: flex;
  align-items: center;
}

.doctor-fav-list .doctor-info-profile .table-avatar {
  flex-shrink: 0;
}

.align-items-center {
  align-items: center !important;
}

.doctor-fav-list .cal-plus-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6e8ee;
  font-size: 16px;
  color: #012047;
}

.nav-css .nav-item .nav-link {
  border: 1px solid #e6e8ee;
  background: #e6e8ee;
  border-radius: var(--border-radius);
  color: #012047;
  font-size: 13px;
  font-weight: 500;
  margin-right: 15px;
  margin-bottom: 15px;
  padding: 6px 12px;
}

.nav-css .nav-item .nav-link span {
  color: var(--mainColor);
}

.nav-css .nav-item-css .nav-link {
  width: 13vw;
  min-width: 100px;
  margin-right: 0;
  text-align: center;
}

table.table thead {
  border-bottom: 1px solid #e6e8ee;
}

.custom-new-table .table-responsive .table thead tr th {
  border: 0;
  background: #e6e8ee;
  color: #012047;
  font-size: 14px;
  padding: 8px 12px;
  white-space: nowrap;
}

.custom-new-table {
  border: 1px solid #e6e8ee;
  border-radius: 10px;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.custom-new-table .table-responsive .table tbody tr {
  border: 0;
}

.custom-new-table .table-responsive .table tbody tr:hover td {
  background-color: #f4f7fe9f;
}

.custom-new-table .table-responsive .table tbody tr td {
  border-bottom: 1px solid #e6e8ee;
  padding: 12px;
  font-size: 14px;
  padding: 12px;
  white-space: wrap;
  color: #465d7c;
}

.link-primary {
  color: #0e82fd !important;
}

table.table td h2.table-avatar {
  display: flex;
  align-items: center;
  font-size: inherit;
  font-weight: 400;
  vertical-align: middle;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

table.table td h2.table-avatar .avatar.avatar-sm {
  width: 40px;
  height: 40px;
}

.avatar > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

table.table td h2 a {
  color: #012047;
}

.badge.badge-soft-purple {
  background: #ededff !important;
  color: #6938ef !important;
}

.badge.badge-soft-green {
  background: #ddffdd !important;
  color: #10ac10 !important;
}

.badge .badge-soft-blue {
  color: blue !important;
}

.badge .badge-soft-blue:hover {
  color: #000 !important;
}

.custom-new-table .table-responsive .table tbody tr td span.badge {
  padding: 8px 8px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-flex;
  font-size: 10px;
  line-height: 1;
}

.badge.badge-soft-success {
  background: #edf9f0 !important;
  color: #04bd6c !important;
}

.badge-soft-success {
  color: #04bd6c;
}

.fs-7 {
  font-size: 0.3125rem !important;
}

.badge.badge-soft-danger {
  background: #ffede9 !important;
  color: #ff0000 !important;
}

.action-item a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #e6e8ee;
  color: #012047;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  margin-right: 4px;
  font-size: 14px;
}

.action-item {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

.custom-table .table tr th,
.custom-table .table tr td {
  border-top: 1px solid #e6e8ee;
  white-space: nowrap;
  padding: 12px 12px;
  color: #465d7c;
  font-size: 14px;
}

.action-item a:hover {
  background: #0e82fd;
  color: #fff;
}

.chart-inner {
  padding: 0px;
}

#BA-chart-job-error {
  margin: 0 auto;
}

.sd-chart {
  --axis-line-color: #5c5c5c;
  --grid-line-color: #ddd;
  --label-color: #4e4e4e;
  --grid-line-size: 1px;
  --axis-line-size: 1px;
  --label-distance: 10px;
  --line-size: 2px;
  --line-color: #6d81f0;
  --point-radius: 6px;
  --point-color: inherit;
  --point-border-color: inherit;
  --point-border-width: inherit;
  --dot-radius: calc(var(--point-radius) / var(--dot-ratio, 1));
  --point-inner-color: transparent;
  --bar-color: #6d81f0;
  --area-color: #6d81f04d;
  --area-top-color: transparent;
}

.sd-graph {
  position: relative;
  z-index: 10;
  box-sizing: content-box;
  --_x-axis-line-size: var(--x-axis-line-size, var(--axis-line-size));
  --_y-axis-line-size: var(--y-axis-line-size, var(--axis-line-size));
  border-left: var(--_y-axis-line-size) solid
    var(--y-axis-line-color, var(--axis-line-color));
  border-bottom: var(--_x-axis-line-size) solid
    var(--x-axis-line-color, var(--axis-line-color));
  --_x-grid-line-size: var(--x-grid-line-size, var(--grid-line-size));
  --_y-grid-line-size: var(--y-grid-line-size, var(--grid-line-size));
  --_x-grid-line-color: var(--x-grid-line-color, var(--grid-line-color));
  --_y-grid-line-color: var(--y-grid-line-color, var(--grid-line-color));
  background-size: var(--_column-size) var(--_row-size);
  background-image:
    linear-gradient(
      to bottom,
      var(--_x-grid-line-color) var(--_x-grid-line-size),
      transparent 0
    ),
    linear-gradient(
      to right,
      var(--_y-grid-line-color) var(--_y-grid-line-size),
      transparent 0
    );
  background-position-x: calc(
    var(--_start-position) +
      (var(--_column-size) - (var(--_y-grid-line-size) / 2))
  );
  background-position-y: calc(
    var(--_row-size) - (var(--_y-grid-line-size) / 2)
  );
}

.sd-graph::after,
.sd-graph::before {
  display: flex;
  position: absolute;
  white-space: pre;
  box-sizing: content-box;
}

.sd-graph::before {
  text-align: right;
  z-index: 2;
  --_y-font-size: var(--y-label-font-size, var(--label-font-size));
  --_y-font-family: var(--y-label-font-family, var(--label-font-family));
  --_y-label-distance: var(--y-label-distance, var(--label-distance));
  --_y-label-left: calc(
    (
        var(--_y-label-width) + var(--_y-axis-line-size) +
          var(--_y-label-distance) - var(--_layer-padd-x, 0px)
      ) *
      -1
  );
  --_y-label-top: calc(var(--_layer-padd-y, 0px) - var(--_row-size) / 2);
  --_y-label-color: var(--y-label-color, var(--label-color));
  font: var(--_y-font-size) var(--_y-font-family);
  content: var(--_y-label, "") !important;
  line-height: var(--_row-size);
  text-shadow: var(--_y-label-left) var(--_y-label-top) var(--_y-label-color);
  color: transparent;
}

.sd-graph::after {
  height: 0;
  z-index: 1;
  --_x-font-size: var(--x-label-font-size, var(--label-font-size));
  --_x-font-family: var(--x-label-font-family, var(--label-font-family));
  --_x-label-distance: var(--x-label-distance, var(--label-distance));
  --_x-label-bottom: calc(
    (var(--_x-label-distance) + var(--_x-axis-line-size)) * -1
  );
  --_x-label-color: var(--x-label-color, var(--label-color));
  font: var(--_x-font-size) var(--_x-font-family);
  content: var(--_x-label, "") !important;
  bottom: var(--_x-label-bottom);
  color: var(--_x-label-color);
  left: calc(
    var(--_start-position) - var(--_x-label-start, var(--_column-size) / 2)
  );
  line-height: var(--_x-label-height, normal);
  writing-mode: var(--_x-label-direction, unset);
}

.sd-area::before,
.sd-bar::before,
.sd-line::before {
  display: flex;
  content: "";
  height: calc(100% + (var(--_layer-padd-y, 0px) * 2));
  width: calc(100% + (var(--_layer-padd-x, 0px) * 2));
  top: calc(var(--_layer-padd-y, 0px) * -1);
  left: calc(var(--_layer-padd-x, 0px) * -1);
}

.sd-area::before,
.sd-line::before {
  background-image: var(--background-image);
  background-position: var(--background-position);
  background-size: var(--background-size);
  background-repeat: no-repeat;
}

.sd-area,
.sd-line {
  --_line-top-color: transparent;
  --_line-bottom-color: transparent;
  --_line-start: calc(50% - calc(var(--line-size) / 2));
  --_line-end: calc(50% + calc(var(--line-size) / 2));
  --line:
    var(--_line-bottom-color) var(--_line-start),
    var(--line-color) var(--_line-start), var(--line-color) var(--_line-end),
    var(--_line-top-color) 0%;
  --_point-color: var(--point-color, var(--line-color));
  --_point-border-color: var(--point-border-color, var(--line-color));
  --_point-border-width: var(--point-border-width, var(--line-size));
  --point: radial-gradient(
    circle,
    var(--_point-color) var(--dot-radius),
    var(--point-inner-color) var(--dot-radius),
    var(--point-inner-color)
      calc(var(--point-radius) - var(--_point-border-width)),
    var(--_point-border-color)
      calc(var(--point-radius) - var(--_point-border-width)),
    var(--_point-border-color) var(--point-radius),
    transparent 0px
  );
}

.sd-area {
  --_line-top-color: var(--area-top-color);
  --_line-bottom-color: var(--area-color);
}

.sd-bar::before {
  background-image: var(--background-image);
  background-size: var(--background-size);
  background-position-x: var(--background-position-x);
  background-position-y: 100%;
  background-repeat: no-repeat;
}

.sd-bar {
  --bar: linear-gradient(var(--bar-color) 100%, transparent);
  --_x-label-start: var(--_column-size);
}

.dashboard-card {
  border: 1px solid #e6e8ee;
  padding: 0;
  border-radius: 10px;
  margin-bottom: 24px;
}

.dashboard-card .dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e8ee;
  padding: 12px 20px;
  flex-wrap: wrap;
  row-gap: 15px;
}

.dashboard-card .dashboard-card-head .header-title h5 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}

.dashboard-card .dashboard-card-body {
  padding: 20px;
}

.health-records {
  margin-bottom: 20px;
}

.health-records span {
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  color: #012047;
}

.health-records.icon-orange span i {
  color: #e1580c;
}

.health-records span i {
  margin-right: 5px;
}

.health-records h3 {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
}

.health-records h3 sup {
  font-size: 12px;
  font-weight: 600;
  margin-left: 5px;
}

.health-records.icon-orange h3 sup {
  color: #04bd6c;
}

.health-records.icon-amber span i {
  color: #f59e0b;
}

.health-records.icon-dark-blue span i {
  color: #110efd;
}

.health-records.icon-dark-blue h3 sup {
  color: #e04f16;
}

.health-records.icon-blue span i {
  color: #3538cd;
}

.report-gen-date p {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  line-height: normal;
}

.report-gen-date p span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  background: #e6e8ee;
  flex-shrink: 0;
}

.chart-over-all-report {
  text-align: center;
  padding-left: 24px;
  border-left: 1px solid #e6e8ee;
}

.report-chart .circle-graph3 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.CircularProgressbar {
  width: 100%;
  vertical-align: middle;
}

.chart-over-all-report {
  text-align: center;
  padding-left: 24px;
  border-left: 1px solid #e6e8ee;
}

.CircularProgressbar .CircularProgressbar-trail {
  stroke: #d6d6d6;
  stroke-linecap: round;
}

.CircularProgressbar .CircularProgressbar-path {
  stroke: #3e98c7;
  stroke-linecap: round;
  -webkit-transition: stroke-dashoffset 0.5s ease 0s;
  transition: stroke-dashoffset 0.5s ease 0s;
}

.CircularProgressbar .CircularProgressbar-text {
  fill: #3e98c7;
  font-size: 20px;
  dominant-baseline: middle;
  text-anchor: middle;
}

.CircularProgressbar .CircularProgressbar-text {
  position: absolute;
  max-width: 100px;
  text-align: center;
  margin: auto;
  font-size: 7px;
}

.chart-over-all-report span.health-percentage {
  display: block;
  margin: 10px 0;

  margin: 15px;
}

.chart-over-all-report span.health-percentage {
  color: #465d7c;
}

.btn.btn-dark {
  background-color: var(--bg-dashboard);
  border: 1px solid var(--bg-dashboard);
  color: #fff;
}

.btn.btn-dark:hover {
  background-color: #fff;
  border: 1px solid var(--bg-dashboard);
  color: var(--bg-dashboard);
}

.rounded-pill {
  border-radius: 50rem !important;
}

.book-appointment-head {
  background: var(--bg-dashboard);
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background-image: url(https://doccure.dreamstechnologies.com/react/template/70476f8….png);
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 24px;
}

.book-appointment-head h3 {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 0;
}

.book-appointment-head h3 span {
  font-size: 14px;
  font-weight: 400;
  color: #e2edff;
  display: block;
  margin-bottom: 0;
}

.book-appointment-head .add-icon a {
  font-size: 16px;
  color: #ffffff;
}

.dashboard-card {
  border: 1px solid #e6e8ee;
  padding: 0;
  border-radius: 10px;
  margin-bottom: 24px;
}

.dashboard-card .dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e8ee;
  padding: 12px 20px;
  flex-wrap: wrap;
  row-gap: 15px;
}

.dashboard-card .dashboard-card-head .header-title h5 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}

.dashboard-card .dashboard-card-head .card-view-link a {
  color: #0e82fd;
  text-decoration: underline;
  font-weight: 500;
}

.dashboard-card .dashboard-card-body {
  padding: 20px;
}

.doctor-fav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doctor-fav-list .doctor-info-profile {
  display: flex;
  align-items: center;
}

.doctor-fav-list .doctor-info-profile .table-avatar {
  flex-shrink: 0;
}

.doctor-fav-list .doctor-info-profile .table-avatar img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-right: 10px;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0px;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info span {
  font-size: 14px;
  font-weight: 400;
}

.doctor-fav-list .cal-plus-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6e8ee;
  font-size: 16px;
  color: #012047;
}

.isax {
  font-family: "iconsax" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.doctor-fav-list + .doctor-fav-list {
  margin-top: 16px;
}

a {
  text-decoration: none;
  color: #2e3842;
}

.dashboard-slider {
  position: relative;
}

.dashboard-card {
  border: 1px solid #e6e8ee;
  padding: 0;
  border-radius: 10px;
  margin-bottom: 24px;
}

.dashboard-card .dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e8ee;
  padding: 12px 20px;
  flex-wrap: wrap;
  row-gap: 15px;
}

.dashboard-card .dashboard-card-head .header-title h5 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}

.dashboard-card-head .header-title h5 span {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #e6e8ee;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.dashboard-slider {
  .owl-nav {
    position: absolute;
    top: -60px;
    right: 0;
  }
}

.slide-nav-patient {
  font-size: 18px;
  color: #1e3259;
  background: none;
  text-shadow: none;
  top: 0;
  cursor: pointer;
  border: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 15px;
  border-radius: 50px;
}

.dashboard-card .dashboard-card-body {
  padding: 20px;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.common-slider .owl-nav button {
  border: 0;
  background: transparent;
  margin-top: 0;
}

.slick-margins-15 .slick-list {
  margin-right: -15px;
}

.slick-track:before {
  display: table;
  content: "";
}

.owl-nav button.owl-next {
  margin-left: 20px;
}

.doctor-fav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doctor-fav-list .doctor-info-profile {
  display: flex;
  align-items: center;
}

.doctor-fav-list .doctor-info-profile .table-avatar {
  flex-shrink: 0;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0px;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info span {
  font-size: 14px;
  font-weight: 400;
}

.doctor-fav-list .cal-plus-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6e8ee;
  font-size: 16px;
  color: #012047;
}

.appointment-dash-card .date-time p {
  color: #012047;
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.appointment-dash-card .date-time p i {
  margin-right: 5px;
}

.appointment-dash-card .card-btns {
  display: flex;
  align-items: center;
}

.btn-gray {
  background: #e6e8ee;
  border: 1px solid #e6e8ee;
  color: #012047;
  box-shadow: inset 0 0 0 0 #fff;
}

.health-records.icon-purple span i {
  color: #6938ef;
}

.btn.btn-gray {
  background: #e6e8ee;
  border-color: #e6e8ee;
  color: #012047;
}

.appointment-dash-card .card-btns a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* .btn {
    border-radius: 44px;
    padding: 0.5rem 0.85rem;
    font-size: 14px;
    transition: all 0.5s;
    font-weight: 500;
} */
.appointment-dash-card .card-btns a.btn-outline-primary {
  border-color: var(--mainColor);
  color: var(--mainColor);
  margin-left: 15px;
  border-width: 1px;
}

.appointment-dash-card .card-btns a.btn-outline-primary:hover {
  border: 1px solid var(--mainColor);
  background-color: #fff !important;
  margin-left: 14px;
}

.apponiment-dates ul li a {
  border: 1px solid #e6e8ee;
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 15px;
  text-align: center;
  position: relative;
}

.apponiment-dates ul li a h5 span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  margin-top: 3px;
  color: #465d7c;
}

.apponiment-dates ul li a h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
}

.slick-margins-15 .slick-slide > div:first-child {
  margin-right: 15px;
}

.apponiment-dates ul li a.available-date:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #004fff;
  position: absolute;
  right: 6px;
  top: 6px;
}

.header-dropdown .dropdown-toggle {
  padding: 8px 15px 8px 8px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  color: #465d7c;
}

.apexcharts-canvas {
  position: relative;
  user-select: none;
}

.apexcharts-toolbar {
  position: absolute;
  z-index: 11;
  max-width: 176px;
  text-align: right;
  border-radius: 3px;
  padding: 0 6px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-card .dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e8ee;
  padding: 12px 20px;
  flex-wrap: wrap;
  row-gap: 15px;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

.doctor-fav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.past-appointment .doctor-fav-list {
  margin-bottom: 20px;
}

.doctor-fav-list .doctor-info-profile {
  display: flex;
  align-items: center;
}

.doctor-fav-list .doctor-info-profile .table-avatar {
  flex-shrink: 0;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0px;
}

.doctor-fav-list .doctor-info-profile .doctor-name-info span {
  font-size: 14px;
  font-weight: 400;
}

badge {
  padding: 0.25rem 0.45rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 4px;
}

.doctor-fav-list .badge {
  border-radius: 10px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  padding: 9px 7px;
}

.bg-orange {
  background: #e04f16;
}

.table-noti-info {
  display: flex;
  align-items: center;
}

.table-noti-info .table-noti-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #e6e8ee;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 10px;
}

.table-noti-info .table-noti-icon.color-violet {
  color: #6938ef;
}

.table-noti-info .table-noti-message h6 {
  color: #465d7c;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: normal;
}

.table-noti-info .table-noti-message h6 span {
  font-weight: 500;
  color: #012047;
}

.table-noti-info .table-noti-message .message-time {
  font-size: 14px;
  color: #012047;
}

.table-noti-info .table-noti-icon.color-blue {
  color: #0e82fd;
}

.table-noti-info .table-noti-icon.color-red {
  color: #ff0000;
}

.table-noti-info .table-noti-icon.color-yellow {
  color: #ffca18;
}

.dashboard-card .dashboard-card-head .card-view-link a.add-new {
  text-decoration: none;
  color: #465d7c;
  padding-right: 15px;
  margin-right: 15px;
  border-right: 1px solid #e6e8ee;
  font-size: 14px;
}

.doctor-fav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doctor-fav-list .doctor-info-profile {
  display: flex;
  align-items: center;
}

.doctor-fav-list .doctor-info-profile .table-avatar {
  flex-shrink: 0;
}

.align-items-center {
  align-items: center !important;
}

.doctor-fav-list .cal-plus-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6e8ee;
  font-size: 16px;
  color: #012047;
}

table.table thead {
  border-bottom: 1px solid #e6e8ee;
}

.custom-new-table .table-responsive .table thead tr th {
  border: 0;
  background: #e6e8ee;
  color: #012047;
  font-size: 14px;
  padding: 8px 12px;
  white-space: nowrap;
}

.custom-new-table {
  border: 1px solid #e6e8ee;
  border-radius: 10px;
}

.custom-new-table .table-responsive {
  border-radius: 10px;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.custom-new-table .table-responsive .table tbody tr {
  border: 0;
}

.custom-new-table .table-responsive .table tbody tr:hover td {
  background-color: #f4f7fe9f;
}

.custom-new-table .table-responsive .table tbody tr td {
  border-bottom: 1px solid #e6e8ee;
  padding: 12px;
  font-size: 14px;
  padding: 12px;
  white-space: wrap;
  color: #465d7c;
}

.link-primary {
  color: #0e82fd !important;
}

table.table td h2.table-avatar .avatar.avatar-sm {
  width: 50px;
  height: 50px;
}

.avatar > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

table.table td h2 a {
  color: #012047;
}

.custom-new-table .table-responsive .table tbody tr td span.badge {
  padding: 8px 8px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-flex;
  font-size: 10px;
  line-height: 1;
}

.badge.badge-soft-success {
  background: #edf9f0 !important;
  color: #04bd6c !important;
}

.fs-7 {
  font-size: 0.3125rem !important;
}

.badge.badge-soft-danger {
  background: #ffede9 !important;
  color: #ff0000 !important;
}

.action-item a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #e6e8ee;
  color: #012047;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  margin-right: 4px;
  font-size: 14px;
}

.action-item {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

.nav-css .nav-item .nav-link.active {
  background-color: var(--mainColor) !important;
  color: #ffffff !important;
  border-color: var(--mainColor);
}

.nav-css .nav-item .nav-link.active span {
  color: #ffffff;
}

.custom-table .table tr th,
.custom-table .table tr td {
  border-top: 1px solid #e6e8ee;
  white-space: nowrap;
  padding: 12px 12px;
  color: #465d7c;
  font-size: 14px;
}

.action-item a:hover {
  background: #0e82fd;
  color: #fff;
}

.chart-inner {
  padding: 0px;
}

#BA-chart-job-error {
  margin: 0 auto;
}

/*============================================================ dashboard carousel css ============================================= */
#cCarousel {
  position: relative;
  max-width: 900px;
  margin: auto;
}

#cCarousel .arrow {
  position: absolute;
  top: 50%;
  display: flex;
  width: 45px;
  height: 45px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  z-index: 1;
  font-size: 26px;
  color: white;
  background: #00000072;
  cursor: pointer;
}

#cCarousel #prev {
  left: 0px;
}

#cCarousel #next {
  right: 0px;
}

#carousel-vp {
  /* width: 770px; */
  height: 225px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin: auto;
}

#cCarousel #cCarousel-inner {
  display: flex;
  position: absolute;
  transition: 0.3s ease-in-out;
  gap: 10px;
  left: 0px;
}

.cCarousel-item {
  width: 510px;
  height: 225px;
  border: 2px solid white;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  /* flex-direction: column; */
}

.btn.btn-primary-gradient {
  background-color: var(--mainColor);
  color: #fff !important;
  border: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mainColor);
  z-index: 1;
}

.btn.btn-primary-gradient:hover {
  background-color: #fff;
  border: 1px solid var(--mainColor);
  color: var(--mainColor) !important;
}

.cCarousel-item .infos {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background: white;
  color: black;
}

.cCarousel-item .infos button {
  background: #222;
  padding: 10px 30px;
  border-radius: 15px;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

/* ======================================================================dashboard date picker ======================================================================= */

#date_picker {
  /* width: 300px; */

  position: relative;
  /* top: 15%; */
}

#date_picker_input {
  margin-bottom: 8px;
  position: relative;
}

/*   
  #date {
    color: #FFFFFF;
    font-size: 16px;
    padding: 12px 20px;
  } */

#date:hover {
  cursor: pointer;
}

#date.onFocus:focus {
  outline: none;
}

#date_picker_input:after {
  content: "▾";
  /* padding: 12px 0px; */
  position: absolute;
  right: 18px;
  /* top: 42%; */
  color: #8a8f9f;
}

#date_picker_input.showCal:after {
  transform: rotate(180deg);
}

/*   
  #date_picker_calendar {
      min-height: fit-content;
      box-shadow: 10px 10px 40px rgba(0,0,0,0.2);
      overflow: hidden;
      padding: 12px;
  }
   */

#date_picker_calendar {
  border-radius: 4px;
  background: #323741;
  border: 2px solid #484d5a;
  width: 100%;
  position: absolute;
  padding: 10px;
  width: 230px;
  left: -13px;
}

/* 
  * calendar body
  */

#calendar_header {
  width: 100%;
  min-height: 30px;
  /*   background: pink; */
  margin-bottom: 8px;
  /* color: #FFFFFF; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-btn {
  width: 20px;
  height: 20px;
  background: #b0b8cc;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 6px;
}

.cal-btn img {
  width: 42%;
  height: 42%;
}

.cal-btn.back img {
  transform: rotate(90deg);
}

.cal-btn.front img {
  transform: rotate(-90deg);
}

#cal_days,
#calendar_main {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 5px;
  column-gap: 5px;
  color: #636a78;
}

#cal_days {
  margin-top: 10px;
  margin-bottom: 10px;
}

#calendar_main {
  grid-template-rows: repeat(5, min(30px));
}

.cell_wrapper {
  /*   background: yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  position: relative;
}

.current {
  background: #3b414a;
  color: #b2b8c9;
}

.current:not(.active):hover {
  background: #2c437b;
  color: #ffffff;
  border: 2px solid #1d5eff;
}

.cal-btn:hover,
.current:hover {
  cursor: pointer;
}

.calendar_main .active {
  background: #1d5eff;
  color: #ffffff;
}

.inactive_indicator:after {
  /*   text-decoration: underline; */
  content: "";
  width: 3px;
  height: 3px;
  background: red;
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
  left: 50%;
}

.hidden {
  visibility: hidden;
}

.fs-35 {
  font-size: 35px;
}

/* ===========================================================nav tabs design css ===================================================== */
.w-33 {
  width: 33.33% !important;
}

.fs-14 {
  font-size: 14px !important;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++ form css +++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.form-control:disabled,
.form-control[readonly] {
  border: 1px solid #efecec !important;
  background-color: #efecec;
  opacity: 1;
}

.bg-light-blue {
  background-color: #e0e4ff;
}

.jqfnfnlkjqw {
  border-radius: 25% 63% 24% 47% / 51% 25% 37% 13%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.no-story {
  font-size: 22px;
  /* padding: 48px 69px 0 0; */
  font-weight: 400;
  color: var(--mainColor);
}

.no-story span {
  font-size: 55px;
  letter-spacing: 5px;

  font-weight: 600;
  background: #9c88cf;
  background: linear-gradient(to top, #85a7cf 0%, #354a5e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-image {
  position: absolute;
  z-index: -1;
  width: 100%;
  left: 40px;
  top: 40px;
}

.owehgoeh p {
  /* padding:0 100px;
    text-align: center; */
  line-height: 20px;
}

.no-story-img {
  width: 29vw;
}

.event-list-filter-item {
  /* background-color: #E6E8EE; */
  padding: 3px 10px;
  border: 1px solid var(--borderColor);
  font-size: 14px;
  border-radius: var(--border-radius);
  cursor: pointer;
}

.event-list-filter-item.active {
  background-color: var(--mainColor);
  color: #ffffff;
  border-color: var(--mainColor);
}

.height-30 {
  height: 30px !important;
}

.fs-31 {
  font-size: 31px;
}

.event-list-filter-item:hover {
  border: 1px solid var(--mainColor);
}

.event-hbtn {
  height: 50px;
}

.border-1btn {
  border: 1px solid var(--borderColor);
  border-radius: var(--border-radius);
}

.border-1btn:hover {
  border-radius: var(--border-radius);
  border: 1px solid var(--mainColor);
}

.height-40 {
  height: 40px;
}

.event-check-btn .border-1p:hover {
  border: 1px solid var(--mainColor);
}

/* .story-bgImage{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: .8;
} */
/* .nav-css .nav-link{

    color: var(--heading-color);
    border: 1px solid var(--mainColor);
    border-left: none;
    text-align: center;
}
.nav-css .nav-link:hover{

    color: var(--mainColor);
    border: 1px solid var(--mainColor);

}
 .nav-css .nav-link.active {
    background-color: var(--mainColor) !important;
    color: #ffffff !important;
    border: 1px solid var(--mainColor);

} */

/* Tooltip container */
.tooltip-container {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip-text {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  bottom: 100%;
  /* Position above the checkbox */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  z-index: 100;
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
}

.form-select {
  box-shadow: none !important;
}

.form-select option:hover {
  background-color: var(--mainColor);
}

.btn-close {
  box-shadow: none !important;
}

.he-50 {
  height: 50px;
}

.fonts-20 {
  font-size: 20px;
}

.btn-check:focus + .btn,
.btn:focus {
  box-shadow: none;
}

.form-check-input:focus {
  box-shadow: none;
}

.bg-white {
  background-color: #ffffff !important;
}

.border-main-color {
  border-color: var(--mainColor) !important;
}

.bx-shadow-none {
  box-shadow: none;
}

.price-tag {
  background-color: #d9d1d1b8;
  border-radius: var(--border-radius);
  padding: 1px 5px;
}

.bg-light-pink {
  background-color: #fde3e3;
}

.bg-light-gray {
  background-color: #cfdacf75;
}
.bg-light-gray1 {
  background-color: #737e7375;
}
.width-19 {
  max-width: 19px;
}

.faq-qSet .answer {
  display: none;
}

.faq-qSet .question {
  cursor: pointer;
}

.faq-qSet .answer.active {
  display: block;
}

.fa-info-circle {
  color: #979797;
  cursor: pointer;
}

.fa-info-circle[title="Lorem"] {
  color: black;
  background-color: #ffffff;
  padding: 5px;
}

.he-70 {
  height: 70px;
}

.he-40 {
  height: 40px;
}

.he-100 {
  height: 100px;
}

.wi-100 {
  width: 100px;
}

.comment-btns {
  background-color: #c9c9c954;
  border: 1px solid #c9c9c954;

  border-radius: var(--border-radius);
  text-align: center;
  transition: 0.3s;
}

.w-86 {
  width: 86px;
}

.comment-btns:hover {
  background-color: var(--bgColor);

  border: 1px solid var(--mainColor);
  color: var(--mainColor);
  cursor: pointer;
}

.table > :not(:first-child) {
  border-top: 2px solid rgb(208 208 208);
}

.cursor-crosshair {
  cursor: not-allowed;
}

.width-190 {
  width: 190px;
}

.Steps-block .step-block {
  background-color: #dee9f3;
  border: 2px solid #dbe4eb;
  border-radius: var(--border-radius);
}

.Steps-block .steps {
  height: 50px;
  padding-top: 10px;
  width: 50px;
  border-radius: 50px;
  background-color: var(--backgroundColor);
  text-align: center;
}

.Steps-block p {
  text-align: center;
}

#event_description {
  line-height: 30px;
}

.width-10 {
  width: 12%;
}

.dropdown-container {
  position: absolute;
  top: 0px;
  right: 5px;
}

.fs-28 {
  font-size: 28px !important;
}

.edit-dots2 {
  cursor: pointer;
  font-size: 23px;
  padding: 5px;
  user-select: none;
}

.cursor-arrow {
  cursor: default;
}

.dissable-btn {
  color: #9a9a9a !important;
}

.form-select:disabled {
  border: 1px solid #efecec;
  background-color: #efecec;
}

.ticket-types .radio-disable .ticket-type {
  background-color: #efecec !important;
  color: #4b4b4b !important;
  border: 1px solid #efecec !important;
}

.radio-disable div.ticket-type.active {
  background-color: #e0dfdf !important;
}

.radio-disable div.ticket-type.active .fa-check {
  color: #857f7f !important;
}

/* .width-90p{
    width: 88%;
}
.height-120{
max-height: 170px;
overflow-y: hidden;
} */

.profile-pic1 {
  width: 158px;
  max-height: 230px;
  display: inline-block;
}

.file-upload1 {
  display: none;
}

.circle1 {
  border-radius: 50% !important;
  overflow: hidden;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* position: absolute; */
  top: 0px;
}

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

.p-image1 {
  position: absolute;
  top: 142px;
  right: 40px;
  color: #666666;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p-image1:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p-image2 {
  position: absolute;
  top: 142px;
  right: 40px;
  color: #666666;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p-image2:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p-image3 {
  position: absolute;
  top: 142px;
  right: 40px;
  color: #666666;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p-image3:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p-image4 {
  position: absolute;
  top: 142px;
  right: 40px;
  color: #666666;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p-image4:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.upload-button1 {
  font-size: 1.2em;
}

.upload-button1:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #999;
}

.profile-pic2 {
  width: 158px;
  max-height: 230px;
  display: inline-block;
}

.file-upload2 {
  display: none;
}

.circle2 {
  border-radius: 50% !important;
  overflow: hidden;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* position: absolute; */
  top: 0px;
}

.upload-button2 {
  font-size: 1.2em;
}

.upload-button2:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #999;
}

.profile-pic3 {
  width: 158px;
  max-height: 230px;
  display: inline-block;
}

.file-upload3 {
  display: none;
}

.circle3 {
  border-radius: 50% !important;
  overflow: hidden;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* position: absolute; */
  top: 0px;
}

.upload-button3 {
  font-size: 1.2em;
}

.upload-button3:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #999;
}

.profile-pic4 {
  width: 158px;
  max-height: 230px;
  display: inline-block;
}

.file-upload4 {
  display: none;
}

.circle4 {
  border-radius: 50% !important;
  overflow: hidden;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* position: absolute; */
  top: 0px;
}

.upload-button4 {
  font-size: 1.2em;
}

.upload-button4:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #999;
}

.he-180 {
  min-height: 225px;
}

.w-170 {
  width: 170px;
}

.db-box-card-shadow {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.db-card-shadow {
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.he-117 {
  height: 117px;
}

.h-148 {
  height: 155px;
}

.ff-default {
  font-family: var(--font-primary);
}

.he-10 {
  height: 10px;
}

.bar-graph-dependant {
  row-gap: 10px;
}

.tag-input-container.cursor-not-allowed {
  border: none;
}

.pill-container .choosed {
  background-color: var(--borderColor);
  color: #fff !important;
  border: 1px solid var(--borderColor);
}

#tagContainer.cursor-not-allowed {
  border: none !important;
  background-color: #efecec;
}

/*========================================================== knowledge article dashboard css ============================================= */
.Article-comments:hover {
  color: gray;
}

.Publish-your-article {
  background-color: var(--bg-dashboard);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 10px;
}

.knowledge-myArticle-btn {
  border-bottom: 1px solid var(--mainColor);
}

.knowledge-myArticle-btn:hover {
  border-bottom: 1px solid var(--blackColor);
}

.all-endorsements .endorsed-image img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid var(--borderColor);
}

.all-endorsements {
  height: 400px;
  overflow-y: scroll;
}

.all-endorsements .endorsed-image p {
  font-weight: 500;
}

.dashboard-box-col {
  .dashboard-widget-box {
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: 30px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    /* width: 100%; */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .h4-text-green {
    color: #05812c;
  }

  .h4-text-sky {
    color: #02ab69;
  }

  .ha-text-purple {
    color: #250671;
  }

  .dashboard-widget-box .dashboard-content-info h6 {
    color: #012047;
    font-size: 16px;
    font-weight: normal;
    font-weight: 500;
  }

  .dashboard-widget-box .dashboard-content-info h4 {
    /* color: #012047; */
    font-weight: 600;
    margin: 5px 0;
    font-size: 22px;
  }

  .dashboard-widget-box .dashboard-content-info span {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
  }

  .dashboard-widget-box .dashboard-content-info span i {
    margin-right: 5px;
  }

  .dashboard-widget-box .dash-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: #eef9fd;
    color: var(--bg-dashboard);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
  }

  .fa-solid,
  .fas {
    font-weight: 900;
  }
}

.dashboard-box-col {
  .dashboard-widget-box2 {
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: 13px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    /* width: 100%; */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .h4-text-green {
    color: #05812c;
  }

  .h4-text-sky {
    color: #02ab69;
  }

  .ha-text-purple {
    color: #250671;
  }

  .dashboard-widget-box2 .dashboard-content-info h6 {
    color: #012047;
    font-size: 14px;
    font-weight: normal;
    font-weight: 500;
  }

  .dashboard-widget-box2 .dashboard-content-info h4 {
    /* color: #012047; */
    font-weight: 600;
    margin: 5px 0;
    font-size: 16px;
  }

  .dashboard-widget-box2 .dashboard-content-info span {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
  }

  .dashboard-widget-box2 .dashboard-content-info span i {
    margin-right: 5px;
  }

  .dashboard-widget-box2 .dash-icon-box2 {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: #f9f9f9;
    color: var(--bg-dashboard);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }

  .fa-solid,
  .fas {
    font-weight: 900;
  }
}

.default-background {
  background-color: var(--backgroundColor);
}

/* ====================================================================delivery status bar ==================================================== */
.container-status {
  .card {
    z-index: 0;
    background: transparent;
    /* Optional spacing styles
        padding-bottom: 20px;
        margin-top: 90px;
        margin-bottom: 90px;
        border-radius: 10px;
        */
  }

  .top {
    padding-top: 40px;
    padding-left: 13% !important;
    padding-right: 13% !important;
  }

  /* Icon progress bar */
  #progressbar {
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 0;
    overflow: hidden;
    color: #455a64;
  }

  #progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 20%;
    float: left;
    position: relative;
    font-weight: 400;
  }

  #progressbar .step0:before {
    font-family: FontAwesome;
    content: "\f10c";
    /* Circle icon */
    color: #fff;
  }

  #progressbar li:before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    background: #c5cae9;
    border-radius: 50%;
    margin: auto;
    padding: 0;
  }

  /* Connector lines between steps */
  #progressbar li:after {
    content: "";
    width: 100%;
    height: 3px;
    background: #c5cae9;
    position: absolute;
    left: 0;
    top: 9px;
    z-index: -1;
  }

  /* Connector corner rounding */
  #progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    left: 50%;
  }

  #progressbar li:nth-child(2):after,
  #progressbar li:nth-child(3):after,
  #progressbar li:nth-child(4):after {
    left: -50%;
  }

  #progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    left: -50%;
  }

  /* Completed steps: change icon + connector color */
  #progressbar li.active:before,
  #progressbar li.active:after {
    background: var(--bg-dashboard);
  }

  #progressbar li.active:before {
    font-family: FontAwesome;
    content: "\f00c";
    /* Checkmark icon */
    transition: all 1s ease-in;
  }

  /* Flow animation triggered via JS */
  #progressbar li.flow:after {
    width: 0;
    background: var(--bg-dashboard);
    animation: flow 2s ease-out forwards;
  }

  /* Optional: staggered animation delays */
  #progressbar li.flow:nth-child(1):after {
    animation-delay: 1s;
  }

  #progressbar li.flow:nth-child(2):after {
    animation-delay: 1s;
  }

  #progressbar li.flow:nth-child(3):after {
    animation-delay: 2.9s;
  }

  #progressbar li.flow:nth-child(4):after {
    animation-delay: 5.2s;
  }

  #progressbar li.flow:nth-child(5):after {
    animation-delay: 10.2s;
  }

  /* #progressbar li.flow:nth-child(5):after {
        animation-delay: 10.2s;
    } */

  /* Icons */
  .icon {
    width: 60px;
    height: 60px;
    margin-right: 15px;
  }

  .icon-content {
    padding-bottom: 20px;
  }

  @media screen and (max-width: 992px) {
    .icon-content {
      width: 50%;
    }
  }

  /* Flow animation keyframes */
  @keyframes flow {
    from {
      width: 0%;
    }

    to {
      width: 100%;
    }
  }
}

.container-status2 {
  .card {
    z-index: 0;
    background: transparent;
  }

  .top {
    padding-top: 40px;
    padding-left: 13% !important;
    padding-right: 13% !important;
  }

  /*Icon progressbar*/
  #progressbar {
    margin-bottom: 10px;
    overflow: hidden;
    color: #455a64;
    padding-left: 0px;
    margin-top: 30px;
  }

  #progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 32%;
    float: left;
    position: relative;
    font-weight: 400;
  }

  #progressbar .step0:before {
    font-family: FontAwesome;
    content: "\f10c";
    color: #fff;
  }

  #progressbar li:before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    background: #c5cae9;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
  }

  /*ProgressBar connectors*/
  #progressbar li:after {
    content: "";
    width: 100%;
    height: 3px;
    background: #c5cae9;
    position: absolute;
    left: 0;
    top: 9px;
    z-index: -1;
  }

  #progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -50%;
  }

  #progressbar li:nth-child(2):after,
  #progressbar li:nth-child(3):after {
    left: -50%;
  }

  #progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%;
  }

  #progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  #progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  /*Color number of the step and the connector before it*/
  #progressbar li.active:before,
  #progressbar li.active:after {
    background: var(--bg-dashboard);
  }

  #progressbar li.active:before {
    font-family: FontAwesome;
    content: "\f00c";
  }

  #progressbar li.Canceled:before,
  #progressbar li.Canceled:after {
    background: var(--mainColor);
  }

  #progressbar li.Canceled:before {
    font-family: FontAwesome;
    content: "\f00c";
  }

  #progressbar li.flow:after {
    width: 0;
    background: var(--bg-dashboard);
    animation: flow 2s ease-out forwards;
  }

  #progressbar li.flow.Canceled:after {
    background: var(--mainColor);
  }

  /* Optional: staggered animation delays */
  #progressbar li.flow:nth-child(1):after {
    animation-delay: 1s;
  }

  #progressbar li.flow:nth-child(2):after {
    animation-delay: 1s;
  }

  #progressbar li.flow:nth-child(3):after {
    animation-delay: 2.9s;
  }

  /* #progressbar li.flow:nth-child(4):after {
        animation-delay: 5.2s;
    } */

  /* Icons */

  .icon {
    width: 60px;
    height: 60px;
    margin-right: 15px;
  }

  .icon-content {
    padding-bottom: 20px;
  }

  @media screen and (max-width: 992px) {
    .icon-content {
      width: 50%;
    }
  }
}

.container-status3 {
  .card {
    z-index: 0;
    background: transparent;
    /* padding-bottom: 20px;
                margin-top: 90px;
                margin-bottom: 90px;
                border-radius: 10px; */
  }

  .top {
    padding-top: 40px;
    padding-left: 13% !important;
    padding-right: 13% !important;
  }

  /*Icon progressbar*/
  #progressbar {
    margin-bottom: 10px;
    overflow: hidden;
    color: #455a64;
    padding-left: 0px;
    margin-top: 30px;
  }

  #progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 48%;
    float: left;
    position: relative;
    font-weight: 400;
  }

  #progressbar .step0:before {
    font-family: FontAwesome;
    content: "\f10c";
    color: #fff;
  }

  #progressbar li:before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    background: #c5cae9;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
  }

  /*ProgressBar connectors*/
  #progressbar li:after {
    content: "";
    width: 100%;
    height: 3px;
    background: #c5cae9;
    position: absolute;
    left: 0;
    top: 9px;
    z-index: -1;
  }

  #progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -50%;
  }

  #progressbar li:nth-child(2):after,
  #progressbar li:nth-child(3):after {
    left: -50%;
  }

  #progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%;
  }

  #progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  #progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  /*Color number of the step and the connector before it*/
  #progressbar li.active:before,
  #progressbar li.active:after {
    background: var(--bg-dashboard);
  }

  #progressbar li.active:before {
    font-family: FontAwesome;
    content: "\f00c";
  }

  #progressbar li.Canceled:before,
  #progressbar li.Canceled:after {
    background: var(--mainColor);
  }

  #progressbar li.Canceled:before {
    font-family: FontAwesome;
    content: "\f00c";
  }

  #progressbar li.flow:after {
    width: 0;
    background: var(--mainColor);
    animation: flow 2s ease-out forwards;
  }

  /* Optional: staggered animation delays */
  #progressbar li.flow:nth-child(1):after {
    animation-delay: 1s;
  }

  #progressbar li.flow:nth-child(2):after {
    animation-delay: 1s;
  }

  /* #progressbar li.flow:nth-child(3):after {
        animation-delay: 2.9s;
    }
    #progressbar li.flow:nth-child(4):after {
        animation-delay: 5.2s;
    } */

  .icon {
    width: 60px;
    height: 60px;
    margin-right: 15px;
  }

  .icon-content {
    padding-bottom: 20px;
  }

  @media screen and (max-width: 992px) {
    .icon-content {
      width: 50%;
    }
  }
}

.dropdown-checkbox {
  position: relative;
  font-size: 14px;
  /* color: #333; */

  .dropdown-list {
    padding: 12px;
    background: #fff;
    position: absolute;
    top: 30px;
    left: 2px;
    right: 2px;
    z-index: 2;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
    transform-origin: 50% 0;
    transform: scale(1, 0);
    transition: transform 0.15s ease-in-out 0.15s;
    max-height: 66vh;
    overflow-y: scroll;
  }

  .dropdown-option {
    display: block;
    padding: 8px 12px;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
  }

  .dropdown-label {
    display: flex;
    height: 50px;
    background: #fff;
    border: 1px solid #979797;
    color: #4b4b4b;
    font-size: 15px;
    padding: 16px 20px;
    line-height: 1;
    cursor: pointer;

    &:after {
      /* content: '˅'; */
      content: "\f107";
      font: normal normal normal 14px / 1 FontAwesome;
      font-size: 19px;
      /* padding-left:90px; */
      font-weight: 500;
      float: right;
      position: absolute;
      right: 20px;
    }
  }

  &.on {
    .dropdown-list {
      transform: scale(1, 1);
      transition-delay: 0s;

      .dropdown-option {
        opacity: 1;
        transition-delay: 0.2s;
      }
    }

    .dropdown-label:after {
      /* content: '▲'; */
      content: "\f106";
      font-size: 19px;
      font: normal normal normal 14px / 1 FontAwesome;
    }
  }

  [type="checkbox"] {
    position: relative;
    top: -1px;
    margin-right: 4px;
  }
}

.dropdown-checkbox2 {
  position: relative;
  font-size: 14px;
  /* color: #333; */

  .dropdown-list {
    padding: 12px;
    background: #fff;
    position: absolute;
    top: 30px;
    left: 2px;
    right: 2px;
    z-index: 2;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
    transform-origin: 50% 0;
    transform: scale(1, 0);
    transition: transform 0.15s ease-in-out 0.15s;
    max-height: 66vh;
    overflow-y: scroll;
    width: 270px;
  }

  .dropdown-option {
    display: block;
    padding: 8px 12px;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
  }

  .dropdown-label {
    display: flex;
    height: 50px;
    background: #fff;
    border: 1px solid #979797;
    color: #4b4b4b;
    font-size: 15px;
    padding: 7px 18px;
    line-height: 1;
    cursor: pointer;

    &:after {
      /* content: '˅'; */
      /* content: '˅'; */
      content: "\f107";
      font: normal normal normal 14px / 1 FontAwesome;
      font-size: 16px;
      /* padding-left: 90px; */
      font-weight: 600;
      float: right;
      position: absolute;
      right: 8px;
      /* top: 7px; */
    }
  }

  &.on {
    .dropdown-list {
      transform: scale(1, 1);
      transition-delay: 0s;

      .dropdown-option {
        opacity: 1;
        transition-delay: 0.2s;
      }
    }

    .dropdown-label:after {
      /* content: '▲'; */
      content: "\f106";
      font-size: 19px;
      font: normal normal normal 14px / 1 FontAwesome;
    }
  }

  [type="checkbox"] {
    position: relative;
    top: -1px;
    margin-right: 4px;
  }
}

.border-2p {
  border: solid 2px #e8e8e8 !important;
}

.inner-1 {
  margin-left: 30px;
}

.inner-2 {
  margin-left: 60px;
}

.Remarks-modal-content {
  height: 80vh;
  overflow-y: scroll;
}

.health-person {
  border-radius: 50%;
  width: 50px !important;
  height: 50px !important;
  margin-right: 10px;
  left: 0 !important;
}

.first-reply-health {
  padding-left: 65px !important;
}

.sec-reply-health {
  padding-left: 86px !important;
}

.sec-reply-health img {
  left: 30px !important;
}

.third-reply-health {
  padding-left: 115px !important;
}

.third-reply-health img {
  left: 63px !important;
}

.hover-cursor:hover {
  cursor: pointer;
  /* Changes the cursor to a pointer when hovered */
}

.fs-4px {
  font-size: 4px;
}

.shadow2 {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.py-40px {
  padding: 35px 24px !important;
}

.row-gap-13 {
  row-gap: 13px;
}

.EventCapacityRegistrationsDone {
  .progress-bar {
    font-size: 0.85rem;
    text-align: center;
    color: white;
  }
}

.AccessControlRole {
  /* select role radio cards */
  .card-radio {
    cursor: pointer;
  }

  .card-radio input[type="radio"] {
    display: none;
    /* Hide the default radio button */
  }

  .card-radio.selected {
    border: 2px solid #007bff;
    /* Highlight the selected card */
  }
}

.cursorNotAllowed {
  cursor: not-allowed !important;
}

.organizational-logo {
  .img-upload .profile-img {
    width: 80px;
    height: 80px;
    background: #f9f9f9;
    border: 1px dashed #e6e8ee;
    border-radius: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    margin-right: 20px;
    margin-bottom: 16px;
    font-size: 24px;
    color: #91a0b3;
  }

  .img-upload .profile-img {
    width: 80px;
    height: 80px;
  }

  .img-upload .upload-img {
    margin-bottom: 16px;
  }

  .img-upload .upload-img h5 {
    font-size: 18px;
    font-weight: 500;
    color: #012047;
    margin-bottom: 10px;
  }

  .img-upload .upload-img h5 {
    margin-bottom: 5px;
  }

  .img-upload .upload-img .change-photo {
    position: relative;
    color: #0e82fd;
    margin: 0 15px 4px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
  }

  .img-upload .upload-img .change-photo input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  .img-upload .upload-img .upload-remove {
    color: #ff0000;
    display: inline-block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
  }

  .img-upload .upload-img p {
    font-size: 14px;
    margin: 0;
    color: #465d7c;
  }
}

.gallery-image-container {
  .gallery-image img {
    height: 235px;
    width: 100%;
  }

  .gallery-image .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #dedede4f;
    color: red;
    border: none;
    border-radius: 11%;
    padding: 5px;
    /* width: 10px; */
    /* height: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
  }

  .remove-btn:hover {
    background: #fff;
  }
}

.dropdown-SocialMedia {
  position: relative;
  /* width: 250px; */
}

.dropdown-SocialMedia {
  .dropdown-select {
    padding: 10px 20px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 16px;
  }

  .dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
  }

  .dropdown-options div {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .dropdown-select.disabled {
    border: 1px solid #efecec !important;
    background-color: #efecec;
    cursor: not-allowed;
    color: #4b4b4b;
  }

  .dropdown-options div:hover {
    background-color: #f0f0f0;
  }

  .dropdown-options img {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    filter: grayscale(100%);
    /* Make all icons gray */
  }

  .dropdown-select img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    filter: grayscale(100%);
    /* Make all icons gray */
  }
}

.scroll-body-content {
  height: 490px;
  overflow-y: scroll;
}

.wh-40 {
  width: 40px;
}

.bg-light-blue {
  background: #eef9fd;
}

.your-comment-section {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.comments-section {
  height: 65vh;
  overflow-y: scroll;

  .comment-person-img img {
    border-radius: 50%;
    width: 56px;
  }

  .reply-person-img img {
    border-radius: 50%;
  }

  .more-comments-btn {
    width: auto !important;
    border-radius: 20px;
  }

  .comment-reply-btn {
    /* width: 90px; */
    width: min-content;
    text-align: center;
    /* margin-left: 40px; */
  }

  .comment-discussion {
    padding-left: 40px;
    padding-right: 50px;
  }

  .text-light-blue {
    color: var(--mainColor);
  }
}

.gallery-image-container {
  .gallery-image-business img {
    height: 235px;
    width: 100%;
  }

  .gallery-image-business .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #dedede4f;
    color: red;
    border: none;
    border-radius: 11%;
    padding: 5px;
    /* width: 10px; */
    /* height: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
  }

  .remove-btn:hover {
    background: #fff;
  }
}

.background-none {
  background-color: transparent !important;
}

.Resources-specs {
  .FType,
  .FSize,
  .FPages {
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
  }

  .FType p,
  .FSize p,
  .FPages p {
    font-size: 16px;
    color: var(--headingColor);
  }
}

.scrollbar-list {
  height: 55vh;
  overflow-y: scroll;
}

.scrollbar-list2 {
  height: 80vh;
  overflow-y: scroll;
}

.gloassary-image {
  height: 200px;
  width: auto;
  float: right;
}

#form-dropdown::after {
  font-size: 17px;
  right: 12px;
}

.ongoing-cards .image-box {
  padding: 0;
  padding-right: 15px;
}

.ongoing-cards .image-box img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 3px solid #e9c8b1;
}

.collaborate-image {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 3px solid #e9c8b1;
}

.ongoing-cards .ongoing-card {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 6px;
  padding: 9px 10px;
  border-radius: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease-out;
}

.ongoing-cards .ongoing-card.pink {
  border-color: #e9c8b1;
  background: #fbf6f2;
}

.ongoing-cards .ongoing-card:hover {
  box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
  top: -4px;
}

.ongoing-card.active {
  background: #eef9fd !important;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border: 1px solid #9edcf2 !important;
}

.ongoing-card.active img {
  border: 3px solid #9edcf2;
}

.ongoing-card.active:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

.w-310 {
  width: 260px;
}

.ongoing-active-tab {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border: 1px solid #9edcf2 !important;
  border-radius: 10px;
}

.bg-blue2 {
  background: #eef9fd !important;
  border: 1px solid #9edcf2 !important;
}

.bg-pink2 {
  background: #fbf6f2 !important;
  border: 1px solid #e9c8b1 !important;
}

.mood-reactions-input .mood-reaction {
  width: 6rem;
  /* margin-top: 10px; */
  background-color: #fbf6f2;
  border: 1px solid #e9c8b1;
  border-radius: var(--border-radius);
}

.mood-reactions-input .mood-reaction img {
  width: 25px;
  filter: grayscale(100%);
}

.mood-reactions-input .mood-reaction.active {
  background: #eef9fd !important;
  border: 1px solid #9edcf2 !important;
}

.text-main-blue {
  color: #9edcf2;
}

.text-main-pink {
  color: #e9c8b1;
}

.Activity-logs-modal-cards .individual-data-card {
  border-radius: 10px;
}

.he-75 {
  min-height: 75px;
}

.shadow3 {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.border-1p-mainColor {
  border: 1px solid var(--mainColor) !important;
}

.pill-container.disabled {
  border: none;
  cursor: not-allowed;
  background-color: #efecec;
}

.pill-container {
  display: flex;
  /* flex-wrap: wrap; */
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 10px 5px;
  border-radius: 8px;
  min-height: 40px;
  cursor: text;
  background: rgb(246, 246, 246);

  .pill {
    background-color: var(--mainColor);
    color: white;
    padding: 2px 10px;
    border-radius: 20px;
    margin-right: 3px;
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  .pill button {
    background: none;
    border: none;
    color: white;
    margin-left: 5px;
    cursor: pointer;
  }

  .pill-input {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 5px;
    min-width: 100px;
  }

  #pill-input[type="text"]:focus {
    border: none !important;
  }
}

#pill-input[type="text"]:focus .pill-container {
  border: 1px solid var(--mainColor);
}

.border-1p-input {
  border: 1px solid #979797;
}

.circle-rounded {
  border-radius: 50% !important;
}

.collaborate-image {
  border: 3px solid #e9c8b1;
}

.he-160 img {
  height: 190px !important;
}

.calendar-container-scheduler {
  /* max-width: 1200px; */
  margin: auto;
  background: var(--bgColor);
  padding: 20px;
  border-radius: 10px;
  /* /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.calendar-header button,
select {
  /* padding: 5px 10px; */
  font-size: 16px;
}

#viewSelector,
.Schedule-list-btn {
  height: 40px;
}

#calendar {
  /* Default for month view */
  display: grid;
  gap: 5px;
}

.day,
.day-name {
  padding: 10px;
  min-height: 80px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.day-name {
  background: #eef9fd;
  border: 1px solid #0d96e4;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}

.today .day-number {
  background-color: var(--mainColor);
  border: 2px solid var(--mainColor);
  border-radius: 50%;
  width: fit-content;
  padding: 2px 7px;
  color: white;
}

.event {
  margin-top: 5px;
  font-size: 12px;
  background: #fde3e3;
  /* color: white; */
  padding: 2px 4px;
  border: 1px solid #e9c8b1;
  border-radius: 4px;
  cursor: pointer;
}

.event.pending {
  background: #ffc107;
  color: #000;
}

.event.in-progress {
  background: #17a2b8;
  color: white;
}

.event.completed {
  background: #28a745;
  color: white;
}

.popup,
.overlay-scheduler {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.overlay-scheduler {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 5;
}

.popup {
  background: white;
  padding: 20px;
  border-radius: 10px;
  z-index: 10;
  /* width: 300px; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.popup input,
.popup button {
  width: 100%;
  margin-top: 10px;
  /* padding: 8px; */
  /* font-size: 18px; */
}

#popup2 {
  position: static;
  transform: none;
}

.status-group {
  margin-top: 15px;
  margin-bottom: 15px;
}

.status-group label {
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
}

.radio-options {
  display: flex;
  gap: 65px;
  flex-wrap: wrap;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  width: auto;
  margin: 0;
}

.radio-option span {
  font-size: 15px;
  white-space: nowrap;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 5px;
}

.status-indicator.pending {
  background: #ffc107;
}

.status-indicator.in-progress {
  background: #17a2b8;
}

.status-indicator.completed {
  background: #28a745;
}

.edit-delete {
  display: flex;
  gap: 10px;
}

.edit-delete button {
  flex: 1;
  font-size: 20px;
}

/* ============ WEEK VIEW SPECIFIC STYLES ============ */
.week-view-scheduler {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  grid-template-rows: 40px repeat(24, 40px);
  border: 1px solid #ccc;
  user-select: none;
  height: 1000px;
  /* max-width: 1200px; */
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  gap: 1px;
  overflow-y: auto;
}

.week-view-time-header {
  grid-column: 1;
  grid-row: 1;
  background: #f9f9f9;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  color: #666;
  border-top-left-radius: 10px;
}

.week-view-day-header {
  background: #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 5px;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.week-view-day-header.today {
  background: #eef9fd;
  border: 1px solid #0d96e4;
  color: #2e7d32;
}

.week-view-time-cell {
  grid-column: 1;
  background: #fafafa;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #eee;
  padding: 2px 5px;
  font-size: 11px;
  color: #666;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.week-view-slot {
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  cursor: pointer;
  position: relative;
  background: white;
  transition: background-color 0.2s;
}

.week-view-slot:hover {
  background-color: #e6f7ff;
}

.week-view-slot.today {
  background-color: #f0f8f0;
}

.week-view-event {
  background: #28a745;
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 1px;
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  z-index: 2;
}

.week-view-event.pending {
  background: #ffc107;
  color: #000;
}

.week-view-event.in-progress {
  background: #17a2b8;
  color: white;
}

.week-view-event.completed {
  background: #28a745;
  color: white;
}

/* ============ DAY VIEW SPECIFIC STYLES ============ */
.day-view-scheduler {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: 40px 1fr;
  border: 1px solid #ccc;
  user-select: none;
  height: 960px;
  /* 24 * 40px height */
  max-width: 900px;
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.day-view-time-label {
  grid-column: 1;
  grid-row: 1 / 3;
  border-right: 1px solid #ccc;
  color: #666;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 5px;
  background: #fafafa;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  user-select: none;
}

.day-view-date-header {
  grid-column: 2;
  grid-row: 1;
  border-bottom: 1px solid #ccc;
  padding-left: 10px;
  font-weight: bold;
  font-size: 16px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  border-top-right-radius: 10px;
}

.day-view-time-label .time-cell {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
  width: 100%;
  text-align: center;
}

.day-view-timeline {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.day-view-slot {
  flex: 0 0 40px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  position: relative;
  padding-left: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.day-view-slot:hover {
  background-color: #e6f7ff;
}

.day-view-slot.selected {
  background-color: #1890ff;
  color: white;
}

.day-view-event {
  background: #28a745;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-view-event.pending {
  background: #ffc107;
  color: #000;
}

.day-view-event.in-progress {
  background: #17a2b8;
  color: white;
}

.day-view-event.completed {
  background: #28a745;
  color: white;
}

.event-status-label {
  font-size: 10px;
  font-weight: bold;
  margin-left: 4px;
  padding: 2px 4px;
  border-radius: 4px;
}

.event-status-label.pending {
  background-color: #ffc107;
  /* yellow */
  color: #000;
}

.event-status-label.in-progress {
  background-color: #17a2b8;
  /* blue */
  color: #fff;
}

.event-status-label.completed {
  background-color: #28a745;
  /* green */
  color: #fff;
}

.Schedule-status .completed {
  padding: 2px 8px;
  background-color: #3dbf3d;
  border-radius: 13px;
}

.Schedule-status .in-progress {
  padding: 2px 8px;
  background-color: rgb(22 177 202);
  border-radius: 13px;
}

.Schedule-status .status-pending {
  padding: 2px 13px;
  background-color: #ffbe00;
  border-radius: 13px;
}

/* ======================================================help center ui css ===================================================== */

.search_area-help-center {
  background: linear-gradient(to left, #0d6eb5, #60c9f6 63%);
  background-size: cover;
  position: relative;
}

.easy-autocomplete {
  width: 675px;
}

.search_criteria {
  text-align: center;
  height: 238px;
}

.search_criteria .search_form {
  position: relative;
  background: #fff;
  width: 675px;
  margin: auto;
  height: 52px;
  border-radius: 4px;
  text-align: left;
  transform: scale(1);
  z-index: 2;
}

.search_criteria .search_form input {
  border: none;
  padding: 4px 15px;
  font-size: 20px;
  font-weight: 300;
  width: 100%;
  box-shadow: none;
  height: 52px;
}

.easy-autocomplete-container {
  background: #ececec;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
  max-height: 284px;
  overflow: auto;
}

.easy-autocomplete-container ul {
  background: none repeat scroll 0 0 #eaeaea;
  margin-bottom: 0;
  border-top: 1px dotted #ccc;
  display: none;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  top: -1px;
}

.easy-autocomplete-container ul .eac-category,
.easy-autocomplete-container ul li {
  background: inherit;
  border-color: #ccc;
  border-image: none;
  display: block;
  font-size: 16px;
  font-weight: 400;
  padding: 12px;
  border-bottom: 1px solid #ccc;
}

.easy-autocomplete-container ul li div {
  display: block;
  font-weight: 400;
  word-break: break-all;
}

.easy-autocomplete-container ul li.selected {
  background: none repeat scroll 0 0 #ebebeb;
  cursor: pointer;
}

.search_criteria .search_form input {
  border: none;
  padding: 4px 15px;
  font-size: 20px;
  font-weight: 300;
  width: 100%;
  box-shadow: none;
  height: 52px;
}

.search_form .search_btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 100%;
  background: #052c48;
  border: none;
  color: #fff;
  border-radius: 0 4px 4px 0;
  font-size: 22px;
}

.new_suggestion_criteria {
  height: 312px;
  background: url(../../assets-frontend/img/search_bg2.jpg) no-repeat center;
  background-size: cover;
  color: #fff;
  position: relative;
  z-index: 1;
}

.new_suggestion_criteria .icon_area .icon_box {
  width: 55px;
  height: 55px;
  background: #62c4f1;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}

.new_suggestion_criteria .icon_area .icon_box img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.new_suggestion_criteria .q_title {
  font-size: 30px;
  font-weight: 300;
  margin-top: 56px;
  margin-bottom: 18px;
  text-align: center;
  text-transform: uppercase;
}

.new_suggestion_criteria .q_title span {
  font-size: 20px;
  display: block;
  text-transform: lowercase;
}

.new_suggestion_criteria .q_box {
  width: 100%;
  margin-top: 40px;
  position: relative;
}

.new_suggestion_criteria .q_box:before {
  /* position: absolute; */
  content: "";
  width: 2px;
  height: 100%;
  background: #20495d;
  z-index: 10 !important;
}

.new_suggestion_criteria .owl-suggestion_quest .owl-item .item {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  height: 116px;
  overflow: hidden;
}

.new_suggestion_criteria .questions {
  font-size: 14px;
  line-height: 24px;
}

.new_suggestion_criteria .owl-item .item .questions {
  padding: 10px 0;
  padding-left: 16px;
}

.new_suggestion_criteria .questions span {
  color: #5ec5f3;
  float: left;
  width: 15px;
}

.new_suggestion_criteria .questions a {
  color: #fff;
  float: left;
  width: 240px;
  margin-left: 10px;
}

.topic_browse {
  padding: 2em 0;
  background: #fff;
  /* min-height: 382px; */
}

.topic_browse h2 {
  text-align: center;
  font-size: 32px;
  /* color: #006cb7; */
  font-weight: 400;
  margin-bottom: 55px;
  text-transform: uppercase;
}

.topic_browse h2 span {
  font-weight: 500;
}

.box_wrapper {
  width: 175px;
  height: 175px;
  margin: auto;
  display: inline-block;
  padding: 2.1em 0;
  text-align: center;
  /* margin-bottom: 42px; */
  cursor: pointer;
  background: #eee;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

.hvr-rectangle-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.hvr-rectangle-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mainColor);
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-rectangle-out:hover:before {
  transform: scale(1);
}

.box_wrapper .icon {
  margin-bottom: 15px;
  text-align: center;
  width: 82px;
  height: 77px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.box_wrapper .icon img {
  position: absolute;
  top: 0;
  left: 0;
}

.box_wrapper .title {
  font-size: 15px;
  /* color: #333; */
  margin-top: 12px;
}

.box_wrapper:hover .title a {
  color: #fff;
}

.box_wrapper:hover img.blue {
  filter: brightness(0) invert(1);
}

.help_center h2 {
  text-align: center;
  text-transform: capitalize;
  line-height: 32px;
  padding-bottom: 10px;
  font-size: 40px;
  /* color: #006cb7; */
}

.help_center h2 span {
  display: block;
  font-size: 24px;
  margin-top: 12px;
}

.help_center .owl-item .item .wrapper {
  text-align: center;
  color: #fff;
  height: auto;
  width: 100%;
  padding: 0;
}

.help_center .wrapper .video_area {
  position: relative;
  /* height: 215px; */
}

.help_center .job_seeker .video_area {
  height: 235px;
  overflow: hidden;
}

.help_center .wrapper .video_area a {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
}

.help_center .wrapper .video_area iframe,
.help_center .wrapper .video_area img {
  width: 100%;
  border: 1px solid #eaeaea;
  position: relative;
  z-index: 0;
  height: 100%;
}

.help_center .wrapper .content_box

/* Specificity: (0,3,0) */ {
  padding: 15px 0;
}

.help_center .job_seeker .content_box p {
  margin-bottom: 0;
  font-size: 20px;
  /* color: #006cb7; */
  font-weight: 400;
  text-transform: inherit;
}

.help_center .job_seeker .content_box span {
  display: block;
  color: #000;
  text-transform: inherit;
  font-size: 14px;
  margin-top: 6px;
  font-weight: 300;
}

.connect_us {
  background: var(--mainColor);
  padding: 5em 0;
  position: relative;
}

.connect_us .box-wrapper {
  color: #fff;
}

.connect_us .box-wrapper .title

/* Specificity: (0,3,0) */ {
  font-size: 28px;
  font-weight: 300;
}

.connect_us .box-wrapper .text_box {
  margin-top: 16px;
}

.connect_us .box-wrapper .text_box p {
  font-size: 16px;
}

.connect_us .box-wrapper .text_box a {
  color: #fff;
}

.connect_us .box-wrapper .text_box p span {
  font-weight: 500;
}

.form_area {
  background: #fff;
  padding: 25px 52px 34px;
}

.form_area .title {
  font-size: 26px;
  margin-bottom: 20px;
}

.inner_page_search {
  z-index: 1;
}

.search_area {
  background: -webkit-linear-gradient(to left, #0d6eb5, #60c9f6 63%);
  background: -moz-linear-gradient(to left, #0d6eb5, #60c9f6 63%);
  background: -o-linear-gradient(to left, #0d6eb5, #60c9f6 63%);
  background: -ms-linear-gradient(to left, #0d6eb5, #60c9f6 63%);
  background: linear-gradient(to left, #0d6eb5, #60c9f6 63%);
  background-size: cover;
  position: relative;
}

.inner_page_search .search_criteria {
  z-index: 1;
  text-align: center;
  height: auto;
  padding: 2.3em 0;
  position: relative;
}

.menu_area {
  background: #e6e6e6;
  padding: 2em 0;
  text-align: center;
  position: relative;
  z-index: 9;
  min-height: 184px;
}

.hvr-rectangle-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.menu_area .menu_box {
  width: 142px;
  height: 128px;
  display: inline-grid;
  background: linear-gradient(#fff, #fff);
  text-align: center;
  padding: 24px 0;
  cursor: pointer;
  margin-right: 4px;
}

.menu_area .menu_box:last-child {
  margin-right: 0;
}

.menu_area .menu_box.active {
  background: linear-gradient(#4db1db, #0d6eb6);
}

.hvr-rectangle-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #006cb7;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.menu_box.hvr-rectangle-out:before {
  background: linear-gradient(#4db1db, #0d6eb6);
}

.menu_area .menu_box .img_box {
  position: relative;
  width: 63px;
  height: 49px;
  margin: auto;
  margin-bottom: 8px;
}

.menu_area .menu_box .img_box img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all ease-in-out 0s;
}

.menu_area .menu_box.active .img_box img.blue,
.menu_area .menu_box:hover .img_box img.blue {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.menu_area .menu_box .text {
  font-size: 13px;
  color: #333;
  transition: all ease-in-out 0s;
  margin-top: 5px;
}

.menu_area .menu_box:hover {
  color: #fff;
  transition: all ease-in-out 0.3s;
}

.menu_area .menu_box.active .text a {
  color: #fff;
}

.menu_area .menu_box:hover .text a {
  color: #fff;
}

.question_area {
  background: #fff;
}

.breadcrumb_area {
  margin-top: 12px;
}

.registration_area {
  display: inline-block;
  width: 100%;
  margin-top: 30px;
}

.registration_area .heading {
  font-size: 20px;
  color: #000;
  margin: 0;
  font-weight: 400;
}

div.bhoechie-tab-container {
  z-index: 10;
  padding: 0 !important;
  margin-top: 20px;
  display: flex;
  width: 100%;
  background-clip: padding-box;
  opacity: 0.97;
}

div.bhoechie-tab-menu {
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}

#sticky-anchor .sticky {
  top: 0px !important;
}

.list-group-item.active {
  font-size: 15px !important;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background: #fff !important;
  color: #333;
  border-left: 4px solid #0e6fb7 !important;
  border-color: #cbcbcb !important;
  border-left-color: #0e6fb7 !important;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background: #fff !important;
  color: #333;
  border-left: 4px solid #0e6fb7 !important;
  border-color: #cbcbcb !important;
  border-left-color: #0e6fb7 !important;
}

#glossaryContentArea .list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background-color: #eef9fd !important;
}

div.bhoechie-tab-menu div.list-group {
  margin-bottom: 0;
  position: relative;
  background: #efefef;
  height: 88vh;
  overflow: auto;
}

div.bhoechie-tab-menu div.list-group a {
  margin-bottom: 0;
  border: none;
  font-size: 14px;
  padding: 15px 30px;
  background: 0 0;
  color: #333;
  border-bottom: 1px solid #d8d8d8;
  line-height: 25px;
}

div.bhoechie-tab-menu div.list-group > a:first-child {
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
  border-top-left-radius: 0;
  -moz-border-top-left-radius: 0;
}

div.bhoechie-tab-content {
  background-color: #fff;
  margin-right: -1px;
  position: relative;
}

div.bhoechie-tab-content .wrapper {
  padding: 0.5em 3em;
  min-height: 50vh;
}

.bhoechie-tab-content .q_title {
  color: #0d6eb6;
  font-size: 24px;
  margin: 0;
  font-weight: 400;
}

.bhoechie-tab-content {
  display: none;
}

.bhoechie-tab-content.active {
  display: block;
}

.list-group-item.active {
  background-color: #007bff;
  color: white;
}

.section-header {
  margin-bottom: 15px;
  padding-left: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 8px;
}

.section-header h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--mainColor);
}

.section-header2 h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 8px;
}

.section-header2 h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: #fff;
}

.bhoechie-tab-content .content {
  color: #0c0c0c;
  line-height: 24px;
  font-size: 15px;
}

.new_row {
  margin-top: 20px;
}

div.bhoechie-tab-content .footer_wrapper {
  padding: 2.5em 1em;
  border-top: 1px solid #ddd;
  display: block;
  width: 90%;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 30px;
}

div.bhoechie-tab-content .footer_wrapper .box {
  float: left;
  font-size: 16px;
  width: 50%;
  height: 20px;
  line-height: 30px;
}

.footer_wrapper .box i.fa.fa-thumbs-up {
  width: 35px;
  height: 35px;
  background: #1bcc87;
  border-radius: 5px;
  color: #fff;
  display: inline-grid;
  vertical-align: middle;
  text-align: center;
  padding: 8px 0;
}

.footer_wrapper .box i.fa.fa-thumbs-down {
  width: 35px;
  height: 35px;
  background: #f05f5c;
  border-radius: 5px;
  color: #fff;
  display: inline-grid;
  vertical-align: middle;
  text-align: center;
  padding: 8px 0;
  transform: rotateY(180deg);
}

.relative {
  position: relative;
}

.ptr-10 {
  padding-top: 2.5rem;
}

.bg-primary-300 {
  --tw-bg-opacity: 1;
  /* background-color: var(--mainColor/ var(--tw-bg-opacity));0 */
  background-color: rgb(1 111 169 / var(--tw-bg-opacity));
}

.-skew-y-2 {
  --tw-skew-y: -2deg;
}

.max-w-7xl {
  max-width: 80rem;
}

.-skew-y-2,
.-skew-y-3 {
  transform: translate(0, 0) rotate(0deg) skewX(0deg) skewY(-2deg) scaleX(1)
    scaleY(1);
}

.transform {
  transform: translate(0, 0) rotate(0deg) skewX(0deg) skewY(-2deg) scaleX(1)
    scaleY(1);
}

.rounded-md {
  border-radius: 0.375rem;
}

@media (min-width: 1024px) {
  .lg\:max-h-96 {
    max-height: 28rem;
  }
}

.z-10 {
  z-index: 10;
}

@media (min-width: 1536px) {
  .\32xl\:px-0 {
    padding-left: 0;
    padding-right: 0;
  }
}

.ptp-10 {
  padding-top: 100px;
}

.mt-38 {
  margin-top: 38px;
}

.max-w-3xl {
  max-width: 60rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.flex-col {
  flex-direction: column;
}

.inset-0 {
  inset: 0;
}

.zIndex-1 {
  z-index: -1;
}

.career-image-container {
  position: relative;
  z-index: 4;
}

.career-image-container .image-career {
  position: relative;

  span {
    font-size: 0.75rem;
    text-decoration: line-through;
    color: #ff8379;
  }
}

.career-image-container .image-career {
  span.border_btm {
    &:after {
      display: block;
      content: "";
      width: 100px;
      height: 100px;
      position: absolute;
      bottom: 0;
      right: 0;
      border-bottom: 3px solid #ff6161;
      border-right: 3px solid #ff6161;
    }

    /* &:before {
            display: block;
            content: "";
            width: 100px;
            height: 100px;
            position: absolute;
            bottom: 0;
            left: 0;
            border-bottom: 3px solid #e9c8b1;
            border-left: 3px solid #e9c8b1;
        } */
  }

  &:before {
    display: block;
    content: "";
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 3px solid #ff6161;
    border-left: 3px solid #ff6161;
  }

  /* &:after {
        display: block;
        content: "";
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        right: 0;
        border-top: 3px solid #e9c8b1;
        border-right: 3px solid #e9c8b1;
    } */
}

.career-image-container .image-career img {
  /* height: 100%; */
  height: 15rem;
  width: 100%;
}

.our-values {
  background-color: var(--mainColor);
}

.grid {
  display: grid;
}

.gap-x-20 {
  -moz-column-gap: 5rem;
  column-gap: 5rem;
}

.gap-y-10 {
  row-gap: 2.5rem;
}

.font-inter {
  font-family: var(--font-inter), sans-serif;
}

.font-bold {
  font-weight: 700;
}

.leading-relaxed {
  line-height: 1.625;
}

.rich_content {
  --tw-text-opacity: 1;
  color: rgb(223 223 223 / var(--tw-text-opacity));
}

/* .font-light {
    font-weight: 300;
} */
.rich_content p {
  overflow-wrap: break-word;
  line-height: 21px;
}

.view-job-details {
  display: none;
}

.view-job-details {
  width: 100%;
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .view-job-details {
    width: 75%;
  }
}

.gap-x-11 {
  column-gap: 3rem;
}

.slider {
  .slide {
    width: 1000px;
    position: relative;
    overflow: hidden;
    margin: 0 10px;
    border-radius: 20px;
    /* background-color: #000; */
  }

  figure {
    height: 500px;
    margin: 0;
  }

  .slide img {
    width: 100%;
    height: 100%;
    position: relative;
    transition: all 1s ease-out;
  }

  .slide.slick-center img {
    transition: all 1s ease-out;
    opacity: 1;
  }

  .slick-active {
    background-color: rgba(black, 0);
  }

  .slick-prev,
  .slick-next {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    z-index: 3000;
    top: 0;
    bottom: 0;
    cursor: pointer;
    outline: none;
    /* opacity: .8; */
  }

  .slick-next {
    right: calc(50% - 545px);
    text-indent: 1px;
  }

  .slick-prev {
    left: calc(50% - 545px);
    text-indent: -2px;
  }

  .slick-arrow {
    background: none;
    border: none;
    position: absolute;
    bottom: 33px;
    color: #fff;
    font-size: 1.5rem;
    padding: 0;
    width: 33px;
    height: 33px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    z-index: 20;
    -webkit-transition: background-color 0.2s ease 0s;
    transition: background-color 0.2s ease 0s;
  }

  /* .slick-arrow:hover {
        background-color: rgba(255, 255, 255, .2)
    } */

  .slick-dots {
    position: absolute;
    bottom: 0;
    right: calc(50% - 432px);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .slick-dots li {
    float: left;
    display: block;
    margin: 1rem 0.2rem;
    font-size: 0;
  }

  .slick-dots button {
    border: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.4);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    text-indent: 9999px;
    padding: 0;
  }

  .slider .slick-dots .slick-active {
    opacity: 1;
  }

  .slider .slick-dots .slick-active button {
    background: rgba(255, 255, 255, 0.8);
  }

  .text {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 33px 99px;
    color: #fff;
    z-index: 5;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  /* .prev .text {
        text-align: right;
        float: right;

    } */

  .text {
    padding: 0 55px 99px;
    opacity: 0.7;
  }

  .category {
    text-transform: uppercase;
    background-color: var(--mainColor);
    color: #fff;
    width: max-content;
    font-size: 14px;
    padding: 3px 18px;
    border-radius: 25px;
  }

  .title {
    font-size: 1.1rem;
    line-height: 1.15em;
    margin: 0.4rem 0 0;
    -webkit-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
    color: #fff;
  }

  .slider.changing .text {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  .title {
    margin-top: 0.8rem;
    font-size: 35px;
    -webkit-transition: all 0.4s ease 0.2s;
    transition: all 0.4s ease 0.2s;
    opacity: 0.7;
  }

  .summary {
    position: relative;
    height: 1px;
    top: 100px;
    font-weight: 400;
    margin: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
  }

  .summary {
    top: 5px;
    -webkit-transition: all 0.4s ease 0.2s;
    transition: all 0.4s ease 0.2s;
  }

  .slide:before {
    content: "";
    display: block;
  }

  .slide figure:before,
  .slide figure:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* background: rgba(0, 0, 0, .25); */
    /* background: rgba(black, 0.5); */
    /*  */
    /* background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 100%); */
    /* background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .7))); */
    /* background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 100%); */
    /* background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 100%); */
    /* background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 100%); */
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.9) 100%
    );
  }

  .slick-active figure:before,
  .slick-active figure:after {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 100%
    );
  }

  .slick-active .text,
  .slick-active .title {
    opacity: 1;
  }

  .slick-slide .slide figure:before {
    top: 0;
    /* background: transparent;         */
    background-color: rgba(black, 0.8);

    z-index: 1;
    -webkit-transition: background-color 0.4s ease 0s;
    transition: background-color 0.4s ease 0s;
  }

  .slick-active .slide figure:before {
    background-color: rgba(black, 0);
  }

  /* .slide:hover figure:before,
    .slide:focus figure:before {
        background: rgba(39, 37, 30, .6)
    } */
}

.who-can-join {
  /*Carousel Gallery*/
  .carousel-gallery {
    margin: 50px 0;
    padding: 0 30px;

    .swiper-slide {
      a {
        display: block;
        width: 100%;
        height: 200px;
        border-radius: 4px;
        overflow: hidden;
        position: relative;

        -webkit-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);

        &:hover {
          .image {
            .overlay {
              opacity: 1;
            }
          }
        }

        .image {
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center center;

          .overlay {
            width: 100%;
            height: 100%;
            background-color: rgba(20, 20, 20, 0.8);
            text-align: center;
            opacity: 0;

            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;

            em {
              color: #fff;
              font-size: 26px;
              position: relative;
              top: 50%;
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              -o-transform: translateY(-50%);
              transform: translateY(-50%);
              display: inline-block;
            }
          }
        }
      }
    }

    .swiper-pagination {
      position: relative;
      bottom: auto;
      text-align: center;
      margin-top: 25px;

      .swiper-pagination-bullet {
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;

        &:hover {
          opacity: 0.7;
        }

        &.swiper-pagination-bullet-active {
          background-color: #d63031;
          transform: scale(1.1, 1.1);
        }
      }
    }
  }

  /*# Carousel Gallery*/

  .plugins {
    text-align: center;

    h3 {
      text-align: center;
      margin: 0;
      padding: 0;
      font-family: Arial;
      text-transform: uppercase;
      color: #111;
    }

    a {
      display: inline-block;
      font-family: Arial;
      color: #777;
      font-size: 14px;
      margin: 10px;
      transition: all 0.2s linear;

      &:hover {
        color: #d63031;
      }
    }
  }
}

.who-can-join {
  background-color: #f8f9fa;
  padding: 60px 0;
}

/* ============================================= un sdg page css ====================================================*/
.inset-0 {
  inset: 0px;
}

.absolute {
  position: absolute;
}

.bg-gradient-to-r {
  background-image: linear-gradient(
    to right,
    rgb(37 99 235 / 0.1),
    rgb(147 51 234 / 0.1)
  );
}

.from-blue-600\/10 {
  --tw-gradient-from: rgb(37 99 235 / 0.1) var(--tw-gradient-from-position);
}

.to-purple-600\/10 {
  --tw-gradient-to: rgb(147 51 234 / 0.1) var(--tw-gradient-to-position);
}

.p-8 {
  padding: 2rem;
}

.to-purple-50 {
  background-color: #faf5ff;
}

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

.grid {
  display: grid;
}

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

.grid-cols-sdg-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.px-lg-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

@media only screen and (max-width: 900px) {
  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .px-lg-5 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .responsive-view {
    font-size: 0.8rem;
  }

  .responsive-categories-card {
    flex-wrap: wrap;
  }

  .responsive-categories-card .resource-img {
    width: 100%;
  }

  .responsive-categories-card .res-padding {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
  }
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:
    var(0 0 #0000, 0 0 #0000),
    var(0 0 #0000, 0 0 #0000),
    0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.w-12 {
  width: 3rem;
}

.h-12 {
  height: 3rem;
}

.flex {
  display: flex;
}

.rounded-lg {
  border-radius: 0.5rem;
}

@media (min-width: 1024px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gap-12 {
  gap: 3rem;
}

.items-center {
  align-items: center;
}

.text-purple-600 {
  color: linear-gradient(
    90deg,
    rgba(0, 51, 102, 1) 0%,
    rgba(0, 166, 255, 1) 100%
  );
}

.to-purple-600 {
  background: linear-gradient(
    90deg,
    rgba(0, 51, 102, 1) 0%,
    rgba(0, 166, 255, 1) 100%
  );
}

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

.items-center {
  align-items: center;
}

.text-blue-600 {
  opacity: 1;
  color: var(--mainColor);
}

.w-5 {
  width: 1.25rem;
}

.h-5 {
  height: 1.25rem;
}

.font-medium {
  font-weight: 500;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.font-semibold {
  font-weight: 600;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.duration-300 {
  transition-duration: 300ms;
}

.p-6 {
  padding: 1.5rem;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.w-16 {
  width: 4rem;
}

.h-16 {
  height: 4rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #f9fafb, #eff6ff);
}

.to-blue-50 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.max-w-3xl {
  max-width: 48rem;
}

.gap-6 {
  gap: 1.5rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.border-t {
  border-top-width: 1px;
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-top: 1px solid rgb(243 244 246);
}

.pt-6 {
  padding-top: 1.5rem;
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.to-green-600 {
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}

.w-3 {
  width: 0.75rem;
}

.h-3 {
  height: 0.75rem;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.rounded-full {
  border-radius: 9999px;
}

.more-content-sdg {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
  opacity: 0;
}

.more-content-sdg.show {
  max-height: 1000px;
  /* Adjust based on content */
  opacity: 1;
}

.chevron-icon {
  transition: transform 0.3s ease;
}

.rotate-180 {
  transform: rotate(180deg);
}

.explore-more-btn {
  display: inline-block;
  padding: 10px 15px;
  background: #0066cc;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
}

@media only screen and (min-width: 1400px) and (max-width: 1550px) {
  .responsive-single-blog-inner .col-xl-5 {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1550px) {
  .responsive-single-blog-inner .col-xl-7 {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}

@media (min-width: 1550px) {
  .responsive-single-blog-inner .col-xl-5 {
    flex: 0 0 auto !important;
    width: 41.66666667% !important;
  }
}

@media (min-width: 1550px) {
  .responsive-single-blog-inner .col-xl-7 {
    flex: 0 0 auto !important;
    width: 56.66666667% !important;
  }
}

.fables-testimonial.bg-rules {
  background-attachment: fixed;
  background-repeat: repeat;
  /* background-size: cover; */
  background-position: center top;
}

.fables-testimonial .bg-filter {
  backdrop-filter: brightness(0.4);
  padding: 30px 0;
}

.Qoute-section .top-quote-img {
  position: absolute;
  top: 14px;
  left: -25px;
  width: 27px;
}

.Qoute-section .bottom-quote-img {
  position: absolute;
  bottom: -12px;
  width: 25px;
  right: -25px;
  transform: rotate(180deg);
}

.quote-container {
  padding: 40px 0;
}

.usefull-response {
  /* opacity: 0; */
  transition: opacity 0.5s ease-in-out;
  /* display: none; */
  padding: 10px 0 0 0;
  font-size: 14px;
  color: var(--headingColor);
}

.search-reset-btn {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #0d6efd;
  padding: 1px 30px;
  margin: 8px;
  transition: all 0.3s ease-in-out;
  border-radius: 4px;
  background-color: #0d6efd;
}

.search-reset-btn:hover {
  color: #fff;
  background: #0b5ed7;
  /* border: ; */
}

.hp-250 {
  height: 314px;
}

.for-parents-img {
  border-radius: 20px;
}

.Our-Commitments {
  background-color: #f8f9fa;
}

.our-commitments-card {
  border-left: 4px solid #007bff;
  background-color: #fff;
  height: 100%;
  box-shadow: var(--box-shadow) !important;
}

.title-shape2 {
  position: relative;
  width: 100px;
  height: 4px;
  background: var(--mainColor);
}

.blue-tick-point {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.blue-tick-point:before {
  content: "✔";
  /* Tick mark */
  color: #007bff;
  /* Bootstrap primary blue or your preferred shade */
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.carousel-badge {
  position: absolute;
  min-width: 120px;

  padding: 0 20px;
  height: 32px;
  background: #007bff;
  color: #fff;
  border-radius: 20px 0 0px 0;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 30px;
}

.carousel-badge p {
  font-weight: 500;
}

.challenges-carousel-rightBtn .carousel-control-next-icon {
  filter: invert(1);
}

.challenges-carousel-leftBtn .carousel-control-prev-icon {
  filter: invert(1);
}

.challenges-carousel-rightBtn {
  background: #ffffff1f;
  height: 100px;
  top: 25%;
  width: 40px;
  right: 0px;
  box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.15);
}

.challenges-carousel-leftBtn {
  background: #ffffff1f;
  height: 100px;
  top: 25%;
  width: 40px;
  left: 0px;
  box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.15);
}

.OGrnIL {
  vertical-align: middle;
  /* background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMHY3LjdoMi4xVjE0TDcgNS42SDQuMkw3IDAiIGZpbGw9IiNGRkYiLz48L3N2Zz4=); */
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
}

.word-wrap {
  word-wrap: break-word;
}

.fs-21 {
  font-size: 21px;
}

.ps-54 {
  padding-left: 3.4rem;
}

.wishlist-icon {
  position: absolute;
  right: 15px;
  z-index: 10;
  top: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
}

.wishlist-icon-btn {
  border: 0;
  cursor: pointer;

  padding: 0;
}

.wishlist-icon-btn:focus {
  outline: none;
}

.wishlist-icon-btn svg {
  fill: transparent;
}

.wishlist-icon-btn.is-active svg {
  fill: #0d6efd;
  color: #ff4343;
  animation: beat cubic-bezier(0.04, 0.4, 0.5, 0.95) 450ms forwards 1;
}

@keyframes beat {
  30% {
    opacity: 1;
    transform: scale(1.4);
  }

  50% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

#osnvwongqp {
  width: 22px;
  height: 22px;
  background: #a9b6b1;
  /* background: #1bcc87; */
  border-radius: 5px;
  color: #fff;
  display: inline-grid;
  vertical-align: middle;
  text-align: center;
  padding: 4px;
  margin-right: 8px;
  transition: 0.3s ease-in-out;
}

#osnvwongqp:hover {
  color: #6f7573;
  background: #d9e1de;
}

#lkvdsowvneqo {
  width: 22px;
  height: 22px;
  background: #a9b6b1;
  /* background: #f05f5c; */
  border-radius: 5px;
  color: #fff;
  display: inline-grid;
  vertical-align: middle;
  text-align: center;
  padding: 5px;
  transform: rotateY(180deg);
}

#lkvdsowvneqo:hover {
  color: #6f7573;
  background: #d9e1de;
}

.profile-badge {
  font-size: 11px;
  --bs-text-opacity: 1;
  --bs-bg-opacity: 1;
  padding: 2px 7px;
  background-color: rgb(131 132 133);
  color: rgb(255 255 255) !important;
  /* color: var(--headingColor); */
  /* border: 1px solid #dee2e6 !important;  */
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: 0.25rem;
  vertical-align: baseline;
  white-space: nowrap;
}

.profile-badge.parent {
  background-color: var(--mainColor) !important;
}

.profile-badge.nero-diverse {
  background-color: #2e6c70 !important;
}

.profile-badge.professional {
  background-color: rgba(26, 176, 169, 1) !important;
}
.profile-badge.neurodivergent {
  background-color: #c24a74 !important;
}
.profile-badge.pending {
  background-color: #bb2c2c !important;
}
.profile-badge.customer {
  background-color: #25a1a1 !important;
}
.profile-badge.else {
      background-color: #d5e11d !important;;
}
.profile-badge.general {
      background-color: #37bba1 !important;
}
.row-gap-2 {
  gap: 0 !important;
  row-gap: 0.5rem !important;
}

.row-gap-4 {
  row-gap: 1.5rem;
}

.profile-edit-btn {
  padding: 3px 27px;
  font-size: 0.9rem;
  font-weight: 500;
  /* box-shadow: var(--box-shadow); */
  border-radius: 20px;
  /* border: 1px solid var(--borderColor); */
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px;
  transition: all 0.3s ease-in-out;
}

.profile-edit-btn:hover {
  background: aliceblue;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 1px;
}

@media only screen and (max-width: 700px) {
  .dashboard-card .dashboard-card-body {
    padding: 10px;
  }

  .d-my-orders {
    flex-direction: column;
  }

  .d-my-orders .doctor-avatar {
    width: 100%;
    height: auto;
    max-height: 300px;
    margin-right: 0 !important;
  }
}

@media only screen and (max-width: 900px) {
}

.sec-shadow {
  /* box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.09); */
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 6px;
}

.bg-gradient-pink {
  background-image: linear-gradient(to right, #fde3e3 55%, #fff 98%);
}

.border-radius-0 {
  border-radius: 0;
}

.my-story-steps .steps {
  height: 45px;
  width: 45px;
  border-radius: 100%;
  box-shadow: var(--box-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.my-story-steps .steps h1 {
  line-height: normal;
}

.know-your-profile {
  transition: all 0.3s ease-in-out;
  background-color: #fff;
}

.know-your-profile:hover {
  background-color: aliceblue;
}
.delete-my-account {
  transition: all 0.3s ease-in-out;
}

.delete-my-account:hover {
  background-color: #fde3e3;
}

.cart-small-quan .input-text {
  height: 30px !important;
  min-height: 28px;
}

.filepond-input-multiple {
  cursor: pointer;
}

.filepond--credits {
  display: none;
}

/* .coupons-section .new-coupon-cards{
    transition: .3s all ease-in-out;
}
.coupons-section .new-coupon-cards:hover{
    transform: scaleX(1.01);
} */
.letter-spacing-2 {
  letter-spacing: 2px;
}

.coupons-TC {
  position: absolute;
  /* top: 20px; */
  /* display: none; */
  display: none;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 400px;
  padding: 15px;
  right: 15px;
  background: #fff;
  z-index: 10;
}

.coupons-TC.show {
  display: block;
  /* max-height: 300px;  */
  /* padding: 10px; */
}

@media only screen and (max-width: 700px) {
  .coupons-TC {
    width: 260px;
    left: 0;
  }
}

.live-pill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28a745;
  /* green - change as needed */
  display: inline-block;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
}

/* Soft pulsing ring (recommended for "live" indicator) */
.live-pill {
  animation: live-pulse 1.6s infinite ease-out;
}

@keyframes live-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    opacity: 1;
  }

  60% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.2);
    box-shadow: 0 0 0 16px rgba(40, 167, 69, 0);
    opacity: 0;
  }
}

/* Alternative: simple blink on/off */
.live-pill--blink {
  animation: live-blink 1s infinite steps(1);
}

@keyframes live-blink {
  0%,
  50% {
    opacity: 1;
    transform: scale(1);
  }

  51%,
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .live-pill,
  .live-pill--blink {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

.text-main-color-db {
  color: #5ea0c2;
}

.db-carousel-btn {
  padding: 3px 16px;
  width: auto;
  /* min-height: 30px; */
  border: 1px solid rgb(216, 216, 216);
  text-align: center;
  background: rgb(246 246 246 / 60%);
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}
.db-carousel-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 6px;
  background-color: #fff;
}
.btn-disabled {
  opacity: 0.5;
}