/* ==========================================================================
   Theme1 (by Diues) — DGcom template look applied to the shared component set.
   Stack: Bootstrap 5.3 (CDN) -> base.css (shared components) ->
          template.css (original DGcom styles) -> this file.
   ========================================================================== */
:root {
  --primary: var(--primary-color);
  --secondary: #777777;
  --light: #F8F8F8;
  --dark: #252525;

  --ink: #252525;
  --ink-2: #3a3a3a;
  --slate: #777777;
  --mute: #8a8a8a;
  --paper: #F8F8F8;
  --paper-2: #f0f0f0;
  --line: #DEE2E6;

  --font-display: var(--font-family, "Open Sans"), sans-serif;
  --font-body: var(--font-family, "Open Sans"), sans-serif;

  --r-xl: 8px;
  --r-lg: 6px;
  --r-md: 6px;
  --r-sm: 5px;
  --nav-h: 64px;
  --shadow-sm: 0 0 45px rgba(0, 0, 0, .07);
  --shadow-md: 0 0 45px rgba(0, 0, 0, .09);
  --shadow-lg: 0 0 45px rgba(0, 0, 0, .12);
}

body { font-family: var(--font-body); color: var(--secondary); font-size: 1rem; line-height: 1.6; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-4, .display-5, .display-6 {
  font-family: var(--font-display); color: var(--dark); font-weight: 700; letter-spacing: 0;
}
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
a { color: var(--primary); }
.text-secondary { color: var(--secondary) !important; }

/* Buttons keep the template's pill shape */
.btn { font-weight: 500; letter-spacing: 0; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { transform: none; box-shadow: none; }
.btn-primary::after { display: none; }
.btn-light { background: #fff; border-color: #fff; color: var(--primary); }
.btn-light:hover { background: var(--light); color: var(--primary); }
.btn-outline-primary { border-color: var(--primary); }

/* Navbar (template) */
.navbar .dropdown-toggle::after { font-family: "Font Awesome 6 Free"; }
.dg-nav .navbar-nav { flex-direction: column; }
@media (min-width: 992px) { .dg-nav .navbar-nav { flex-direction: row; } }
.dg-nav .navbar-nav .nav-link::after { display: none; }
.dg-nav .dropdown-menu { border: 0; border-radius: 0 0 6px 6px; margin-top: 0 !important; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.dg-nav .dropdown-item { color: var(--dark); padding: .55rem 1.1rem; }
.dg-nav .dropdown-item:hover, .dg-nav .dropdown-item:focus { background: var(--primary); color: #fff; }
.dg-nav .dropdown-submenu .submenu-open { border-radius: 6px; }
.dg-nav .nav-actions .dropdown-menu { visibility: visible; opacity: 1; transform: none; display: none; }
.dg-nav .nav-actions .dropdown-menu.show { display: block; }
.dg-nav .nav-actions .dropdown-item i { color: var(--primary); }
.dg-nav .nav-actions .dropdown-item:hover i { color: #fff; }
.dg-logo { max-height: 60px; width: auto; }
@media (min-width: 992px) {
  .dg-nav .navbar-nav .dropdown-submenu .submenu-open { visibility: visible; opacity: 1; transform: none; }
}
@media (max-width: 991.98px) {
  .dg-nav .navbar-nav .dropdown-menu { display: none; visibility: visible; opacity: 1; transform: none; background: rgba(255,255,255,.08); box-shadow: none; }
  .dg-nav .navbar-nav .dropdown-menu.show { display: block; }
  .dg-nav .navbar-nav .dropdown-item { color: #fff; }
}

/* Interior page header -> template page-header */
.page-hero {
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/carousel-1.jpg) center center no-repeat;
  background-size: cover; padding: 6rem 0; margin-bottom: 3rem; text-align: center; color: #fff;
}
.page-hero::before, .page-hero::after, .lattice { display: none !important; }
.page-hero .container > .row { justify-content: center; }
.page-hero [class*="col-lg"] { flex: 0 0 auto; width: 100%; text-align: center !important; }
.page-hero h1 { color: #fff; font-size: calc(1.475rem + 2.7vw); font-weight: 700; max-width: none; margin: 0 auto .75rem; letter-spacing: 0; }
@media (min-width: 1200px) { .page-hero h1 { font-size: 3.5rem; } }
.page-hero .hero-sub { color: rgba(255,255,255,.85); margin: .5rem auto 0; }
.page-hero .crumbs { justify-content: center; order: 2; margin: 0; }
.page-hero .container { display: flex; flex-direction: column; }
.page-hero .container > nav { order: 2; }
.page-hero .crumbs li, .page-hero .crumbs a { color: #fff; }
.page-hero .crumbs [aria-current] { color: var(--primary); }
.page-hero .crumbs li + li::before { color: var(--light); }
.page-hero .hero-meta { justify-content: center; color: rgba(255,255,255,.85); }
.page-hero .hero-meta i { color: var(--primary); }
.page-hero .hero-side { text-align: center !important; margin-top: 1rem; }
.page-hero .result-count { background: rgba(255,255,255,.12); color: #fff; }
.page-hero .result-count b { color: #fff; }
.page-hero + .section, .page-hero + section { padding-top: 1.5rem; }

/* Section titles: kicker -> template section-title */
.kicker { position: relative; display: inline-block; text-transform: uppercase; color: var(--primary); font-weight: 600; font-size: 1rem; background: #fff; padding-right: 1rem; z-index: 0; }
.kicker::before { position: absolute; content: ""; width: calc(100% + 40px); height: 2px; top: 4px; left: 0; background: var(--primary); z-index: -1; border-radius: 0; }
.kicker::after { position: absolute; content: ""; width: calc(100% + 60px); height: 2px; bottom: 4px; left: 0; background: var(--primary); z-index: -1; }
.bg-paper .kicker, .bg-light .kicker { background: var(--light); }
.kicker.on-dark { background: transparent; color: #fff; }
.section-head h2, .fm-title-2 { font-size: calc(1.325rem + .9vw); }
@media (min-width: 1200px) { .section-head h2 { font-size: 2rem; } }

/* Cards in template style */
.product-card, .post-card, .tile, .job-card, .doc-card, .team-card, .surface { border-radius: 6px; box-shadow: var(--shadow-sm); border: 1px solid transparent; }
.product-card:hover, .post-card:hover, .tile:hover, .job-card:hover, .doc-card:hover, .team-card:hover { transform: translateY(-10px); box-shadow: none; border-color: var(--line); }
.product-card .well { border-radius: 6px; background: var(--light); }
.product-card .go { background: var(--light); color: var(--primary); }
.product-card:hover .go { background: var(--primary); color: #fff; transform: none; }
.product-card .chip { background: var(--primary); color: #fff; border: 0; }
.chip { border-radius: 4px; }
.chip.dark { background: var(--primary); }
.icon-chip { border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--primary); }
.stat-band { background: var(--primary); }
.stat-band::before { display: none; }
.stat .num { color: #fff; }
.verify-band { background: var(--dark); border-radius: 6px; }
.filter-bar { border-radius: 6px; box-shadow: var(--shadow-sm); border: 0; top: 80px; }
.pagination .page-link { border-radius: 50% !important; }
.empty-state { border-radius: 6px; }
.frame, .frame-offset::before { border-radius: 6px; }
.frame-offset::before { border: 5px solid var(--primary); }
.oo-progress span { background: var(--primary); }
.oo-accordion .accordion-button:not(.collapsed) { background: var(--primary); color: #fff; }
.form-control, .form-select { border-radius: 5px; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .2); }
.contact-float .call { background: var(--primary); }
.contact-float .message { background: var(--dark); }

/* Home: slider */
#header-carousel .carousel-item { max-height: 88vh; }
#header-carousel .carousel-item > img { width: 100%; height: 88vh; object-fit: cover; }
#header-carousel .carousel-caption h1 { font-size: calc(1.6rem + 3.4vw); line-height: 1.15; }
#header-carousel .carousel-caption h4 { letter-spacing: .5px; }
@media (min-width: 1200px) { #header-carousel .carousel-caption h1 { font-size: 4.6rem; } }
@media (max-width: 768px) { #header-carousel .carousel-item > img { height: 100%; } }

/* Footer extras */
.footer .dg-thumb { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform .3s ease, opacity .3s ease; }
.footer .dg-thumb:hover { transform: scale(1.06); opacity: .85; }
.footer .form-control::placeholder { color: #888; }
.footer a.text-body:hover { color: var(--primary) !important; }

/* Back to top + spinner (template) */
.back-to-top { color: #fff; }
.back-to-top:hover { color: #fff; }
#spinner .spinner-border { border-right-color: transparent; }

/* Testimonials: keep cards readable when there are fewer than 3 */
.testimonial-item img { object-fit: cover; }
.testimonial-item .stars { color: #ffc107; }

/* Template's ".project-item a" overlay must not swallow the product-name link */
.project-item h6 a { position: static; display: inline; width: auto; height: auto; background: none; opacity: 1; color: var(--dark); border-radius: 0; }
.project-item h6 a:hover { color: var(--primary); }
.footer .btn.btn-link::before { font-family: "Font Awesome 6 Free"; }

/* Page header: title first, breadcrumb underneath (template order) */
.page-hero { margin-bottom: 0; }
.page-hero [class*="col-lg"], .page-hero .container:not(:has(> .row)) { display: flex; flex-direction: column; align-items: center; }
.page-hero nav[aria-label="Breadcrumb"] { order: 3; margin-top: .9rem; }
.page-hero .hero-sub, .page-hero .hero-meta { order: 2; }
.page-hero .crumbs { margin: 0; }

/* Click-to-open menus (no hover). Overrides the template's hover dropdowns. */
@media (min-width: 992px) {
  .dg-nav .nav-item .dropdown-menu { display: none; visibility: visible; opacity: 1; transform: none; transition: none; }
  .dg-nav .nav-item:hover .dropdown-menu { visibility: visible; opacity: 1; transform: none; }
  .dg-nav .nav-item .dropdown-menu.show { display: block; animation: dropIn .3s var(--ease-out); }
}
.dg-nav .dropdown-submenu .submenu-open { display: none; }
.dg-nav .dropdown-submenu.show > .submenu-open { display: block; }
.dg-nav .dropdown-submenu.show > .dropdown-submenu-toggle { background: var(--primary); color: #fff; }

/* Mobile contact bar: solid buttons with white icon + label so every button is readable */
@media (max-width: 767.98px) {
  .contact-float { background: var(--dark); }
  .contact-float .item.call { background: var(--primary); color: #fff; }
  .contact-float .item.whatsapp { background: #1fa855; color: #fff; }
  .contact-float .item.message { background: var(--dark); color: #fff; }
  .contact-float .item span { color: #fff; }
}