/* ----------------------------------

Template Name: Metize - Startup & SaaS Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Manrope
Main Color   : #2667FF

-------------------------------------

[Typography]

Body copy:    15px 'Manrope', sans-serif
Header:     36px 'Manrope', sans-serif
Input, textarea:  16px 'Manrope', sans-serif
Sidebar heading:  22px 'Manrope', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
        - Accordion
        - Tabs
    02. Preloader
    03 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
    04. Banner
        - Banner Creative
        - Banner Digital Agency
        - Banner Portfolio
    05. Services
        - Version One
        - Version Two
        - Service Single
	06. About
        - Version One
        - Version Two
    07. Project
        - Project Carousel
        - Project Grid
        - Project Single
    08. Why Choose Us
    09. Team
        - Team Version One
        - Team Single
    10. Testimonials
    11. Why Choose Us
    12. Faq
    13. Progress
    14. Brand / Partner
    15. Feature
    16. What We Offer
    17. Pricing
    18. Blog
        - Standard
        - Grid
        - Left Sidebar
        - Right Sidebar
        - Single
    21. Error 404
    22. Footer
    23. PHP Contact Form
    24. Others

*/

/*
** General Styles for HTML tags
*/

/* ==========================================
   Custom Mostrario Overrides
   ========================================== */

/* Footer brand: square icon + text layout */
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.footer-brand img {
    height: 38px;
    width: 38px;
    object-fit: contain;
    border-radius: 8px;
}

.footer-brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

/* Navbar brand: square icon + text layout */
.navbar-brand .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.navbar-brand .brand-logo img {
    height: 38px;
    width: 38px;
    object-fit: contain;
    border-radius: 8px;
}

.navbar-brand .brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1;
}

.navbar-brand .logo-display .brand-name {
    color: #ffffff;
}

.navbar-brand .logo-scrolled .brand-name {
    color: #1a1a2e;
}

/* ------------------------------------------
   Danger variants (negative / problem sections)
   ------------------------------------------ */

.sub-title-danger {
    background: linear-gradient(135deg, #e53e3e, #9b1c1c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #e53e3e;
}

ul.list-double.list-double-danger li::after {
    content: "\f00d";
    border-color: #e53e3e;
    color: #e53e3e;
}

ul.list-double.list-double-danger::after {
    border-color: #e53e3e;
}

ul.list-double.list-double-danger li:first-child::after,
ul.list-double.list-double-danger li:hover::after {
    background: #e53e3e;
    color: #fff;
    border-color: #e53e3e;
}

/* ------------------------------------------
   El Problema – stressed_man illustration
   Square 1024x1024 image: override the default
   max-width: 140% rule to fit naturally in column
   ------------------------------------------ */
.soft-illustration img {
    max-width: 100% !important;
    width: 90%;
    display: block;
    margin: 0 auto;
}

/* ------------------------------------------
   Elige tu estilo – per-card border colors
   ------------------------------------------ */
.overview-content.overview-tienda-pro {
    border-color: #34A853;
}
.overview-content.overview-tienda-pro ul li::after {
    background: #34A853;
}

.overview-content.overview-fancy {
    border-color: #FC4C7B;
}
.overview-content.overview-fancy ul li::after {
    background: #FC4C7B;
}

.overview-content.overview-tech {
    border-color: #4285F4;
}
.overview-content.overview-tech ul li::after {
    background: #4285F4;
}

/* ------------------------------------------
   Catalog list items – prefix dim / type bold
   ------------------------------------------ */
.catalog-prefix {
    opacity: 0.45;
    font-weight: 400;
}
.catalog-type {
    font-weight: 700;
    opacity: 1;
}

/* ------------------------------------------
   Pricing – Keyword highlights
   ------------------------------------------ */
.pricing-keyword {
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

/* On the Emprendedor (blue gradient) card */
.pricing-style-one.active .pricing-keyword {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    padding: 0 5px 1px;
    border-radius: 4px;
}

/* On the Pro (dark gradient) card */
.pricing-style-one.active-pro .pricing-keyword {
    color: #FFD966;
    font-weight: 800;
}

/* ------------------------------------------
   Pricing – Pro plan (dark premium style)
   ------------------------------------------ */
.pricing-style-one.active-pro {
    border: none;
    background: linear-gradient(135deg, #0f0c29 0%, #1e1b4b 55%, #312e81 100%);
    z-index: 9;
}

.pricing-style-one.active-pro h2,
.pricing-style-one.active-pro h4,
.pricing-style-one.active-pro li,
.pricing-style-one.active-pro p {
    color: var(--white);
}

.pricing-style-one.active-pro li i.fas.fa-check-circle {
    color: #a78bfa;
}

/* ------------------------------------------
   Testimonial – Initials Avatar
   ------------------------------------------ */
.testimonial-style-one-item .provider .thumb .avatar-initials {
    height: 80px;
    width: 80px;
    min-width: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    margin-right: 25px;
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* ------------------------------------------
   Hero – Platform Word Cycling Effect
   ------------------------------------------ */
.platform-cycle {
    display: inline-block;
    position: relative;
}

.platform-word {
    display: inline-block;
    background: linear-gradient(135deg, #1877F2, #4267B2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: platformSlideIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    will-change: transform, opacity, filter;
}

@keyframes platformSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
    }
}

@keyframes platformSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        transform: translateY(-24px);
        filter: blur(8px);
    }
}

/* --- Custom Preloader Override --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#metize-preloader {
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #ffffff;
}

#metize-preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.fade-preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.preloader-brand {
    display: flex;
    align-items: center;
}

.preloader-brand-name {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -1px;
    font-family: 'Manrope', sans-serif;
    background: linear-gradient(135deg, #2667FF, #4FC3F7, #7B42F6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pulseLogo 1.8s infinite ease-in-out;
}

.preloader-tagline {
    font-size: 1rem;
    color: #555;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    text-align: center;
}

.preloader-whatsapp {
    font-weight: 700;
    background: linear-gradient(135deg, #25D366, #128C7E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes pulseLogo {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* Remove original pseudo-element logo */
.metize-preloader .animation-preloader::after {
    display: none !important;
}

/* ---- Contact form field validation ---- */
.contact-form .alert-error {
    display: block;
    color: #e53935;
    font-size: 0.82em;
    margin-top: 4px;
    min-height: 1.2em;
}

.contact-form .form-control.field-error {
    border-color: #e53935;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.15);
}

/* Discount effect on focus */
@keyframes discountGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(123, 66, 246, 0.7);
        border-color: #7B42F6;
    }
    50% {
        box-shadow: 0 0 20px 8px rgba(51, 102, 255, 0.8);
        border-color: #3366FF;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(51, 102, 255, 0);
        border-color: #e7e7e7;
    }
}

.discount-applied {
    animation: discountGlow 2.5s ease-out;
}

/* Custom rounded borders for form inputs */
.contact-form .form-control {
    border-radius: 12px;
    padding: 16px 20px;
}