/*
Theme Name: StarFitness
Theme URI: https://yoursite.com
Author: Your Name
Author URI: https://yoursite.com
Description: Fitness equipment and gym design theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starfitness
*/

		:root {
			--primary-red: #d32f2f;
			--dark-bg: #000000;
			--gray-text: #cccccc;
			--light-gray: #f5f5f5;
		}
		
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		
		body {
			font-family: 'Poppins', sans-serif;
			color: #333;
			overflow-x: hidden;
		}
/* top menu BEGIN *//* Header - Light Clean */.top-header-clean {  background: #ffffff;  box-shadow: 0 2px 10px rgba(0,0,0,0.05);  position: relative;  z-index: 1000;}.top-header-clean .container {  max-width: 1200px;  margin: 0 auto;  padding: 0 20px;  display: flex;  align-items: center;  justify-content: space-between;  position: relative;}.logo {  font-size: 28px;  font-weight: bold;  color: #333;  text-decoration: none;}.logo span {  color: #e74c3c;}/* Mobilni toggle */.mobile-menu-toggle {  display: none; /* Desktop hidden */  flex-direction: column;  gap: 4px;  width: 32px;  height: 26px;  background: transparent;  border: none;  cursor: pointer;  padding: 6px;  z-index: 1001;}.mobile-menu-toggle span {  height: 4px;  background: linear-gradient(90deg, #333, #555);  border-radius: 4px;  transition: all 0.3s ease;  box-shadow: 0 1px 3px rgba(0,0,0,0.2);}/* Top Menu */.top-nav-light {  flex: 1;}.nav-menu {  list-style: none;  margin: 0;  padding: 0;  display: flex;  justify-content: center;  align-items: center;}.nav-menu > li {  position: relative;  margin: 0 15px;}.nav-menu > li > a {  display: block;  padding: 25px 15px;  color: #333;  text-decoration: none;  font-weight: 500;  font-size: 12px;  transition: all 0.3s ease;  border-bottom: 3px solid transparent;}.nav-menu > li > a:hover {  color: #e74c3c;  border-color: #e74c3c;}.nav-menu > li.current-menu-item > a,.nav-menu > li.current_page_item > a {  color: #e74c3c;  border-bottom: 3px solid #e74c3c;}/* Dropdownovi */.nav-menu li ul {  position: absolute;  top: 100%;  left: 50%;  transform: translateX(-50%);  background: #ffffff;  min-width: 220px;  box-shadow: 0 10px 30px rgba(0,0,0,0.1);  opacity: 0;  visibility: hidden;  transition: all 0.3s ease;  list-style: none;  margin: 0;  padding: 15px 0;  border-radius: 8px;  margin-top: 5px;}.nav-menu li:hover > ul {  opacity: 1;  visibility: visible;  transform: translateX(-50%) translateY(0);}.nav-menu li ul li {  margin: 0;  width: 100%;}.nav-menu li ul a {  padding: 12px 25px;  color: #555;  font-size: 15px;  border-bottom: none;}.nav-menu li ul a:hover {  background: #f8f9fa;  color: #e74c3c;}.nav-menu li ul li.current-menu-item a {  color: #e74c3c;  background: #f8f9fa;}/* 2. nivo dropdown */.nav-menu li ul li ul {  left: 100%;  top: 0;  transform: none;  margin-left: 0;  margin-top: 0;}/* Navbar actions */.navbar-actions {  gap: 15px;}.social-icons {  display: flex;  gap: 10px;}.social-link {  color: #666;  font-size: 18px;  transition: color 0.3s;}.social-link:hover {  color: #e74c3c;}.btn-danger {  background: #e74c3c;  color: white;  padding: 12px 25px;  text-decoration: none;  border-radius: 5px;  font-weight: 500;  transition: background 0.3s;}.btn-danger:hover {  background: #c0392b;}/* ... Tvoj postojeći desktop CSS za .top-nav-light, .nav-menu, dropdownove ... (zadrži iz prijašnjeg odgovora) *//* MOBILNI - Hamburger + Slide menu (NOVO/POPRAVLJENO) */@media (max-width: 992px) {  .top-header-clean .container {    position: relative;  }  /* Checkbox skriven */  .mobile-menu-checkbox {    display: none;  }  /* Hamburger vidljiv samo na mob */  .mobile-menu-toggle {    display: flex;    flex-direction: column;    justify-content: space-around;    width: 30px;    height: 25px;    background: none;    border: none;    cursor: pointer;    padding: 5px;    z-index: 1001;    position: relative;  }  .mobile-menu-toggle span {    width: 100%;    height: 3px;    background: #333;    border-radius: 10px;    transition: all 0.3s ease;    transform-origin: center;  }  /* Animacija hamburger -> X */  .mobile-menu-checkbox:checked + .mobile-menu-toggle span:nth-child(1) {    transform: rotate(45deg) translate(7px, 7px);  }  .mobile-menu-checkbox:checked + .mobile-menu-toggle span:nth-child(2) {    opacity: 0;  }  .mobile-menu-checkbox:checked + .mobile-menu-toggle span:nth-child(3) {    transform: rotate(-45deg) translate(6px, -6px);  }  /* Menu skriven po defaultu */  .top-nav-light {    position: fixed;    top: 0;    left: -100%;    width: 280px;    height: 100vh;    background: #ffffff;    box-shadow: 4px 0 20px rgba(0,0,0,0.15);    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);    padding: 90px 25px 30px;    overflow-y: auto;    z-index: 1000;  }  /* Otvori menu */  .mobile-menu-checkbox:checked ~ .top-nav-light {    left: 0;  }  /* Vertikalni layout */  .nav-menu {    flex-direction: column;    gap: 0;  }  .nav-menu > li {    margin: 0;    width: 100%;  }  .nav-menu > li > a {    padding: 18px 20px;    border-bottom: 1px solid #f0f0f0;    font-size: 17px;  }  /* Dropdownovi u mob - otvoreni na hover (ili tap) */  .nav-menu li ul {    position: static;    opacity: 1;    visibility: visible;    transform: none;    box-shadow: none;    border-radius: 0;    margin: 0;    padding: 0;    max-height: 0;    overflow: hidden;    transition: max-height 0.3s ease;    background: #fafafa;  }  .nav-menu li:hover > ul,  .nav-menu li:focus-within > ul {    max-height: 1000px;    padding: 15px 0;  }  .nav-menu li ul li {    margin: 0;  }  .nav-menu li ul a {    padding: 15px 40px;    font-size: 15px;    border-bottom: 1px solid #eee;  }  .nav-menu li ul li ul a {    padding-left: 60px;  }  /* Overlay za zatvaranje (klik izvan menija) */  .mobile-menu-checkbox:checked ~ .top-nav-light::before {    content: '';    position: fixed;    top: 0;    left: 280px;    width: calc(100% - 280px);    height: 100vh;    background: rgba(0,0,0,0.3);    z-index: -1;  }  /* Sakrij akcije na mob (ili ih pomakni) */  .navbar-actions {    gap: 10px;  }}@media (max-width: 480px) {  .top-nav-light {    width: 100%;    left: -100%;  }  .mobile-menu-checkbox:checked ~ .top-nav-light::before {    left: 0;    width: 100%;  }}/* CSS-ONLY SOCIJALNE IKONE (bez Font Awesome) */.social-icons {  display: flex;  gap: 12px;}.social-link {  display: flex;  align-items: center;  justify-content: center;  width: 42px;  height: 42px;  border-radius: 50%;  color: #666;  text-decoration: none;  font-weight: bold;  font-size: 16px;  transition: all 0.3s ease;  border: 2px solid transparent;  background: #f8f9fa;}.social-link:hover {  color: #e74c3c;  border-color: #e74c3c;  transform: translateY(-2px);  box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);}/* Specifične boje */.social-fb:hover { background: #1877f2; color: white; }.social-ig:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; }.social-yt:hover { background: #ff0000; color: white; }/* top menu END *//* counter BEGIN */.counters-section {  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);  padding: 100px 0;}.container {  max-width: 1200px;  margin: 0 auto;  padding: 0 20px;}.counters-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  gap: 3rem;  text-align: center;}.counter-item {  opacity: 0;  transform: translateY(50px);  transition: all 0.8s ease-out;}.counter-item.animate {  opacity: 1;  transform: translateY(0);}.counter-number {  font-size: clamp(4rem, 12vw, 6rem);  font-weight: 900;  background: linear-gradient(135deg, #e74c3c, #c0392b);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;  margin-bottom: 1rem;}.counter-num {  display: inline-block;}.counter-label {  font-size: 1.25rem;  color: #666;  font-weight: 600;  text-transform: uppercase;  letter-spacing: 1px;}@media (max-width: 768px) {  .counters-grid {    grid-template-columns: 1fr;  }}/* counter END */
		/* Header Styles */
		.top-header {
			background: #fff;
			padding: 15px 0;
			border-bottom: 1px solid #eee;
		}
		
		.logo {
			font-size: 24px;
			font-weight: 700;
			color: #000;
			text-transform: uppercase;
		}
		
		.logo span {
			color: var(--primary-red);
		}
		
		.navbar-nav .nav-link {
			color: #333;
			font-size: 14px;
			font-weight: 500;
			padding: 8px 15px !important;
			text-transform: uppercase;
			transition: color 0.3s;
		}
		
		.navbar-nav .nav-link:hover {
			color: var(--primary-red);
		}
		
		.btn-contact {
			background: var(--primary-red);
			color: #fff;
			padding: 10px 25px;
			border: none;
			font-weight: 600;
			text-transform: uppercase;
			transition: background 0.3s;
		}
		
		.btn-contact:hover {
			background: #b71c1c;
			color: #fff;
		}
.section-divider {    position: relative;}/* puna širina ekrana, inherit background */.section-divider::after {    content: "";    position: absolute;    left: 0;    right: 0;                    /* puna širina container-a */    width: 84%;                 /* max širina */    height: 1px;                 /* tanka linija */    background-color: #d32f2f;   /* crvena */        /* jednako udaljena - sredina razmaka */    bottom: -25px;        /* centrirana linija u sredini ekrana */    max-width: 2200px;           /* max širina linije */    margin: 0 auto;}/* razmak za sljedeći section */.section-divider + section {    margin-top: 50px;            /* 2x bottom value */}		
		/* Hero Section */
		.hero-section {
			position: relative;
			height: 600px;
			background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('<?php echo get_template_directory_uri(); ?>/images/hero-gym.jpg');
			background-size: cover;
			background-position: center;
			color: #fff;
			display: flex;
			align-items: center;
		}
		
		.hero-content h1 {
			font-size: 48px;
			font-weight: 300;
			margin-bottom: 20px;
			line-height: 1.2;
		}
		
		.hero-content h1 strong {
			font-weight: 700;
		}
		
		.hero-content h1 .text-red {
			color: var(--primary-red);
			font-weight: 700;
		}
		
		.hero-content p {
			font-size: 16px;
			margin-bottom: 30px;
			color: var(--gray-text);
		}
		
		.btn-projects {
			background: transparent;
			border: 2px solid #fff;
			color: #fff;
			padding: 12px 30px;
			font-weight: 600;
			text-transform: uppercase;
			transition: all 0.3s;
		}
		
		.btn-projects:hover {
			background: var(--primary-red);
			border-color: var(--primary-red);
			color: #fff;
		}
		
		/* Fitness Section */
		.fitness-section {
			background: var(--dark-bg);
			color: #fff;
			padding: 80px 0;
		}
		
		.fitness-section h2 {
			font-size: 32px;
			font-weight: 300;
			margin-bottom: 20px;
		}
		
		.fitness-section p {
			color: var(--gray-text);
			margin-bottom: 30px;
			line-height: 1.8;
		}
		
		.btn-contact-light {
			background: transparent;
			border: 2px solid #fff;
			color: #fff;
			padding: 12px 30px;
			font-weight: 600;
			text-transform: uppercase;
			transition: all 0.3s;
		}
		
		.btn-contact-light:hover {
			background: #fff;
			color: var(--dark-bg);
		}
		
		/* Equipment Cards */
		.equipment-section {
			background: var(--dark-bg);
			padding: 60px 0;
		}
		
		.equipment-card {
			background: #1a1a1a;
			border: 1px solid #333;
			transition: transform 0.3s, box-shadow 0.3s;
			height: 100%;
		}
		
		.equipment-card:hover {
			transform: translateY(-10px);
			box-shadow: 0 10px 30px rgba(211, 47, 47, 0.3);
		}
		
		.equipment-card img {
			width: 100%;
			height: 300px;
			object-fit: cover;
		}
		
		.equipment-card .card-body {
			padding: 20px;
		}
		
		.equipment-card h5 {
			color: #fff;
			font-size: 16px;
			font-weight: 600;
			text-transform: uppercase;
		}
		
		.equipment-card .arrow {
			color: var(--primary-red);
			float: right;
		}
		
		/* Stats Section */
		.stats-section {
			background: #fff;
			padding: 60px 0;
			text-align: center;
		}
		
		.stat-item h2 {
			font-size: 48px;
			font-weight: 700;
			color: #000;
			margin-bottom: 10px;
		}
		
		.stat-item p {
			font-size: 14px;
			color: #666;
			text-transform: uppercase;
		}
		
		/* Partners Section */
		.partners-section {
			background: #fff;
			padding: 60px 0;
			text-align: center;
		}
		
		.partners-section h3 {
			font-size: 18px;
			font-weight: 400;
			margin-bottom: 40px;
			color: #666;
		}
		
		.partner-logo {
			filter: grayscale(100%);
			opacity: 0.6;
			transition: all 0.3s;
			max-width: 120px;
			margin: 15px;
		}
		
		.partner-logo:hover {
			filter: grayscale(0%);
			opacity: 1;
		}
.logo-slider {  overflow: hidden;  background: white;  border-radius: 20px;  padding: 2rem;  box-shadow: 0 10px 30px rgba(0,0,0,0.1);}.logos {  display: flex;  gap: 2rem;  animation: scroll-left 25s linear infinite;}.logos img {  width: 100px;  height: 100px;  object-fit: contain;  filter: grayscale(60%);  opacity: 0.8;  transition: all 0.3s;}.logos img:hover {  filter: grayscale(0%);  opacity: 1;  transform: scale(1.1);}@keyframes scroll-left {  0% { transform: translateX(0); }  100% { transform: translateX(-50%); }}.logo-slider:hover .logos {  animation-play-state: paused;}
		/* Projects Section */
		.projects-section {
			background: var(--light-gray);
			padding: 80px 0;
		}
		
		.project-card {
			background: #fff;
			margin-bottom: 30px;
			overflow: hidden;
			transition: transform 0.3s;
		}
		
		.project-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 10px 30px rgba(0,0,0,0.1);
		}
		
		.project-card img {
			width: 100%;
			height: 250px;
			object-fit: cover;
		}
		
		.project-card .card-body {
			padding: 20px;
		}
		
		.project-card h5 {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 5px;
		}
		
		.project-card p {
			font-size: 12px;
			color: #999;
		}
		
		/* Product Showcase */
		.product-showcase {
			background: var(--light-gray);
			padding: 80px 0;
		}
		
		.product-box {
			background: #fff;
			padding: 40px;
			text-align: center;
		}
		
		.product-box img {
			max-width: 100%;
			height: auto;
		}
		
		.product-box h4 {
			margin-top: 20px;
			font-size: 18px;
			color: #666;
		}
		
		.btn-explore {
			background: transparent;
			border: 2px solid #333;
			color: #333;
			padding: 10px 25px;
			margin-top: 20px;
			text-transform: uppercase;
			transition: all 0.3s;
		}
		
		.btn-explore:hover {
			background: var(--primary-red);
			border-color: var(--primary-red);
			color: #fff;
		}
		
		/* Single Equipment Section */
		.single-equipment {
			background: var(--dark-bg);
			padding: 80px 0;
			color: #fff;
		}
		
		.single-equipment img {
			width: 100%;
			border-radius: 10px;
		}
		
		.btn-more {
			background: transparent;
			border: none;
			color: #fff;
			font-size: 14px;
			text-transform: uppercase;
			display: inline-flex;
			align-items: center;
			gap: 10px;
			transition: color 0.3s;
		}
		
		.btn-more:hover {
			color: var(--primary-red);
		}
		
		.btn-more::after {
			content: '→';
			font-size: 20px;
		}
		
		/* Footer */
		.footer {
			background: var(--dark-bg);
			color: #fff;
			padding: 60px 0 30px;
		}
		
		.footer-logo {
			font-size: 28px;
			font-weight: 700;
			margin-bottom: 20px;
		}
		
		.footer-logo span {
			color: var(--primary-red);
		}
		
		.footer p {
			color: var(--gray-text);
			font-size: 14px;
			line-height: 1.8;
		}
		
		.footer h5 {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 20px;
		}
		
		.footer a {
			color: var(--gray-text);
			text-decoration: none;
			font-size: 14px;
			display: block;
			margin-bottom: 10px;
			transition: color 0.3s;
		}
		
		.footer a:hover {
			color: var(--primary-red);
		}
		
		.social-icons a {
			color: #fff;
			font-size: 18px;
			margin-right: 15px;
			transition: color 0.3s;
		}
		
		.social-icons a:hover {
			color: var(--primary-red);
		}
		
		/* Responsive */
		@media (max-width: 768px) {
			.hero-content h1 {
				font-size: 32px;
			}
			
			.stat-item h2 {
				font-size: 36px;
			}
			
			.navbar-collapse {
				background: #fff;
				padding: 20px;
				margin-top: 15px;
			}
		}
/* VARIJANTE STYLES */:root {    --primary-red: #d32f2f;}/* Hover efekti */.hover-zoom {    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}.hover-zoom:hover {    transform: scale(1.02);}/* Buttons */.btn-danger {    background: linear-gradient(135deg, var(--primary-red) 0%, #b71c1c 100%);    border: none;    transition: all 0.3s ease;}.btn-danger:hover {    transform: translateY(-2px);    box-shadow: 0 12px 35px rgba(211,47,47,0.4);}.btn-outline-light:hover {    background: rgba(255,255,255,0.2);    transform: translateY(-2px);}/* Text shadow za hero */.text-shadow {    text-shadow: 0 2px 10px rgba(0,0,0,0.5);}/* Responsive */@media (max-width: 992px) {    .bg-image {        position: static !important;        width: 100% !important;        height: 300px !important;        margin-bottom: 2rem;    }    .content-left, .content-right {        text-align: center !important;    }}@media (max-width: 768px) {    [class*="col-lg-8"], [class*="col-lg-4"] {        margin-bottom: 2rem;    }}/* ########################### */:root {    --primary-red: #d32f2f;}.hover-lift {    transition: all 0.3s ease;}.hover-lift:hover {    transform: translateY(-8px);    box-shadow: 0 15px 40px rgba(211,47,47,0.2) !important;}.hover-scale {    transition: all 0.3s ease;}.hover-scale:hover {    transform: scale(1.02);    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;}.hover-danger a {    transition: color 0.2s ease;}.hover-danger:hover a {    color: var(--primary-red) !important;}.grayscale {    filter: grayscale(100%);    transition: all 0.3s ease;}.hover-grayscale-0:hover {    filter: grayscale(0%) !important;    opacity: 1 !important;}.partner-logo {    max-width: 200px;    height: auto;    opacity: 0.6;    transition: all 0.3s ease;}.partner-logo:hover {    opacity: 1;    transform: scale(1.05);}.reference-card img {    transition: all 0.4s ease;}.reference-card:hover img {    transform: scale(1.1);}.btn:hover {    transform: translateY(-1px);}@media (max-width: 768px) {    .hero-content h1 {        font-size: 2rem !important;    }    .hero-section {        height: 500px !important;    }}.reference-card img,.blog-card img,.card-img-top {    width: 100% !important;    height: 250px !important;        /* Fiksna visina */    object-fit: cover;               /* Forsira iste proporcije */    object-position: center;         /* Centrirano */}.card-img-custom {    aspect-ratio: 16/9;              /* Bootstrap 5 */    object-fit: cover;}/* Responsive varijante */@media (max-width: 768px) {    .card-img-custom {        height: 200px !important;    }}/* page template begin */.hero-section {  padding: 120px 0;  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);  position: relative;  overflow: hidden;}.hero-section::before {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  height: 1px;  background: linear-gradient(90deg, transparent, #e74c3c, transparent);}.hero-content {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 6rem;  align-items: center;  max-width: 1200px;  margin: 0 auto;  padding: 0 20px;}.hero-text h1 {  font-size: clamp(2.5rem, 6vw, 4rem);  font-weight: 800;  color: #333;  line-height: 1.2;  margin-bottom: 2rem;  background: linear-gradient(135deg, #333, #555);  -webkit-background-clip: text;  background-clip: text;}.hero-description {  font-size: 1.25rem;  color: #666;  line-height: 1.7;  margin-bottom: 3rem;}.hero-buttons {  display: flex;  gap: 1.5rem;  flex-wrap: wrap;}.btn {  padding: 16px 32px;  font-weight: 600;  text-decoration: none;  border-radius: 50px;  transition: all 0.3s ease;  display: inline-flex;  align-items: center;  gap: 0.5rem;}.btn-primary {  background: linear-gradient(135deg, #e74c3c, #c0392b);  color: white;  box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);}.btn-primary:hover {  transform: translateY(-3px);  box-shadow: 0 15px 35px rgba(231, 76, 60, 0.4);}.btn-secondary {  background: transparent;  color: #e74c3c;  border: 2px solid #e74c3c;}.btn-secondary:hover {  background: #e74c3c;  color: white;  transform: translateY(-2px);}.hero-image {  position: relative;}.hero-img {  width: 100%;  height: 500px;  object-fit: cover;  border-radius: 24px;  box-shadow: 0 25px 60px rgba(0,0,0,0.15);  transition: transform 0.5s ease;}.hero-image:hover .hero-img {  transform: scale(1.02);}.hero-placeholder {  width: 100%;  height: 500px;  background: linear-gradient(135deg, #e9ecef, #dee2e6);  border-radius: 24px;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  color: #999;  gap: 1rem;}.hero-placeholder i {  font-size: 4rem;}/* RESPONSIVNO */@media (max-width: 992px) {  .hero-content {    grid-template-columns: 1fr;    gap: 4rem;    text-align: center;  }    .hero-image {    order: -1;  }    .hero-img, .hero-placeholder {    height: 400px;  }}@media (max-width: 768px) {  .hero-section {    padding: 80px 0;  }    .hero-buttons {    justify-content: center;  }    .btn {    padding: 14px 28px;    font-size: 1rem;  }}/* Hero Landing Template */.hero-section {  padding: 140px 0 100px;  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  position: relative;  overflow: hidden;  color: white;}.hero-section::before {  content: '';  position: absolute;  inset: 0;  background: rgba(0,0,0,0.4);  z-index: 1;}.hero-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 8rem;  align-items: center;  max-width: 1200px;  margin: 0 auto;  padding: 0 2rem;  position: relative;  z-index: 2;}.hero-title {  font-size: clamp(2.8rem, 7vw, 5rem);  font-weight: 900;  line-height: 1.1;  margin-bottom: 2rem;  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);}.hero-text {  font-size: 1.3rem;  line-height: 1.8;  max-width: 90%;  margin-bottom: 3rem;  opacity: 0.95;}.hero-cta {  display: flex;  gap: 1.5rem;  flex-wrap: wrap;}.btn {  padding: 18px 36px;  font-size: 1.1rem;  font-weight: 700;  border-radius: 50px;  text-decoration: none;  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  display: inline-flex;  align-items: center;  gap: 12px;  text-transform: uppercase;  letter-spacing: 0.5px;  backdrop-filter: blur(10px);}.btn-primary {  background: rgba(255,255,255,0.2);  border: 2px solid rgba(255,255,255,0.4);  color: white;  box-shadow: 0 8px 32px rgba(255,255,255,0.1);}.btn-primary:hover {  background: rgba(255,255,255,0.3);  transform: translateY(-4px);  box-shadow: 0 20px 40px rgba(255,255,255,0.2);}.btn-secondary {  background: transparent;  border: 2px solid rgba(255,255,255,0.6);  color: white;}.btn-secondary:hover {  background: rgba(255,255,255,0.15);  transform: translateY(-2px);}.hero-image-side {  position: relative;  z-index: 3;}.hero-featured-image {  width: 100%;  height: 550px;  object-fit: cover;  border-radius: 32px;  box-shadow: 0 40px 80px rgba(0,0,0,0.3);  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);}.hero-image-side:hover .hero-featured-image {  transform: scale(1.03) rotate(1deg);}.hero-placeholder {  width: 100%;  height: 550px;  background: rgba(255,255,255,0.1);  backdrop-filter: blur(20px);  border-radius: 32px;  border: 2px dashed rgba(255,255,255,0.3);  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  color: rgba(255,255,255,0.7);  gap: 1rem;  text-align: center;}.placeholder-icon {  width: 80px;  height: 80px;}/* RESPONSIVNO */@media (max-width: 992px) {  .hero-grid {    grid-template-columns: 1fr;    gap: 5rem;    text-align: center;  }    .hero-image-side {    order: -1;  }    .hero-text {    max-width: 100%;  }    .hero-cta {    justify-content: center;  }}@media (max-width: 768px) {  .hero-section {    padding: 80px 0 60px;  }    .hero-title {    margin-bottom: 1.5rem;  }    .btn {    padding: 15px 28px;    font-size: 1rem;  }}/* page template end *//* reference template begin */.references-main {  background: #f8f9fa;  padding: 60px 0;  min-height: 100vh;}.references-section {  padding: 80px 0;}.section-header {  text-align: center;  margin-bottom: 6rem;}.section-header h1 {  font-size: clamp(2.5rem, 6vw, 4rem);  font-weight: 800;  color: #333;  margin-bottom: 1.5rem;}.section-header p {  font-size: 1.3rem;  color: #666;  max-width: 600px;  margin: 0 auto;}.references-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));  gap: 2.5rem;  max-width: 1400px;  margin: 0 auto;}.reference-item {  background: white;  border-radius: 20px;  overflow: hidden;  box-shadow: 0 10px 40px rgba(0,0,0,0.08);  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);  height: 100%;}.reference-item:hover {  transform: translateY(-12px);  box-shadow: 0 25px 60px rgba(0,0,0,0.15);}.reference-link {  display: block;  height: 100%;  text-decoration: none;  color: inherit;}.reference-image {  height: 220px;  overflow: hidden;  position: relative;}.ref-img {  width: 100%;  height: 100%;  object-fit: cover;  transition: transform 0.6s ease;}.reference-item:hover .ref-img {  transform: scale(1.1);}.reference-title {  font-size: 1.4rem;  font-weight: 700;  color: #333;  padding: 1.5rem 1.5rem 2rem;  margin: 0;  line-height: 1.4;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}.no-references {  grid-column: 1 / -1;  text-align: center;  padding: 4rem;  color: #999;  font-size: 1.2rem;}/* RESPONSIVNO */@media (max-width: 992px) {  .references-grid {    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));    gap: 2rem;  }}@media (max-width: 768px) {  .references-section {    padding: 60px 0;  }    .references-grid {    grid-template-columns: 1fr;    gap: 1.5rem;  }    .reference-image {    height: 200px;  }}/* Paginacija */.pagination-wrapper {  display: flex;  justify-content: center;  margin-top: 5rem;  padding-top: 3rem;  border-top: 1px solid #eee;}.pagination {  display: flex;  gap: 0.5rem;  list-style: none;  padding: 0;  margin: 0;}.page-numbers {  display: flex;  align-items: center;  justify-content: center;  min-width: 48px;  height: 48px;  background: white;  color: #666;  text-decoration: none;  border-radius: 12px;  font-weight: 600;  transition: all 0.3s ease;  border: 2px solid transparent;  font-size: 1rem;}.page-numbers:hover,.page-numbers.current {  background: #e74c3c;  color: white;  border-color: #e74c3c;  transform: translateY(-2px);  box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);}.page-numbers.prev,.page-numbers.next {  min-width: 60px;  font-size: 0.9rem;  text-transform: uppercase;  letter-spacing: 0.5px;}/* RESPONSIVNO */@media (max-width: 768px) {  .pagination {    flex-wrap: wrap;    gap: 0.25rem;  }    .page-numbers {    min-width: 42px;    height: 42px;    font-size: 0.9rem;  }}/* reference template end */