/* Import the Lato font with weights 400, 600, 700, and 800 */
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;800&display=swap);

/* Classe générale réutilisable pour les headers des générateurs IA */
.ai-header-container {
    background: linear-gradient(20deg, #7ca4fc 26.3%, #5486f2 86.4%);
    border-radius: 20px;
    padding: 30px 25px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-header-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.ai-header-content {
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ai-header-content h1 {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.ai-header-content p {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    margin-bottom: 0;
}

/* Indicateur de balance pour les headers AI */
.ai-header-container .balance-indicator {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 10px 20px;
    color: white;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.2);
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    width: auto;
    margin: 0;
}

/* Forcer le texte et l'icône à être blancs dans le balance-indicator */
.ai-header-container .balance-indicator .text-muted,
.ai-header-container .balance-indicator .text-primary,
.ai-header-container .balance-indicator span,
.ai-header-container .balance-indicator i {
    color: white !important;
}

#create-ai-button {
  position: relative;
  right: 0rem;
  top: 0rem;
}

/* Responsive pour mobile - éviter le chevauchement */
@media (max-width: 768px) {
    .ai-header-container {
        padding: 20px 15px;
        flex-direction: column;
    }
    
    .ai-header-container .balance-indicator {
        position: static;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        font-size: 0.85rem;
        padding: 8px 15px;
    }
    
    .ai-header-content {
        margin-bottom: 0;
    }
    
    .ai-header-content h1 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    
    .ai-header-content p {
        font-size: 0.9rem;
    }
}



/* Class to set text plan font size & color */
.tabs-menu-body .card .plan-title {
  color: #3d3f42;
  font-family: Lato,sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Class to set text color to white */
.text-new {
  color: #fff;
}

.card {
  border-radius: 20px;
}

/* Footer links margin and color */
#welcome-footer #footer a.footer-link {
  margin-right: 10px;
  color: #d9dce1;
  cursor: pointer;
  font-size: 13px;
}

#welcome-footer .footer-icon {
  border-radius: 15px;
  color: #fff;
  cursor: pointer;
  font-size: 28px;
  margin-right: .5rem;
  text-align: center;
  transition: all .3s ease;
  width: 50px;
  background: #7ca4fc;
  padding: 10px;
}

#frontend-local.dropdown {
  display: inline-block;
  margin-right: .5rem;
  vertical-align: middle;
}
#frontend-local a.icon {
  background-color: #F24802;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#frontend-local .header-icon {
  font-size: 28px;
  color: white;
}

/* Subtitle container with block display and centered margin */
#add-subtitle {
  display: block;
  width: auto;
  margin: 0 auto 10px auto;
}

/* Subtitle 1 with negative top and bottom margins */
#subtitle1 {
  margin-top: -5px;
  margin-bottom: -5px;
}

/* Subtitle 2 with negative top and bottom margins */
#subtitle2 {
  margin-top: -5px;
  margin-bottom: -5px;
}

/* Subtitle 3 with negative top and bottom margins */
#subtitle3 {
  margin-top: -5px;
  margin-bottom: -5px;
}

/* Subtitle 4 with negative top and bottom margins */
#subtitle4 {
  margin-top: -5px;
  margin-bottom: -5px;
}

/* Subtitle 5 with negative top and bottom margins */
#subtitle5 {
  margin-top: -5px;
  margin-bottom: -5px;
}

/* Section header styles for h3 elements */
.section-header h3 {
  font-size: 16px;
  margin-bottom: 5px;
  text-align: center;
}

/* Section options header styles for h3 elements */
.section-options-header h3 {
  font-size: 16px;
  margin-bottom: 5px;
  text-align: center;
}

/* Section divider with bottom margin and specific color */
.section-divider {
  margin-bottom: 20px;
  color: #7ca4fc;
}

/* Default style for hr elements without a size attribute */
hr:not([size]) {
  height: 1px;
}

/* Main wrapper with dark background color */
#main-wrapper {
  background-color: #0c0d07;
}

/* TinyMCE content body styling */
.mce-content-body {
  font-size: 16px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 20px;
}

/* Feature description paragraphs with muted color and justified text */
#features-wrapper .features-outer-wrapper .features-inner-wrapper .feature-description p {
  color: #525963;
  text-align: justify;
}

/* Margin and color for margin-right utility classes */
.mr-1, .mx-1 {
  margin-right: 0.25rem !important;
  color: #fff;
  font-size: 1.2em;
}

/* Navigation item with bottom margin */
.nav-item {
  margin-bottom: 5px;
}

/* Button group with flex layout, centered content, gap, and wrapping */
.button-group {
  display: flex;
  justify-content: center;
  gap: 10px; /* Space between buttons */
  flex-wrap: wrap; /* Allows buttons to wrap on smaller screens */
}

/* Links within button group with no bottom margin and flexible width */
.button-group a {
  margin-bottom: 0; /* Removes bottom margin for horizontal alignment */
  max-width: none; /* Allows buttons to adjust to their content */
}

/* Header content styles for h1 elements */
.header-content h1 {
  font-size: 48px;
  color: #FFF;
  font-weight: 900;
  text-shadow: 0px 0px 0px rgb(0, 0, 0);
}

/* Header content styles for h3 elements */
.header-content h3 {
  font-size: 24px;
  color: #7c838d;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Slogan group text color */
.slogan-group {
  color: #7c838d;
}

/* Navbar container with specific width, padding, and centered alignment */
#navbar-container {
  width: 76%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}

/* Step number styling within steps wrapper */
#steps-wrapper .steps-box .step-number-big p {
  color: #7ca4fc6e;
}

/* Main wrapper background with gradient */
#main-wrapper #main-background {
  background-color: #000;
  background-image: linear-gradient(120deg, rgba(103, 179, 217, 0) 0%, rgba(175, 0, 255, 0) 100%);
}

/* Navbar links within main wrapper */
#main-wrapper .navbar-nav li.nav-item a.nav-link {
  padding: 0px 15px;
  color: #FFF;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 16px;
}

/* Navbar styles within main wrapper */
#main-wrapper .navbar {
  background: #000000c2;
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 50px;
  z-index: 100;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 800;
  transition: all ease-in 0.2s;
  border-radius: 20px;
}

/* Hover and focus states for navbar links */
#main-wrapper .navbar-nav li.nav-item a.nav-link:hover,
#main-wrapper .navbar-nav li.nav-item a.nav-link:focus {
  color: #9ebdfd;
}

/* Minimized navbar styles */
#main-wrapper .minimize-navbar {
  line-height: 60px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

/* Active navbar link color override */
#main-wrapper .navbar-nav li.nav-item a.active {
  color: #9ebdfd !important;
}

/* Dark color utility class */
#main-wrapper .dark-color {
  color: #fff !important;
}

/* Text container styles for h6 elements */
#main-wrapper .text-container h6 {
  font-weight: 900;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.34);
  color: #0c0d07;
  font-size: 26px;
}

/* Text container styles for h1 elements */
#main-wrapper .text-container h1 {
  color: #FFF;
  line-height: 1em;
  margin: 0;
  font-weight: 800;
  font-size: 70px;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6);
}

/* Register and dashboard buttons with specific background color */
#main-wrapper .register-button,
#main-wrapper .dashboard-button {
  background: #F24802 !important;
}

/* Main register button styles */
#main-wrapper #mainRegisterButton {
  display: inline-flex;
  background: #F24802;
  border: none !important;
}

/* Wrapper for animated header words */
.ah-words-wrapper {
  position: relative;
  text-align: center;
}

/* App header with fixed positioning and shadow */
.app-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  display: flex;
  z-index: 999;
  padding-right: 15px;
  padding: 0.75rem 0;
  padding-top: 0.75rem;
  padding-right: 0px;
  padding-bottom: 0.75rem;
  box-shadow: 0px 6px 6px 2px rgba(0, 0, 0, 0.4),
              0 0px 0px 2px rgba(0, 0, 0, 0);
  border-radius: 20px;
}

/* Primary frontend button styles */
.btn-primary-frontend {
  font-size: 16px;
  width: 290px;
  height: 50px;
  line-height: 48px;
  font-weight: 600;
  border-radius: 50vh;
  color: #fff !important;
  background-image: linear-gradient(#7CA4FC, rgba(0, 123, 255, 0.56));
  border-top: 1px solid rgba(255, 255, 255, 0.44);
  box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2),
              0 2px 1px -1px rgba(50, 50, 50, 0.12),
              0 1px 1px 0 rgba(50, 50, 50, 0.14);
  z-index: 10;
}

/* Header background styling */
.header {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background: #0c0d07;
}

/* Sidebar styles with fixed positioning and shadow */
.app-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  margin-top: 0px;
  width: 250px;
  max-height: 100%;
  z-index: 1000;
  background: #0c0d07 !important;
  transition: left 0.3s ease, width 0.3s ease;
  box-shadow: 6px 0px 6px 2px rgba(0, 0, 0, 0.40),
              0 0px 0px 2px rgba(0, 0, 0, 0);
  border-radius: 20px;
}

/* Sidebar logo styling */
.app-sidebar__logo {
  padding: 13px 15px;
  height: 74px;
  text-align: center;
  width: 250px;
  z-index: 999999;
  position: fixed;
  transition: left 0.3s ease, width 0.3s ease;
  background: #0c0d07;
  border-radius: 20px;
}

/* Icon color within side menu */
.side-menu__icon {
  color: #7ca4fc;
}

/* Side menu item styles */
.side-menu__item {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: #fff;
}
.side-menu__item.active {
    color: #fff;
    background: #1a1c0f;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    animation: activeConversationPulse 2s infinite;
}
.side-menu__item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(90, 130, 212, 0.67), transparent);
    transform: skewX(-25deg);
    animation: activeShine 4s infinite linear;
}

.side-menu__label {
	white-space: nowrap;
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 400;
	transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.side-menu__item.active .side-menu__icon {
	color: #fff !important;
}

/* Active side menu icon color override */
.side-menu__item.active .side-menu__icon {
  color: #0c0d07;
}

/* Apply Lato font to all elements within the body */
body * {
  font-family: "Lato", sans-serif;
}

/* Slide item styling with flex alignment and padding */
.slide-item {
  display: flex;
  align-items: center;
  padding: 8px 14px 8px 55px;
  font-size: 12px;
  color: #fff;
}

/* Header icon styling within nav links */
.nav-link.icon .header-icon {
  font-size: 17px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  padding: 11px 10px 10px;
}

/* Side menu padding and border */
.side-menu {
  margin-bottom: 0;
  padding-bottom: 40px;
  margin-top: 74px;
  border-top: 1px solid #0c0d07;
}

/* Side menu category item styling */
.app-sidebar .side-item.side-item-category {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 0 20px 0 21px;
}

/* Usage icon styling */
.usage-icon i {
  font-size: 30px;
  padding-top: 1rem;
  color: #7ca4fc;
}

/* Sidebar toggle button icon styling */
.app-sidebar__toggle .header-icon {
  font-size: 17px;
  text-align: center;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  background: #0c0d07;
  padding-top: 7px !important;
}

/* Active side menu item hover and focus angle icon color */
.side-menu__item.active:hover .angle,
.side-menu__item.active:focus .angle {
  color: #7ca4fc;
}

/* Side menu icon color on hover and focus */
.side-menu__item:hover .side-menu__icon,
.side-menu__item:focus .side-menu__icon {
  color: #fff;
}

/* Side menu item hover and focus styles */
.side-menu__item:hover,
.side-menu__item:focus {
  text-decoration: none;
  background: #7ca4fc;
  color: #fff;
  border-left: 3px solid #007BFF;
  transition: border-left 0s ease-in-out, color 0s ease;
  border-radius: 10px;
}

/* Sidebar minimized state label styling */
.sidebar-mini.sidenav-toggled.sidenav-toggled1 .app-sidebar .side-menu__label {
  white-space: nowrap;
  flex: 1 1 auto;
  position: unset;
  display: inline-block;
  font-size: 12px;
  color: #fff;
  flex: 1 1 auto;
}

/* Text color utility class for dark text */
.text-dark {
  color: #7ca4fc !important;
}  

/* Font size utility class */
.fs-11 {
  font-size: 14px;
}

/* Input box label styling */
.input-box h6 {
  font-family: "Lato", sans-serif;
  margin-bottom: 0.6rem;
  font-weight: 600;
  font-size: 14px;
}

/* Font size utility class */
.fs-12 {
  font-size: 14px;
}

/* Navigation tabs within templates with styling */
.templates-nav-menu .nav-tabs .nav-link {
  font-size: 14px;
  margin-right: 0.7rem;
  min-width: 80px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 35px;
  color: #0c0d07;
  border: none;
  font-weight: 600;
  margin-bottom: 0 !important;
}

/* Active navigation tab styling */
.templates-nav-menu .nav-tabs .active {
  background-color: #7ca4fc;
  color: #FFF;
  border-color: #1e1e2d;
  box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2),
              0 2px 1px -1px rgba(50, 50, 50, 0.12),
              0 1px 1px 0 rgba(50, 50, 50, 0.14);
}

/* Hover and focus states for navigation tabs */
.templates-nav-menu .nav-tabs .nav-link:hover,
.templates-nav-menu .nav-tabs .nav-link:focus {
  background-color: #7ca4fc;
  color: #FFF;
  border-color: #1e1e2d;
  box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2),
              0 2px 1px -1px rgba(50, 50, 50, 0.12),
              0 1px 1px 0 rgba(50, 50, 50, 0.14);
}

/* Override navigation tab link colors */
.templates-nav-menu .nav-tabs .nav-link {
  font-size: 14px;
  margin-right: 0.7rem;
  min-width: 80px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 35px;
  color: #fff;
  border: none;
  font-weight: 600;
  margin-bottom: 0 !important;
}

/* Inner container for template navigation menu */
.templates-nav-menu .template-nav-menu-inner {
  padding: 10px;
  background-color: #0c0d07;
  border-radius: 50vh;
}

/* Search template input styling */
.search-template .input-box .form-control {
  height: 48px;
  line-height: 48px;
  padding: 0 20px;
  background-color: #FFF !important;
  border-radius: 50vh;
  border-color: #7ca4fc;
}

/* Action buttons within tables */
.table-action-buttons {
  background: #7ca4fc;
  color: #171616;
}

/* General input box form control styling */
.input-box .form-control {
  font-family: "Lato", sans-serif;
  font-size: 12px;
  color: #1e1e2d;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  appearance: none;
  background-color: #f5f9fc;
  border-color: transparent;
  border-radius: 0.5rem;
  border-width: 2px;
  font-weight: 400;
  line-height: 1rem;
  padding: 0.75rem 1rem;
  width: 100%;
}

/* Front face background styling for custom select */
.awselect .front_face > .bg {
  background: #7ca4fc4f !important;
  color: #1e1e2d;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

/* Star icon within template links */
.template a i.star {
  font-size: 18px;
  padding-top: 7px;
  color: #FF9D00;
}

/* Blog icon styling within templates */
.template .template-icon i.blog-icon,
.template-view .template-icon i.blog-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #7ca4fc;
  border-radius: 45px;
}

/* Main icon styling within templates */
.template .template-icon i.main-icon,
.template-view .template-icon i.main-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #FF9D00;
  border-radius: 45px;
}

/* Email icon styling within templates */
.template .template-icon i.email-icon,
.template-view .template-icon i.email-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #FF717F;
  border-radius: 45px;
}

/* E-commerce icon styling within templates */
.template-icon i.ecommerce-icon {
  background: #0c0d07;
  color: #FFED58;
  font-size: 20px;
  padding: 13px;
  border-radius: 45px;
}

/* Framework icon styling within templates */
.template-icon i.framework-icon {
  background: #0c0d07;
  color: #f284e1;
  font-size: 20px;
  padding: 13px;
  border-radius: 45px;
}

/* Marketing and ad icon styling within templates */
.template-icon i.marketing-icon,
.template-icon i.ad-icon {
  background: #0c0d07;
  color: #f284e1;
  font-size: 20px;
  padding: 13px;
  border-radius: 45px;
}

/* Social icon styling within templates */
.template .template-icon i.social-icon,
.template-view .template-icon i.social-icon {
  font-size: 20px;
  padding: 13px;
  background: rgb(49, 51, 56);
  color: rgb(81, 56, 238);
  border-radius: 45px;
}

/* Video icon styling within templates */
.template .template-icon i.video-icon,
.template-view .template-icon i.video-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #f3002e;
  border-radius: 45px;
}

/* Web icon styling within templates */
.template .template-icon i.web-icon,
.template-view .template-icon i.web-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #00bc7e;
  border-radius: 45px;
}

/* Other icon styling within templates */
.template .template-icon i.other-icon,
.template-view .template-icon i.other-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #f5f9fc;
  border-radius: 45px;
}

/* YouTube video overlay container */
.youtube-video-overlay {
  position: absolute; /* Or 'fixed' depending on requirement */
  top: 110%; /* Adjust this value to position vertically */
  left: 0;
  right: 0;
  z-index: 10; /* Ensure it is above other elements */
  pointer-events: none; /* Disable mouse interactions with the video to allow clicks below */
  background: none; /* No background for the container */
}

/* YouTube video iframe styling within overlay */
.youtube-video-overlay iframe {
  width: 720px; /* Width of the viewport or less */
  height: 450px; /* Desired height */
  pointer-events: auto; /* Re-enable interactions for the video */
  display: block; /* Prevent default margins */
  margin: 0 auto; /* Center horizontally if less than 100% width */
  transform: translateY(0%); /* Adjust vertical position */
  border-radius: 15px;
}

/* New side menu item styling */
.side-menu__new {
  background: #000;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Welcome footer with gradient background */
#welcome-footer {
  background-image: linear-gradient(120deg, rgba(103, 179, 217, 0) 0%, rgba(175, 0, 255, 0) 100%);
  position: relative;
  background-color: #000;
}

/* Footer heading styling */
#welcome-footer #footer h1 {
  font-size: 48px;
  color: #FFF;
  font-weight: 900;
  text-shadow: 0px 0px 0px rgb(0, 0, 0);
}

/* Copyright section styling */
#welcome-footer #copyright {
  min-height: 112px;
  border-top: 1px solid #7ca4fc;
  padding-top: 3rem;
}

/* Login background styling */
#login-background .login-bg {
  background: linear-gradient(230deg, #181a10, #171910);
  background-size: 300% 300%;
  -webkit-animation: login-gradient 30s ease infinite;
  animation: login-gradient 30s ease infinite;
  height: 100vh;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 23px 0 0 23px; /* Top-left and bottom-left corners */
}


/* Responsive navbar container width on small screens */
@media (max-width: 768px) {
  #navbar-container {
    width: 94%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Responsive navbar collapse background and padding on small screens */
@media (max-width: 768px) {
  .frontend-body .navbar-collapse {
    background: #030609;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}

/* Navbar link color override on small screens */
@media (max-width: 768px) {
  .frontend-body .navbar-nav li.nav-item a.nav-link {
    color: #fff !important;
  }
}

/* Sidebar and header adjustments on larger screens */
@media (min-width: 768px) {
  .app-header {
    padding-right: 20px;
    padding-left: 20px;
    margin-left: 280px;
    margin-right: auto;
    border-radius: 20px;
    max-width: calc(100% - 310px); 
  }
}

/* Navbar link adjustments on small screens */
@media (max-width: 768px) {
  #main-wrapper .navbar-nav li.nav-item a.nav-link {
    padding: 0px 15px;
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    margin-bottom: -40px;
  }
}

/* Sidebar minimized state adjustments on larger screens */
@media (min-width: 768px) {
  .sidebar-mini.sidenav-toggled .app-header {
    padding-left: 0px;
    width: 85%;
    margin-left: 10%;
  }
}

/* Additional sidebar minimized state adjustments on larger screens */
@media (min-width: 768px) {
  .sidebar-mini.sidenav-toggled .app-header {
    padding-left: 0px;
    width: 85%;
    margin-left: 10%;
  }
}

/* Responsive adjustments for main wrapper and text sizes on small screens */
@media (max-width: 768px) {
  /* Correct background property */
  #main-wrapper {
    background-color: #0c0d07; 
  }
  
  /* Reduce notification text size within slogan group */
  .slogan-group .notification {
    font-size: 14px; /* Reduced size on mobile */
  }

  /* Reduce header h1 text size on mobile */
  .header-content h1 {
    font-size: 26px; /* Reduced size on mobile */
  }

  /* Reduce header h3 text size on mobile */
  .header-content h3 {
    font-size: 16px; /* Reduced size on mobile */
  }
  
  /* Adjust button group layout on mobile */
  .button-group {
    flex-direction: column;
    gap: 0; /* Remove gap */
    align-items: center;
  }

  /* Adjust button widths and margins on mobile */
  .button-group a {
    width: 50%;
    margin-bottom: -10px; /* Use only margin for spacing */
  }
}
 
/* Chat system styling */
#chat-system {
  font-size: 14px;
  align-items: center;
}

/* Features navigation menu link styling */
#features-wrapper .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link {
  margin-bottom: 0;
  border: 1px solid #dbe2eb;
  border-radius: 10px;
  color: #fff;
  padding: 1.5rem 0.5rem;
  width: 170px;
  transition: all 0.5s ease;
  background: #7CA4FC;
}

/* Active features navigation menu link styling */
#features-wrapper .features-nav-menu .features-nav-menu-inner .nav-tabs .nav-link.active {
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
  border: none;
  color: #fff;
  background: #0c0d07;
  font-weight: 600;
}

/* Sharp sparkle icon color */
.fa-sharp.fa-solid.fa-sparkles.mr-1 {
  color: #ffd900;
}

/* Text container paragraph styling within main wrapper */
#main-wrapper .text-container p {
  font-family: "Lato", sans-serif;
  color: #0c0d07;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.34);
}

/* Visible text within text container */
#main-wrapper .text-container .is-visible {
  color: #0c0d07; 
}

/* Profile dropdown image styling */
.profile-dropdown img {
  width: 50px;
  height: 50px;
  border: 1px solid #7ca4fc;
  border-radius: 50%;
  box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2),
              0 2px 1px -1px rgba(50, 50, 50, 0.12),
              0 1px 1px 0 rgba(50, 50, 50, 0.14);
  margin-top: -3px;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Header locale text styling */
.header-locale .header-text {
  vertical-align: text-bottom;
  color: #fff;
  font-weight: 600;
}

/* Secondary button styling */
.btn-secondary {
  color: #fff !important;
  background-color: #bc44af;
  border-color: #bc44af;
  top: 22px;
  position: absolute;
  right: 18%;
  border-radius: 20%;
}

/* Secondary button hover state */
.btn-secondary:hover {
  background-color: #98b9ff;
  border-color: #98b9ff;
}

/* Secondary button focus state */
.btn-secondary:focus,
.btn-secondary.focus {
  box-shadow: 0 0 0 2px rgba(251, 28, 82, 0.1);
  background-color: #98b9ff;
  border-color: #98b9ff;
}

/* Disabled secondary button styling */
.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: #f83e6b;
  border-color: #f83e6b;
}

/* Active and pressed states for secondary buttons */
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: #98b9ff;
  border-color: #98b9ff;
}

/* Minimized navbar icon color */
#main-wrapper .minimize-navbar .icon span {
  color: #fff;
}

/* Text container paragraph styling with white color */
#main-wrapper .text-container p {
  font-family: "Lato", sans-serif;
  color: #fff;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.34);
}

/* Steps box height within steps wrapper */
#steps-wrapper .steps-box {
  height: 210px;
}

/* Steps wrapper background and padding */
#steps-wrapper {
  background: #FFF;
  padding-bottom: 6rem;
}

/* Features wrapper background settings */
#features-wrapper {
  background: #fff;
  background-repeat: repeat;
  background-image: none;
  background-size: auto;
  padding: 0 0 0px 0;
  background-repeat: no-repeat;
  background-size: auto;
  background-image: url(/img/frontend/backgrounds/pattern.svg);
}

/* Reviewer portrait styling within review cards */
.review-card-scroll .hori-between-div .horizontal-div .reviewer-portrait {
  padding: 3px;
  border: 1px solid rgb(0, 123, 255);
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* Smaller primary frontend button styling */
.btn-primary-frontend-small {
  font-size: 14px;
  width: 260px;
  height: 45px;
  line-height: 40px;
  font-weight: 600;
  border-radius: 50vh;
  color: #fff !important;
  background: #f24802;
  border-top: 1px solid rgba(255, 255, 255, 0.44);
  box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2),
              0 2px 1px -1px rgba(50, 50, 50, 0.12),
              0 1px 1px 0 rgba(50, 50, 50, 0.14);
  z-index: 10;
}

/* Template navigation menu inner container styling */
#templates-wrapper .template-nav-menu-inner {
  background-color: #0c0d07;
  box-shadow: 0px 0px 9px 0px rgba(100, 100, 100, 0.1);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: 1200px;
  margin: 0 auto;
}

/* Responsive title size within rows on small screens */
@media (max-width: 768px) {
  .row .title h3 {
    font-size: 26px;
  }
}

/* Navbar toggler styles for light theme */
.navbar-light .navbar-toggler {
  color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  background: #fff;
}

/* General navbar toggler styling */
.navbar-toggler {
  padding: 0.25rem 0.55rem;
  font-size: 1rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
  margin-right: 1rem;
}

/* Gateway label styling within checkout wrapper */
.checkout-wrapper-box label.gateway {
  margin-bottom: 2rem;
  width: 115px;
  height: 40px;
  box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2),
              0 2px 1px -1px rgba(50, 50, 50, 0.12),
              0 1px 1px 0 rgba(50, 50, 50, 0.14);
}

/* Wizard navigation inner container styling */
.wizard-nav .wizard-nav-inner {
  background-color: #0c0d07;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 10px;
  border-radius: 50vh;
}

/* Wizard step title text styling */
.wizard-nav .wizard-nav-inner .wizard-nav-text .wizard-step-title {
  line-height: 1.4;
  color: white;
}

/* Current step styling in wizard navigation */
.wizard-nav .wizard-nav-inner .current-step {
  background: #7ca4fc;
  color: #FFF;
}

/* Step styling in wizard navigation */
.wizard-nav .wizard-nav-inner .step {
  background: #FFFFFF;
  color: #000;
}

/* Wizard step title number color override */
.wizard-step-title-number {
  color: #fff !important;
}

/* Wizard results wrapper margin */
#wizard-results-wrapper {
  margin-left: 0rem;
}

/* Select form control styling */
select.form-select {
  font-size: 12px;
  background-color: #7ca4fc4f;
  color: #000;
  font-family: "Poppins", sans-serif;
  line-height: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border-color: transparent;
  background-size: 10px 10px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%233b3b3b' d='M2 0 0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
}

/* Input box form control styling with specific background color */
.input-box .form-control {
  font-family: "Lato", sans-serif;
  font-size: 12px;
  color: #1e1e2d;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  appearance: none;
  background-color: #7ca4fc4f;
  border-color: transparent;
  border-radius: 0.5rem;
  border-width: 2px;
  font-weight: 400;
  line-height: 1rem;
  padding: 0.75rem 1rem;
  width: 100%;
}

/* Star icon within template links */
.template a i.star {
  font-size: 18px;
  padding-top: 7px;
  color: #FF9D00;
}

/* Blog icon within template views */
.template .template-icon i.blog-icon,
.template-view .template-icon i.blog-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #7ca4fc;
  border-radius: 45px;
}

/* Main icon within template views */
.template .template-icon i.main-icon,
.template-view .template-icon i.main-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #FF9D00;
  border-radius: 45px;
}

/* Email icon within template views */
.template .template-icon i.email-icon,
.template-view .template-icon i.email-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #FF717F;
  border-radius: 45px;
}

/* E-commerce icon within templates */
.template-icon i.ecommerce-icon {
  background: #0c0d07;
  color: #FFED58;
  font-size: 20px;
  padding: 13px;
  border-radius: 45px;
}

/* Framework icon within templates */
.template-icon i.framework-icon {
  background: #0c0d07;
  color: #f284e1;
  font-size: 20px;
  padding: 13px;
  border-radius: 45px;
}

/* Marketing and ad icons within templates */
.template-icon i.marketing-icon,
.template-icon i.ad-icon {
  background: #0c0d07;
  color: #f284e1;
  font-size: 20px;
  padding: 13px;
  border-radius: 45px;
}

/* Social icon within templates */
.template .template-icon i.social-icon,
.template-view .template-icon i.social-icon {
  font-size: 20px;
  padding: 13px;
  background: rgb(49, 51, 56);
  color: rgb(81, 56, 238);
  border-radius: 45px;
}

/* Video icon within templates */
.template .template-icon i.video-icon,
.template-view .template-icon i.video-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #f3002e;
  border-radius: 45px;
}

/* Web icon within templates */
.template .template-icon i.web-icon,
.template-view .template-icon i.web-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #00bc7e;
  border-radius: 45px;
}

/* Other icon within templates */
.template .template-icon i.other-icon,
.template-view .template-icon i.other-icon {
  font-size: 20px;
  padding: 13px;
  background: #0c0d07;
  color: #f5f9fc;
  border-radius: 45px;
}

/* New button within templates with absolute positioning */
.template .btn-new {
  line-height: 1;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 35px;
  color: #fff !important;
  background-color: #FEA419;
  border-color: #FEA419;
  box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2),
              0 2px 1px -1px rgba(50, 50, 50, 0.12),
              0 1px 1px 0 rgba(50, 50, 50, 0.14);
  position: absolute;
  right: 55px;
  top: 35px;
  z-index: 10;
}

.template-title {
  font-weight: 700;
}

.info-orange {
    color: #F24802B2;
}



/* YouTube video overlay container */
.youtube-video-overlay {
  position: absolute; /* Or 'fixed' depending on the need */
  top: 110%; /* Adjust this value to position vertically */
  left: 0;
  right: 0;
  z-index: 10; /* Ensure it's above other elements */
  pointer-events: none; /* Disable mouse interactions with the video to allow clicks underneath */
  background: none; /* No background for the container */
}

/* YouTube video iframe within the overlay */
.youtube-video-overlay iframe {
  width: 720px; /* Width of the viewport or less */
  height: 450px; /* Desired height */
  pointer-events: auto; /* Re-enable interactions for the video */
  display: block; /* Prevent default margins */
  margin: 0 auto; /* Center horizontally if less than 100% width */
  transform: translateY(0%); /* Adjust vertical position */
  border-radius: 15px;
}

/* New side menu item with black background and padding */
.side-menu__new {
  background: #000;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* New side menu item with orange and padding */
.side-menu__popular {
  background: #dfa700;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.text-primary-popular {
  color: #ffffff !important;
}

/* New side menu item with orange and padding */
.side-menu__free {
  background: #1da409;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.text-primary-free {
  color: #ffffff !important;
}

/* Footer heading styling */
#welcome-footer #footer h1 {
  font-size: 48px;
  color: #FFF;
  font-weight: 900;
  text-shadow: 0px 0px 0px rgb(0, 0, 0);
}

/* Copyright section styling */
#welcome-footer #copyright {
  min-height: 112px;
  border-top: 1px solid #7ca4fc;
  padding-top: 3rem;
}

/* ================================================
   Styles for Category Tabs
   ================================================ */

/* Centering and layout for the category tabs container */
#categoryTabs {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-bottom: 1.5rem;
}

/* Spacing between individual tab items */
#categoryTabs .nav-item {
    margin: 0 0.5rem;
}

/* Styling for the tab links */
#categoryTabs .nav-link {
  background-color: #0c0d07;
  color: #fff;
  border: none;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8rem;
}

/* Styling for the active tab */
#categoryTabs .nav-link.active {
    background-color: #7ca4fc;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Hover effect for the tabs */
#categoryTabs .nav-link:hover {
    background-color: #555;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Remove the default bottom border for Bootstrap tabs */
#categoryTabs .nav-tabs {
    border-bottom: none;
}

.custom-span {
  background: hsla(0, 0%, 100%, 0.41);
  border-radius: 9px;
  padding: 3px 10px;
  text-transform: uppercase;
}

.rounded-circle {
  background: #0c0d07;
}

.widget-user-image {
  border-radius: 22px;
}

/* ================================================
   End of Styles for Category Tabs
   ================================================ */

/* Responsive navbar container width on small screens */
@media (max-width: 768px) {
  #navbar-container {
    width: 94%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Responsive navbar collapse background and padding on small screens */
@media (max-width: 768px) {
  .frontend-body .navbar-collapse {
    background: #030609;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}

/* Navbar link color override on small screens */
@media (max-width: 768px) {
  .frontend-body .navbar-nav li.nav-item a.nav-link {
    color: #fff !important;
  }
}

/* Sidebar and header adjustments on larger screens */
@media (min-width: 768px) {
  .app-header {
    padding-right: 20px;
    padding-left: 20px;
    margin-left: 280px;
    margin-right: auto;
    border-radius: 20px;
    max-width: calc(100% - 310px); 
  }
}

/* Navbar link adjustments on small screens */
@media (max-width: 768px) {
  #main-wrapper .navbar-nav li.nav-item a.nav-link {
    padding: 0px 15px;
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    margin-bottom: -40px;
  }
}

/* Sidebar minimized state adjustments on larger screens */
@media (min-width: 768px) {
  .sidebar-mini.sidenav-toggled .app-header {
    padding-left: 0px;
    width: 85%;
    margin-left: 10%;
  }
}

/* Duplicate sidebar minimized state adjustments on larger screens */
@media (min-width: 768px) {
  .sidebar-mini.sidenav-toggled .app-header {
    padding-left: 0px;
    width: 85%;
    margin-left: 10%;
  }
}

/* Responsive adjustments for main wrapper and text sizes on small screens */
@media (max-width: 768px) {
  /* Correct background property */
  #main-wrapper {
    background-color: #0c0d07; 
  }
  
  /* Reduce notification text size within slogan group */
  .slogan-group .notification {
    font-size: 14px; /* Reduced size on mobile */
  }

  /* Reduce header h1 text size on mobile */
  .header-content h1 {
    font-size: 26px; /* Reduced size on mobile */
  }

  /* Reduce header h3 text size on mobile */
  .header-content h3 {
    font-size: 16px; /* Reduced size on mobile */
  }
  
  /* Adjust button group layout on mobile */
  .button-group {
    flex-direction: column;
    gap: 0; /* Remove gap */
    align-items: center;
  }

  /* Adjust button widths and margins on mobile */
  .button-group a {
    width: 50%;
    margin-bottom: -10px; /* Use only margin for spacing */
  }
}

/* Animations for active item */
@keyframes activeConversationPulse {
    0% { box-shadow: 0 0 0 0 rgba(90, 130, 212, 0.3); }
    70% { box-shadow: 0 0 10px 5px rgba(90, 130, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(90, 130, 212, 0); }
}
@keyframes activeShine {
    from { left: -100%; }
    to { left: 100%; }
}

/* Styles pour le modal Smart Editor */
.smart-editor-help-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.smart-editor-help-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.smart-editor-modal-content {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: none;
}

.smart-editor-modal-header {
    border: none;
    padding: 2rem 2rem 1rem;
    background: linear-gradient(135deg, #7ca4fc 0%, #5486f2 100%);
    border-radius: 20px 20px 0 0;
}

.smart-editor-modal-title {
    font-weight: 700;
    font-size: 1.25rem;
}

.smart-editor-modal-body {
    padding: 2rem;
}

.smart-editor-help-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #7ca4fc 0%, #5486f2 100%);
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(124, 164, 252, 0.3);
}

.smart-editor-feature-item {
    background: #f8f9ff;
    border-left: 4px solid #7ca4fc;
}

.smart-editor-tip-alert {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-left: 4px solid #f39c12 !important;
    border: 0;
    border-radius: 0.5rem;
}

.smart-editor-modal-footer {
    border: none;
    padding: 1rem 2rem 2rem;
}

.smart-editor-close-btn {
    background: linear-gradient(135deg, #7ca4fc 0%, #5486f2 100%);
    border: none;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(124, 164, 252, 0.3);
}