/* * Layout chrome: the first-paint stylesheet. * * This lived inline in resources/views/website/layouts/layout.blade.php as the * style block labelled "Critical CSS". It is byte-identical on every page, so it * was 14 KB of each of the 3,225 URLs in text_html_ratio.csv. As an external * stylesheet the browser fetches it once and reuses it for the rest of the visit. * * Still render-blocking, and still linked from the same position in , ahead * of style.min.css (which loads async), so the cascade and the first paint are * unchanged apart from one same-origin request. */ /* Critical CSS */ .preloader { height: 100%; width: 100%; background: #FFF; position: fixed; left: 0; top: 0; z-index: 9999; } .preloader-item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .navbar-brand img { max-height: 70px; } @media (max-width: 767px) { .navbar-brand img { max-height: 50px; } } .header-sticky { position: sticky; top: 0; z-index: 1020; } .badge { white-space: normal; } .float{ position:fixed; width:60px; height:60px; bottom:40px; left:30px; background-color:#25d366; color:#FFF; border-radius:50px; text-align:center; font-size:30px; box-shadow: 2px 2px 3px #999; z-index:100; } .my-float{ margin-top:16px; } @media (max-width: 992px) { [data-bs-theme-value], #bd-theme, .theme-icon-active, .nav-pills-primary-soft.theme-icon-active { display: none !important; } } @media (min-width: 1200px) { .navbar-expand-xl .navbar-brand .navbar-brand-item{ height: 70px; } } /* Top Header Social Icons */ .social-icon-circle { width: 32px; height: 32px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; font-size: 14px; } .social-icon-circle:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); color: white !important; } /* Contact Icons (Email & WhatsApp) */ .contact-icon-circle { width: 32px; height: 32px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; font-size: 14px; } .contact-icon-circle:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); color: white !important; } /* Language Dropdown */ .lang-flag-icon { width: 20px; height: 15px; object-fit: contain; flex-shrink: 0; } .lang-dropdown-toggle { padding: 0.25rem 0.5rem; border-radius: 0.25rem; transition: all 0.3s ease; } .lang-dropdown-toggle:hover { background-color: rgba(255, 255, 255, 0.15); } .lang-dropdown-menu { min-width: 180px; padding: 0.5rem 0; border: none; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } .lang-dropdown-item { padding: 0.625rem 1rem; transition: all 0.2s ease; border: none; } /* ========================================= Dark theme global overrides ========================================= */ /* Logo variants */ [data-bs-theme="light"] .dark-mode-item { display: none !important; } [data-bs-theme="light"] .light-mode-item { display: inline-block !important; } [data-bs-theme="dark"] .dark-mode-item { display: inline-block !important; } [data-bs-theme="dark"] .light-mode-item { display: none !important; } /* Core palette for dark theme */ [data-bs-theme="dark"] { color-scheme: dark; --bs-body-bg: #050608; --bs-body-color: #f5f5f5; --bs-heading-color: #ffffff; --bs-border-color: #2d2d2d; --bs-card-bg: #141414; --bs-card-border-color: #2d2d2d; --et-surface-1: #111111; --et-surface-2: #181818; --et-surface-3: #1f1f1f; --et-muted: #c4c4c4; } [data-bs-theme="dark"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Text colors on dark backgrounds */ [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 { color: var(--bs-heading-color); } [data-bs-theme="dark"] p, [data-bs-theme="dark"] .text-body, [data-bs-theme="dark"] .lead { color: #e5e5e5; } [data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] .text-black { color: #ffffff !important; } [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .small, [data-bs-theme="dark"] small { color: var(--et-muted) !important; } /* Links */ [data-bs-theme="dark"] a { color: var(--bs-primary); } [data-bs-theme="dark"] a:hover { color: #ffce80; } /* Surfaces / backgrounds */ [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .bg-mode, [data-bs-theme="dark"] .offcanvas, [data-bs-theme="dark"] .dropdown-menu { background-color: var(--et-surface-1) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .card { background-color: var(--bs-card-bg) !important; border-color: var(--bs-card-border-color) !important; color: var(--bs-body-color); } [data-bs-theme="dark"] .modern-breadcrumb { background-color: var(--et-surface-2); } [data-bs-theme="dark"] .navbar, [data-bs-theme="dark"] .header-sticky { background-color: #050608; } [data-bs-theme="dark"] footer { background-color: #050608; color: var(--bs-body-color); } /* Forms & inputs */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] textarea { background-color: #121212; color: #f5f5f5; border-color: #3a3a3a; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus, [data-bs-theme="dark"] textarea:focus { background-color: #151515; color: #ffffff; border-color: var(--bs-primary); box-shadow: 0 0 0 0.15rem rgba(255, 193, 7, 0.25); } [data-bs-theme="dark"] .form-control::placeholder, [data-bs-theme="dark"] textarea::placeholder { color: #a0a0a0; } [data-bs-theme="dark"] .input-group-text { background-color: #181818; border-color: #3a3a3a; color: #e5e5e5; } /* Buttons */ [data-bs-theme="dark"] .btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #ffffff; } [data-bs-theme="dark"] .btn-primary:hover, [data-bs-theme="dark"] .btn-primary:focus { background-color: #ffb347; border-color: #ffb347; color: #111111; } [data-bs-theme="dark"] .btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); } [data-bs-theme="dark"] .btn-outline-primary:hover, [data-bs-theme="dark"] .btn-outline-primary:focus { background-color: var(--bs-primary); color: #111111; } [data-bs-theme="dark"] .btn-light, [data-bs-theme="dark"] .btn-outline-light { background-color: #f5f5f5; color: #111111; border-color: #f5f5f5; } [data-bs-theme="dark"] .btn-light:hover, [data-bs-theme="dark"] .btn-outline-light:hover { background-color: #ffffff; color: #000000; } /* Badges, pills, chips */ [data-bs-theme="dark"] .badge.bg-light, [data-bs-theme="dark"] .badge.bg-white { background-color: #2a2a2a !important; color: #f5f5f5 !important; } /* Tables */ [data-bs-theme="dark"] table, [data-bs-theme="dark"] .table { color: #e5e5e5; } [data-bs-theme="dark"] .table thead th { background-color: #181818; border-color: #2d2d2d; } [data-bs-theme="dark"] .table tbody tr { border-color: #2d2d2d; } /* Sliders / carousels */ [data-bs-theme="dark"] .carousel, [data-bs-theme="dark"] .swiper, [data-bs-theme="dark"] .swiper-slide { background-color: transparent; } /* Dropdowns, modals */ [data-bs-theme="dark"] .modal-content { background-color: var(--et-surface-2); color: var(--bs-body-color); } /* Generic utility: ensure any remaining light backgrounds get a dark surface */ [data-bs-theme="dark"] .shadow-sm, [data-bs-theme="dark"] .shadow, [data-bs-theme="dark"] .shadow-lg { background-color: inherit; } .lang-dropdown-item:hover { background-color: rgba(0, 0, 0, 0.05); } .lang-dropdown-item.active { background-color: var(--bs-primary) !important; color: white !important; } .lang-dropdown-item.active:hover { background-color: var(--bs-primary) !important; opacity: 0.9; } @media (max-width: 575.98px) { .social-icon-circle, .contact-icon-circle { width: 28px; height: 28px; font-size: 12px; } .lang-flag-icon { width: 18px; height: 13px; } .lang-dropdown-menu { min-width: 160px; } } /* Top Header Responsive */ .bg-primary .row { flex-wrap: nowrap; } @media (max-width: 991.98px) { .bg-primary .col-lg-4 { flex: 0 0 auto; width: auto; max-width: 100%; } .bg-primary .col-lg-8 { flex: 1 1 auto; min-width: 0; } } @media (max-width: 575.98px) { .bg-primary .small { font-size: 0.875rem; } .bg-primary .row { justify-content: space-between; } .lang-dropdown-toggle { padding: 0.25rem; } } /* Mobile-first light & clean styling */ @media (max-width: 992px) { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { padding-left: 1rem; padding-right: 1rem; } .card { border: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .rounded-3 { border-radius: 0.75rem !important; } .shadow { box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important; } .shadow-lg { box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important; } } /* Modern Breadcrumb */ .modern-breadcrumb { background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.05) 0%, rgba(var(--bs-primary-rgb), 0.02) 100%); border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.1); } .breadcrumb-modern { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; } .breadcrumb-modern-item { display: flex; align-items: center; font-size: 0.8125rem; } .breadcrumb-modern-link { color: var(--bs-primary); text-decoration: none; padding: 0.375rem 0.625rem; border-radius: 0.375rem; transition: all 0.3s ease; display: inline-flex; align-items: center; font-weight: 500; } .breadcrumb-modern-link:hover { background-color: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-primary); transform: translateY(-1px); } .breadcrumb-modern-text { color: var(--bs-gray-600); padding: 0.375rem 0.625rem; display: inline-flex; align-items: center; font-weight: 500; } .breadcrumb-modern-item.active .breadcrumb-modern-text { color: var(--bs-primary); font-weight: 600; } .breadcrumb-modern-separator { color: rgba(var(--bs-primary-rgb), 0.4); font-size: 0.75rem; margin: 0 0.25rem; } @media (max-width: 767.98px) { .breadcrumb-modern { font-size: 0.75rem; } .breadcrumb-modern-link, .breadcrumb-modern-text { padding: 0.25rem 0.4rem; } .breadcrumb-modern-separator { margin: 0 0.125rem; } }