/* font */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');
/* variable */
:root {     
    --base-color: #00ce9b;
    --alt-font: 'Manrope', sans-serif;
    --primary-font: 'Rubik', sans-serif;
    --dark-gray: #252840;
    --medium-gray: #868d98;
    scroll-behavior: smooth;
    
} 

/* reset */
body {
    font-size: 17px;
    line-height: 32px; 
}
a {
    color: #868d98;
} 
b, strong {
    font-weight: 600;
}
::-webkit-input-placeholder {
    color: #868d98 !important;
    text-overflow: ellipsis;
}
::-moz-placeholder {
    color: #868d98 !important;
    text-overflow: ellipsis;
    opacity:1;
}
:-ms-input-placeholder {
    color: #868d98 !important;
    text-overflow: ellipsis;
    opacity:1;
}
/* bg color */
.bg-gradient-emerald-blue-emerald-green {
    background-image:linear-gradient(50deg,#09afea 0,#19e089 100%);
}
.bg-gradient-black-green {
    background-image: linear-gradient(to right top, #1f2021, #1b1d1c, #1b1d1c, #222523, #333c37);
}
/* text color */
.text-gradient-emerald-blue-emerald-green {
    background-image: linear-gradient(to right top, #09afea, #19e089);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* button gradient */
.btn-gradient-emerald-blue-emerald-green {
    background-image: linear-gradient(to right, #09afea, #19e089, #09afea);
    background-size: 200% auto;
    color: var(--white);
}
/* btn */
.btn{
    font-weight: 500;
    text-transform: inherit;
}
.btn.btn-extra-large {
    font-size: 22px;
}
.btn.btn-large {
    font-size:17px;
}
.btn.btn-medium {
    font-size: 16px;
}
.btn.btn-small {
    font-size: 15px;
}
.btn.btn-very-small {
    font-size: 13px;
}
.btn.btn-large .btn-icon i {
    top: 1px;
}
.btn.btn-link {
    padding: 0 0 2px;
}
.btn.btn-link-gradient {
    padding: 0 0 3px;
}
/* header */
header .navbar-brand img {
    max-height: 30px;
}
.navbar .navbar-nav .nav-link {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 10px 22px
}
.push-menu .close-menu {
    right: 30px;
    top: 30px;
}
/* newsletter style  */
.newsletter-style-02 input {
    font-size: 14px;
}
/* footer */
footer ul li {
    margin-bottom: 2px;
}
/* media query responsive */
@media (max-width: 1199px) {
    .navbar .navbar-nav .nav-link {
        padding: 10px 17px;
    }
}

footer .footer-text {
  line-height: 1.65;
}
.createdby {
  opacity:0.7;
}
footer .footer-meta {
  margin-top:10px;
}

#aktuelni-projekti .image-container {
  width:580px;
  height:600px;
}
#aktuelni-projekti .image-container img {
  object-fit: cover;
  width:100%;
  height:100% !important;
}

#portfolio-modal .row.g-0 { align-items: stretch; }
#portfolio-modal .col-lg-4 { display: flex; }
#portfolio-modal .col-lg-4 > div { width: 100%; }

#portfolio-modal .swiper-button-prev,
#portfolio-modal .swiper-button-next {
  color: #fff;
}

#portfolio-modal .swiper-pagination-bullet-active, #portfolio-modal .swiper-pagination-bullet {
  background: #fff;
}

#modal-meta {
    line-height:1.8 !important
}

/* portfolio styles */

#portfolio .portfolio-item p {
  line-height: 1.4;
}
#portfolio .year-badge {
  background: rgba(20,20,20,0.75);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px !important;
}

.portfolio-card-wrapper { /* put this class on the outer card container */
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
}

.portfolio-card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}

/* Image area: consistent height + clean crop */
.portfolio-card-wrapper .box-image {
  position: relative;
  aspect-ratio: 16 / 10; /* consistent look on desktop */
  overflow: hidden;
}

.portfolio-card-wrapper .box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .35s ease;
  filter: saturate(.98) contrast(1.02);
}

.portfolio-card-wrapper:hover .box-image img {
  transform: scale(1.03);
}

/* the overlay itself */
.portfolio-img::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.00) 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.00) 25%);
}


/* ensure badges/text sit above overlay */
.portfolio-img .year-pill,
.portfolio-img .position-absolute{
  z-index: 2;
}

#portfolio .portfolio-card-desc {
  margin-bottom:15px;
}
#portfolio .portfolio-card-info {
  font-size:15px;
  font-weight:500;
  opacity:0.75;
}
#portfolio .card-cta {
  letter-spacing:0.8px;
}

.object-fit-cover {
  object-fit: cover;
}

.letter-spacing-2 {
  letter-spacing: 0.12em;
}

section.bg-dark {
  min-height: 480px;
}

    #kontakt {
      min-height:300px;
      align-content: center;
    }
    #kontakt .footer-cta-wrapper {
            gap: 1.5rem;
    }

/* ==========================================================
   RESPONSIVE STYLES
   ========================================================== */

/* ----------------------------------------------------------
   Mobile 
   < 576px
   ---------------------------------------------------------- */
@media (max-width: 575.98px) {

    header .navbar-brand {
      padding:18px 0;
    }
    header .navbar-brand img {
        max-height:22px;
    }

    #hero .swiper {
      height:65vh !important;
    }
    .full-screen.ipad-top-space-margin {
      margin-top:68px;
    }
    header.sticky .navbar-brand {
      padding:18px 0;
    }

    /* O-nama styles */

    #o-nama .about-counter p {
      font-size:16px;
      line-height:1.3;
      margin-top:8px;
    }
    #o-nama .about-description {
      padding-left:2rem;
      padding-right:2rem;
    }

    /* Aktuelni projekti styles */
    #aktuelni-projekti .container {
        padding-left:2rem;
        padding-right:2rem;
    }
    #aktuelni-projekti .aktuelni-description {
      line-height: 1.5;
    }
    #aktuelni-projekti .aktuelni-bullets {
      line-height:1.5;
    }
    #aktuelni-projekti .image-container {
      width:100%;
      height: auto;
      aspect-ratio: 2 / 1;
    }

    /* kontakt styles */
    #kontakt .footer-cta-wrapper {
      flex-direction: column;
      gap: 1.5rem;
    }

    /* Portfolio styles */
    #portfolio .container {
        padding-left:2rem;
        padding-right:2rem;
    }
    #portfolio .portfolio-item {
      margin-bottom:3rem !important;
    }

    /* Kontakt styles */
    #kontakt .container {
        padding-left:2rem;
        padding-right:2rem;
    }

    /* Footer styles */
    footer .container {
      padding-left:2rem;
      padding-right:2rem;
    }
    footer .footer-cta-wrapper {
        flex-direction: column;
        gap: 2rem;
    }
    footer .cta-desc {
      line-height: 1;
    }
    footer #copyright p {
      font-size:14px;
      line-height:2rem;
      margin-bottom:10px;
    }
    footer .footer-logo img {
        max-height:24px;
        margin-bottom:1.4rem;
    }

    .mfp-container {
        padding-left:0px !important;
        padding-right:0px !important;
    }
    #modal-title {
        margin-bottom:20px;
    }
    #modal-subtitle {
        margin-bottom:0px !important;
    }
    #modal-description {
        font-size: 1.2rem !important;
    }
    #modal-meta {
        font-size: 1.2rem !important;
    }
    #modal-meta div {
        padding-bottom:0px !important
    }
    #modal-investor {
        margin-top: 1rem !important
    }
    #portfolio-modal .top-block {
      height:40vh;
    }
    #portfolio-modal .bottom-block {
      height:60vh;
    }
    #portfolio-modal .portfolio-modal-slider {
      height:100%;
    }
    .scroll-progress {
      display:block !important;
      top:auto;
      bottom:20px;
      right:10px;
    }
}

/* ----------------------------------------------------------
   Tablet Portrait
   768px – 992px
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {

  nav .nav-link {
    line-height: 2 !important;
  }
  #aktuelni-projekti .aktuelni-description {
    line-height: 1.5;
  }
  #aktuelni-projekti .aktuelni-bullets {
    line-height:1.5;
  }
    #kontakt .footer-cta-wrapper {
      justify-content: center;
      gap: 1.5rem;
    }
  footer .footer-contact div:first-of-type {
    margin-bottom: 40px !important
  }
  footer .footer-cta-wrapper a {
    width:45%;
  }
  footer .footer-meta {
    font-size:15px;
  }
  footer .footer-text {
    font-size:16px;
    margin-top:1rem;
  }
    .mfp-container {
        padding-left:0px !important;
        padding-right:0px !important;
    }
    #portfolio-modal.container {
      max-width:100%;
    }
    #portfolio-modal .bottom-block .bottom-block-body {
      padding:3rem 4rem !important;
    }
    #modal-title {
        margin-bottom:20px;
    }
    #modal-subtitle {
        margin-bottom:0px !important;
    }
    #modal-description {
        font-size: 1.2rem !important;
    }
    #modal-meta {
        font-size: 1.2rem !important;
    }
    #modal-meta div {
        padding-bottom:0px !important
    }
    #modal-investor {
        margin-top: 1rem !important
    }
    #portfolio-modal .top-block {
      height:50vh;
    }
    #portfolio-modal .bottom-block {
      height:50vh;
    }
    #portfolio-modal .portfolio-modal-slider {
      height:100%;
    }
}


/* ----------------------------------------------------------
   Tablet Landscape
   992px – 1200px
   ---------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {

  .navbar .navbar-nav .nav-link {
    padding: 10px 13px;
    font-size:15px;
  }
  #o-nama .about-counter p {
    line-height:1.5;
    margin-top:12px;
    font-size:16px;
  }
  #aktuelni-projekti .aktuelni-description {
    line-height: 1.5;
  }
  #aktuelni-projekti .aktuelni-bullets {
    line-height:1.5;
  }
    #kontakt .footer-cta-wrapper {
      justify-content: center;
    }
  footer .footer-cta-wrapper{
    justify-content: center !important;
    gap:2rem;
  }
  footer .footer-cta-wrapper a {
    width:40%;
  }
  #portfolio-modal #modal-subtitle {
    margin-bottom:20px !important;
  }
  #portfolio-modal #modal-title {
    margin-bottom:10px;
  }
  #portfolio-modal #modal-description {
    margin-bottom:45px;
  }

}


/* ----------------------------------------------------------
   Laptop Small
   992px – 1199px
   (includes 1366×768 fixes if needed)
   ---------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {

  /* small laptop / older laptop overrides */

}


/* ----------------------------------------------------------
   Laptop Standard
   1200px – 1399px
   ---------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {

  footer .footer-contact h3 {
    font-size:2.5rem;
    margin-bottom:5px !important;
  }
  footer .cta-desc {
    font-size:1.15rem;
  }
  /* standard laptop overrides */
  #kontakt .footer-cta-wrapper {
    gap:0rem;
    justify-content: space-between;
  }
   .footer-cta-wrapper a {
    font-size:20px !important;
  }
    #portfolio-modal #modal-subtitle {
    margin-bottom:15px !important;
  }
  #portfolio-modal #modal-title {
    margin-bottom:10px;
  }
  #portfolio-modal #modal-description {
    margin-bottom:30px;
  }
}


/* ----------------------------------------------------------
   Desktop / Large screens
   ≥ 1400px
   ---------------------------------------------------------- */
@media (min-width: 1400px) {

  /* large desktop overrides */
    #kontakt .footer-cta-wrapper {
    gap:0rem;
    justify-content: space-between;
  }

}

/* ===== Desktop layout (horizontal steps + lines) ===== */
@media (min-width: 992px) {
  /* The modal row becomes a fixed-ish height container */
  #portfolio-modal > .row {
    height: 640px;           /* tweak this number */
  }

  /* Left column should fill the row height */
  #portfolio-modal .col-lg-8 {
    height: 100%;
    overflow: hidden;        /* prevents image overflow */
  }

  /* Make slider/swiper fill the column height */
  #portfolio-modal .portfolio-modal-slider,
  #portfolio-modal .portfolioSwiper,
  #portfolio-modal #modal-slides,
  #portfolio-modal .swiper-slide {
    height: 100%;
  }

  /* Ensure images cover the available area without stretching */
  #portfolio-modal .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #kontakt .footer-cta-wrapper {
    justify-content: space-between;
  }
  #kontakt .footer-cta-wrapper a {
    font-size:20px;
  }
}

.mfp-close {
  background-color: #fff !important;
}

.mfp-wrap {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}