/*
Theme Name: Hostingard
Theme URI: https://hostingard.themetags.com/
Author: Themetags
Author URI: https://themetags.com/
Description: Hostingard is a modern and clean WordPress theme suitable for any kind of Domain-Hosting provider and Digital Agency.
Version: 2.2.1
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hostingard
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

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

:root {
  --primary_color: #1062fe;
  --secondary_color: #080f2c;
  --hostim_dark_bg_primary: #0b0b0f;
  --hostim_dark_bg_secondary: #13141d;
  --hostim_dark_text: #fff;
}
/* tab hover color fixed */
.portfolio-nav-tab .nav-link:hover {
  color: #1062fe !important;
}
.pricing_layout_p2 .pricing-nav-pills li a:not(.active):hover {
  color: #1062fe;
}

/*Dark Mode*/
.dark-light-switcher {
  border: 0;
  background: rgba(0, 0, 0, 0);
  color: #fff;
  width: 40px;
  height: 30px;
}

[data-bs-theme="light"] .dark-light-switcher .light-sun {
  display: none;
}
[data-bs-theme="dark"] .dark-light-switcher .dark-moon {
  display: none;
}

.dark-light-switcher span,
.dark-light-switcher i {
  color: var(--hostim_dark_text);
}
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] body {
  background-color: var(--hostim_dark_bg_primary);
}

[data-bs-theme="dark"] .logo-black {
  display: none !important;
}

[data-bs-theme="dark"] .logo-white {
  display: block;
}

[data-bs-theme="dark"] .header-gradient {
  background: linear-gradient(269.94deg, #000000 10.47%, #000000 99.97%);
}

[data-bs-theme="dark"] a,
[data-bs-theme="dark"] a,
[data-bs-theme="dark"] p,
[data-bs-theme="dark"] span,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] li,
[data-bs-theme="dark"] i,
[data-bs-theme="dark"] button {
  color: var(--hostim_dark_text) !important;
}

[data-bs-theme="dark"] .bg-white__,
[data-bs-theme="dark"] .bg-white-color,
[data-bs-theme="dark"] .bg-white {
  background: var(--hostim_dark_bg_primary) !important;
}
[data-bs-theme="dark"] .bg-secondary {
  background: var(--hostim_dark_bg_secondary) !important;
}

[data-bs-theme="dark"] .bd-blog-meta span a,
[data-bs-theme="dark"] .hm2-blog-card-content .bog-author span a,
[data-bs-theme="dark"] .bg-white a,
[data-bs-theme="dark"] .bg-white p,
[data-bs-theme="dark"] .bg-white span,
[data-bs-theme="dark"] .bg-white h1,
[data-bs-theme="dark"] .bg-white h2,
[data-bs-theme="dark"] .bg-white h3,
[data-bs-theme="dark"] .bg-white h4,
[data-bs-theme="dark"] .bg-white h5,
[data-bs-theme="dark"] .bg-white h6,
[data-bs-theme="dark"] .bg-white li,
[data-bs-theme="dark"] .bg-white i {
  color: var(--hostim_dark_text);
}
[data-bs-theme="dark"] .elementor-widget-wp-widget-tag_cloud h5,
[data-bs-theme="dark"] .sidebar-widget .rss-widget-title,
[data-bs-theme="dark"] .sidebar-widget .widget-title,
[data-bs-theme="dark"] .sidebar-widget .wp-block-search .wp-block-search__label,
[data-bs-theme="dark"] .sidebar-widget .wp-block-heading {
  color: var(--hostim_dark_text);
}
[data-bs-theme="dark"] .shadow-sm {
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.3) !important;
}

form.newsletter-form input#elementor-newsletter-form-email_ {
  padding: 1.1rem !important;
}

/* gradient for heading */
.hostingard_heading.heading_gradient_text {
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff0;
}

/* Testimonial 6 style added */
.feedback_10_wrapper {
  padding-block: 50px;
}
.feedback_10_wrapper .swiper-slide {
  opacity: 0.3;
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
  border-radius: 0.75rem;
}
.feedback_10_wrapper .swiper-slide .feedback_10_item {
  border: 1px solid #adb5bd;
}
.feedback_10_wrapper .swiper-slide.swiper-slide-active {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.feedback_10_wrapper .swiper-slide.swiper-slide-active .feedback_10_item {
  border: 0;
  box-shadow: 0px 16px 80px 0px rgba(0, 0, 0, 0.13);
}
.rounded-4__ {
  border-radius: var(--bs-border-radius-xl);
}
.p-6_ {
  padding: 1.5rem;
}
.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-success-rgb),
    var(--bs-border-opacity)
  ) !important;
}

/*Testimonial layout - 6*/
.testimonial_tags a {
  color: #f47421;
  background: #fff3e5;
  border: 1px solid #ff8b00;
}
.testimonial_tags a:nth-child(1),
.testimonial_tags a:nth-child(6) {
  color: #f47421;
  background: #fff3e5;
  border: 1px solid #ff8b00;
}
.testimonial_tags a:nth-child(2),
.testimonial_tags a:nth-child(7) {
  color: #00c27c;
  background: #e5f9f2;
  border: 1px solid #00c27c;
}
.testimonial_tags a:nth-child(3),
.testimonial_tags a:nth-child(8) {
  color: #6772e5;
  background: #f0f1fc;
  border: 1px solid #6772e5;
}
.testimonial_tags a:nth-child(9),
.testimonial_tags a:nth-child(4) {
  color: #2395ec;
  background: #e9f4fd;
  border: 1px solid #2395ec;
}
.testimonial_tags a:nth-child(10),
.testimonial_tags a:nth-child(5) {
  color: #ff4343;
  background: #fff;
  border: 1px solid #ff4343;
}

/*Could hosting hero responsive
* Need to add "cloud_hero" this class in to the Cloud Hosting Hero Elementor Container
*/
@media (min-width: 1367px) {
  .elementor-element.cloud_hero {
    --min-height: 730px !important;
    background-size: 98% auto !important;
  }
}

@media (min-width: 1440px) {
  .elementor-element.cloud_hero {
    --min-height: 750px !important;
    background-size: 98% auto !important;
  }
}

@media (min-width: 1520px) {
  .elementor-element.cloud_hero {
    --min-height: 800px !important;
    background-size: 98% auto !important;
  }
}

@media (min-width: 1600px) {
  .elementor-element.cloud_hero {
    --min-height: 840px !important;
    background-size: 98% auto !important;
  }
}

@media (min-width: 1680px) {
  .elementor-element.cloud_hero {
    --min-height: 890px !important;
    background-size: 98% auto !important;
  }
}

@media (min-width: 1800px) {
  .elementor-element.cloud_hero {
    --min-height: 950px !important;
    background-size: 98% auto !important;
  }
}

/* image animation widget style added */
.brand_slide_logo_wrapper {
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.dark-style-btn {
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  background: rgba(40, 40, 40, 0.1);
  -webkit-box-shadow: 2px 4px 16px 0px rgba(248, 248, 248, 0.06) inset;
  box-shadow: 2px 4px 16px 0px rgba(248, 248, 248, 0.06) inset;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
/*testimonial style added */
.text-white__ {
  color: rgb(255 255 255);
}
.text-white-50__ {
  color: rgb(255 255 255 / 50%);
}
.text-dark__ {
  color: rgb(8 15 44);
}
.btn-dark__ {
  color: #fff;
}
.border__ {
  border: 1px solid #dee2e6;
}
.text-body__ {
  color: rgb(73 73 95);
}

.scroller_wrapper_feedback ul.scroller-y__list {
  list-style: none;
  padding: 0;
}
ul.scroller-y__list {
  gap: 24px;
  display: grid;
}
/* Tab style added  layout 05 -------------*/
.tab_11_pill .nav-link {
  background-color: #110e1b;
  position: relative;
  overflow: hidden;
}
.tab_11_pill .nav-link.active::after,
.tab_11_pill .nav-link:hover::after {
  position: absolute;
  content: "";
  height: 2px;
  width: 100%;
  background-color: #e7fe54;
  left: 0;
  bottom: 0;
}
.bg-dark-11 {
  background: #110e1b !important;
}
.dark-style-btn {
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  background: rgba(40, 40, 40, 0.1);
  -webkit-box-shadow: 2px 4px 16px 0px rgba(248, 248, 248, 0.06) inset;
  box-shadow: 2px 4px 16px 0px rgba(248, 248, 248, 0.06) inset;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
.blog_11_item:hover .btn {
  background-color: #e7fe54;
  color: #080f2c !important;
}

/* testimonials layout-8 style added  */
.scroller_wrapper_feedback {
  position: relative;
  height: 800px; /* Adjust to the height of your testimonials */
  overflow: hidden;
}

.scroller-y__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tab layout 5 style added ============================*/
.nav.tab_11_pill.style_2 .nav-link.active::after,
.nav.tab_11_pill.style_2 .nav-link:hover::after {
  position: absolute;
  content: "";
  height: 40%;
  width: 2px;
  background-color: #e7fe54;
  left: 0;
  top: 0;
}
.nav.tab_11_pill.style_2 .nav-link .cp_content {
  display: none;
}
.nav.tab_11_pill.style_2 .nav-link.active .cp_content {
  display: block;
}

/* service card layout 05 style  ============*/
.card_12_item:hover {
  background-color: #110e1b;
}
.card_12_item:hover .icon_box__ {
  background-color: #e7fe54;
  width: 64px;
}
.card_12_item:hover .icon_box__ svg path {
  fill: #080f2c;
}

/* burger menu color field */
.header-section.header_box .header_wrapper .navbar-1 .show {
  padding: 0px 20px 20px 20px;
}

/* This code for sticky for(Game Hosting 02 page)and this class name is (right_side_sticky_scetion_main_wrapper)---= */
.right_side_sticky_scetion_main_wrapper {
  position: sticky;
  top: 100px;
  height: fit-content;
}

/* ============ This style for tooltip */
.price-card-item-one .pricing_features li i[data-bs-toggle="tooltip"] {
  position: relative;
}
.price-card-item-one .pricing_features li i[data-bs-toggle="tooltip"]:after {
  position: absolute;
  content: attr(data-bs-title);
  width: 130px;
  min-height: 30px;
  background: #000;
  padding: 5px;
  left: -62px;
  bottom: 130%;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  border-radius: 4px;
}
.price-card-item-one
  .pricing_features
  li
  i[data-bs-toggle="tooltip"]:hover:after {
  opacity: 1;
  visibility: visible;
}

/* Testimonial layout 09 style added here-----------------*/
.feedback_13_wrapper {
  margin-right: -840px;
}

/* ======================= Feature layout 02 style added  */
.price_range_item:hover .btn-dark {
  background-color: #ffa42f !important;
}
/* ====================== sticky style added  */
.sticky_style__ {
  position: sticky;
  top: 100px;
  height: fit-content;
}

/* For mobile devices, ensure topbar is visible when top_header_mobile is true */
@media (max-width: 767px) {
  .topbar_off_mobile {
    display: none;
  }
  .topbar_on_mobile {
    display: block;
  }
}


/* ======================= Here is here slider layout 01 style added =======================*/
.hero_14_slider {
  padding-top: clamp(9rem, 11.5vw + 1rem, 13.75rem);
  padding-bottom: clamp(3.75rem, 6.3vw + 5rem, 15.5rem);
  background-image: url("../img/hero_14_bg_1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.swiper_nav_stayle {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.swiper_nav_stayle:hover {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#805af9),
    to(#6632f8)
  );
  background: linear-gradient(90deg, #805af9 0%, #6632f8 100%);
}
.swiper_nav_stayle::after {
  display: none;
}
.slider_navs {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 3;
}
@media (max-width: 575px) {
  .slider_navs {
    bottom: 15px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
.ff-sg {
  font-family: "Space Grotesk", sans-serif;
}
.bg-gd-14 {
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#805af9),
      to(#6632f8)
    );
    background: linear-gradient(90deg, #805af9 0%, #6632f8 100%);
}
/* ================== here is testimonial layout 10 style added =============*/
.style_14 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: inherit;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.10);
}
.testimonial_bg_ {
  box-shadow: 0px 1px 2px 0px rgba(145, 158, 171, 0.16);
}

/* ============== here is card layot 06 style added ================== */
.swiper_nav_stayle {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.blog_14_item.active .content .tag {
  background-color: #ffa42f !important;
}
.blog_14_item.active {
  width: 105%;
}
.blog_14_item {
  min-height: 550px;
  width: 33.3333333333%;
  cursor: pointer;
  -webkit-transition: width 750ms ease-in-out;
  transition: width 750ms ease-in-out;
  -webkit-transition-delay: 250ms;
  transition-delay: 250ms;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.blog_14_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}
.blog_14_item {
  min-height: 550px;
  width: 33.3333333333%;
  cursor: pointer;
  -webkit-transition: width 750ms ease-in-out;
  transition: width 750ms ease-in-out;
  -webkit-transition-delay: 250ms;
  transition-delay: 250ms;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.max-text-28 {
  max-width: 28ch;
}
.blog_14_item.active .content .bottom {
  opacity: 1;
  visibility: visible;
}
.blog_14_item .content {
  position: absolute;
  inset: 0;
}
.blog_14_item img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.fs-28 {
  font-size: 28px;
}
.blog_14_item .content .bottom {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

/* ===================== pricing layout 07 style added ===============*/
.col_tab_nav {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
}
.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}
.col_tab_nav .nav-item .nav-link.active {
  color: #865bff !important;
}
.col_tab_nav .nav-item .nav-link {
  padding: 0;
  position: relative;
  -webkit-padding-start: 20px;
  padding-inline-start: 20px;
}
.price_14_item:hover .btn {
  background: -webkit-gradient(linear, left top, right top, from(#805AF9), to(#6632F8));
  background: linear-gradient(90deg, #805AF9 0%, #6632F8 100%);
  color: #fff !important;
}
.col_tab_nav .nav-item .nav-link.active::after {
  background: #865bff;
}
.col_tab_nav .nav-item .nav-link::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  background: #49495f;
  border-radius: 50%;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}