/* RHA Solutions - Premium Global Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');



:root {

    --primary: #0066cc;

    --accent: #004499;

    --text-main: #1d1d1f;

    --text-muted: #6e6e73;

    --section-alt-bg: #f5f5f7;

}



body { font-family: 'Inter', sans-serif; color: var(--text-main); line-height: 1.7; overflow-x: hidden; }

h1, h2, h3, h4, .navbar-brand, .nav-link, footer h5 { font-family: 'Plus Jakarta Sans', sans-serif !important; letter-spacing: -0.02em; }



/* NAVBAR */

.navbar { background: transparent !important; padding: 1.5rem 0; transition: all 0.4s ease; position: fixed; width: 100%; top: 0; z-index: 1000; border-bottom: 1px solid rgba(255,255,255,0.05); }

.navbar.scrolled { background: rgba(255, 255, 255, 0.98) !important; border-bottom: 1px solid #e2e8f0; padding: 0.8rem 0; }

.navbar-brand img { 

    height: 85px; 

    width: auto;

    background: white; 

    padding: 4px; 

    border-radius: 10px; 

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 

    box-shadow: 0 10px 30px rgba(0,0,0,0.25); 

}



.navbar.scrolled .navbar-brand img { 

    background: transparent; 

    padding: 0; 

    box-shadow: none; 

    height: 65px; 

}

.navbar-brand span { color: rgba(255,255,255,0.7); }

.navbar.scrolled .navbar-brand span { color: var(--primary); }

.nav-link { color: #ffffff !important; font-weight: 600 !important; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; margin-left: 25px; transition: 0.3s; }

.navbar.scrolled .nav-link { color: var(--text-main) !important; }

.nav-link:hover, .nav-link.active { color: var(--primary) !important; }

.navbar-toggler { border-color: rgba(255,255,255,0.5); }

.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.hero h1, .display-3, .display-4 {

    text-wrap: balance;

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

}



/* ========================================= */

/* BLOG SECTION - DARK CONSISTENT STYLE     */

/* ========================================= */



.blog-card {

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    overflow: hidden;

    transition: all 0.4s ease;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.blog-card:hover {

    transform: translateY(-10px);

    background: rgba(255, 255, 255, 0.05);

    border-color: var(--primary);

    box-shadow: 0 20px 40px rgba(0,0,0,0.4);

}



.blog-card-img {

    height: 200px;

    background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, rgba(0,0,0,0.4) 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.blog-card-body { padding: 30px; flex-grow: 1; }

.blog-category { color: var(--primary); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 2px; display: block; margin-bottom: 15px; }

.blog-card-title { color: #fff; font-size: 1.4rem; font-weight: 700; margin-bottom: 15px; line-height: 1.4; }

.blog-card-text { color: rgba(255,255,255,0.6); font-size: 0.95rem; margin-bottom: 25px; }

.blog-card-footer { padding: 20px 30px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: rgba(255,255,255,0.4); }



.blog-content { line-height: 1.8; font-size: 1.1rem; color: rgba(255,255,255,0.85); }

.blog-content h2, .blog-content h3 { color: #fff; margin-top: 40px; margin-bottom: 20px; font-weight: 700; }

.blog-content p { margin-bottom: 25px; }



/* HERO */

.hero { 

    padding: 220px 0 160px; 

    background: radial-gradient(circle at top right, rgba(0, 120, 255, 0.5), transparent 60%),

                radial-gradient(circle at bottom left, rgba(0, 80, 200, 0.7), transparent 60%),

                #000B21; 

    background-size: 300% 300%;

    animation: gradientBreathing 12s ease-in-out infinite;

    color: #ffffff; 

    text-align: center; 

    position: relative;

    overflow: hidden;

}

@keyframes gradientBreathing {

    0% { background-position: 0% 0%; }

    50% { background-position: 100% 100%; }

    100% { background-position: 0% 0%; }

}



.hero::before {

    content: '';

    position: absolute;

    top: -100px; left: -100px; right: -100px; bottom: -100px;

    background-image: radial-gradient(rgba(255,255,255,1) 2px, transparent 2px);

    background-size: 45px 45px;

    opacity: 0.12;

    z-index: 0;

    animation: gridDataFlow 10s linear infinite;

}

@keyframes gridDataFlow {

    0% { transform: translateY(0); }

    100% { transform: translateY(45px); }

}

.hero .container { position: relative; z-index: 2; }

.hero h1 { font-size: 4.5rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; text-shadow: 0 10px 30px rgba(0,0,0,0.3); }

.hero p { font-size: 1.35rem; color: rgba(255,255,255,0.85); max-width: 850px; margin: 0 auto 2rem; }

.btn-hero { background: white; color: var(--primary); font-weight: 700; padding: 16px 45px; border-radius: 50px; border: none; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; text-decoration: none; display: inline-block; }

.btn-hero:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.25); color: var(--accent); }



/* SECTIONS */

.section-title { font-weight: 800; font-size: 2.7rem; margin-bottom: 1rem; color: #111; }

.section-subtitle { color: var(--text-muted); font-size: 1.15rem; max-width: 700px; margin: 0 auto 3rem; }

.service-card { padding: 45px 35px; border-radius: 20px; background: rgba(255,255,255,0.75); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.6); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); height: 100%; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; box-shadow: 0 10px 40px rgba(0,0,0,0.03); }

.service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transition: transform 0.4s ease; transform-origin: left; z-index: 1;}

.service-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 30px 60px rgba(0,102,204,0.1); color: inherit; background: rgba(255,255,255,0.95); }

.service-card:hover::before { transform: scaleX(1); }

.service-card .icon-wrap { position: relative; z-index: 2; width: 70px; height: 70px; border-radius: 16px; background: linear-gradient(135deg, rgba(0,102,204,0.15), rgba(0,68,153,0.1)); display: flex; align-items: center; justify-content: center; margin-bottom: 25px; transition: 0.4s; }

.service-card:hover .icon-wrap { background: var(--primary); box-shadow: 0 10px 20px rgba(0,102,204,0.3); }

.service-card:hover .icon-wrap i { color: white; }

.service-card .icon-wrap i { font-size: 1.8rem; color: var(--primary); }

.service-card h3 { font-weight: 700; font-size: 1.35rem; margin-bottom: 12px; }

.service-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0; }

.service-card .card-link { color: var(--primary); font-weight: 600; font-size: 0.9rem; margin-top: 15px; display: inline-block; transition: 0.3s; }

.service-card:hover .card-link { letter-spacing: 1px; }



/* WHY US & OTHERS */

.why-item { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; }

.why-item .num { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.why-item h4 { font-weight: 700; font-size: 1.15rem; margin-bottom: 5px; }

.why-item p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0; }



.stats-row .stat-item { text-align: center; padding: 30px; }

.stat-item .stat-number { font-family: 'Exo 2', sans-serif; font-size: 3rem; font-weight: 800; color: var(--primary); line-height: 1; }

.stat-item .stat-label { color: var(--text-muted); font-size: 0.9rem; margin-top: 8px; }



.cta-section { background: radial-gradient(circle at center, rgba(0, 102, 204, 0.6), transparent 80%), #000B21; color: white; text-align: center; position: relative; }

.cta-section::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1px);

    background-size: 35px 35px;

    opacity: 0.05;

}

.cta-section .container { position: relative; z-index: 2; }

.cta-section h2 { font-weight: 800; }

.cta-section p { color: rgba(255,255,255,0.85); }

.btn-cta { background: white; color: var(--primary); font-weight: 700; padding: 14px 40px; border-radius: 50px; border: none; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; text-decoration: none; display: inline-block; }

.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); color: var(--accent); }



/* FOOTER */

footer { background: #000B21; color: white; padding: 80px 0 30px; border-top: 1px solid rgba(255,255,255,0.05); }

footer h5 { font-weight: 700; margin-bottom: 25px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; color: white; }

footer a { color: #ccc; text-decoration: none; transition: 0.3s; display: block; margin-bottom: 10px; }

footer a:hover { color: var(--primary); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 50px; padding-top: 20px; color: #888; font-size: 0.85rem; }



@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.animate-in { animation: fadeInUp 0.7s ease forwards; }



/* ========================================= */

/* NUOVI STILI PER CONVERSIONE (CRO)         */

/* ========================================= */



.btn-nav {

    background-color: var(--primary);

    color: white !important;

    font-weight: 700;

    padding: 10px 25px;

    border-radius: 50px;

    margin-left: 20px;

    transition: all 0.3s ease;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 0.9rem;

    text-decoration: none;

    border: 2px solid var(--primary);

}

.navbar.scrolled .btn-nav:hover {

    background-color: var(--accent);

    color: white !important;

    border-color: var(--accent);

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(0,102,204,0.3);

}

.navbar:not(.scrolled) .btn-nav {

    background: transparent;

    border-color: rgba(255,255,255,0.8);

}

.navbar:not(.scrolled) .btn-nav:hover {

    background: white;

    color: var(--primary) !important;

    border-color: white;

}



/* PROCESS TIMELINE */

.process-row { position: relative; display: flex; justify-content: space-between; margin-top: 50px; }

.process-row::before { content: ''; position: absolute; top: 45px; left: 10%; right: 10%; height: 2px; background: rgba(0,102,204,0.1); z-index: 0; }



.process-step { text-align: center; position: relative; z-index: 1; padding: 0 15px; }

.process-step .step-icon { 

    width: 90px; height: 90px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; 

    box-shadow: 0 15px 35px rgba(0,0,0,0.05); border: 1px solid rgba(0,102,204,0.08); transition: 0.4s; position: relative;

}

.process-step:hover .step-icon { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,102,204,0.15); border-color: var(--primary); }

.process-step .step-icon i { font-size: 1.8rem; color: var(--primary); }

.process-step .step-number { 

    position: absolute; top: -5px; right: -5px; width: 30px; height: 30px; background: var(--primary); color: white; border-radius: 50%; 

    display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; border: 3px solid white; 

}

.process-step h4 { font-weight: 800; font-size: 1.25rem; margin-bottom: 12px; }

.process-step p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }



@media (max-width: 767px) {

    .process-row { flex-direction: column; gap: 40px; }

    .process-row::before { display: none; }

}



/* Stili Pagina Contatti */

.contact-info-box { padding: 40px; background: white; border-radius: 20px; border: 1px solid rgba(0,0,0,0.06); height: 100%; }

.contact-item { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; }

.contact-item i { font-size: 1.5rem; color: var(--primary); width: 25px; }

.contact-item h5 { font-weight: 700; font-size: 1.1rem; margin-bottom: 5px; }

.contact-item p { color: var(--text-muted); margin-bottom: 0; }



.contact-form-box { padding: 50px; background: white; border-radius: 20px; box-shadow: 0 15px 45px rgba(0,0,0,0.05); }

.form-control, .form-select { border-radius: 12px; padding: 14px 20px; border: 1px solid #e2e8f0; background-color: #f8fafc; font-size: 0.95rem; }

.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0,102,204,0.1); background-color: white; }

.form-label { font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--text-main); }

.btn-submit { background-color: var(--primary); color: white; padding: 16px 30px; border-radius: 50px; font-weight: 700; border: none; width: 100%; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; }

.btn-submit:hover { background-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,102,204,0.3); color: white; }



@media (min-width: 992px) {

    .home-title {

        font-size: 5.5rem !important;

        letter-spacing: -2px !important;

    }

    .home-subtitle {

        font-size: 1.45rem !important;

    }

}



/* RESPONSIVE & MOBILE OPTIMIZATIONS */

@media (max-width: 991px) {

    .btn-nav {

        display: block;

        width: 100%;

        text-align: center;

        margin-left: 0 !important;

        margin-top: 15px !important;

    }

    .hero {

        padding: 150px 0 80px;

    }

    .hero h1 {

        font-size: 2.8rem;

    }

}



@media (max-width: 576px) {

    .hero h1 {

        font-size: 2.7rem;

    }

    .hero p {

        font-size: 1.15rem;

    }

    .section-title {

        font-size: 2rem;

    }

}








@media (max-width: 768px) {

    .logo-patch { width: 15%; }

}

/* BLOG STYLES - LIGHT VERSION WITH MOVEMENT */

.blog-header {

    background: radial-gradient(circle at top right, rgba(0, 102, 204, 0.08), transparent 60%),

                radial-gradient(circle at bottom left, rgba(0, 68, 153, 0.05), transparent 60%),

                #ffffff;

    background-size: 200% 200%;

    animation: lightBreathing 10s ease-in-out infinite;

    padding: 180px 0 100px;

    text-align: center;

    position: relative;

    overflow: hidden;

    border-bottom: 1px solid #eee;

}



@keyframes lightBreathing {

    0% { background-position: 0% 0%; }

    50% { background-position: 100% 100%; }

    100% { background-position: 0% 0%; }

}



.blog-header::before, .article-header::before {

    content: '';

    position: absolute;

    top: -100px; left: -100px; right: -100px; bottom: -100px;

    background-image: radial-gradient(#001242 0.8px, transparent 0.8px);

    background-size: 40px 40px;

    opacity: 0.08;

    z-index: 0;

    animation: gridDataFlow 20s linear infinite;

}



.blog-header h1, .blog-header p, .blog-header .container {

    position: relative;

    z-index: 1;

}



.blog-header h1 {

    color: #000514;

    font-weight: 800;

}



.blog-header p {

    color: #666 !important;

}



/* ... rest of existing styles ... */

.blog-card {

    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(0,0,0,0.04);

    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

    height: 100%;

    display: flex;

    flex-direction: column;

    border: 1px solid #f0f0f0;

}



.blog-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(0,0,0,0.08);

    border-color: var(--primary);

}



.blog-card-img {

    height: 180px;

    background: #eef2f7;

    display: flex;

    align-items: center;

    justify-content: center;

}



.blog-card-body {

    padding: 30px;

    flex-grow: 1;

}



.blog-category {

    font-size: 0.7rem;

    font-weight: 800;

    text-transform: uppercase;

    color: var(--primary);

    margin-bottom: 12px;

    display: inline-block;

    letter-spacing: 0.1em;

}



.blog-card-title {

    font-size: 1.35rem;

    font-weight: 800;

    margin-bottom: 15px;

    color: #000514;

    line-height: 1.3;

}



.blog-card-text {

    font-size: 0.95rem;

    color: #555;

    margin-bottom: 25px;

}



.blog-card-footer {

    padding: 0 30px 25px;

    font-size: 0.85rem;

    color: #999;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: none;

}



/* ARTICLE CONTENT STYLES - LIGHT VERSION WITH MOVEMENT */

.article-header {

    padding: 180px 0 100px;

    background: radial-gradient(circle at top right, rgba(0, 102, 204, 0.05), transparent 60%), #ffffff;

    background-size: 200% 200%;

    animation: lightBreathing 12s ease-in-out infinite;

    position: relative;

    overflow: hidden;

    border-bottom: 1px solid #f0f0f0;

}



.article-header .container {

    position: relative;

    z-index: 1;

}



.article-meta {

    font-size: 0.85rem;

    color: var(--primary);

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 20px;

    letter-spacing: 0.1em;

}



.article-content {

    padding: 60px 0 100px;

    font-size: 1.15rem;

    line-height: 1.85;

    color: #2c3e50;

}



.article-content h2 {

    font-size: 2rem;

    font-weight: 800;

    margin-top: 50px;

    margin-bottom: 25px;

    color: #000514;

}



.article-content p {

    margin-bottom: 25px;

}



.article-content img {

    box-shadow: 0 10px 40px rgba(0,0,0,0.1);

}



.sidebar-box {

    background: #fdfdfd;

    padding: 35px;

    border-radius: 15px;

    margin-bottom: 30px;

    border: 1px solid #f0f0f0;

}



/* ========================================= */

/* NUOVE FUNZIONALITÀ BLOG & UX (2026)      */

/* ========================================= */



/* Barra di progresso lettura */

#reading-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 0%;

    height: 4px;

    background: var(--primary);

    z-index: 9999;

    transition: width 0.1s ease;

}



/* Author Box Minimalist */

.author-box {

    padding: 20px 0;

    margin-top: 40px;

    border-top: 1px solid rgba(255,255,255,0.08);

    display: flex;

    align-items: center;

    gap: 15px;

}

.author-img {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: rgba(0,102,204,0.2);

    border: 1px solid rgba(0,102,204,0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 1.2rem;

    font-weight: bold;

    flex-shrink: 0;

}

.author-box h5 {

    font-size: 1rem;

    margin-bottom: 2px;

}

.author-box p {

    font-size: 0.85rem;

    opacity: 0.6;

    margin-bottom: 0 !important;

}



/* Newsletter Box */

.newsletter-inline {

    background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, rgba(0,0,0,0.4) 100%);

    border: 1px solid rgba(0,102,204,0.2);

    border-radius: 20px;

    padding: 40px;

    margin: 60px 0;

    text-align: center;

}



/* Social Share Buttons */

.share-buttons {

    display: flex;

    gap: 15px;

    margin: 30px 0;

    padding-top: 30px;

    border-top: 1px solid rgba(255,255,255,0.05);

}

.share-btn {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    text-decoration: none;

    transition: all 0.3s ease;

    background: rgba(255,255,255,0.05);

}

.share-btn:hover {

    transform: translateY(-5px);

    background: var(--primary);

}



/* WhatsApp Widget */

.whatsapp-widget {

    position: fixed;

    bottom: 30px;

    right: 30px;

    background: #25d366;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 2rem;

    box-shadow: 0 10px 25px rgba(37,211,102,0.3);

    z-index: 999;

    transition: all 0.3s ease;

}

.whatsapp-widget:hover {

    transform: scale(1.1) rotate(10deg);

    color: #fff;

}



/* Related Posts Section */

.related-posts {

    margin-top: 80px;

    padding-top: 50px;

    border-top: 1px solid rgba(255,255,255,0.05);

}



/* Search Bar Blog */

.blog-search-container {

    max-width: 600px;

    margin: 40px auto 0;

    position: relative;

    z-index: 10;

}

.blog-search-input {

    background: rgba(255,255,255,0.05) !important;

    border: 1px solid rgba(255,255,255,0.1) !important;

    color: #fff !important;

    border-radius: 50px !important;

    padding: 15px 30px 15px 50px !important;

}

.blog-search-icon {

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--primary);

}