@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
  scroll-behavior: smooth;
}


body {
  overflow-x: hidden;
}


body {
  margin: 0;
  background-color: #070707;
  color: #f0f6f2;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
}

body p {
  line-height: 18px;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

img {
  max-width: 100%;
  height: auto;
}

/* Navigation */

.topnav {
  position: fixed;
  z-index: 5485565555555468;
  width: 100%;
  overflow: hidden;
  background-color: #070707;
  box-shadow: 0px 0.2px  #f8f6f2;
}

.topnav a {
  float: right;
  display: block;
  color: #f8f6f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 300;
}

.topnav a:first-child {
  margin-right: 1%;
}

.topnav a:hover {
  color: #8B5DFF;
}

.topnav .icon {
  display: none;
}

#lijevi_logo {
  float: left;
  font-weight: 600;
  margin-left: 1%;
}

@media screen and (max-width: 600px) {
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
    #usluge img{
        display: none;
    }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: fixed;
  }
  .topnav.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  #lijevi_logo {
    margin-left: -0.1%;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Header */

header {
  height: auto;
  box-shadow: 0px 0.2px #f8f6f2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1% 2%;
}

.logo_slogan {
  width: 50%;
  padding-top: 10%;
  display: block;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo_slogan img {
  margin-top: 10%;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20%;
}

.header_tekst {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-bottom: 1%;
  font-size: 1rem;
}

.godina {
  margin-left: 2%;
}

.w_s_g {
  margin-right: 2%;
}

/* O nama section */

#o_nama {
  box-shadow: 0px 0.2px #f8f6f2;
  padding: 15% 5% 15% 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.forhal_logo {
  flex: 1 1 45%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.forhal_logo img {
  width: 65%;
  max-width: 100%;
}

.forhal_tekst {
  flex: 1 1 15%;
  box-sizing: border-box;
  padding-top: 5%;
  padding-bottom: 5%;


}

.forhal_tekst p {
  margin-bottom: 1em;
  width: 55%;
    margin: 0 auto;
    text-align: center;
    padding: 0%;

}

.forhal_ikone {
  margin-top: 20px;
}

.forhal_ikone img {
  width: 7%;
  margin: 1.2%;
  transition: background-color 0.3s ease;
}

.forhal_ikone img:hover {
  background-color: #8B5DFF;
  border-radius: 50px;
}

/* Usluge section */

#usluge {
  box-shadow: 0px 0.2px  #f8f6f2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 5%;
}

#usluge h1 {
  font-size: 6vh;
  margin-bottom: 10%;
}

.usluge_lijevo {
  width: 55%;
}

.usluge_lijevo button {
  background-color: transparent;
  width: 10%;
  float: right;
  border: none;
}

.usluge_lijevo img {
  background-color: transparent;
  width: 70%;
  border: none;
  transition: width 0.3s ease;
}

.usluge_lijevo img:hover {
  width: 74%;
}

.usluge_naslov {
  font-size: 15px;
  margin-bottom: 8px;
}

.usluge_podnaslov {
  box-shadow: 0px 0.2px white;
  padding-bottom: 1%;
  padding-top: 1%;
  margin-top: -1.5%;
  color: #75736F;
}

.usluga_opis {
  padding-top: 3%;
  padding-bottom: 3%;
}

.usluga_opis p {
  width: 90%;
  color: #75736F;
}

.usluge_desno {
  width: 30%;
  margin-top: 25%;
  padding: 6%;
  margin-left: 3%;
}

.usluge_desno button {
  padding: 1%;
  width: 40%;
  max-width: 200px;
  color: #f8f6f2;
  background-color: #8B5DFF;
  border: none;
  border-radius: 50px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.usluge_desno button:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.usluge_desno a {
  color: white;
  text-decoration: none;
}

.usluge_desno a:visited,
.usluge_desno a:link,
.usluge_desno a:active {
  color: white;
  text-decoration: none;
}

.usluga1 {
  margin-bottom: 5%;
}

.usluga_opis {
  margin-top: 10px;
  color: #f8f6f2;
  display: none;
  transition: all 0.3s ease;
}

.usluga_opis.show {
  display: block;
}

/* Tvrtka section */

#tvrtka {
  box-shadow: 0px 0.2px #f8f6f2;
  padding: 5%;
  padding-top: 15%;
  padding-bottom: 15%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.tvrtka_naslov {
  width: 33%;
  padding-right: 5%;
  word-break: normal;
  overflow-wrap: break-word;
}

#tvrtka h1 {
  font-size: 8vh;
  margin-bottom: 10%;
  line-height: 1.2;
  white-space: normal;
  word-break: keep-all;
}

.tvrtka_tekst {
  width: 35%;
  border-left: 1px solid white;
  padding-left: 5%;
  padding-top: 5%;
  padding-bottom: 5%;
  font-size: 1em;
  color: white;
}

/* Akcija section */

#akcija {
  box-shadow: 0px 0.2px #f8f6f2;
  padding-top: 15%;
  padding-bottom: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.akcija_naslov h1 {
  font-size: 15vh;
  text-align: center;
  padding: 0%;
  margin: 3vh;
}

.akcija_naslov {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee {
  display: inline-block;
  white-space: nowrap;
  animation: scrollTextRight 40s linear infinite;
}

.marquee span {
  display: inline-block;
}

@keyframes scrollTextRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

#akcija button {
  display: block;
  margin: 0 auto;
  padding: 0.5%;
  margin-bottom: 6%;
  width: 12%;
  max-width: 300px;
  color: #f8f6f2;
  background-color: #8B5DFF;
  border: none;
  border-radius: 50px;
  overflow: hidden;
  margin-top: 2%;
}

#akcija button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

#akcija a {
  color: white;
  text-decoration: none;
}

#akcija button a:visited,
#akcija button a:link,
#akcija button a:active {
  color: white;
  text-decoration: none;
}

/* Radovi section */

#radovi {
  box-shadow: 0px 0.2px  #f8f6f2;
  padding-bottom: 10%;
}

#radovi h1 {
  margin-top: 5%;
  font-size: 6vh;
  margin-left: 5%;
}

/* slider */

.slider-wrapper {
  overflow: hidden;
  margin: 0 30px 0px;
  padding-top: 4%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slider-wrapper::-webkit-scrollbar {
  display: none;
}

.card-list {
  display: inline-flex;
   
}

.card-list .card-item {
  height: 60vh;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: #e6e6e6;
  margin-bottom: 5%;
}

.card-list .card-item .user-image {
  width: 60%;
  height: auto;
  margin-bottom: 1px;
  padding: 2%;
}

.slider-wrapper .swiper-pagination-bullet {
  background: #e6e6e6;
  height: 7px;
  width: 7px;
  opacity: 0.5;
}

.slider-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
}

.slider-wrapper .swiper-slide-button {
  color: #e8e8e8;
  margin-top: -55px;
  transition: 0.2s ease;
}

@media (max-width: 768px) {
  .slider-wrapper {
    margin: 0 10px 40px;
  }

  .slider-wrapper .swiper-slide-button {
    display: none;
  }
}

/* Podnozje / footer */

#podnozje {
  margin-left: 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 10%;
}

#podnozje h1 {
  font-size: 8vh;
  padding-top: 15%;
}

.podnozje_desno {
  width: 535px;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
}

.podnozje_lijevo {
  width: 535px;
}

.podnozje_desno a:link {
  color: #75736F;
  text-decoration: none;
}

.podnozje_desno a:visited {
  color: #75736F;
  text-decoration: none;
}

.podnozje_desno a:hover {
  color: #8B5DFF;
  text-decoration: underline;
}

.podnozje_desno a:active {
  color: #f8f6f2;
  text-decoration: none;
}

.podnozje_desno p {
  padding-bottom: 5%;
  padding-top: 5%;
}

.input-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #75736F;
  padding: 10px 0;
}

input {
  background-color: transparent;
  border: none;
  outline: none;
  color: #75736F;
  flex: 1;
  padding: 5px;
}

input::placeholder {
  color: #777;
}

button {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.3s;
}

button:hover {
  color: #8B5DFF;
}

.podnozje_desno img {
  width: 30%;
}

.logo_podnozje {
  width: 100%;
  margin-top: 10%;
  text-align: center;
  margin-bottom: -10%;
}

.logo_podnozje p {
  color: #75736F;
  font-size: 11px;
  padding-bottom: 1%;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 550px;
  margin: 0 auto;
  margin-right: 8%;
  margin-top: 8%;
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #75736F;
  width: 110%;
}

.footer-link img {
  width: 50%;
  margin-left: 50%;
}

.dot img {
  padding: 5%;
}

/* Responsive adjustments */

@media (max-width: 1024px) {
  #podnozje {
    flex-direction: column;
    justify-content: center;
    padding-top: 5%;
    width: 90%;
  }

  .podnozje_lijevo,
  .podnozje_desno {
    width: 70%;
    margin-left: 0;
    padding: 0 5%;
    text-align: center;
    margin: 0 auto;
  }

  .podnozje_desno p {
    margin: 0 auto;
  }

  #podnozje h1 {
    font-size: 6vh;
    margin-left: -5%;
    padding-top: 10%;
  }

  .footer-links {
    margin-right: 0;
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 15%;
    padding-left: 15%;
  }

  .footer-link {
    width: 90%;
  }

  .footer-link img {
    width: 24px;
    margin-left: 0;
  }

  .logo_podnozje {
    margin-top: 5%;
  }
  
  #o_nama {
    padding-top: 4%;
    padding-bottom: 4%;
  }
  
  #usluge {
    padding-top: 5%;
  }
  
  .logo_slogan {
    width: 60%;
    padding-top: 30%;
  }
  
  .logo_slogan img {
    margin-bottom: 16%;
  }
  
  .header_tekst {
    padding-top: 20px;
    font-size: 1.1em;
  }
  
  .godina,
  .w_s_g {
    padding-top: 3%;
  }
  
  .forhal_ikone img {
    width: 30px;
  }
  
  .usluge_lijevo img {
    width: 100%;
  }
  
  .usluge_lijevo {
    width: 60%;
  }
  
  .usluge_desno {
    width: 30%;
    padding: 3%;
    padding-top: 10%;
    text-align: left;
  }
  
  #tvrtka {
    padding-top: 15%;
    padding-bottom: 15%;
    flex-direction: column;
    align-items: center;
    padding-top: 10%;
    padding-bottom: 10%;
    gap: 30px;
  }
  
  .tvrtka_naslov {
    width: 90%;
    padding-right: 0;
    text-align: center;
  }
  
  #tvrtka h1 {
    font-size: 5vh;
    margin-bottom: 5%;
    word-break: break-word;
    white-space: normal;
  }
  
  .tvrtka_tekst {
    width: 90%;
    border-left: none;
    padding-left: 0;
    padding-top: 0;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .logo_slogan {
    width: 70%;
    padding-top: 25%;
  }
  
  .logo_slogan img {
    margin-bottom: 18%;
  }
  
  .forhal_ikone img {
    width: 30px;
  }
  
  #o_nama {
    padding-top: 15%;
    padding-bottom: 15%;
  }
  
  #usluge {
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .usluge_lijevo,
  .usluge_desno {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }
  
  .usluge_desno {
    margin-top: 40px;
    padding: 3%;
    text-align: center;
  }
  
  .usluge_desno button {
    width: 50%;
    max-width: 180px;
  }
  
  .usluge_desno button:hover {
    transform: none;
    box-shadow: none;
  }
  
  .usluge_lijevo img {
    width: 70%;
  }
  
  #radovi {
    padding-top: 10%;
    padding-bottom: 10%;
  }
  
  #akcija {
    padding-top: 18%;
    padding-bottom: 15%;
  }
  
  .akcija_naslov h1 {
    margin-top: -1%;
    padding-bottom: 3%;
  }
}

@media (max-width: 820px) {
  #o_nama {
    padding-top: 25%;
    padding-bottom: 25%;
  }
  
  .forhal_logo img {
    width: 80%;
  }
  
  .forhal_tekst p {
    width: 100%;
  }
  
  #usluge {
    padding-top: 10%;
    padding-bottom: 15%;
  }
  
  .usluge_lijevo img {
    width: 78%;
  }
  
  .usluge_desno button {
    max-width: 170px;
    width: 52%;
    padding: 0.9%;
  }
  
  #tvrtka {
    padding-bottom: 20%;
  }
  
  #radovi {
    padding-top: 10%;
  }
  
  .akcija_naslov {
    padding-top: 18%;
    padding-bottom: 10%;
  }
}

@media (max-width: 768px) {
  header {
    height: auto;
    padding: 15% 5% 5% 5%;
  }
  
  .logo_slogan {
    width: 85%;
    padding-top: 20%;
  }
  
  .logo_slogan img {
    width: 100%;
    margin-top: 0;
    margin-bottom: 12%;
  }
  
  .header_tekst {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding-bottom: 2%;
    margin-top: auto;
  }
  
  .godina {
    display: none;
  }
  
  .w_s_g {
    margin: 0;
    font-size: 1em;
    padding-top: 1%;
  }
  
  #o_nama {
    flex-direction: column;
    align-items: center;
    padding-top: 10%;
    gap: 15px;
  }
  
  .forhal_logo,
  .forhal_tekst {
    flex: 1 1 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
  }
  
  .forhal_logo {
    justify-content: flex-start;
    padding-bottom: 20px;
  }
  
  .forhal_logo img {
    display: block;
    margin: 0 auto;
    width: 50%;
    padding-left: 0;
  }
  
  .forhal_tekst {
    padding-top: 5%;
    padding-bottom: 5%;
  }
  
  .forhal_tekst p {
    width: 90%;
    margin: 0 auto 1em auto;
  }
  
  .forhal_ikone {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    margin-left: 5%;
  }
  
  .forhal_ikone img {
    width: 32px;
    margin: 0;
  }
  
  .usluge_lijevo img {
    width: 75%;
  }
  
  .usluge_desno {
    padding: 4%;
  }
  
  .usluge_desno button {
    width: 55%;
    max-width: 160px;
    padding: 0.8%;
  }
  
  .slider-wrapper .card-item {
    height: 80vh;
  }
  
  .card-list .card-item .user-image {
    width: 55%;
  }
}

@media (max-width: 600px) {
  .forhal_ikone {
    gap: 8px;
    margin-left: 5;
  }
  
  .forhal_ikone img {
    width: 28px;
  }
  
  .slider-wrapper .card-item {
    height: 60vh;
  }
  
  .card-list .card-item .user-image {
    width: 55%;
  }
    
    .footer-link span{
        font-size: 1.5vh;
    }
 
}

@media (max-width: 540px) {
    
  .usluge_lijevo img {
    width: 120%;
  }
  
  .usluge_lijevo img:hover {
    display: none;
  }
  
  .usluge_desno {
    display: none;
  }
  
  .usluge_desno button:hover {
    display: none;
  }
  
  #akcija {
    padding-top: 18%;
    padding-bottom: 18%;
  }
  
  #akcija h1 {
    font-size: 8vh;
  }
  
  #akcija button {
    width: 30%;
  }
  
  .usluge_podnaslov {
    padding-top: 5%;
    padding-bottom: 5%;
    box-shadow: none;
    border-bottom: 0.2px solid #f8f6f2;
  }
  
  #usluge h1 {
    font-size: 3vh;
  }
  
  .usluge_podnaslov {
    font-size: 13px;
  }
  
  #radovi h1 {
    font-size: 3vh;
  }
  
  .card-list .card-item {
    height: 40vh;
  }
  
  #drugi_odlomak {
    min-height: 60vh;
  }
  
  #akcija h1 {
    font-size: 7vh;
  }
  
  .marquee {
    animation: scrollTextRight 10s linear infinite;
  }
  
  .footer-links {
    margin-right: 0;
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 10%;
    padding-left: 0%;
    display: block;
  }
  
  .footer-link {
    width: 80%;
    font-size: 2vh;
    padding: 5%;
    margin: 0 auto;
  }
  
  #podnozje h1 {
    margin: 0 auto;
    font-size: 4vh;
    padding-bottom: 2%;
  }
  
  .podnozje_desno p {
    margin-bottom: 15%;
  }
        .footer-link span{
        font-size: 1.5vh;
    }
}

@media (max-width: 400px) {
    
  .logo_slogan {
    padding-top: 40%;
    padding-bottom: 40%;
  }
  
  #o_nama {
    padding-top: 35%;
    padding-bottom: 35%;
  }
  
  .forhal_ikone img {
    width: 26px;
  }
   .forhal_logo{
        width: 100%;
        
    }    
    .forhal_logo img{
        width: 80%;
    }
        
  #usluge {
    padding-top: 25%;
    padding-bottom: 25%;
  }
  
  #usluge img {
    width: 150%;
    margin: 5%;
  }
    
    #tvrtka h1{
        font-size: 3.5vh;
    }
  
  .podnozje_desno {
    width: 95%;
  }
        .footer-link span{
        font-size: 1.5vh;
    }
}

@media (max-width: 360px) {
  .usluge_lijevo img {
    width: 65%;
  }
  
    .forhal_logo{
        width: 100%;
        
    }    
    .forhal_logo img{
        width: 80%;
        
    }
  .usluge_desno button {
    width: 70%;
    max-width: 130px;
    padding: 0.5%;
    font-size: 0.85em;
  }
  
  .usluge_podnaslov {
    box-shadow: none;
    border-bottom: 0.2px solid white;
  }
  
  #usluge h1,
  #radovi h1 {
    padding-bottom: 20%;
    font-size: 4.5vh;
  }
  
  #tvrtka {
    padding-bottom: 35%;
  }
  
  #podnozje {
    padding-left: 0%;
    margin-left: 0%;
    margin: 0 auto;
  }
  
  #podnozje h1 {
    margin: 0 auto;
    display: block;
    font-size: 4vh;
  }
  
  #podnozje p {
    padding-bottom: 10%;
  }
  
  .footer-link {
    width: 75%;
  }
  
  .podnozje_desno p {
    margin-bottom: 25%;
  }
  
  .podnozje_lijevo {
    padding: 0%;
    margin: 0%;
    margin: 0 auto;
  }
        .footer-link span{
        font-size: 1.5vh;
    }
}
@media (max-width: 339px) {

    #tvrtka h1{
        font-size: 3.5vh;
        padding-top: 15%;
    }
        .footer-link span{
        font-size: 1.5vh;
    }
}