/* Import Outfit font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Apply Outfit font to all elements */
body, 
h1, h2, h3, h4, h5, h6,
p, span, a, label, button,
.form-label, .form-check-label,
.card-title, .footer-head,
.navigation-menu .sub-menu-item,
.btn, .text-foot,
.form-control,
.form-control::placeholder {
    font-family: 'Outfit', sans-serif !important;
}

/* Set letter-spacing to 0 for all elements */
* {
    letter-spacing: 0 !important;
}

/* Custom CSS for The Shoutify */

/* Make all font weights normal */
body, 
h1, h2, h3, h4, h5, h6,
p, span, a, label, button,
.form-label, .form-check-label,
.card-title, .footer-head,
.navigation-menu .sub-menu-item,
.btn, .text-foot {
    font-weight: normal !important;
}

/* Override any other font-weight declarations */
* {
    font-weight: normal !important;
}

/* Specific overrides for elements that might need different weights */
.btn-primary,
.btn-soft-primary,
.btn-pills {
    font-weight: normal !important;
}

/* Navigation menu items */
.navigation-menu > li > a {
    font-weight: normal !important;
}

/* Footer links */
.footer-list li a {
    font-weight: normal !important;
}

/* Form elements */
.form-control::placeholder {
    font-weight: normal !important;
}

/* Card titles and headings */
.card-title,
h4.card-title {
    font-weight: normal !important;
}

/* Newsletter section */
.foot-subscribe label {
    font-weight: normal !important;
}

/* Copyright text */
.footer-bar p {
    font-weight: normal !important;
}

/* Override form label font weight */
.form-check-label, 
.form-label {
    font-weight: normal !important;
    font-size: 14px;
}

/* Floating label styles */
.form-floating > label {
    font-weight: normal !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    font-weight: normal !important;
}

/* Cases page specific styles */
.cases-page .navigation-menu > li > a,
.testimonials-page .navigation-menu > li > a,
.pricing-page .navigation-menu > li > a,
.blogs-page .navigation-menu > li > a,
.blog-detail-page .navigation-menu > li > a,
.contact-page .navigation-menu > li > a {
    color: #fff !important;
}

.cases-page .navigation-menu > li > a:hover,
.cases-page .navigation-menu > li > a:active,
.testimonials-page .navigation-menu > li > a:hover,
.testimonials-page .navigation-menu > li > a:active,
.pricing-page .navigation-menu > li > a:hover,
.pricing-page .navigation-menu > li > a:active,
.blogs-page .navigation-menu > li > a:hover,
.blogs-page .navigation-menu > li > a:active,
.blog-detail-page .navigation-menu > li > a:hover,
.blog-detail-page .navigation-menu > li > a:active,
.contact-page .navigation-menu > li > a:hover,
.contact-page .navigation-menu > li > a:active {
    color: #fff !important;
}

.cases-page .navigation-menu > li > a .sub-menu-arrow,
.testimonials-page .navigation-menu > li > a .sub-menu-arrow,
.pricing-page .navigation-menu > li > a .sub-menu-arrow,
.blogs-page .navigation-menu > li > a .sub-menu-arrow,
.blog-detail-page .navigation-menu > li > a .sub-menu-arrow,
.contact-page .navigation-menu > li > a .sub-menu-arrow {
    border-color: #fff !important;
}

.cases-page .navigation-menu > li > a:hover .sub-menu-arrow,
.testimonials-page .navigation-menu > li > a:hover .sub-menu-arrow,
.pricing-page .navigation-menu > li > a:hover .sub-menu-arrow,
.blogs-page .navigation-menu > li > a:hover .sub-menu-arrow,
.blog-detail-page .navigation-menu > li > a:hover .sub-menu-arrow,
.contact-page .navigation-menu > li > a:hover .sub-menu-arrow {
    border-color: #fff !important;
}

.cases-page .navigation-menu > li > a.active,
.testimonials-page .navigation-menu > li > a.active,
.pricing-page .navigation-menu > li > a.active,
.blogs-page .navigation-menu > li > a.active,
.blog-detail-page .navigation-menu > li > a.active,
.contact-page .navigation-menu > li > a.active {
    color: #16a34a !important;
}

/* When scrolled, revert to default colors */
.cases-page.nav-sticky .navigation-menu > li > a,
.testimonials-page.nav-sticky .navigation-menu > li > a,
.pricing-page.nav-sticky .navigation-menu > li > a,
.blogs-page.nav-sticky .navigation-menu > li > a,
.blog-detail-page.nav-sticky .navigation-menu > li > a,
.contact-page.nav-sticky .navigation-menu > li > a {
    color: #3c4858 !important;
}

.cases-page.nav-sticky .navigation-menu > li > a:hover,
.cases-page.nav-sticky .navigation-menu > li > a:active,
.testimonials-page.nav-sticky .navigation-menu > li > a:hover,
.testimonials-page.nav-sticky .navigation-menu > li > a:active,
.pricing-page.nav-sticky .navigation-menu > li > a:hover,
.pricing-page.nav-sticky .navigation-menu > li > a:active,
.blogs-page.nav-sticky .navigation-menu > li > a:hover,
.cases-page.nav-sticky .navigation-menu > li > a:active {
    color: #16a34a !important;
}

.cases-page.nav-sticky .navigation-menu > li > a .sub-menu-arrow {
    border-color: #3c4858 !important;
}

.cases-page.nav-sticky .navigation-menu > li > a:hover .sub-menu-arrow {
    border-color: #16a34a !important;
}

.cases-page.nav-sticky .navigation-menu > li > a.active {
    color: #16a34a !important;
}

.cases-page.nav-sticky .navigation-menu > li > a.active .sub-menu-arrow {
    border-color: #16a34a !important;
}

/* Cases page specific logo styles */
.cases-page .logo-light-mode,
.testimonials-page .logo-light-mode {
    display: block !important;
}

.cases-page .logo-dark-mode,
.testimonials-page .logo-dark-mode {
    display: none !important;
}

/* When scrolled, show dark logo only for cases page and testimonials page */
.cases-page.nav-sticky .logo-light-mode,
.testimonials-page.nav-sticky .logo-light-mode {
    display: none !important;
}

.cases-page.nav-sticky .logo-dark-mode,
.testimonials-page.nav-sticky .logo-dark-mode {
    display: block !important;
}

/* Logo styles for all pages except cases and testimonials page */
.pricing-page .logo-light-mode,
.blogs-page .logo-light-mode,
.blog-detail-page .logo-light-mode,
.contact-page .logo-light-mode {
    display: block !important;
}

.pricing-page .logo-dark-mode,
.blogs-page .logo-dark-mode,
.blog-detail-page .logo-dark-mode,
.contact-page .logo-dark-mode {
    display: none !important;
}

/* When scrolled, hide both logos for other pages */
.pricing-page.nav-sticky .logo-light-mode,
.blogs-page.nav-sticky .logo-light-mode,
.blog-detail-page.nav-sticky .logo-light-mode,
.contact-page.nav-sticky .logo-light-mode,
.pricing-page.nav-sticky .logo-dark-mode,
.blogs-page.nav-sticky .logo-dark-mode,
.blog-detail-page.nav-sticky .logo-dark-mode,
.contact-page.nav-sticky .logo-dark-mode {
    display: none !important;
}

/* Override any conflicting styles */
#topnav.nav-sticky.testimonials-page .logo-light-mode {
    display: none !important;
}

#topnav.nav-sticky.testimonials-page .logo-dark-mode {
    display: block !important;
}

/* Override navigation menu active state color */
.navigation-menu > li > a.active,
.navigation-menu > li:hover > a {
    color: #16a34a !important;
}

.navigation-menu > li > a:active,
.navigation-menu > li > a:hover {
    color: #16a34a !important;
}

.navigation-menu > li:hover > .menu-arrow {
    border-color: #16a34a !important;
}

.navigation-menu > li.active > .menu-arrow,
.navigation-menu > li:hover > .menu-arrow {
    border-color: #16a34a !important;
}

.navigation-menu.nav-light > li.active > a {
    color: #16a34a !important;
}

.navigation-menu.nav-light > li:hover > .menu-arrow {
    border-color: #16a34a !important;
}

.navigation-menu.nav-light > li:hover > a {
    color: #16a34a !important;
}

.navigation-menu.nav-light .has-submenu.active .menu-arrow {
    border-color: #16a34a !important;
}

.nav-sticky .navigation-menu.nav-light > li.active > a {
    color: #16a34a !important;
}

.nav-sticky .navigation-menu.nav-light > li.active > .menu-arrow,
.nav-sticky .navigation-menu.nav-light > li:hover > .menu-arrow {
    border-color: #16a34a !important;
}

.nav-sticky .navigation-menu.nav-light > li.active > a,
.nav-sticky .navigation-menu.nav-light > li:hover > a {
    color: #16a34a !important;
}

.has-submenu.active a {
    color: #16a34a !important;
}

.navigation-menu > li .submenu li a:hover,
.navigation-menu > li.has-submenu.open > a,
.navigation-menu > li > a:hover {
    color: #16a34a !important;
}

#navmenu-nav li.active a {
    color: #16a34a !important;
}

#navmenu-nav li.account-menu.active .navbar-link,
#navmenu-nav li.account-menu:hover .navbar-link {
    color: #fff !important;
    background-color: #16a34a !important;
}

.dashboard-container {
   margin-top: 105px;
   background: #f8f9fa;
   padding: 30px 0;
   min-height: calc(100vh - 105px);
}

.sidebar {
   background: #fff;
   box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15);
   border-radius: 10px;
   padding: 20px;
   position: sticky;
   top: 105px;
   height: calc(100vh - 145px);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
}

.sidebar .nav-link {
   padding: 12px 15px;
   color: #3c4858;
   font-weight: 500;
   border-radius: 5px;
   margin-bottom: 5px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
   background: #16a34a;
   color: #fff;
}

.sidebar .nav-link i {
   margin-right: 10px;
}

.main-content {
   padding: 0 15px;
   height: 100%;
}

.tone-card {
   background: #fff;
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15);
   transition: all 0.3s ease;
   height: 100%;
}

.tone-card:hover {
   transform: translateY(-5px);
}

.tone-icon {
   width: 50px;
   height: 50px;
   background: #f8f9fa;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 15px;
}

.tone-icon i {
   font-size: 24px;
   color: #16a34a;
}

.user-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #16a34a;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
}

.sidebar .progress {
   margin-top: 10px;
   margin-bottom: 10px;
   height: 12px;
   border-radius: 8px;
   background: #e9ecef;
}

.sidebar .progress-bar {
   background: #16a34a;
   border-radius: 8px;
}

.sidebar .btn-primary, .sidebar .btn-lg {
   background: #0a6ed1;
   border: none;
}

.sidebar .btn-primary:hover, .sidebar .btn-lg:hover {
   background: #095bb5;
}

.sidebar-bottom {
   margin-top: auto;
   background: #fff;
   border-radius: 0 0 10px 10px;
   padding-top: 20px;
}

.logout-btn:hover {
   background: #222 !important;
   color: #fff !important;
   text-decoration: none;
}

.upgrade-btn:hover {
   background: #12833c !important;
   color: #fff !important;
   text-decoration: none;
}

/* Group 1 Pages (White text on load, black on scroll) */
.use-cases-page .navigation-menu > li > a,
.testimonials-page .navigation-menu > li > a,
.pricing-page .navigation-menu > li > a,
.blogs-page .navigation-menu > li > a,
.blog-detail-page .navigation-menu > li > a,
.contact-page .navigation-menu > li > a {
    color: #fff !important;
}

/* Default logo state for all pages */
.logo-light-mode {
    display: none !important;
}

.logo-dark-mode {
    display: block !important;
}

/* When scrolled, show dark logo for all pages */
.nav-sticky .logo-light-mode {
    display: none !important;
}

.nav-sticky .logo-dark-mode {
    display: block !important;
}

/* When scrolled, show black text */
.nav-sticky.use-cases-page .navigation-menu > li > a,
.nav-sticky.testimonials-page .navigation-menu > li > a,
.nav-sticky.pricing-page .navigation-menu > li > a,
.nav-sticky.blogs-page .navigation-menu > li > a,
.nav-sticky.blog-detail-page .navigation-menu > li > a,
.nav-sticky.contact-page .navigation-menu > li > a {
    color: #3c4858 !important;
}

/* Active state for navigation items */
.navigation-menu > li > a.active {
    color: #16a34a !important;
    font-weight: 500;
}

.nav-sticky .navigation-menu > li > a.active {
    color: #16a34a !important;
    font-weight: 500;
}

/* Logo styles for all pages except cases page */
.cases-page .logo-light-mode,
.testimonials-page .logo-light-mode,
.pricing-page .logo-light-mode,
.blogs-page .logo-light-mode,
.blog-detail-page .logo-light-mode,
.contact-page .logo-light-mode {
    display: block !important;
}

.cases-page .logo-dark-mode,
.testimonials-page .logo-dark-mode,
.pricing-page .logo-dark-mode,
.blogs-page .logo-dark-mode,
.blog-detail-page .logo-dark-mode,
.contact-page .logo-dark-mode {
    display: none !important;
}

/* When scrolled, show dark logo only for cases page, hide for others */
.cases-page.nav-sticky .logo-light-mode {
    display: none !important;
}

.cases-page.nav-sticky .logo-dark-mode {
    display: block !important;
}

.testimonials-page.nav-sticky .logo-light-mode,
.pricing-page.nav-sticky .logo-light-mode,
.blogs-page.nav-sticky .logo-light-mode,
.blog-detail-page.nav-sticky .logo-light-mode,
.contact-page.nav-sticky .logo-light-mode {
    display: none !important;
}

.testimonials-page.nav-sticky .logo-dark-mode,
.pricing-page.nav-sticky .logo-dark-mode,
.blogs-page.nav-sticky .logo-dark-mode,
.blog-detail-page.nav-sticky .logo-dark-mode,
.contact-page.nav-sticky .logo-dark-mode {
    display: none !important;
}

.cookie-popup {
    position: fixed !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    max-width: 512px !important;
    z-index: 9999 !important;
}

.cookie-popup-not-accepted {
    display: block !important;
    animation: cookie-popup-in .5s ease forwards !important;
}

.cookie-popup-accepted {
    display: none !important;
}

@keyframes cookie-popup-in {
    from { bottom: -6.25rem; }
    to { bottom: 1.25rem; }
}

@media (max-width: 425px) {
    .cookie-popup {
        left: 12px !important;
        right: 12px !important;
    }
}

/* Blog list page specific styles */
.blog-list-page .navigation-menu > li > a {
    color: #fff !important;
}

.blog-list-page .navigation-menu > li > a:hover,
.blog-list-page .navigation-menu > li > a:active {
    color: #fff !important;
}

.blog-list-page .navigation-menu > li > a.active {
    color: #16a34a !important;
}

.blog-list-page .logo-light-mode {
    display: block !important;
}

.blog-list-page .logo-dark-mode {
    display: none !important;
}

/* When scrolled, change to dark colors */
.blog-list-page.scrolled .navigation-menu > li > a {
    color: #3c4858 !important;
}

.blog-list-page.scrolled .navigation-menu > li > a:hover,
.blog-list-page.scrolled .navigation-menu > li > a:active {
    color: #16a34a !important;
}

.blog-list-page.scrolled .navigation-menu > li > a.active {
    color: #16a34a !important;
}

.blog-list-page.scrolled .logo-light-mode {
    display: none !important;
}

.blog-list-page.scrolled .logo-dark-mode {
    display: block !important;
}

/* Mobile menu toggle styles */
.blog-list-page .navbar-toggle .lines span {
    background-color: #fff !important;
}

.blog-list-page.scrolled .navbar-toggle .lines span {
    background-color: #3c4858 !important;
}