/* File: css/custom.css
   MTA Albania - Custom overrides
   Includes:
   - Header background + overlay + logo sizing
   - Navbar lift styles
   - Google Translate Dropdown (blue theme)
   - Industries slider (responsive + readmore + buttons)
   - Cookie consent banner
   - Footer background + overlay
*/

/* =====================================================
   HEADER BACKGROUND
   ===================================================== */
#header.header-one > .bg-white{
  --hdr-img: url('../images/earth.jpg');
  position: relative;
  background-image: var(--hdr-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 0;
  padding-top: 2px;
  padding-bottom: 2px;
}

#header.header-one > .bg-white::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,61,98,.68), rgba(10,61,98,.68));
  pointer-events: none;
  z-index: 0;
}

#header.header-one > .bg-white .container{
  position: relative;
  z-index: 1;
}

/* =====================================================
   LOGO AREA – remove extra spacing
   ===================================================== */
#header .logo-area{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
}

.header-one .ccx-logo-sq{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: visible;
}

.header-one .ccx-logo-img{
  width: auto;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* =====================================================
   MOBILE OPTIMIZATION (header/logo)
   ===================================================== */
@media (max-width: 575.98px){
  #header.header-one > .bg-white{
    min-height: 0;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  #header .logo-area{ min-height: 0; }
  .header-one .ccx-logo-img{ max-height: 110px; }
  .header-one .logo{ text-align: center; }
}

/* =====================================================
   NAVBAR LIFT / COLORS
   ===================================================== */
.site-navigation{
  --nav-link:#ffffff;
  --nav-link-active:#cb9f50;
  --nav-lift: clamp(14px, 3.2vw, 26px);
  position: relative;
  top: calc(var(--nav-lift) * -1);
  margin-top: 0 !important;
}

.site-navigation .navbar{ background: var(--nav-bg) !important; }
.site-navigation .navbar .navbar-nav .nav-link{ color: var(--nav-link) !important; }

.site-navigation .navbar .navbar-nav .nav-link:hover,
.site-navigation .navbar .navbar-nav .nav-link:focus,
.site-navigation .navbar .navbar-nav .active > .nav-link{
  color: var(--nav-link-active) !important;
  opacity:.98;
}

.site-navigation .navbar .navbar-toggler{ border-color:#fff; }
.site-navigation .navbar .navbar-toggler-icon{ filter: invert(1); }

.site-navigation .navbar .dropdown-menu{
  background:#fff;
  color:#222;
  border:0;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.site-navigation .navbar .dropdown-menu a{ color:#222 !important; }
.site-navigation .navbar .dropdown-menu a:hover{ background:#f7f7f7; }

@media (max-width: 991.98px){
  .site-navigation{ --nav-lift: 10px; }
}

/* =====================================================
   GOOGLE TRANSLATE DROPDOWN (MTA Blue Theme)
   ===================================================== */
.mta-lang{
  position: fixed;      /* UPDATED: vendosje ne cep */
  top: 14px;            /* UPDATED: rregulloje sipas header-it */
  right: 20px;          /* UPDATED: zona blu djathtas */
  display: inline-block;
  margin-left: 0;       /* UPDATED: hiq shtytjen e vjeter */
  z-index: 9999;
}

.mta-lang__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 10px;
  background: #0a3d62;
  color: #fff;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.mta-lang__btn:hover{ border-color: rgba(255,255,255,.6); }

.mta-lang__btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(10,61,98,.35), 0 10px 20px rgba(0,0,0,.18);
}

.mta-lang__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
}

.mta-lang__code{
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}

.mta-lang__caret{
  opacity: .9;
  display: inline-flex;
  align-items: center;
  transition: transform 160ms ease;
}

.mta-lang.is-open .mta-lang__caret{ transform: rotate(180deg); }

.mta-lang__menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  display: none;
}

.mta-lang.is-open .mta-lang__menu{
  display: grid;
  gap: 6px;
}

.mta-lang__menu::before{
  content: "";
  position: absolute;
  top: -7px;
  left: 18px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.08);
  border-top: 1px solid rgba(0,0,0,.08);
  transform: rotate(45deg);
}

.mta-lang__item{
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f4f7fb;
  color: #0a3d62;
  font-weight: 800;
  cursor: pointer;
}

.mta-lang__item:hover{ background: #e9f0f8; }

.mta-lang__item[aria-selected="true"]{
  background: #0a3d62;
  color: #fff;
}

.mta-lang__item:disabled{
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 992px){
  .mta-lang{
    top: 10px;          /* UPDATED: pak me lart per mobile */
    right: 12px;        /* UPDATED: pak me afer skajit */
    margin: 0;
  }
  .mta-lang__menu{ min-width: 220px; }
}
/* =====================================================
   INDUSTRIES (FULL CSS) - UPDATED
   - Desktop/tablet: transform slider
   - Mobile: scroll-snap centered (no offset / no visible scrollbar)
   ===================================================== */

.cc-industries{
  --cc-tint-rgb: 10, 61, 98;
  --cc-accent: #0a3d62;
  --cc-text: #fff;
  --cc-card-bg: #fff;
  --cc-card-text: #2b2b2b;
  --cc-maxw: 1200px;
  --cc-gap: clamp(1rem, 2vw, 1.5rem);

  position: relative;
  min-height: 90vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 4vw, 3rem);
  color: var(--cc-text);

  background:
    linear-gradient(0deg, rgba(var(--cc-tint-rgb), .88), rgba(var(--cc-tint-rgb), .88)),
    var(--cc-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgb(var(--cc-tint-rgb));
  isolation: isolate;
  overflow: hidden; /* prevent any page horizontal scroll */
}

.cc-overlay{
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 400px at 50% 25%, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.cc-content{
  position: relative;
  z-index: 1;
  width: min(100%, var(--cc-maxw));
  text-align: center;
}

.cc-section-tag{
  display: inline-block;
  background: #fff;
  color: var(--cc-accent);
  font-weight: 800;
  letter-spacing: .06em;
  padding: .35rem .9rem;
  border: 3px solid var(--cc-accent);
  border-radius: .25rem;
  margin-bottom: 1rem;
}

.cc-section-title{
  margin: 0 0 2rem 0;
  font-size: clamp(1.1rem, 2.5vw, 1.75rem);
  line-height: 1.25;
  text-transform: uppercase;
  font-weight: 900;
}

/* ===== Carousel shell ===== */
.cc-carousel{
  --cc-btn-pad: clamp(42px, 6vw, 92px);
  position: relative;
  width: 100%;
  max-width: var(--cc-maxw);
  margin-inline: auto;
  padding-inline: var(--cc-btn-pad);
}

/* Desktop/tablet: no scrollbar */
.cc-viewport{
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  position: relative;
}

/* Track (desktop/tablet transform) */
.cc-track{
  display: flex;
  gap: var(--cc-gap);
  will-change: transform;
  transition: transform 420ms ease;
}

/* Card */
.cc-card{
  box-sizing: border-box;
  background: var(--cc-card-bg);
  color: var(--cc-card-text);
  border-radius: .6rem;
  padding: 1.35rem;
  min-height: 320px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-items: start;
  text-align: center;
}

.cc-card__icon{
  color: var(--cc-accent);
  margin-bottom: .25rem;
  display: flex;
  justify-content: center;
}

.cc-card__title{
  color: var(--cc-accent);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.12rem;
  margin: 0;
  font-weight: 900;
}

.cc-card__rule{
  height: 6px;
  width: 64px;
  border-radius: 999px;
  background: var(--cc-accent);
  margin: .35rem auto 1rem auto;
}

.cc-card__text{
  margin: 0 0 1rem 0;
  font-size: .98rem;
  line-height: 1.55;
  opacity: .9;
}

.cc-card__more[hidden]{ display: none !important; }

.cc-card__actions{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
}

/* Read more */
.cc-readmore{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-weight: 900;
  color: var(--cc-accent);
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.cc-readmore:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(10,61,98,.22);
  border-radius: 6px;
}
.cc-arrow{ transform: translateY(1px); }
.cc-readmore[aria-expanded="true"] .cc-arrow{
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

/* Buttons */
.cc-card__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none !important;
  font-weight: 900;
  letter-spacing: .02em;
  color: #fff;
  background: var(--cc-accent);
  border: 2px solid var(--cc-accent);
}
.cc-card__btn:hover{ filter: brightness(1.03); }
.cc-card__btn--ghost{
  background: transparent;
  color: var(--cc-accent);
  border-color: rgba(10,61,98,.35);
}
.cc-card__btn--ghost:hover{ border-color: rgba(10,61,98,.65); }

/* Prev/Next */
.cc-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: clamp(46px, 3.6vw, 56px);
  height: clamp(46px, 3.6vw, 56px);
  border-radius: 50%;
  background: rgba(255,255,255,.98);
  color: var(--cc-accent);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.cc-btn--prev{ left: 10px; }
.cc-btn--next{ right: 10px; }
.cc-btn:disabled{ opacity: .45; cursor: not-allowed; }

/* Dots */
.cc-dots{
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.2rem;
}
.cc-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: 2px solid rgba(255,255,255,.92);
  cursor: pointer;
}
.cc-dot.is-active{
  background: var(--cc-accent);
  border-color: #fff;
}

/* =====================================================
   MOBILE (<=576px): scroll-snap centered (fix offset)
   ===================================================== */
@media (max-width: 576px){
  .cc-industries{
    padding: 1.6rem 1rem;
    min-height: auto;
  }

  .cc-carousel{
    padding-inline: 0;
    max-width: 360px;      /* change 340/360/380 if you want */
    margin-inline: auto;
  }

  .cc-viewport{
    max-width: 360px;
    margin-inline: auto;

    overflow-x: auto;      /* enable snap */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    scrollbar-width: none; /* Firefox hide */
  }
  .cc-viewport::-webkit-scrollbar{ display:none; }

  /* IMPORTANT: disable transform animations on mobile */
  .cc-track{
    transition: none !important;
    will-change: auto;
  }

  /* each card occupies the viewport width; snap centered */
  .cc-card{
    scroll-snap-align: center;
    padding: 1.1rem;
    min-height: 300px;
  }

  .cc-btn--prev{ left: -6px; }
  .cc-btn--next{ right: -6px; }
}

/* extra small */
@media (max-width: 380px){
  .cc-carousel{ max-width: 340px; }
  .cc-viewport{ max-width: 340px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .cc-track{ transition: none; }
}
/* =====================================================
   COOKIES
   ===================================================== */
.cookie-consent{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(10,61,98,0.97);
  color: #fff;
  padding: 12px 0;
  font-size: 0.95rem;
}

.cookie-consent-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cookie-text{ flex: 1 1 260px; }

.cookie-text h4{
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 700;
}

.cookie-text p{
  margin: 0;
  line-height: 1.4;
  opacity: .96;
}

.cookie-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.cookie-actions .btn{ white-space: nowrap; }

.cookie-link{
  color: #f1f1f1;
  font-size: 0.9rem;
  text-decoration: underline;
  white-space: nowrap;
}

.cookie-link:hover{
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 576px){
  .cookie-consent-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-actions{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =====================================================
   FOOTER
 заданe: background image + blue tint
   ===================================================== */
#footer.footer.bg-overlay{
  --footer-image: url('../images/slider-main/bg1.jpg');
  --footer-tint-rgb: 10,61,98;
  position: relative;
  color: #fff;
  background-image: var(--footer-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgb(var(--footer-tint-rgb));
  overflow: hidden;
}

#footer.footer.bg-overlay::before{ content: none !important; }

#footer.footer.bg-overlay::after{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 400px at 50% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(0deg, rgba(var(--footer-tint-rgb), .65), rgba(var(--footer-tint-rgb), .65));
  pointer-events: none;
  z-index: 0;
}

#footer .footer-main{
  background: transparent !important;
  position: relative;
  z-index: 1;
}

#footer .widget-title,
#footer p,
#footer li,
#footer a{
  color:#fff;
}

#footer a{
  opacity:.9;
  text-decoration:none;
}

#footer a:hover{
  opacity:1;
  text-decoration:underline;
}

#footer .footer-widget{
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}