/* SETTINGS.css START */
:root {
    /* General */
    --black1: #09122C;  /* Pure Black */
    --black2: #1D1616;
    --black3: #243642;
    --black4: #343131;
    --black5: #4A4947;  /* Lightest Black */

    --white1: #FAF1E6;  /* Pure White */
    --white2: #F1E7E7;
    --white3: #EDE8DC;
    --white4: #EEF1DA;
    --white5: #D5C7A3;  /* Darkest White */

    --font-family: "Inter", "Roboto", sans-serif;
    --scale_effect: scale(1.02);
    --transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition_ease: transform 3s ease !important;

    --border_radius_sm: 15px;
    --border_radius_md: 20px;

    /* Set general gradient */
    --dark_gradient: linear-gradient(135deg, var(--black1), var(--black3), var(--black5));
    --light_gradient: linear-gradient(135deg, var(--white1), var(--white3), var(--white5));
    
    /* Status Colors */
    --c_success: #10b981;
    --c_warning: #f59e0b;
    --c_danger: #ef4444;
    --c_info: #00b4d8;

    /* Lightmode */

    /* Change Primary colors 5x */
    --color-primary:   #3d5a80;  /* Main brand color */
    --color-secondary: #62b6cb;  /* Secondary/supporting color */
    --color-accent:    #25ced1;  /* Accent for highlights/CTAs */
    --color-neutral:   #F3F4F6;  /* Neutral tone for text/borders */
    --color-background:#0d1b2a;  /* Overall background */
    


    --text_color_strong: var(--black1);
    --text_color_strong_alt: var(--white1);
    --text_color: var(--black3);
    --text_color_alt: var(--white3);
    --text_color_mute: var(--black5);
    --text_color_mute_alt: var(--white5);


    
    --nav_bg_gradient: linear-gradient(135deg, var(--black1), var(--black3), var(--black4));
    --background_color: linear-gradient(135deg, var(--black1), var(--black3));
    --background_color_alt: linear-gradient(135deg, var(--white1), var(--white3));
    
    --shadow: 4px 4px 6px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.2);
    --shadow_alt: 4px 4px 6px rgba(255, 255, 255, 0.1), 0 0 4px rgba(255, 255, 255, 0.2);
    
    --hero_image: url('../../images/hero/Cosmic_Hero_dark_orange.webp');
    --section_img: url('../../images/hero/Cosmic_Hero_dark_red.webp');
    --section_img1: url('../../images/hero/Cosmic_Hero_dark_pink.webp');
    --company_slider_filter: grayscale(100%) brightness(0) invert(100%);
}

/* 🌙 Dark Mode */
.dark-mode {
    /* Change Primary colors 5x */
    --color-primary:   #e0fbfc;  /* Main brand color */
    --color-secondary: #1b4965;  /* Secondary/supporting color */
    --color-accent:    #ff0054;  /* Accent for highlights/CTAs */
    --color-neutral:   #374151;  /* Neutral tone for text/borders */
    --color-background:#fffcf2;  /* Overall background */
    
    --text_color_strong: var(--white1);
    --text_color_strong_alt: var(--black1);
    --text_color: var(--white3);
    --text_color_alt: var(--black3);
    --text_color_mute: var(--white5);
    --text_color_mute_alt: var(--black5);
    
    --nav_bg_gradient: linear-gradient(135deg, var(--white1), var(--white3), var(--white4));
    --background_color: linear-gradient(135deg, var(--white1), var(--white3));
    --background_color_alt: linear-gradient(135deg, var(--black1), var(--black3));
    
    --shadow: 4px 4px 6px rgba(255, 255, 255, 0.3), 0 0 4px rgba(255, 255, 255, 0.2);
    --shadow_alt: 4px 4px 6px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.2);
    
    --hero_image: url('../../images/hero/Cosmic_Hero_light_orange.webp');
    --section_img: url('../../images/hero/Cosmic_Hero_light_red.webp');
    --section_img1: url('../../images/hero/Cosmic_Hero_light_pink   .webp');
    --company_slider_filter: grayscale(90%) brightness(0);
}

.light { display: none; } /* Hide light logo in dark mode */
.dark-mode .dark { display: none; } /* Show dark logo in dark mode */
.dark-mode .light { display: block; } /* Show dark logo in dark mode */

/* SETTINGS.css END */


/* BASE.CSS START */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Body */
body {
    font-family: var(--font-family);
    background: var(--background_color);
    color: var(--text_color);
    transition: var(--background_color) 3s ease, color 3s ease;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* BASE.CSS END */


/* BTN.CSS START */


/* Darkmode Btn */
.c_darkmode_btn, .c_darkmode_btn i {
    color: var(--text_color_alt) !important;
    background: transparent;
    border: none;
}

.c_darkmode_btn, .c_darkmode_btn i:hover {
    color: var(--color-accent) !important;
    transition: var(--transition);
    transform: var(--scale_effect);
}


/* Primary Btn */
.c_btn_primary {
    color: var(--text_color_alt);
    background: var(--color-accent);
    border-radius: 15px;
    border: 2px solid var(--color-accent) !important;
    padding: 5px 15px; 
    box-shadow: var(--shadow);
    font-weight: bold;
    transition: border-color 0.3s ease; 
}

.c_btn_primary:hover {
    border: 2px solid var(--color-neutral) !important;
}

.c_btn_primary i {
    transition: transform 1s ease;
}

.c_btn_primary:hover i {
    transform: translateX(3px);
}


/* Primary1 Btn */
.c_btn_primary1 {
    color: var(--text_color_alt);
    background: var(--color-accent);
    border-radius: 15px;
    border: 2px solid var(--color-accent) !important;
    padding: 5px 15px; 
    box-shadow: var(--shadow);
    font-weight: bold;
    transition: background-color 0.3s ease; 
}

.c_btn_primary1:hover {
    background: transparent;
}

.c_btn_primary1 i {
    transition: transform 1s ease;
}

.c_btn_primary1:hover i {
    transform: translateX(3px);
}

/* Secondary Btn */
.c_btn_secondary {
    color: var(--text_color_alt) !important; 
    background: transparent;
    border-radius: 15px;
    border: 2px solid var(--color-secondary) !important; 
    padding: 5px 15px; 
    box-shadow: var(--shadow);
    font-weight: 800;
    transition: background-color 0.3s ease; 
}

.c_btn_secondary:hover {
    color: var(--text_color) !important; 
    background: var(--color-secondary); 
}

/* Thirt Btn */
.c_btn_third {
    color: var(--text_color_alt) !important; 
    background: transparent;
    padding: 5px 15px; 
    font-weight: 400;
    border: none;
}

.c_btn_third:hover {
    color: var(--white1); 
    font-weight: bold;
}
/* BTN.CSS END */

/* COMPANY_SLIDER.CSS START */
/* Company logo slider */
.c_logo_slider {
    overflow: hidden;
    position: relative;
}

.c_logo_slider_inner {
    display: flex;
    gap: 6rem; /* Adjust based on your design */
    will-change: transform; /* Optimize for animation */
}

.c_logo_img {
    height: 50px; /* Adjust based on your design */
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    filter: var(--company_slider_filter);
}

.c_logo_img:hover {
    opacity: 1;
    filter: grayscale(100%) brightness(50%) opacity(100%) invert(50%);
}
/* COMPANY_SLIDER.CSS END */

/* GENERAL.CSS START */


/* Icons */
.fas, .far, .fal, .fab, .fad {
    color: inherit !important;
}


.c_text_color {
    background: linear-gradient(
        to right bottom,
        var(--text_color_strong_alt),
        var(--text_color_mute_alt)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.c_text_color_alt {
    background: linear-gradient(
        to right bottom,
        var(--text_color_strong),
        var(--text_color_mute)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.c_mute_text_color {
    background: linear-gradient(
        to right bottom,
        var(--text_color_mute_alt),
        var(--text_color_alt)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.c_mute_text_color_alt {
    background: linear-gradient(
        to right bottom,
        var(--text_color_mute),
        var(--text_color)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* Icon arrow */
.c_arrow {
    color: var(--color-accent);
    padding: 3px 8px;
    font-weight: 500;

}

/* background image for a section */
.c_bg_img {
    position: relative;
    background: var(--section_img);
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.c_bg_img1 {
    position: relative;
    background: var(--section_img1);
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.c_bg_img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--text_color) 50%, transparent),
        color-mix(in srgb, var(--text_color_mute) 40%, transparent)
    );
    z-index: 2;
}

.c_bg_img > * {
    position: relative;
    z-index: 3;
}
/* background image for a section */


/* feature section start */
.c_feature_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.c_feature_box {
    background: var(--background_color);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    text-align: left;
    transition: transform 0.3s ease;
}

.c_feature_box:hover {
    transform: var(--scale_effect)
}

.c_feature_image {
    background: var(--background_color);
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.c_feature_image img {
    width: 100%;
    border-radius: 15px;
}
/*  feature section ends */

/* feature items start */
.c_feature_icon {
    font-size: 1.5rem;
    color: var(--color-accent);
    background: var(--nav_bg_gradient);
    box-shadow: var(--shadow);
    padding: 0.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }
/* feature items end*/


/* Testimonial */
.c_tab-btn {
    border: 2px solid var(--color-neutral);
    background: transparent;
    color: var(--color-neutral);
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 15px;
    transition: 0.2s ease-in-out;
}

.c_tab-btn:hover {
    background: var(--color-neutral);
    color: var(--text_color);
}

.c_tab-btn.active {
    background: var(--color-neutral);
    color: var(--text_color);
    border-color: var(--color-neutral);
}

.c_tab-box {
    background: none;
    border: 2px solid var(--color-neutral);
}

/* End testimonial */

/* Start actionsection */
.c_dash_screenshot {
    max-height: 90%;
    height: auto;
    border-radius: 25px 0px 0px 0px;
}
/* End actionsection */


/* Pricing Table Start */

.c_table_head th {
    background: transparent;
}

tr:nth-child(even) {
    background-color: var(--text_color_strong);
}

/* Pricing Table End */





/* Estimate Slider section Start */

  
/* Tracks */
input[type="range"].c_slider_color::-webkit-slider-runnable-track {
    background: var(--color-secondary);
    height: 6px;
    border-radius: 5px;
}

input[type="range"].c_slider_color::-moz-range-track {
    background: var(--color-secondary);
    height: 6px;
    border-radius: 5px;
}

/* Thumbs */
input[type="range"].c_slider_color::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-accent);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
}

input[type="range"].c_slider_color::-moz-range-thumb {
    background: var(--color-accent);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
}
/* Estimate Slider section END */


/* FAQ section start */

.c_faq_q {
    border: 2px solid var(--text_color_alt);
    background: var(--background_color);
    color: var(--text_color_alt);
}

/* Active/open accordion item */
.accordion-item:has(.accordion-collapse.show) .c_faq_q {
    border-color: var(--color-accent);
}

/* FAQ section end */
/* GENERAL.CSS END */

/* HERO.CSS START */
/* Hero */
.c_hero_bg {
    height: auto;
    padding: 8rem 0 0 0;
    background-image: var(--hero_image) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* Badge hero */
.c_badge-item-wrap {
    border-radius: var(--border_radius_md);
    background-image: linear-gradient(
        150deg,
        var(--color-accent) 0%, 
        color-mix(in srgb, var(--text_color_alt) 0%, transparent) 50%, 
        color-mix(in srgb, var(--text_color_alt) 0%, transparent) 70%
    );

    margin-bottom: 1.563rem;                                       
    padding: .125rem;
    position: relative;
    width: max-content;
}

.c_badge-item {
    background: var(--black1);
    display: inline-flex;
    border-radius: var(--border_radius_md);
    padding: 5px 15px;
}

.c_badge-bg-text {
    background: var(--black2);
    padding: 3px 8px;
    border-radius: var(--border_radius_sm);
    color: var(--color-accent);
    font-weight: bold;
}

.c_badge-text {
    color: #fff;
    padding: 3px 8px;
}
/* HERO.CSS END */


/* NAV.CSS START */
/* Nav items */
.c_li {
    color: var(--text_color_alt);
    text-transform: capitalize;
    font-weight: 500;
    transition: var(--transition);
}

.c_li:hover {
    color: var(--color-accent);
    transform: var(--scale_effect);
}

.c_nav {
    /* When scrolled, apply a background color */
    background: var(--nav_bg_gradient);
}

.c_burger {
    color: var(--color-accent) !important;
    background: transparent;
    border: 2px solid var(--color-accent) !important;;
}

/* Mobile menu background when open */
@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--nav_bg_gradient);
        padding: 10px;
    }
}
/* NAV.CSS END */

/* NOTIFICATION.CSS START */
.c_notification-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 350px;
    max-height: 400px;
    overflow-y: hidden;
    z-index: 1000;
    pointer-events: none;
}

.c_notification {
    background: var(--background_color_alt);
    color: var(--text_color_strong);
    padding: 12px;
    margin: 8px 0;
    border-radius: 10px;
    box-shadow: 4px 4px 4px rgba(37, 37, 37, 0.15);
    font-size: 14px;
    opacity: 0;
    transform: translateY(30px);
    animation: c_fadeIn 1s forwards;
}

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

@keyframes c_fadeOut {
    to { opacity: 0; }
}
/* NOTIFICATION.CSS END */

/* ANIMATE.css START */
.c_fade_up {
    opacity: 0;
    transform: translateY(40px);
    transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    pointer-events: none;
}

/* When visible */
.c_visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Stagger effect using nth-child */
.c_fade_up:nth-child(1) { transition-delay: 0s; }
.c_fade_up:nth-child(2) { transition-delay: 0.1s; }
.c_fade_up:nth-child(3) { transition-delay: 0.2s; }
.c_fade_up:nth-child(4) { transition-delay: 0.3s; }
.c_fade_up:nth-child(5) { transition-delay: 0.4s; }
.c_fade_up:nth-child(6) { transition-delay: 0.5s; }
.c_fade_up:nth-child(7) { transition-delay: 0.6s; }
.c_fade_up:nth-child(8) { transition-delay: 0.7s; }
.c_fade_up:nth-child(9) { transition-delay: 0.8s; }
.c_fade_up:nth-child(10) { transition-delay: 0.9s; }
.c_fade_up:nth-child(11) { transition-delay: 1.0s; }
.c_fade_up:nth-child(12) { transition-delay: 1.1s; }
.c_fade_up:nth-child(13) { transition-delay: 1.2s; }
.c_fade_up:nth-child(14) { transition-delay: 1.3s; }
.c_fade_up:nth-child(15) { transition-delay: 1.4s; }
.c_fade_up:nth-child(16) { transition-delay: 1.5s; }
.c_fade_up:nth-child(17) { transition-delay: 1.6s; }
.c_fade_up:nth-child(18) { transition-delay: 1.7s; }
.c_fade_up:nth-child(19) { transition-delay: 1.8s; }
.c_fade_up:nth-child(20) { transition-delay: 1.9s; }
.c_fade_up:nth-child(21) { transition-delay: 2.0s; }
.c_fade_up:nth-child(22) { transition-delay: 2.1s; }
.c_fade_up:nth-child(23) { transition-delay: 2.2s; }
.c_fade_up:nth-child(24) { transition-delay: 2.3s; }
.c_fade_up:nth-child(25) { transition-delay: 2.4s; }
.c_fade_up:nth-child(26) { transition-delay: 2.5s; }
.c_fade_up:nth-child(27) { transition-delay: 2.6s; }
.c_fade_up:nth-child(28) { transition-delay: 2.7s; }
.c_fade_up:nth-child(29) { transition-delay: 2.8s; }
.c_fade_up:nth-child(30) { transition-delay: 2.9s; }
/* ANIMATE.css END */