@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap");
*{box-sizing:border-box;margin:0;padding:0} :root{--bg:#08090a;--panel:#111416;--gold:#d8a72d;--gold2:#f2c75a;--white:#f7f7f7;--muted:#9b9da1;--line:#292d30}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--white);font-family:Inter,Arial,sans-serif}h1,h2,h3,.brand{font-family:Montserrat,Arial,sans-serif}.header{height:72px;background:#08090af5;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;position:sticky;top:0;z-index:50;border-bottom:1px solid #1d1f20}.brand{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none;font-size:22px}.brand b{font-weight:800}.brand-mark{color:var(--gold);font-weight:800;font-size:27px;letter-spacing:-3px;border:2px solid var(--gold);border-radius:8px 2px;padding:0 5px;line-height:30px}.nav{display:flex;gap:27px;align-items:center}.nav a{color:#eee;text-decoration:none;font-size:13px}.nav a:hover,.nav .active{color:var(--gold)}.nav select{background:#111;color:#fff;border:1px solid #555;border-radius:4px;padding:7px}.nav-whatsapp{background:var(--gold);color:#111!important;padding:10px 17px;border-radius:4px;font-weight:700}.menu-toggle{display:none}.hero{height:500px;display:flex;align-items:center;padding:0 6.3%;position:relative;overflow:hidden;background:radial-gradient(circle at 78% 48%,#292d30,#121415 40%,#08090a 80%)}.hero:after{content:"";position:absolute;right:-10%;bottom:-30%;width:65%;height:90%;background:radial-gradient(ellipse,rgba(216,167,45,.14),transparent 65%);transform:rotate(-8deg)}.hero-content{position:relative;z-index:2}.kicker{font-size:12px;letter-spacing:5px;font-weight:700;margin-bottom:13px}.gold{color:var(--gold)}.hero h1{font-size:58px;line-height:1.02}.hero h1 span{color:var(--gold)}.hero-text{color:#ddd;font-size:17px;line-height:1.7;margin:20px 0 28px}.gold-btn{display:inline-flex;gap:25px;align-items:center;background:var(--gold);color:#111;text-decoration:none;padding:15px 22px;border-radius:4px;font-weight:800;font-size:13px;transition:.2s}.gold-btn:hover{background:var(--gold2);transform:translateY(-2px)}.cars-section{padding:43px 5.5% 52px;background:#0d0f10}.section-title{text-align:center;margin-bottom:27px}.section-title h2,.page-hero h1{font-size:29px}.section-title p:last-child,.page-hero p:last-child{color:#999;font-size:13px;margin-top:6px}.carousel{display:flex;gap:12px;align-items:center}.carousel-window{overflow:hidden;width:100%}.cars-track{display:flex;gap:18px;transition:.45s}.car-card{min-width:calc((100% - 36px)/3);background:#111416;border:1px solid #282b2d;border-radius:8px;overflow:hidden}.car-image{height:170px;background:linear-gradient(135deg,#282b2e,#111315);display:flex;align-items:center;justify-content:center;color:#777;font-size:11px;position:relative}.car-image img{width:100%;height:100%;object-fit:cover}.car-image span{position:absolute;right:10px;top:10px;background:var(--gold);color:#111;padding:6px 8px;border-radius:4px;font-weight:800}.car-body{padding:14px}.car-head{display:flex;justify-content:space-between;gap:8px}.car-head h3{font-size:15px}.car-head strong{color:var(--gold);font-family:Montserrat;font-size:18px;white-space:nowrap}.car-head small{color:#aaa;font:400 10px Inter}.specs{display:flex;gap:9px;flex-wrap:wrap;color:#999;font-size:10px;margin:10px 0}.car-body a{display:block;text-align:center;color:#eee;text-decoration:none;border:1px solid #292d30;border-radius:4px;padding:8px;font-size:11px}.car-body a:hover{border-color:var(--gold);color:var(--gold)}.arrow{border:0;background:#202224;color:#fff;border-radius:50%;width:43px;height:43px;min-width:43px;font-size:30px;cursor:pointer}.outline-btn{display:flex;width:max-content;margin:25px auto 0;border:1px solid var(--gold);border-radius:4px;color:var(--gold);text-decoration:none;padding:9px 23px;gap:23px;font-size:11px;font-weight:700;letter-spacing:1px}.outline-btn.small{margin:20px 0 0}.info-strip{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;padding:0 3.3% 10px}.info-panel,.why-panel{background:#111416;border:1px solid #25282a;border-radius:7px;padding:21px 24px}.info-strip h2{font-size:15px;margin-bottom:18px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr)}.info-grid>div{text-align:center;padding:4px 13px;border-right:1px solid #292c2f}.info-grid>div:last-child{border:0}.info-grid i{display:block;font-style:normal;font-size:23px;color:var(--gold);margin-bottom:6px}.info-grid b{display:block;font-size:9px;margin-bottom:4px}.info-grid small{color:#999;font-size:9px}.panel-text{color:#aaa;line-height:1.6;font-size:13px}.booking{margin:0 3.3% 45px;padding:29px 34px;background:linear-gradient(100deg,#111416,#181512);border:1px solid #4b3c1e;border-radius:7px;display:flex;align-items:center;justify-content:space-between;gap:25px}.booking h2{font-size:24px}.booking p:not(.kicker){color:#aaa;margin-top:5px;font-size:13px}footer{border-top:1px solid #202224;padding:30px 5.5%;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:25px;color:#aaa;font-size:11px}footer a{color:#bbb;text-decoration:none}.footer-brand{display:flex;gap:12px;align-items:center}.footer-brand b{display:block;color:#fff;font-family:Montserrat}.footer-brand small{display:block;margin-top:4px}.social{display:flex;gap:15px}.copyright{text-align:right}.page-hero{padding:85px 7% 55px;background:radial-gradient(circle at 80%,#272a2c,#08090a 58%)}.page-hero p{max-width:650px}.fleet-grid{padding:45px 5.5%;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.detail-wrap{max-width:1180px;margin:auto;padding:45px 5%}.detail{display:grid;grid-template-columns:1.15fr 1fr;gap:38px}.gallery-main{height:430px;background:#111416;border-radius:9px;overflow:hidden;border:1px solid #282b2d}.gallery-main img{width:100%;height:100%;object-fit:cover}.gallery-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:10px}.thumb{height:78px;border:1px solid #292d30;background:#17191b;border-radius:5px;overflow:hidden;cursor:pointer}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.active{border:2px solid var(--gold)}.detail-info h1{font-size:36px;margin-bottom:12px}.price{font:800 26px Montserrat;color:var(--gold);margin:18px 0}.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.spec-list div{background:#111416;border:1px solid #25282a;padding:12px;border-radius:5px;color:#bbb}.why-detail{max-width:1100px;margin:auto;padding:10px 5% 55px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.why-detail article{background:#111416;border:1px solid #25282a;padding:25px;border-radius:8px;min-height:205px}.why-detail span{color:var(--gold);font-family:Montserrat;font-weight:800;font-size:14px}.why-detail h2{font-size:19px;margin:15px 0 9px}.why-detail p{color:#aaa;font-size:13px;line-height:1.7}
@media(max-width:1000px){.nav{gap:13px}.nav a{font-size:11px}.car-card{min-width:calc((100% - 18px)/2)}.info-strip{grid-template-columns:1fr}.fleet-grid{grid-template-columns:repeat(2,1fr)}.detail{grid-template-columns:1fr}.why-detail{grid-template-columns:repeat(2,1fr)}footer{grid-template-columns:1fr 1fr}.copyright{text-align:left}}
/* REJAN CAR RENT - foto të plota në slider/karta */
.car-card .car-image,
.car-card .card-image,
.car-card .image-wrap,
.slider .car-image,
.carousel .car-image {
  position: relative;
  overflow: hidden;
}
.car-card .car-image img,
.car-card .card-image img,
.car-card .image-wrap img,
.slider .car-image img,
.carousel .car-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.car-card .car-image::after,
.car-card .card-image::after,
.car-card .image-wrap::after,
.slider .car-image::after,
.carousel .car-image::after {
  display:none !important;
}

/* Slider i makinave: vetëm fotografia, pa tekst anësor */
.car-image {
  position: relative;
  overflow: hidden;
  display: block;
}
.car-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.car-image > span {
  position: absolute;
  z-index: 2;
}
.car-image > b,
.car-image > strong,
.car-image > p,
.car-image > label,
.car-image > div:not(.anything) {
  display: none !important;
}

/* REJAN CAR RENT - hero me foton e dytë pas shkrimit */
.hero{
  gap:34px;
}
.hero-content{
  width:42%;
  flex:0 0 42%;
}
.hero-image{
  width:58%;
  height:390px;
  position:relative;
  z-index:2;
  overflow:hidden;
  border-radius:8px;
  border:1px solid #292d30;
}
.hero-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
@media(max-width:650px){
  .hero{
    height:auto;
    min-height:700px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:25px;
    padding:45px 24px;
  }
  .hero-content{
    width:100%;
    flex:none;
  }
  .hero-image{
    width:100%;
    height:250px;
  }
}


/* REJAN CAR RENT — HERO FINAL
   Fotoja e dytë përdoret komplet si background; shkrimet ekzistuese HTML ruhen. */
.hero {
  position: relative !important;
  min-height: 520px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.18) 100%),
    url("../images/hero.jpeg") center center / cover no-repeat !important;
}
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(0,0,0,.34), transparent 62%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: min(620px, 92%) !important;
  padding: 72px 0 72px 6vw !important;
}
.hero-image {
  display: none !important;
}
.hero-content .kicker,
.hero-content h1,
.hero-content .hero-text,
.hero-content .gold-btn {
  position: relative !important;
  z-index: 4 !important;
}
@media (max-width: 800px) {
  .hero {
    min-height: 500px !important;
    background-position: center center !important;
  }
  .hero-content {
    padding: 55px 24px !important;
    width: 100% !important;
  }
}

/* SEO/performance/accessibility hardening — no visual redesign */
img{max-width:100%;}
button,a,select{touch-action:manipulation;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}}


/* =========================================================
   REJAN CAR RENT — MOBILE RESPONSIVE FINAL
   Desktop layout is intentionally left unchanged.
   ========================================================= */
@media (max-width: 650px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .header {
    height: 68px;
    padding: 0 16px;
  }

  .brand {
    font-size: 17px;
    gap: 7px;
    white-space: nowrap;
  }

  .brand-mark {
    font-size: 22px;
    line-height: 25px;
    padding: 0 4px;
  }

  .menu-toggle {
    display: block;
    background: none;
    border: 0;
    color: #fff;
    font-size: 27px;
    line-height: 1;
    padding: 6px;
  }

  .nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #090a0b;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 18px 16px;
    border-bottom: 1px solid #292d30;
  }

  .nav.open {
    display: flex;
  }

  .nav a,
  .nav select {
    width: 100%;
    text-align: center;
    padding: 11px 8px;
  }

  /* HERO:
     The supplied 1536x387 image keeps its complete aspect ratio on phones.
     It is shown across the full screen width first, then the existing text
     appears below it. This avoids cropping the left/right sides of the image. */
  .hero {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    background-color: #08090a !important;
    background-image: url("../images/hero.jpeg") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;
  }

  .hero::after {
    display: none !important;
  }

  .hero::before {
    content: "" !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 25.2vw !important;
    min-height: 95px !important;
    max-height: 125px !important;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.10) 55%,
        rgba(8,9,10,.88) 100%
      ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .hero-content {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    flex: none !important;
    padding: 25px 22px 42px !important;
    background: #08090a !important;
  }

  .hero-content .kicker {
    display: none !important;
  }

  .hero h1 {
    font-size: clamp(32px, 9.5vw, 39px) !important;
    line-height: 1.04 !important;
    margin: 0 !important;
  }

  .hero-text {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 17px 0 23px !important;
  }

  .gold-btn {
    font-size: 12px !important;
    padding: 13px 18px !important;
  }

  .hero-image {
    display: none !important;
  }

  /* Cars slider/cards */
  .cars-section {
    padding: 38px 12px 46px;
  }

  .section-title h2,
  .page-hero h1 {
    font-size: 25px;
  }

  .carousel {
    gap: 8px;
  }

  .cars-track {
    gap: 12px;
  }

  .car-card {
    min-width: 100%;
  }

  .car-image {
    height: min(58vw, 260px);
  }

  .car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .car-body {
    padding: 13px;
  }

  .car-head h3 {
    font-size: 14px;
  }

  .car-head strong {
    font-size: 17px;
  }

  .specs {
    font-size: 10px;
    gap: 7px;
  }

  .arrow {
    width: 36px;
    min-width: 36px;
    height: 36px;
    font-size: 25px;
  }

  .info-strip {
    padding: 0 9px 9px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-grid > div {
    border-right: 0;
    border-bottom: 1px solid #292c2f;
    padding: 12px;
  }

  .booking {
    margin: 0 9px 35px;
    display: block;
    padding: 24px;
  }

  .booking .gold-btn {
    margin-top: 18px;
  }

  .fleet-grid {
    grid-template-columns: 1fr;
    padding: 30px 14px;
  }

  .page-hero {
    padding: 52px 22px 38px;
  }

  .detail-wrap {
    padding: 24px 14px;
  }

  .detail-info h1 {
    font-size: 27px;
  }

  .gallery-main {
    height: min(72vw, 360px);
  }

  .gallery-thumbs {
    gap: 5px;
  }

  .thumb {
    height: 58px;
  }

  .why-detail {
    grid-template-columns: 1fr;
    padding: 10px 14px 35px;
  }

  footer {
    grid-template-columns: 1fr;
    padding: 29px 22px;
  }

  .copyright {
    text-align: left;
  }
}

.nav-location-menu{position:relative;display:inline-block}
.nav-location-toggle{background:none;border:0;color:#eee;font:inherit;font-size:13px;cursor:pointer;padding:0}
.nav-location-toggle:hover{color:var(--gold)}
.nav-location-dropdown{display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:270px;background:#111416;border:1px solid #292d30;border-radius:7px;padding:7px;box-shadow:0 15px 35px rgba(0,0,0,.45);z-index:1000}
.nav-location-dropdown.open{display:block}
.nav-location-dropdown a{display:block!important;padding:11px 12px;color:#eee!important;text-decoration:none;border-radius:4px;white-space:nowrap}
.nav-location-dropdown a:hover{background:#202224;color:var(--gold)!important}
@media(max-width:800px){
 .nav-location-menu{display:block;width:100%}
 .nav-location-toggle{width:100%;text-align:left;padding:10px 0}
 .nav-location-dropdown{position:static;transform:none;min-width:0;margin:3px 0 6px}
 .nav-location-dropdown a{white-space:normal}
}

.nav-location-menu{position:relative;display:inline-flex;align-items:center}
.nav-location-toggle{background:none;border:0;color:inherit;font:inherit;font-size:13px;cursor:pointer;padding:0}
.nav-location-toggle:hover{color:var(--gold)}
.nav-location-dropdown{display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:275px;background:#111416;border:1px solid #292d30;border-radius:7px;padding:7px;box-shadow:0 15px 35px rgba(0,0,0,.45);z-index:1000}
.nav-location-dropdown.open{display:block}
.nav-location-dropdown a{display:block!important;padding:11px 12px;color:#eee!important;text-decoration:none;border-radius:4px;white-space:nowrap}
.nav-location-dropdown a:hover{background:#202224;color:var(--gold)!important}
@media(max-width:800px){.nav-location-menu{display:block;width:100%}.nav-location-toggle{width:100%;text-align:left;padding:10px 0}.nav-location-dropdown{position:static;transform:none;min-width:0;margin:3px 0 6px}.nav-location-dropdown a{white-space:normal}}


/* =========================================================
   REJAN CAR RENT — FINAL ACCESSIBILITY / MOBILE POLISH
   ========================================================= */
.location-tile{
  display:block;
  text-decoration:none;
  color:inherit;
  text-align:center;
  padding:10px 13px;
  border-radius:8px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.location-tile:hover{
  transform:translateY(-2px);
  background:#151718;
}
.location-tile i{display:block}
.location-tile b,.location-tile small,.location-tile span{display:block}
.location-tile span{
  margin-top:10px;
  color:var(--gold);
  font-size:10px;
  font-weight:700;
}
.location-tile:focus-visible,
.nav a:focus-visible,
.nav-location-toggle:focus-visible,
.menu-toggle:focus-visible,
.gold-btn:focus-visible,
.outline-btn:focus-visible,
.arrow:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:3px;
}
.location-hero{
  min-height:clamp(430px,52vw,560px);
}
.location-hero-inner{padding-bottom:72px}
.location-hero p{max-width:760px}
@media(max-width:650px){
  .location-hero{
    min-height:0;
    background-position:center center;
  }
  .location-hero-inner{
    padding:66px 18px 42px;
  }
  .location-hero h1{
    font-size:clamp(34px,10vw,46px);
    overflow-wrap:anywhere;
  }
  .location-hero p{
    font-size:15px;
    line-height:1.7;
  }
  .location-section{
    padding:44px 16px;
  }
  .location-section h2{font-size:28px;line-height:1.15}
  .location-grid{gap:12px}
  .loc-card,.place-card{padding:20px}
  .location-section.cta .gold-btn{
    width:100%;
    justify-content:center;
  }
  .location-section.cta .outline-btn{width:100%;justify-content:center}
  .nav-location-menu{width:100%}
  .nav-location-toggle{min-height:44px}
  .nav-location-dropdown a{padding:12px}
  .nav-whatsapp{margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

.info-grid .location-tile{
  padding:4px 13px;
  border-right:1px solid #292c2f;
}
.info-grid .location-tile:last-child{border-right:0}
.cross-location{max-width:1180px}
.cross-links{grid-template-columns:repeat(3,1fr)}
.cross-link{
  display:block;
  color:inherit;
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.cross-link:hover{transform:translateY(-2px);border-color:var(--gold);background:#151718}
.cross-link p{color:var(--gold)!important;margin-top:8px!important;font-size:11px}
@media(max-width:650px){
  .info-grid .location-tile{
    border-right:0;
    border-bottom:1px solid #292c2f;
    padding:13px 8px;
  }
  .info-grid .location-tile:last-child{border-bottom:0}
  .cross-links{grid-template-columns:1fr}
}

/* Mobile: qendro Lokacionet njësoj si opsionet e tjera */
@media(max-width:800px){.nav-location-menu{width:100%!important;text-align:center!important}.nav-location-toggle{width:100%!important;text-align:center!important;justify-content:center!important;padding:11px 8px!important}.nav-location-dropdown a{text-align:center!important}}

/* SEO-visible static vehicle data */
.car-head h2{margin:0;font:700 1.05rem/1.25 Montserrat,Inter,sans-serif}.car-seo-specs{margin:.65rem 0;font-size:.86rem;line-height:1.5;color:inherit;opacity:.92}

/* SEO: semantic content available in server-rendered HTML without changing visual layout */
.seo-static-cars{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.social a{display:inline-flex;align-items:center;gap:8px}.social-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px}.social-icon svg{width:18px;height:18px;fill:currentColor;display:block}

/* =========================================================
   REJAN CAR RENT — HERO FULL IMAGE / FINAL FIX
   Full artwork is shown without cover-cropping on desktop,
   matching the complete-image behavior of the phone layout.
   ========================================================= */
.hero{
  min-height:clamp(430px,33.85vw,520px)!important;
  height:clamp(430px,33.85vw,520px)!important;
  padding:0 6.3%!important;
  background-color:#08090a!important;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.38) 40%,rgba(0,0,0,.10) 72%,rgba(0,0,0,.04) 100%),
    url("../images/hero.jpeg")!important;
  background-size:100% 100%!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}
.hero::before{background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 64%)!important;}
.hero-content{padding:0!important;}
@media(max-width:800px){
  .hero{
    min-height:500px!important;
    height:auto!important;
    padding:55px 24px!important;
    background-size:auto 100%!important;
    background-position:center top!important;
  }
}
