body {
    /*font-family: 'Inter', sans-serif;*/
    font-family: Lato, sans-serif;
}

/* HERO */
.hero {
    height: 100vh;
    background: url('9c6eaed9-b91e-43c9-aba4-99a7c4fb76f0.jpg') center/cover no-repeat;
	background-attachment: fixed;
    color: #fff;
    display: flex;
    align-items: center;
}
.hero-overlay {
    background: rgba(0,0,0,0.6);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.lead{
    margin-bottom: 40px;
}

/* PORTFOLIO */
#portfolio{
	margin:100px 0 100px 0;
}

.porfolio-text{
	align: center;
	color:white;
	background: rgba(0,0,0,0.6);
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
}
.client_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*filter: grayscale(100%);*/
    transition: 0.3s;
}
.client_img:hover {
   /*filter: grayscale(0%);*/
}

/* SECTION SPACING */
section {
     margin-bottom: 60px 0;
}

/* CTA */
.cta {
    background: #111;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}
.cta h2{
    margin-bottom: 40px;
}
.cta2 {
    margin-top: 40px !important;
    padding:15px;
    border-radius: 0.375rem;
    color: rgba(33, 37, 41, 1.0);
    background-color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    transition: color 0.4s;
    transition: background-color 0.4s;
    transition-timing-function: ease;
    transition-timing-function: ease-out;
}
.cta2:hover{
     color: white;
     background-color: red;
}

#services{
	padding: 150px 0;
	background: url('int-ext24.jpg');
	background-size:cover;
	background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom:4px solid;
  border-top:4px solid;
}

#services h3{
	margin-bottom:20px;
	font-weight:600;
}
#services .col-md-3{
	background: rgba(0,0,0,0.6);
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}

#services h2{
    background: rgba(0,0,0,0.6);
    color: #fff;
    text-align: center;
    margin-bottom: 0;
}
h2{
	font-weight:600;
	padding-top:40px;
}

/* SECTION PROCESS */
#process{
    padding-top: 40px;
}
.process-widget{
	margin-bottom:80px;

}
.icons{
	width:80px;
	margin-bottom:40px;
}

h4{
	font-weight:600;
    margin-bottom: 20px;
}

/*PRICING*/

#pricing{
    padding:40px 0 80px 0;
}
.price-col{
    padding:0 80px;
}
.price-col h4{
   
}
.price-col li{

}


/*ABOUT*/
.about-section{
    background: url('back.jpg') center/cover no-repeat;
    background-attachment: fixed;
    color: #fff;
    display: flex;
    align-items: center;
}
.about-section-overlay {
    background: rgba(0,0,0,0.6);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.about{
    padding: 100px;
}
.about h2{
    padding-bottom: 40px;
}
.about-left{
    padding:0 100px;
}
.about-right{
    padding:0 100px;
}
.about-right img{
    width: 100%;
    object-fit: cover;
}

/*CONTACT*/

#contact{
    padding-bottom: 100px;
}

.contact-simple {
    padding: 40px;
}

.contact-item {
    margin-bottom: 15px;
}

.contact-item span {
    color: #888; /* Sivkasta boja za labelu */
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-item a {
    color: #fff; /* Bela boja za linkove */
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    transition: color 0.4s;
    transition-timing-function: ease;
    transition-timing-function: ease-out;
}

.contact-item a:hover {
    color: red;
}


/* FOOTER*/
footer h5{
    margin: 0;
}
#copyright{
    margin: 0;
}
#copyright a{
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 1.2em;
    font-weight: 800;
    transition: color 0.4s;
    transition-timing-function: ease;
    transition-timing-function: ease-out;
}
#copyright a:hover{
    color:red;
}


/*GO TO TOP BUTTON*/
#blackbrick-top {
    position: fixed;
    bottom: 40px; right: 40px;
    width: 50px; height: 50px;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 0px;
    border-radius: 40px;
    border: none;
    transition: all 1000ms ease;
    display: flex;
    align-items: center; justify-content: center;
    z-index: 9999; opacity: 0;
    visibility: hidden; transition: all 0.4s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#blackbrick-top.visible { opacity: 1; visibility: visible; bottom: 30px; }
#blackbrick-top:hover { background-color: #333; transform: translateY(-3px); }


/*MODAL CSS*/

.swiper {
  height: 100vh;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

.swiper-slide img {
  max-height: 90vh;
  max-width: 100%;
  object-fit: contain;
}

/* strelice */
.swiper-button-prev,
.swiper-button-next {
  color: white;
  width: 60px;
  height: 60px;
  backdrop-filter: blur(10px);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 28px;
}

/* counter */
#counter {
  font-size: 14px;
  letter-spacing: 2px;
  opacity: 0.8;
}

.modal-content {
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(20px);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 9999; /* 🔥 najbitnije */

  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;

  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);

  color: white;
  font-size: 20px;
  cursor: pointer;
}

/* hover efekat */
.lightbox-close:hover {
  background: rgba(255,255,255,0.3);
}


/* Styles for smartphones and small tablets */
@media screen and (max-width: 767px) {
    .about{
        padding: 0 40px;
    }
    .about-left{
        padding: 0px;
        padding-bottom: 40px;
    }
    .about-right{
        padding: 0 0 40px 0;
    }
    #portfolio{
        margin:0;
    }
    .process-widget{
        margin-bottom: 40px;
    }
    .cta{
        padding: 20px 20px 60px 20px;
    }
    #contact{
        padding-bottom: 60px;
    }
    /* strelice */
    .swiper-button-prev,
    .swiper-button-next {
        color: white;
        width: 30px;
        height: 30px;
        backdrop-filter: blur(10px);
    }
    #services .col-md-3{
        background: rgba(0,0,0,0.6);
        color: #fff;
        text-align: center;
        padding: 20px 20px;
    }
    .price-col{
        padding: 0 40px;
    }
    #blackbrick-top {
        bottom: 20px; right: 20px;
        width: 20px; height: 20px;
    }
}