body{
  background:#f5f5f5!important;
  font-family: "Inter", sans-serif!important;
  font-size:18px!important;
}

.hero-section {
  background: #f6f5f3;
  background: radial-gradient(circle at calc(100% - 200px) 150px, rgba(78, 58, 29, 0.5) 0%, rgba(78, 58, 29, 0) 500px);
  background-repeat: no-repeat;
  padding:200px 0 30px 0;
}

.hero-section h2{
  font-size:40px!important;
  font-weight:400;
}

.hero-section h3{
  font-size:64px;
  font-weight:600;
}

.hero-section p{
  font-size:24px;
  color:#8E8E8E;
  margin-bottom:30px
}

.hero-text p {
  font-size: 1.2rem !important;
}

.hero-buttons .btn {
  font-weight: 600;
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.1);
  transition: all 0.3s ease;
}

.hero-buttons .btn:hover {
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.2);
}

.btn-warning {
  background-color: #cdad73 !important;
  border-color: #cdad73 !important;
  color: #fff !important;
}

.btn-outline-secondary {
  border-color: #8e8e8e!important;
  color: #555;
}

.btn-outline-secondary:hover {
  background-color: #b3b3b3;
  color: #fff;
}
.icon-circle {
  background-color: #d4bb80;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-circle img {
  max-width: 48px;
  height: auto;
}

.about-museum-section {
  margin-top:100px
}

.about-museum-section h2 {
  font-size: 48px;
  font-weight:700;
}


.about-museum-section p.lead {
  font-size: 22px;
  font-weight:400;
  color:#8e8e8e;
  margin-bottom:50px
}


.about-museum-section h5 {
  font-size: 24px;
  font-weight:600;
  color:#4a4a4a
}

.about-museum-section p {
  font-size: 18px;
  font-weight:normal;
  color:#8e8e8e
}

.img-spacing {
  margin-bottom: 25px;
}

.mission-section .container {
  box-shadow:0px 0px 20px #dfc491!important;
  color: #333;  
  border-radius:24px;
  padding:50px;
  font-size:18px
}


.mission-section h3 {
  font-size: 42px;
  font-weight:700;
}

.mission-text p {
  font-size: 18px;
  line-height: 1.5;
  padding-right:50px;
  color:#8E8E8E
}

.stats-box {
  background-color: #d4bb80;
  border-radius: 12px;
  color: #fff;
}

.stats-box h2 {
  font-size: 52px;
  font-weight:700;
  margin-bottom: 0.25rem;
}

.stats-box p {
  font-weight: 600;
  margin: 0;
}

.collections-section {
  background: #f3e6c7;
  padding: 85px 0;
  color: #333;
}

.collections-section h2{
  font-size:58px!important;
}


.collections-section h2 {
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 0.75rem;
}

.collections-section p {
  color: #8a7e66;
  max-width: 600px;
  margin: 0 auto 3rem;
  font-size: 18px;
  line-height: 1.4;
}

.collection-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
}

.collection-card:hover {
  transform: translateY(0px);
}

.collection-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  margin-bottom: 1rem;
}

.collection-content {
  padding: 10px 10px 1px 10px;
}

.collection-content h5 {
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: #1a1a1a;
  font-size: 22px;
}

.collection-content p {
  color: #8a7e66;
  font-size: 18px!important;
  line-height: 1.3;

}

.bg-gold {
  background-color: #d4bb80 !important;
}

.planirajte-posjet-section h2 {
  font-weight: 700;
  font-size: 58px;
}

.planirajte-posjet-section p {
  color:#8E8E8E;
}

.info-item small{
  font-size:18px
}

.info-item h6 {
  font-weight: 600;
}

.contact-box {
  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
  background:#F5E9D1
}

.btn-warning {
  background-color: #cdad73 !important;
  border-color: #cdad73 !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.5rem 0;
  font-size: 1.1rem;
}

.btn-warning:hover {
  background-color: #b89d60 !important;
  border-color: #b89d60 !important;
}

.max-w-400 {
  max-width: 400px;
}

.max-w-600-center {
  max-width: 600px;
  margin: 0 auto;
}

.max-w-700-center {
  max-width: 700px;
  margin: 0 auto;
}

.image-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.icon-32 {
  width: 32px;
  height: auto;
}

.icon-40 {
  width: 40px;
  height: auto;
}

.me-2 {
  margin-right: 8px;
}

.collection-content p {
  font-size: 0.95rem;
}

.izbornik{
  position:absolute;
  width:100%;
}

.izbornik a{
  color:#8e8e8e!important
}

.izbornik a:hover{
  color:#000!important
}

footer h2{
  font-size:40px;
  font-weight:700;
  margin-top:50px;
}

footer h3{
  font-size:32px;
  font-weight:700;
  margin-top:30px
}

.bootscore-copyright{
  margin-top:50px;
  padding:50px
}

.bootscore-copyright a{
  color:#000;
}

.timeline-section {
      padding: 80px 20px;
      min-width: 100%;
      margin: auto;
      position: relative;
    }

.timeline-section .container{
  z-index:5;
  position:relative;
}

.timeline-section h2{
  color:#fff;
  font-size:48px!important;
  font-weight:700;
}

.timeline-section .overlay {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(15, 28, 47, 0.90); 
  z-index: 0;
}



    .timeline-section h2 {
      text-align: center;
      font-size: 36px;
      margin-bottom: 10px;
    }

    .timeline-section p.subheading {
      text-align: center;
      color: #ccc;
      margin-bottom: 50px;
    }

    .timeline {
      position: relative;
      padding: 0;
      margin: 0;
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: 4px;
      height: 100%;
      background: #d4af7a;
    }

    .timeline-item {
      position: relative;
      width: 50%;
      padding: 20px 40px;
      box-sizing: border-box;
    }

    .timeline-item .content {
      background: #2f4468;
      padding: 20px;
      border-radius: 10px;
      position: relative;
      color:#fff;
    }

    .timeline-item .year {
      color: #d4af7a;
      font-weight: bold;
      margin-bottom: 10px;
      display: block;
    }

    .timeline-item.left {
      left: 0;
      text-align: right;
    }

    .timeline-item.right {
      left: 50%;
      text-align: left;
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      top: 30px;
      width: 15px;
      height: 15px;
      background: #d4af7a;
      border-radius: 50%;
      z-index: 1;
    }

    .timeline-item.left::before {
      right: -8px;
    }

    .timeline-item.right::before {
      left: -8px;
    }

 @media (max-width: 768px) {
      .timeline-item,
      .timeline-item.left,
      .timeline-item.right {
        width: 100%;
        left: 0;
        text-align: left;
      }

.timeline::before {
        left: 0px;
      }

.timeline-item::before {
        left: -8px;
  }

.hero-image {
    margin-top: 50px;
  }



.hero-section {
  padding:100px 0 30px 0;
}

.hero-section h2{
  font-size:25px!important;
}

.hero-section h3{
  font-size:40px;
  font-weight:600;
}

.hero-text p {
  font-size: 16px!important;
}

.hero-buttons .btn {
  width:100%;
  display:block;
  font-size:15px
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* razmak između gumba */
  align-items: start; /* ili center ili stretch, ovisno o željenom poravnanju */
}


.about-museum-section {
  margin-top:20px
}

.about-museum-section h2 {
  font-size: 38px;
}


.about-museum-section p.lead {
  font-size: 16px;
  margin-bottom:50px
}

.about-museum-section h5 {
  font-size: 18px;
}

.about-museum-section p {
  font-size: 14px;
}

.mission-section.py-5{
  padding-top:0!important
}

.about-museum-section.py-5 {
  padding-bottom:0!important  
}

.mission-section .container {
  border-radius:0px;
  padding:30px;
}


.mission-section h3 {
  font-size: 32px;
}

.mission-text p {
  font-size: 15px;
  padding-right:0px;
}


.collections-section h2{
  font-size:38px!important;
}

.planirajte-posjet-section h2 {
  font-size: 38px;
}

.planirajte-posjet-section p {
  color:#8E8E8E;
}


.izbornik{
  position:absolute;
  width:100%;
}

.izbornik a{
  color:#8e8e8e!important
}

.izbornik a:hover{
  color:#000!important
}

footer{
  font-size:14px
}

footer h2{
  font-size:30px;
}

footer h3{
  font-size:22px;
}

.bootscore-copyright{
  margin-top:50px;
  padding:50px
}

.bootscore-copyright a{
  color:#000;
}

.timeline-section h2{
  font-size:38px!important;
}

.timeline-item {
  font-size:14px;}
}