/* Public styles for project pages */

body {
    flex-grow: 1;
    width: 100%;
    /*min-height: 100%;*/
    display: flex;
    flex-direction: column;
}

.r-block { margin-bottom: 0; }

/* Base Component Styles */
.image-overlay-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.shape-divider-top, .shape-divider-bottom { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 5; pointer-events: none; }
.shape-divider-top { top: 0; transform: translateY(-99%); }
.shape-divider-bottom { bottom: 0; transform: translateY(99%); }

/* Text / Paragraph Styles */
p.has-drop-cap::first-letter { float: left; font-size: 3.5em; line-height: 0.8; font-weight: 700; margin-right: 0.1em; color: var(--bs-primary, #4f46e5); }
p.text-cols-2 { column-count: 2; column-gap: 2rem; }
p.text-cols-3 { column-count: 3; column-gap: 2rem; }

/* Blockquote Styles */
blockquote.bq-border-left { border-left: 4px solid var(--bs-primary, #4f46e5); padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; background: rgba(var(--bs-primary-rgb, 79,70,229), 0.04); }
blockquote.bq-border-top { border-top: 4px solid var(--bs-primary, #4f46e5); padding: 1.25rem 1.5rem; border-radius: 0 0 8px 8px; background: rgba(var(--bs-primary-rgb, 79,70,229), 0.04); }
blockquote.bq-card { padding: 1.5rem; border-radius: 12px; background: var(--bs-tertiary-bg, #f8f9fa); border: 1px solid var(--bs-border-color, #dee2e6); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
blockquote.bq-large { padding: 2rem 1.5rem; font-size: 1.25em; font-style: italic; text-align: center; }
blockquote.bq-minimal { padding: 0.75rem 0; border: none; background: none; }
blockquote.bq-has-icon { position: relative; padding-top: 2.5rem; }
blockquote.bq-has-icon::before { content: "\201C"; position: absolute; top: 0; left: 0.5rem; font-family: Georgia, serif; font-weight: 700; color: var(--bs-primary, #4f46e5); opacity: 0.2; line-height: 1; }
blockquote.bq-has-icon.bq-icon-sm::before { font-size: 3rem; }
blockquote.bq-has-icon.bq-icon-md::before { font-size: 4.5rem; }
blockquote.bq-has-icon.bq-icon-lg::before { font-size: 6rem; }
blockquote.bq-large.bq-has-icon::before { left: 50%; transform: translateX(-50%); }

/* Component Specific Logic Styles */
.pricing-featured-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--bs-primary); color: white; padding: 4px 15px; border-radius: 50px; font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3); }
.pricing-cycle-toggle:checked { background-color: var(--bs-success); border-color: var(--bs-success); }
.pricing-plans-row .card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pricing-plans-row .card.border-primary { transform: scale(1.03); z-index: 2; }
.quote-item-container { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.team-member-container { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.team-member-container:hover { transform: translateY(-5px); }
.team-member-container:hover .team-photo { transform: scale(1.1); }
.team-photo { transition: transform 0.5s ease, border-radius 0.3s ease; }
.team-photo-wrapper { overflow: hidden; border-radius: 1rem; }
.tab-slide { display: none; transform: translateX(20px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
.tab-slide.active { display: block; transform: translateX(0); opacity: 1; }

/* Carousel Cinematic Enhancements */
.carousel-progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.2); z-index: 10; }
.progress-fill { height: 100%; background: var(--bs-primary); width: 0; }
.carousel-item.active ~ .carousel-progress-bar .progress-fill { animation: carouselProgress linear forwards; }
@keyframes carouselProgress { 0% { width: 0; } 100% { width: 100%; } }
.ken-burns-img { animation: kenburns 10s ease-in-out infinite alternate; }
@keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.anim-slide-up .carousel-title-anim { animation: fadeInUp 0.8s ease both; }
.anim-slide-up .carousel-desc-anim { animation: fadeInUp 0.8s ease 0.2s both; }
.anim-slide-up .carousel-btn-anim { animation: fadeInUp 0.8s ease 0.4s both; }

/* Timeline Component Styles */
.timeline-container { position: relative; }
.timeline-item { position: relative; }
.timeline-centered .timeline-item { width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 0 !important; }
.timeline-centered .timeline-badge-wrapper { position: absolute; left: 50%; transform: translateX(-50%); height: 100%; }
.timeline-centered .timeline-content { width: 45%; padding: 0 30px; text-align: right; }
.timeline-centered .timeline-item:nth-child(even) .timeline-content { margin-left: 55%; text-align: left; }
.timeline-centered::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(var(--bs-primary-rgb), 0.1); transform: translateX(-50%); }
.timeline-horizontal { display: flex; overflow-x: auto; gap: 0; padding-bottom: 2rem; }
.timeline-horizontal .timeline-item { flex: 0 0 300px; flex-direction: column !important; gap: 1.5rem !important; }
.timeline-horizontal .timeline-badge-wrapper { flex-direction: row !important; width: 100%; align-items: center; }
.timeline-horizontal .timeline-line { height: 2px; width: 100% !important; margin: 0 !important; }
.timeline-horizontal .timeline-content { text-align: center; padding-right: 2rem; }
.tm-status-completed .timeline-badge { background-color: var(--bs-success) !important; color: white !important; }
.tm-status-completed .timeline-line { background-color: var(--bs-success) !important; opacity: 1 !important; }
.tm-status-active .timeline-badge { background-color: var(--bs-primary) !important; color: white !important; box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.2); animation: tm-active-pulse 2s infinite; }
@keyframes tm-active-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(var(--bs-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
}
.line-status-completed { background-color: var(--bs-success) !important; opacity: 1 !important; }
.line-status-active { background: linear-gradient(to bottom, var(--bs-primary), #e9ecef) !important; opacity: 1 !important; }
.line-status-pending { background-color: #e9ecef !important; opacity: 1 !important; }
.timeline-horizontal .line-status-active { background: linear-gradient(to right, var(--bs-primary), #e9ecef) !important; }

/* Visual Styles */
.icon-box-container { transition: transform 0.3s ease, box-shadow 0.3s ease !important; }
.icon-box-container:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; }
.icon-box-container .icon-wrapper { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
.icon-box-container:hover .icon-wrapper { transform: scale(1.1) rotate(5deg); }
.tm-style-glass .timeline-badge { background: rgba(var(--bs-primary-rgb), 0.1) !important; color: var(--bs-primary) !important; backdrop-filter: blur(5px); border: 1px solid rgba(var(--bs-primary-rgb), 0.2); }
.tm-style-glass .timeline-content { background: rgba(255,255,255,0.05); border: 1px solid rgba(0,0,0,0.05); padding: 1.5rem !important; border-radius: 15px; box-shadow: 0 8px 32px rgba(0,0,0,0.05); }
.tm-style-minimal .timeline-badge { background: transparent !important; color: var(--bs-primary) !important; border: 2px solid var(--bs-primary); font-weight: 800; shadow: none !important; }
.tm-style-minimal .timeline-line { border-left-style: dashed !important; background: transparent !important; border-left-width: 2px; }

/* Premium Header Effects */
.navbar { transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.nav-glass { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; background: rgba(255, 255, 255, 0.7) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; }
body[data-bs-theme="dark"] .nav-glass { background: rgba(33, 37, 41, 0.7) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; }
.nav-transparent-scroll:not(.is-scrolled) { background-color: transparent !important; border-bottom-color: transparent !important; opacity: 1 !important; }
.nav-transparent-scroll.is-scrolled { opacity: var(--nav-scroll-opacity-d, var(--nav-scroll-opacity-m, 1)) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; }
.nav-shrink { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.nav-shrink.is-scrolled { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; }

/* Premium Social Follow Styles */
.social-container .social-btn { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; }
.social-v-sm .social-btn { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; }
.social-v-md .social-btn { width: 44px !important; height: 44px !important; font-size: 1.25rem !important; }
.social-v-lg .social-btn { width: 60px !important; height: 60px !important; font-size: 1.75rem !important; }
.social-s-solid .social-btn[data-platform="facebook"] { background-color: #1877F2 !important; color: #fff !important; }
.social-s-solid .social-btn[data-platform="twitter-x"] { background-color: #000000 !important; color: #fff !important; }
.social-s-solid .social-btn[data-platform="instagram"] { background-color: #E4405F !important; color: #fff !important; }
.social-s-solid .social-btn[data-platform="linkedin"] { background-color: #0A66C2 !important; color: #fff !important; }
.social-s-solid .social-btn[data-platform="youtube"] { background-color: #FF0000 !important; color: #fff !important; }
.social-s-solid .social-btn[data-platform="tiktok"] { background-color: #000000 !important; color: #fff !important; }
.social-s-solid .social-btn[data-platform="whatsapp"] { background-color: #25D366 !important; color: #fff !important; }
.social-s-outline .social-btn { background-color: transparent !important; border: 1px solid currentColor !important; }
.social-s-outline .social-btn[data-platform="facebook"] { color: #1877F2 !important; }
.social-s-outline .social-btn[data-platform="twitter-x"] { color: #000000 !important; }
.social-s-outline .social-btn[data-platform="instagram"] { color: #E4405F !important; }
.social-s-outline .social-btn[data-platform="linkedin"] { color: #0A66C2 !important; }
.social-s-outline .social-btn[data-platform="youtube"] { color: #FF0000 !important; }
.social-s-outline .social-btn[data-platform="tiktok"] { color: #000000 !important; }
.social-s-outline .social-btn[data-platform="whatsapp"] { color: #25D366 !important; }
.social-s-minimal .social-btn { background-color: transparent !important; border: none !important; box-shadow: none !important; }
.social-s-minimal .social-btn[data-platform="facebook"] { color: #1877F2 !important; }
.social-s-minimal .social-btn[data-platform="twitter-x"] { color: #000000 !important; }
.social-s-minimal .social-btn[data-platform="instagram"] { color: #E4405F !important; }
.social-s-minimal .social-btn[data-platform="linkedin"] { color: #0A66C2 !important; }
.social-s-minimal .social-btn[data-platform="youtube"] { color: #FF0000 !important; }
.social-s-minimal .social-btn[data-platform="tiktok"] { color: #000000 !important; }
.social-s-minimal .social-btn[data-platform="whatsapp"] { color: #25D366 !important; }
.social-s-glass .social-btn { background-color: rgba(255,255,255,0.1) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255,255,255,0.2) !important; color: #fff !important; }
.social-s-glass .social-btn:hover { background-color: rgba(255,255,255,0.2) !important; }
.social-btn:hover { opacity: 0.85; transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important; }

/* CMS STYLES */
.cms-item-wrapper { transition: transform 0.2s ease; }
.cms-item-wrapper:hover { transform: translateY(-5px); }
.text-truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Table & Layout Styles */
table { table-layout: auto; } 
table.fixed-layout { table-layout: fixed; width: 100%; } 
table.fixed-layout th { overflow: hidden; }

/* Modern Section Utilities */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.hover-grow { transition: transform 0.3s ease; }
.hover-grow:hover { transform: scale(1.03); }
.text-gradient-primary {
    background: linear-gradient(135deg, var(--bs-primary, #0d6efd), var(--bs-info, #0dcaf0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bg-gradient-subtle {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb, 13,110,253), 0.03) 0%, transparent 60%);
}
.bg-gradient-dark-subtle {
    background: linear-gradient(135deg, #1a1d23 0%, #2d3748 100%);
}
.border-gradient {
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
}
.border-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--bs-primary, #0d6efd), var(--bs-info, #0dcaf0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.glow-sm { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb, 13,110,253), 0.15); }
.backdrop-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Blog Content Typography */
.blog-content { font-size: 1.1rem; line-height: 1.8; color: #1a1a2e; max-width: 720px; margin: 0 auto; }
.blog-content h2 { font-size: 1.75rem; margin: 2rem 0 1rem; font-weight: 700; }
.blog-content h3 { font-size: 1.4rem; margin: 1.75rem 0 0.75rem; font-weight: 600; }
.blog-content h4 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; font-weight: 600; }
.blog-content p { margin-bottom: 1.25rem; }
.blog-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; }
.blog-content a { color: var(--bs-primary); text-decoration: underline; }
.blog-content blockquote { border-left: 4px solid var(--bs-primary); padding: 1rem 1.5rem; margin: 1.5rem 0; background: rgba(var(--bs-primary-rgb), 0.04); border-radius: 0 8px 8px 0; font-style: italic; }
.blog-content pre { background: #1e1e2e; color: #cdd6f4; padding: 1.25rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; font-size: 0.9rem; }
.blog-content code { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.9em; }
.blog-content :not(pre) > code { background: #f1f3f5; padding: 0.15em 0.4em; border-radius: 4px; color: #e45858; }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.blog-content li { margin-bottom: 0.4rem; }
.blog-content hr { border: none; border-top: 2px solid #e9ecef; margin: 2rem 0; }
.blog-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.blog-content th, .blog-content td { border: 1px solid #dee2e6; padding: 0.75rem; text-align: left; }
.blog-content th { background: #f8f9fa; font-weight: 600; }
.blog-content figure { margin: 1.5rem 0; text-align: center; }
.blog-content figcaption { font-size: 0.875rem; color: #6c757d; margin-top: 0.5rem; }

/* Media & Interactions */
img.img-fluid { transition: opacity 0.2s; }
.map-overlay, .video-overlay { position: absolute; inset: 0; z-index: 10; }

/* Audio & Video Empty States */
.audio-empty-state, .video-empty-state { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.25rem; border: 2px dashed #d1d5db; border-radius: 8px; color: #9ca3af; font-size: 0.85rem; }
.audio-empty-state i, .video-empty-state i { font-size: 1.25rem; }
.video-empty-state { padding: 3rem 1.25rem; flex-direction: column; }
.video-empty-state i { font-size: 2rem; }

/* "Free website by Webkio" badge — shown on published sites (free plans).
   Moved here from page/index.phtml (which loads this stylesheet). */
.sp-made-with{position:fixed;right:18px;bottom:18px;z-index:2147483000;display:inline-flex;align-items:center;gap:8px;
    padding:10px 16px;border-radius:999px;
    background:linear-gradient(120deg,#4338ca,#5b54d6,#0e7490);
    background-size:220% 220%;color:#fff;
    font:700 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;letter-spacing:.01em;
    text-decoration:none;box-shadow:0 8px 26px rgba(99,102,241,.32),0 2px 8px rgba(0,0,0,.18);
    transition:transform .18s ease,box-shadow .18s ease;
    animation:spBadgeIn .5s ease both .8s, spBadgeShift 12s ease-in-out infinite}
.sp-made-with:hover{transform:translateY(-3px) scale(1.03);
    box-shadow:0 12px 34px rgba(99,102,241,.42),0 3px 10px rgba(0,0,0,.22);color:#fff}
.sp-made-with strong{font-weight:800}
.sp-made-with-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;
    background:rgba(255,255,255,.28)}
@keyframes spBadgeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes spBadgeShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (max-width:480px){.sp-made-with{right:12px;bottom:12px;padding:9px 14px;font-size:12px}}
@media print{.sp-made-with{display:none}}
@media (prefers-reduced-motion:reduce){.sp-made-with{animation:spBadgeIn .5s ease both .8s}}