/*==============================================
   Theme Color Variables
===============================================*/

:root {
    /* Ultra-Premium Blue Theme Palette (Royal Navy & Electric Sky) */
    --blue-ultra-light: #F4F7FF;
    --blue-light: #3E92CC;
    --blue-regular: #0085FF;
    /* Luxury Navy */
    --blue-dark: #0A2463;
    /* Royal Deep Blue */
    --blue-deep: #051435;
    /* Midnight Navy */

    /* Ultra-Premium Red Theme Palette (Imperial Ruby & Deep Crimson) */
    --red-ultra-light: #FFF5F6;
    --red-light: #EF233C;
    /* Imperial Red */
    --red-regular: #D90429;
    /* Deep Ruby */
    --red-dark: #9B031A;
    /* Dark Crimson */
    --red-deep: #5E0210;
    /* Luxury Wine */

    /* Ultra-Premium Green Theme Palette (Emerald & Forest) */
    --green-ultra-light: #F0FFF4;
    --green-light: #38A169;
    /* Fresh Emerald */
    --green-regular: #22803D;
    /* Rich Forest */
    --green-dark: #166534;
    /* Deep Forest */
    --green-deep: #0D3D21;
    /* Midnight Forest */

    /* ====== DUAL COLOR SYSTEM ====== */
    /* Blue-to-Red Gradients (Dynamic Blend) */
    --gradient-blue-red: linear-gradient(135deg, var(--blue-regular) 0%, var(--red-regular) 100%);
    --gradient-blue-red-hover: linear-gradient(135deg, var(--blue-dark) 0%, var(--red-dark) 100%);
    --gradient-blue-red-deep: linear-gradient(135deg, var(--blue-deep) 0%, var(--red-deep) 100%);
    --gradient-red-blue: linear-gradient(135deg, var(--red-regular) 0%, var(--blue-regular) 100%);

    /* Blue-to-Green Gradients (Services) */
    --gradient-blue-green: linear-gradient(135deg, var(--blue-regular) 0%, var(--green-regular) 100%);
    --gradient-green-blue: linear-gradient(135deg, var(--green-regular) 0%, var(--blue-regular) 100%);

    /* Contextual Colors */
    --info-color: var(--blue-regular);
    /* For informational content */
    --info-light: var(--blue-light);
    --info-dark: var(--blue-dark);
    --info-bg: var(--blue-ultra-light);

    --sales-color: var(--red-regular);
    /* For sales/promotional content */
    --sales-light: var(--red-light);
    --sales-dark: var(--red-dark);
    --sales-bg: var(--red-ultra-light);

    /* Service Colors (Green) */
    --service-color: var(--green-regular);
    --service-light: var(--green-light);
    --service-dark: var(--green-dark);
    --service-bg: var(--green-ultra-light);

    /* Common Aliases for Legacy variables */
    --blue-1: var(--blue-ultra-light);
    --blue-2: var(--blue-regular);
    --blue-3: var(--blue-deep);
    --blue-hover: var(--blue-dark);
    --blue-gradient-start: var(--blue-regular);
    --blue-gradient-end: var(--blue-dark);

    --red-1: var(--red-ultra-light);
    --red-2: var(--red-regular);
    --red-3: var(--red-deep);
    --red-hover: var(--red-dark);
    --red-gradient-start: var(--red-regular);
    --red-gradient-end: var(--red-dark);

    /* Neutral colors for consistency */
    --text-color: #2D3436;
    /* Sophisticated Charcoal */
    --text-light: #636E72;
    /* Soft slate */
    --text-dark: #202324;
    /* Rich almost black */
    --bg-color: #ffffff;
    --border-color: #DFE6E9;
    /* Softer, premium light grey */

    /* ====== PREMIUM DESIGN SYSTEM ====== */
    /* Depth & Elevation (Shadows) */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* Glassmorphism Styles */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: blur(12px);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);

    /* Animation Presets */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Premium Typography Enhancement */
    --font-main: 'Outfit', 'Inter', 'Poppins', sans-serif;
    --font-heading: 'Outfit', 'Inter', 'Poppins', sans-serif;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-wide: 0.05em;

    /* ====== SHOWROOM PREMIUM ACCENTS ====== */
    /* Metallic & Chrome Scale */
    --chrome-light: #E8EAED;
    --chrome-regular: #BDC3C7;
    --chrome-dark: #7F8C8D;
    --metallic-silver: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    --carbon-fiber: radial-gradient(circle, #2c3e50 0%, #000000 100%);
}

/* Blue Theme Class */
.blue-theme {
    --primary-color: var(--blue-regular);
    --primary-hover: var(--blue-dark);
    --primary-dark: var(--blue-deep);
    --primary-light: var(--blue-light);
    --primary-ultra-light: var(--blue-ultra-light);
    --gradient-start: var(--blue-regular);
    --gradient-end: var(--blue-dark);
}

/* Red Theme Class */
.red-theme {
    --primary-color: var(--red-regular);
    --primary-hover: var(--red-dark);
    --primary-dark: var(--red-deep);
    --primary-light: var(--red-light);
    --primary-ultra-light: var(--red-ultra-light);
    --gradient-start: var(--red-regular);
    --gradient-end: var(--red-dark);
}

/*==============================================
   Theme Color Css
===============================================*/

.mobile-menu .navigation li.current>a,
.mobile-menu .navigation li>a:hover {
    color: var(--text-light);
}

.outer-search-box-style1 .seach-toggle:hover,
.outer-search-box-style1 .seach-toggle.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.mobile-menu .navigation li>a:before {
    border-left: 5px solid var(--text-light);
}







/*==============================================
   Theme Hover Color Css
===============================================*/
.main-menu .navigation>li:hover>a,
.main-menu .navigation>li.current>a {
    color: var(--primary-color);
}

.main-menu .navigation>li>ul>li>a:hover {
    color: var(--primary-color);
}

.main-menu .navigation>li>ul>li>a:before {
    color: var(--primary-color);
}

.main-menu .navigation>li>ul>li:hover>a {
    color: var(--primary-color);
}

.main-menu .navigation>li>ul>li>ul>li>a:hover {
    color: var(--primary-color);
}

.main-menu .navigation>li>ul>li>ul>li a:before {
    color: var(--primary-color);
}

.sticky-header .main-menu .navigation>li:hover>a,
.sticky-header .main-menu .navigation>li.current>a {
    color: var(--primary-color);
}


.main-menu.style2 .navigation>li:hover>a,
.main-menu.style2 .navigation>li.current>a {
    color: var(--primary-color);
}

.main-menu.style2 .navigation>li>ul>li>a:hover {
    color: var(--primary-color);
}

.main-menu.style2 .navigation>li>ul>li>a:before {
    color: var(--primary-color);
}

.main-menu.style2 .navigation>li>ul>li:hover>a {
    color: var(--primary-color);
}

.main-menu.style2 .navigation>li>ul>li>ul>li>a:hover {
    color: var(--primary-color);
}

.main-menu.style2 .navigation>li>ul>li>ul>li a:before {
    color: var(--primary-color);
}

.sticky-header .main-menu.style2 .navigation>li:hover>a,
.sticky-header .main-menu.style2 .navigation>li.current>a {
    color: var(--primary-color);
}


.main-menu.style3 .navigation>li:hover>a,
.main-menu.style3 .navigation>li.current>a {
    color: var(--primary-color);
}

.main-menu.style3 .navigation>li>ul>li>a:hover {
    color: var(--primary-color);
}

.main-menu.style3 .navigation>li>ul>li>a:before {
    color: var(--primary-color);
}

.main-menu.style3 .navigation>li>ul>li:hover>a {
    color: var(--primary-color);
}

.main-menu.style3 .navigation>li>ul>li>ul>li>a:hover {
    color: var(--primary-color);
}

.main-menu.style3 .navigation>li>ul>li>ul>li a:before {
    color: var(--primary-color);
}

.sticky-header .main-menu.style3 .navigation>li:hover>a,
.sticky-header .main-menu.style3 .navigation>li.current>a {
    color: var(--primary-color);
}


.main-menu.style4 .navigation>li:hover>a,
.main-menu.style4 .navigation>li.current>a {
    color: var(--primary-color);
}

.main-menu.style4 .navigation>li>ul>li>a:hover {
    color: var(--primary-color);
}

.main-menu.style4 .navigation>li>ul>li>a:before {
    color: var(--primary-color);
}

.main-menu.style4 .navigation>li>ul>li:hover>a {
    color: var(--primary-color);
}

.main-menu.style4 .navigation>li>ul>li>ul>li>a:hover {
    color: var(--primary-color);
}

.main-menu.style4 .navigation>li>ul>li>ul>li a:before {
    color: var(--primary-color);
}



























/*==============================================
   Theme Background Css
===============================================*/
.btn-one:before {
    background-color: var(--primary-color);
}

.thm-bgc1 {
    background: var(--gradient-start);
    background: -moz-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to right, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.thm-clr1 {
    color: var(--primary-color);
}

.thm-bgc2 {
    background: var(--gradient-start);
    background: -moz-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to right, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.thm-clr2 {
    color: var(--primary-color);
}

.thm-bgc3 {
    background: var(--primary-color);
    background: -moz-linear-gradient(left, var(--primary-color) 0%, var(--primary-dark) 100%);
    background: -webkit-linear-gradient(left, var(--primary-color) 0%, var(--primary-dark) 100%);
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.thm-bgc3-v2 {
    background: var(--primary-dark);
    background: -moz-linear-gradient(top, var(--primary-dark) 0%, var(--primary-color) 100%);
    background: -webkit-linear-gradient(top, var(--primary-dark) 0%, var(--primary-color) 100%);
    background: linear-gradient(to bottom, var(--primary-dark) 0%, var(--primary-color) 100%);
}

.thm-clr3 {
    color: var(--primary-color);
}

.thm-bg-grad-c4 {
    background: var(--primary-dark);
    background: -moz-linear-gradient(top, var(--primary-dark) 0%, var(--primary-hover) 100%);
    background: -webkit-linear-gradient(top, var(--primary-dark) 0%, var(--primary-hover) 100%);
    background: linear-gradient(to bottom, var(--primary-dark) 0%, var(--primary-hover) 100%);
}

.thm-bgc4 {
    background: var(--primary-color);
}





.thm-clr4 {
    color: var(--primary-color);
}












/*==============================================
   Theme Hover Background Color Css
===============================================*/





/*==============================================
   Theme Border Color Css
===============================================*/








/*==============================================
   Theme Other Color, Background, Hover, Active Css
===============================================*/

.main-menu .navigation>li>a:before {
    background: var(--gradient-start);
    background: -moz-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to right, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.cart-box a span.count {
    background: var(--primary-color);
}

.header-social-links-style1 ul li a:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.facts-box ul li:hover .title h3 {
    color: var(--primary-color);
}

.sec-title .title .border-box {
    background: var(--primary-color);
}

.about-style1-image-box .gradient-bg {
    background: var(--gradient-start);
    background: -moz-linear-gradient(top, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(top, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to bottom, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.about-style1-image-box .image-box:hover .overlay-box:before {
    background: var(--primary-color);
}

.video-holder-box .icon .inner a:hover {
    background: var(--primary-color);
}

.single-service-style1:after {
    background: var(--gradient-start);
    background: -moz-linear-gradient(top, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(top, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to bottom, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.single-service-style1 .icon span:before {
    background: -webkit-linear-gradient(var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.single-service-style1 .read-more-button a:before {
    background: linear-gradient(to right, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.owl-carousel.owl-dot-style1 .owl-dots .owl-dot.active {
    border-color: var(--primary-color);
}

.overlay-style-one.bg1 {
    background: var(--primary-hover);
    background: -moz-linear-gradient(top, var(--primary-hover) 0%, var(--primary-dark) 100%);
    background: -webkit-linear-gradient(top, var(--primary-hover) 0%, var(--primary-dark) 100%);
    background: linear-gradient(to bottom, var(--primary-hover) 0%, var(--primary-dark) 100%);
}

.single-project-style1:hover .text-holder h3 a {
    background: -webkit-linear-gradient(var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.owl-carousel.owl-dot-style2 .owl-dots .owl-dot.active {
    background: var(--gradient-start);
    background: -moz-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to right, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.single-testimonial-style1:hover .bottom .image-box:before {
    background: var(--gradient-start);
    background: -moz-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to right, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.single-features-box.style2:before {
    background: var(--primary-color);
    background: -moz-linear-gradient(top, var(--primary-color) 0%, var(--primary-hover) 100%);
    background: -webkit-linear-gradient(top, var(--primary-color) 0%, var(--primary-hover) 100%);
    background: linear-gradient(to bottom, var(--primary-color) 0%, #16378466 100%);
}

.single-blog-post .img-holder::before {
    background: var(--primary-light);
    opacity: 0.2;
}

.single-blog-post .img-holder .date-box {
    background: var(--gradient-start);
    background: -moz-linear-gradient(top, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(top, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to bottom, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.single-blog-post .text-holder .blog-title a:hover {
    color: var(--primary-color);
}

.single-blog-post .text-holder .read-more a {
    color: var(--primary-color);
}

.single-footer-widget .title:before {
    background: var(--primary-color);
}

.single-footer-widget .company-info-links li a:hover {
    color: var(--primary-color);
}

.single-footer-widget .resources-links li a:hover {
    color: var(--primary-color);
}

.single-footer-widget .subscribe-form input[type="email"]:focus {
    border-color: var(--primary-color);
}

.copyright-text p a:hover {
    color: var(--primary-color);
}

.footer-bottom .our-info-box ul li a:hover {
    color: var(--primary-color);
}

.footer-social-links ul li a:hover {
    color: var(--primary-color);
}

.fact-counter-area.style2 {
    background: var(--primary-color);
    background: -moz-linear-gradient(top, var(--primary-color) 0%, var(--primary-dark) 100%);
    background: -webkit-linear-gradient(top, var(--primary-color) 0%, var(--primary-dark) 100%);
    background: linear-gradient(to bottom, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.single-team-member.style2 .title-holder p {
    color: var(--primary-color);
}

.team-social-links.style2 ul li a {
    background: var(--gradient-start);
    background: -moz-linear-gradient(top, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(top, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to bottom, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.project-chart-box .text-box h4 {
    color: var(--primary-color);
}

.project-chart-box .text-box ul li:before {
    color: var(--primary-color);
}

.single-blog-post .img-holder .overlay-content .button a:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.single-blog-post .img-holder .overlay-content .social-share-post .social-links ul li a:hover {
    color: var(--primary-color);
}

.blog-post .single-blog-post .text-holder .text-box .read-more-button a {
    color: var(--primary-color);
}

.styled-pagination li a:hover,
.styled-pagination li a.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.sidebar-wrapper .single-sidebar .title:before {
    background: var(--primary-color);
}

.single-sidebar .categories li:after {
    background: var(--gradient-start);
    background: -moz-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: -webkit-linear-gradient(left, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
    background: linear-gradient(to right, var(--gradient-start) 0%, var(--primary-hover) 50%, var(--gradient-end) 100%);
}

.sidebar-search-box .search-form button {
    background: var(--primary-color);
}

.single-sidebar .recent-posts li .img-box .overlay-content {
    background: var(--primary-color);
    opacity: 0.9;
}

.single-sidebar .recent-posts li .title-box h4 a:hover {
    color: var(--primary-color);
}

.single-sidebar .recent-posts li .title-box p {
    color: var(--primary-color);
}

.single-sidebar .popular-tag li a:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.blog-single-author-box .quote-icon {
    background: var(--primary-color);
}

.blog-single-author-box .author-name {
    color: var(--primary-color);
}

.blog-single-botton-text .inner-text ul li:before {
    color: var(--primary-color);
}

.comment-box .title:before {
    background: var(--primary-color);
}

.add-comment-box .title:before {
    background: var(--primary-color);
}