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

:root {
  --default-font: "DM Sans", system-ui, sans-serif;
  --heading-font: "Manrope", system-ui, sans-serif;
  --nav-font: "DM Sans", system-ui, sans-serif;
  --accent-color: #d89b45;
  --heading-color: #12263a;
  --default-color: #536273;
  --background-color: #fbfaf7;
  --surface-color: #ffffff;
  --nav-hover-color: #d89b45;
}

body { background: var(--background-color); letter-spacing: .01em; }
html.lang-sq [data-lang="en"], html.lang-en [data-lang="sq"] { display: none !important; }
.header { padding: 16px 0; background: rgba(10, 25, 40, .92); backdrop-filter: blur(14px); }
.header > .container-fluid,
.header > .container-xl { position: relative; width: 100%; }
.header .lang-switch { display: flex; align-items: center; gap: 6px; margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.16); }
.header .lang-btn { display: flex; align-items: center; gap: 6px; min-width: 38px; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; color: #fff; cursor: pointer; font: 600 12px/1 var(--nav-font); letter-spacing: .08em; opacity: .62; transition: .2s ease; }
.header .lang-btn:hover, .header .lang-btn.active { opacity: 1; }
.header .lang-btn.active { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
.header .lang-btn .flag { display: inline-block; width: 26px; height: 18px; flex: 0 0 26px; overflow: hidden; border-radius: 3px; background: #c8102e url('../img/flag-al.svg?v=2') center/cover no-repeat; color: transparent !important; font-size: 0 !important; line-height: 0; text-indent: -9999px; box-shadow: 0 0 0 1px rgba(255,255,255,.38); }
.header .lang-btn[data-setlang="en"] .flag { background-image: url('../img/flag-en.svg?v=2'); }
.header .lang-btn .flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.header .logo h1 { font-size: 24px; letter-spacing: -.04em; }
.navmenu a { font-weight: 600; font-size: 13px; letter-spacing: .03em; }
.header .cta-btn { border-radius: 999px; padding: 10px 20px; border-color: var(--accent-color); background: var(--accent-color); color: #12263a; font-weight: 700; }
.hero { min-height: 80vh; }
.hero::after { background: linear-gradient(90deg, rgba(8, 23, 38, .88), rgba(8, 23, 38, .25)); }
.hero h2 { max-width: 850px; font-size: clamp(42px, 6vw, 78px); letter-spacing: -.055em; line-height: .98; }
.hero p { max-width: 650px; font-size: 18px; line-height: 1.7; }
.btn-get-started, .btn-watch-video { border-radius: 999px; }
.btn-get-started { background: var(--accent-color); color: #12263a; border: 0; font-weight: 700; padding: 14px 26px; }
.section { padding: 50px 0; }
.section-title h2 { letter-spacing: -.04em; }
.services .service-item, .services-2 .service-item, .team .member, .contact .info-item { border-radius: 20px; box-shadow: 0 14px 40px rgba(18, 38, 58, .07); }
.services .service-item:hover, .team .member:hover { transform: translateY(-6px); transition: .3s ease; }
/* Equal height service cards */
.services .row {
  align-items: stretch;
}

.services .col-xl-4,
.services .col-md-6 {
  display: flex;
}

.services .service-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.services .service-item .img {
  height: 220px;
  overflow: hidden;
}

.services .service-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services .service-item .details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.services .service-item .details p {
  flex-grow: 1;
}
.page-hero { padding: 140px 0 56px; background: linear-gradient(120deg, #102b41, #1d4355); color: #fff; }
.page-hero h1 { color: #fff; font-size: clamp(42px, 6vw, 72px); letter-spacing: -.05em; }
.page-hero p { color: rgba(255,255,255,.78); max-width: 800px !important; font-size: 18px; line-height: 1.7;}
.page-content { padding: 64px 0 84px; }
.eyebrow { display: block; color: var(--accent-color); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; line-height: 1.4; }
.modern-card { height: 100%; padding: 30px; border: 1px solid rgba(18,38,58,.08); border-radius: 20px; background: #fff; box-shadow: 0 14px 40px rgba(18,38,58,.06); }
.modern-card .icon { color: var(--accent-color); font-size: 28px; margin-bottom: 22px; }
.modern-card h3 { font-size: 22px; letter-spacing: -.03em; }
.modern-card p, .page-content p { line-height: 1.8; }
.modern-image { border-radius: 24px; width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.page-content .btn-get-started { display: inline-block; margin-top: 14px; transition: background-color .2s ease, color .2s ease; }
.page-content .btn-get-started:hover,
.page-content .btn-get-started:focus { background: #d2a367; color: #fff; }
.page-content .btn-get-started:active { background: #c99658; color: #fff; }
.footer { background: #102333; color: rgba(255,255,255,.72); }
.footer .footer-top { display: grid; grid-template-columns: 1.6fr auto auto; gap: 44px; padding-top: 40px; padding-bottom: 28px; justify-content: space-between; align-items: start; }
.footer .footer-column { min-width: 170px; }
.footer-brand, .footer-column, .footer-cta { display: flex; flex-direction: column; align-items: flex-start; }
.footer-logo { color: #fff; font: 800 21px/1 var(--heading-font); letter-spacing: -.05em; margin-bottom: 12px; }
.footer p { max-width: 230px; margin: 0; line-height: 1.6; font-size: 14px; }
.footer h4 { color: #fff; font: 700 13px/1.2 var(--heading-font); margin: 2px 0 12px; }
.footer-column a, .footer-column span { color: rgba(255,255,255,.72); margin-bottom: 8px; font-size: 13px; }
.footer-column a:hover, .footer-social a:hover { color: var(--accent-color); }
.footer-social { display: flex; gap: 9px; margin-top: 22px; }
.footer-social a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: #fff; }
.footer-cta { padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.04); }
.footer-cta h3 { color: #fff; font-size: 22px; line-height: 1.25; margin: 10px 0 22px; }
.footer-button { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; background: var(--accent-color); color: #12263a; padding: 11px 16px; font-size: 13px; font-weight: 700; }
.footer-button:hover { color: #12263a; transform: translateY(-2px); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-top: 14px; padding-bottom: 18px; border-top: 1px solid rgba(255,255,255,.11); font-size: 12px; }
.footer-bottom strong { color: #fff; font-weight: 700; }
@media (max-width: 991px) { .footer .footer-top { grid-template-columns: repeat(2, 1fr); justify-content: initial; } }
@media (max-width: 767px) {
  .header { padding: 10px 0; }
  .header .logo h1 { font-size: 21px; }
  .header .cta-btn { display: none; }
  .header .lang-btn { min-width: 34px; padding: 5px 4px; }
  .page-hero { padding: 110px 0 42px; }
  .page-hero h1 { font-size: clamp(36px, 11vw, 54px); }
  .page-content { padding: 44px 0 56px; }
  .section { padding: 52px 0; }
  .footer .footer-top { grid-template-columns: 1fr; gap: 22px; padding-top: 36px; padding-bottom: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Editorial visual direction */
:root {
  --accent-color: #c7925b;
  --heading-color: #142536;
  --default-color: #647182;
  --background-color: #f6f4ef;
  --surface-color: #ffffff;
  --nav-hover-color: #e0b177;
}

body {
  background: #f6f4ef;
  color: #647182;
  font-size: 15px;
}

body:not(.index-page) main {
  background: #f6f4ef;
}

.header {
  padding: 12px 0;
  background: rgba(13, 29, 43, .72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 35px rgba(9, 20, 30, .08);
}

.scrolled .header {
  background: rgba(13, 29, 43, .96);
}

.header .logo h1 {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.06em;
}

.header .logo h1::before,
.footer-logo::before { color: #e0b177; }

.navmenu > ul > li { padding: 12px 11px; }
.navmenu a, .navmenu a:focus {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.header .cta-btn {
  padding: 11px 18px;
  border: 1px solid rgba(224,177,119,.55);
  background: #e0b177;
  box-shadow: 0 8px 20px rgba(224,177,119,.18);
}

.hero {
  min-height: min(445px, 82vh) !important;
  background: #142536;
}

/* .hero also carries the generic .section class, whose padding rule comes later in
   this file and would otherwise win on equal specificity — .hero.section beats it.
   The fixed header overlays the top of the hero, so the visible gap above the
   content is smaller than the padding value suggests. Padding is shifted down
   (top increased, bottom reduced by the same amount) so the VISIBLE gap above
   and below the content ends up equal once the header's covered area is excluded. */
.hero.section {
  padding: 80px 0 22px;
}

.hero::after {
  background: linear-gradient(90deg, rgba(8, 23, 38, .94) 0%, rgba(8, 23, 38, .65) 48%, rgba(8, 23, 38, .12) 100%);
}

.hero h2 {
  max-width: 900px;
  font-size: clamp(30px, 6.3vw, 70px);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .96;
  text-wrap: balance;
}

.hero p { max-width: 570px; color: rgba(255,255,255,.72); font-size: 17px; }
.hero .btn-get-started { box-shadow: 0 12px 28px rgba(199,146,91,.24); }

.section { padding: 40px 0; }
.section-title h2 { font-size: clamp(32px, 4vw, 50px); font-weight: 800; letter-spacing: -.065em; line-height: 1.15; margin: 0 0 8px; }
.section-title p { color: #a27a4f; font-size: 11px; font-weight: 800; letter-spacing: .18em; line-height: 1.4; margin: 0; }

.about .content h3, .page-content h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -.06em; line-height: 1.15; margin: 0 0 16px; }
.about .content p, .page-content p { color: #647182; line-height: 1.85; }
.about .content ul li { margin-bottom: 14px; }
.about .content ul i { color: #c7925b; }

.services .service-item, .services-2 .service-item, .modern-card {
  border: 1px solid rgba(20,37,54,.08);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(20,37,54,.055);
}

.services .service-item, .services-2 .service-item { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.services .service-item:hover, .services-2 .service-item:hover, .modern-card:hover {
  border-color: rgba(199,146,91,.4);
  box-shadow: 0 22px 55px rgba(20,37,54,.1);
  transform: translateY(-7px);
}

.services .service-item .icon, .services-2 .service-item .icon, .modern-card .icon { color: #c7925b; }
.stats { background: #ece9e1; }
.stats .stats-item span { color: #142536; }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 140px 0 56px;
  background: #142536;
}

.page-hero::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  right: -120px;
  top: -160px;
  border: 1px solid rgba(224,177,119,.23);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(224,177,119,.045), 0 0 0 70px rgba(224,177,119,.025);
}

.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 850px; font-weight: 800; letter-spacing: -.075em; line-height: 1.15; margin: 0 0 16px; }
.page-hero .eyebrow { color: #e0b177; }
.page-hero p { max-width: 580px; color: rgba(255,255,255,.7); margin: 0; }

.page-content { padding: 64px 0 84px; }
.modern-card { padding: 32px; }
.modern-card h3 { color: #142536; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.modern-card .icon { margin-bottom: 28px; }
.modern-image { border-radius: 14px; box-shadow: 0 20px 48px rgba(20,37,54,.12); }

.contact .info-item, .team .member { border-radius: 14px; border: 1px solid rgba(20,37,54,.08); box-shadow: 0 18px 45px rgba(20,37,54,.055); }
.form-control { border: 1px solid rgba(20,37,54,.12); border-radius: 8px; padding: 13px 15px; background: rgba(255,255,255,.78); }
.form-control:focus { border-color: #c7925b; box-shadow: 0 0 0 3px rgba(199,146,91,.14); }

.contact-form-card {
  display: block;
  height: 100%;
  padding: 28px;
  border-radius: 14px;
  border: 1px solid rgba(20,37,54,.08);
  background: #fff;
  box-shadow: 0 18px 45px rgba(20,37,54,.055);
}
@media (max-width: 767px) { .contact-form-card { padding: 20px; } }

.footer { background: #10202e; }
.footer-cta { display: none !important; }

/* Prevent the "shrink" active-state on the header CTA button; keep only color feedback */
.header .cta-btn,
.header .cta-btn:active,
.header .cta-btn:focus,
.header .cta-btn:focus-visible,
.header .cta-btn:hover {
  transform: none !important;
  scale: 1 !important;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.header .cta-btn {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  will-change: auto;
}
.header .cta-btn:hover, .header .cta-btn:focus, .header .cta-btn:focus-visible { background: #d2a367; border-color: #d2a367; color: #12263a; }
.header .cta-btn:active { background: #c99658; border-color: #c99658; color: #12263a; }

/* Tool tiles (Mjete section) */
.tool-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 34px 30px;
  border: 1px solid rgba(20,37,54,.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(20,37,54,.055);
  color: #142536;
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tool-tile:hover {
  transform: translateY(-7px);
  border-color: rgba(199,146,91,.4);
  box-shadow: 0 22px 55px rgba(20,37,54,.1);
  color: #142536;
}
.tool-tile i { font-size: 34px; color: #c7925b; }
.tool-tile h3 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin: 0; color: #142536; }
.tool-tile p { color: #647182; margin: 0; line-height: 1.7; }
.tool-tile .tool-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  color: #c7925b; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
}
.tool-tile .tool-cta i { font-size: 16px; transition: transform .25s ease; color: #c7925b; }
.tool-tile:hover .tool-cta i { transform: translateX(4px); }

/* Portal tiles (Portale Zyrtare) */
.portal-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 30px 28px;
  border: 1px solid rgba(20,37,54,.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(20,37,54,.055);
  color: #142536;
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.portal-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(199,146,91,.4);
  box-shadow: 0 22px 55px rgba(20,37,54,.1);
  color: #142536;
}
.portal-tile i { font-size: 30px; color: #c7925b; margin-bottom: 6px; }
.portal-tile h3 { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin: 0; color: #142536; }
.portal-tile p { color: #647182; margin: 0; line-height: 1.6; font-size: 14px; }
.portal-tile .portal-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: #c7925b; font-weight: 700; font-size: 12px; letter-spacing: .04em;
}
.portal-tile .portal-cta i { font-size: 14px; color: #c7925b; margin: 0; }

/* Founder block on About page */
.founder-photo { min-height: 460px; object-fit: cover; }
.founder-message { font-size: 16px; line-height: 1.85; color: #4a5566; margin-bottom: 18px; }
.founder-signature { margin: 22px 0 26px; display: flex; flex-direction: column; gap: 4px; }
.founder-signature strong { font-size: 18px; color: #142536; font-weight: 800; letter-spacing: -.02em; }
.founder-signature span { font-size: 13px; color: #8a7350; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 991px) { .founder-photo { min-height: 320px; } }

/* Contact map */
.map-frame {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(20,37,54,.08);
  box-shadow: 0 18px 45px rgba(20,37,54,.055);
  background: #fff;
}
.map-frame iframe { display: block; width: 100%; }
.map-frame-tall { height: 100%; min-height: 340px; }
.map-frame-tall iframe { height: 100%; }
@media (max-width: 991px) {
  .map-frame-tall { height: 300px; }
}

/* Desktop-only: tighten nav item spacing as the horizontal menu approaches the xl breakpoint. Scoped to min-width:1200px so it never touches the full-screen mobile menu, which shares the same .navmenu > ul > li markup. */
@media (min-width: 1200px) and (max-width: 1300px) {
  .navmenu > ul > li { padding-left: 8px; padding-right: 8px; }
  .navmenu a, .navmenu a:focus { font-size: 11px; }
}

@media (max-width: 767px) {
  .hero { min-height: min(430px, 78vh); }
  .hero.section { padding: 77px 0 29px; }
  .hero h2 { font-size: clamp(30px, 13vw, 50px) !important; }
  .hero p { font-size: 15px; }
  .section { padding: 52px 0; }
  .section-title { margin-bottom: 28px; }
  .page-hero { padding: 110px 0 42px; }
  .page-hero::after { width: 260px; height: 260px; right: -130px; top: -70px; }
  .page-hero p { font-size: 15px; }
  .modern-card { padding: 25px; }
  body { font-size: 14px; }
  .founder-message { font-size: 15px; }
  .navmenu a, .navmenu a:focus { font-size: 16px; }
}
@media (max-width: 1199px) {
  .header .lang-switch { margin-left: 0; padding-left: 0; border-left: none; }
  .header .navmenu { margin-left: 14px; }
}

/* Mobile nav: compact dropdown panel instead of full-screen overlay */
@media (max-width: 1199px) {
  .navmenu ul {
    position: absolute;
    inset: auto 12px auto auto;
    top: 68px;
    left: auto;
    width: min(260px, calc(100vw - 24px));
    max-height: calc(100vh - 100px);
    padding: 6px 0;
    margin: 0;
    border-radius: 14px;
    background-color: #142536;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 45px rgba(8,20,32,.4);
    overflow-y: auto;
  }

  /* Divider lines between items, tighter spacing */
  .navmenu ul li {
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .navmenu ul li:last-child {
    border-bottom: none;
  }

  .navmenu a,
  .navmenu a:focus {
    color: rgba(255,255,255,.85);
    padding: 9px 22px;
    font-size: 15px;
  }

  .navmenu a i,
  .navmenu a:focus i {
    background-color: rgba(255,255,255,.08);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: #e0b177;
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: #e0b177;
    color: #142536;
  }

  /* Remove the full-screen dark backdrop entirely */
  .mobile-nav-active .navmenu {
    position: static;
    overflow: visible;
    background: none;
    inset: auto;
  }

  /* Keep the button anchored in place: restore its natural "relative" positioning
     (needed so its bars, which are position:absolute, stay correctly inside it)
     instead of main.css's "absolute" repositioning meant for the old full-screen menu */
  .mobile-nav-active .mobile-nav-toggle {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-right: 4px !important;
    z-index: auto !important;
  }
}