@keyframes shake-error { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .shake-error { animation: shake-error 0.45s ease; } :root { --primary-color: #ff5500; /* Main orange/red color */ --primary-hover: #f9735b; /* Lighter orange for hover states */ --text-light: #7a7a7a; /* Light gray text */ /* White text */ --bg-dark: #232d39; /* Dark background */ --bg-dark-light: #eee; --bg-light: #fff; /* White background */ --bg-header: rgba(250, 250, 250, 0.98); /* Header background */ --bg-overlay: rgba(35, 45, 57, 0.8); /* Dark overlay */ --border-color: #ddd; /* Border color */ --shadow-color: rgba(0, 0, 0, 0.1); /* Shadow color */ --background-color: #1e1e1e; --bg-seasalt: #f7f7f7; } /* --------------------------------------------- font & reset css --------------------------------------------- */ /* Google Fonts se učitava u index.html-a — @import uklonjen da se izbjegne dvostruko blokiranje rendera */ /* --------------------------------------------- reset --------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, figure, header, nav, section, article, aside, footer, figcaption { margin: 0; padding: 0; border: 0; outline: 0; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } ul, li { padding: 0; margin: 0; list-style: none; } header, nav, section, article, aside, footer, hgroup { display: block; } * { box-sizing: border-box; } html, body { font-family: "Poppins", sans-serif; font-weight: 400; background-color: var(--bg-light); font-size: 16px; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none !important; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; } ul { margin-bottom: 0px; } p { font-size: 14px; line-height: 25px; color: var(--text-light); } /* --------------------------------------------- global styles --------------------------------------------- */ html, body { background: var(--bg-light); font-family: "Poppins", sans-serif; } ::selection { background: var(--primary-color); color: var(--bg-light); } ::-moz-selection { background: var(--primary-color); color: var(--bg-light); } @media (max-width: 991px) { html, body { overflow-x: hidden; } .mobile-top-fix { margin-top: 30px; margin-bottom: 0px; } .mobile-bottom-fix { margin-bottom: 30px; } .mobile-bottom-fix-big { margin-bottom: 60px; } } .section-heading { text-align: center; margin-top: 140px; margin-bottom: 80px; } .section-heading h2 { font-size: 28px; font-weight: 800; color: var(--bg-dark); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0px; margin-bottom: 0px; } .section-heading h2 em { font-style: normal; color: var(--primary-color); } .section-heading img { margin: 20px auto; } .dark-bg h2 { color: var(--bg-light); } .dark-bg p { color: var(--bg-light); } .main-button a { display: inline-block; font-size: 15px; padding: 12px 20px; background-color: var(--primary-color); color: var(--bg-light); text-align: center; font-weight: 400; text-transform: uppercase; transition: all 0.3s; border-radius: 5px; } .main-button a:hover { background-color: var(--primary-hover); } /* --------------------------------------------- header --------------------------------------------- */ .background-header { background: var(--bg-header) !important; height: 80px !important; position: fixed !important; top: 0px; left: 0px; right: 0px; box-shadow: 0px 0px 10px var(--shadow-color) !important; } .background-header .logo, .background-header .main-nav .nav li a { color: var(--bg-dark) !important; } .background-header .main-nav .nav li:last-child a:hover { color: var(--bg-light) !important; } .background-header .main-nav .nav li:hover a { color: var(--primary-color) !important; } .background-header .nav li a.active { color: var(--primary-color) !important; } .header-area { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 100; height: 80px; background: var(--shadow-color); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .header-area .main-nav { min-height: 80px; background: transparent; } .header-area .main-nav .logo { line-height: 80px; color: var(--bg-light); font-size: 32px; font-weight: 800; text-transform: uppercase; float: left; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .header-area .main-nav .logo em { font-style: normal; color: var(--primary-color); font-weight: 900; } .header-area .main-nav .nav { float: right; margin-top: 27px; margin-right: 0px; background-color: transparent; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; position: relative; z-index: 999; } .header-area .main-nav .nav li { padding-left: 20px; padding-right: 20px; } .header-area .main-nav .nav li a { display: block; font-weight: 500; font-size: 13px; color: var(--text-light); text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; height: 40px; line-height: 40px; border: transparent; letter-spacing: 1px; } .header-area .main-nav .nav li a { color: var(--bg-light); } .header-area .main-nav .nav li:last-child a { display: inline-block; font-size: 13px; padding: 11px 17px; text-align: center; letter-spacing: 0px; text-transform: uppercase; transition: all 0.3s; height: auto; line-height: 20px; } .header-area .main-nav .nav li:last-child a:hover { background-color: var(--primary-color); opacity: 1; border-radius: 5px; } .header-area .main-nav .nav li:hover a, .header-area .main-nav .nav li a.active { opacity: 1; } .background-header .main-nav .nav li:hover a, .background-header .main-nav .nav li a.active { color: var(--primary-color) !important; opacity: 1; } .header-area .main-nav .menu-trigger { cursor: pointer; display: block; position: absolute; top: 23px; width: 32px; height: 40px; text-indent: -9999em; z-index: 99; right: 40px; display: none; background: none; border: none; padding: 0; font: inherit; color: inherit; outline: none; -webkit-tap-highlight-color: transparent; } .header-area .main-nav .menu-trigger::-moz-focus-inner { border: 0; } .header-area .main-nav .menu-trigger:focus, .header-area .main-nav .menu-trigger:focus-visible, .header-area .main-nav .menu-trigger:active { outline: none; box-shadow: none; } .header-area .main-nav .menu-trigger span, .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; background-color: var(--background-color); display: block; position: absolute; width: 30px; height: 2px; left: 0; } .background-header .main-nav .menu-trigger span, .background-header .main-nav .menu-trigger span:before, .background-header .main-nav .menu-trigger span:after { background-color: var(--background-color); } .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; background-color: var(--background-color); display: block; position: absolute; width: 30px; height: 2px; left: 0; width: 75%; } .background-header .main-nav .menu-trigger span:before, .background-header .main-nav .menu-trigger span:after { background-color: var(--background-color); } .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { content: ""; } .header-area .main-nav .menu-trigger span { top: 16px; } .header-area .main-nav .menu-trigger span:before { -moz-transform-origin: 33% 100%; -ms-transform-origin: 33% 100%; -webkit-transform-origin: 33% 100%; transform-origin: 33% 100%; top: -10px; z-index: 10; } .header-area .main-nav .menu-trigger span:after { -moz-transform-origin: 33% 0; -ms-transform-origin: 33% 0; -webkit-transform-origin: 33% 0; transform-origin: 33% 0; top: 10px; } .header-area .main-nav .menu-trigger.active span, .header-area .main-nav .menu-trigger.active span:before, .header-area .main-nav .menu-trigger.active span:after { background-color: transparent; width: 100%; } .header-area .main-nav .menu-trigger.active span:before { -moz-transform: translateY(6px) translateX(1px) rotate(45deg); -ms-transform: translateY(6px) translateX(1px) rotate(45deg); -webkit-transform: translateY(6px) translateX(1px) rotate(45deg); transform: translateY(6px) translateX(1px) rotate(45deg); background-color: var(--background-color); } .background-header .main-nav .menu-trigger.active span:before { background-color: var(--background-color); } .header-area .main-nav .menu-trigger.active span:after { -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg); -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg); -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg); transform: translateY(-6px) translateX(1px) rotate(-45deg); background-color: var(--background-color); } .background-header .main-nav .menu-trigger.active span:after { background-color: var(--background-color); } .header-area.header-sticky { min-height: 80px; } .header-area.header-sticky .nav { margin-top: 20px !important; } .header-area.header-sticky .nav li a.active { color: var(--primary-color); } @media (max-width: 1200px) { .header-area .main-nav .nav li { padding-left: 12px; padding-right: 12px; } .header-area .main-nav:before { display: none; } } @media (max-width: 767px) { .header-area .main-nav .logo { color: var(--background-color); } .header-area.header-sticky .nav li a:hover, .header-area.header-sticky .nav li a.active { color: var(--primary-color) !important; opacity: 1; } .header-area { background-color: var(--bg-seasalt); padding: 0px 15px; height: 80px; box-shadow: none; text-align: center; } .header-area .container { padding: 0px; } .header-area .logo { margin-left: 30px; } .header-area .menu-trigger { display: block !important; } .header-area .main-nav { overflow: hidden; } .header-area .main-nav .nav { float: none; width: 100%; display: none; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; margin-left: 0px; } .header-area .main-nav .nav li:first-child { border-top: 1px solid var(--bg-dark-light); } .header-area .main-nav .nav li:last-child { width: 100%; background-color: var(--primary-color); color: var(--bg-light); } .header-area .main-nav .nav li:last-child a { background-color: var(--primary-color) !important; } .header-area .main-nav .nav li:last-child a:hover, .header-area .main-nav .nav li:last-child:hover a { background-color: var(--primary-color) !important; color: var(--bg-light) !important; } .header-area.header-sticky .nav { margin-top: 80px !important; } .header-area .main-nav .nav li { width: 100%; background: var(--bg-light); border-bottom: 1px solid var(--bg-dark-light); padding-left: 0px !important; padding-right: 0px !important; } .header-area .main-nav .nav li a { height: 50px !important; line-height: 50px !important; padding: 0px !important; border: none !important; background: var(--bg-seasalt) !important; color: var(--bg-dark) !important; } .header-area .main-nav .nav li:last-child a { color: var(--bg-light) !important; } .header-area .main-nav .nav li a:hover { background: var(--bg-dark-light) !important; color: var(--primary-color) !important; } .header-area .main-nav .nav li.submenu ul { position: relative; visibility: inherit; opacity: 1; z-index: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3s; top: 0px; width: 100%; box-shadow: none; height: 0px; } .header-area .main-nav .nav li.submenu ul li a { font-size: 12px; font-weight: 400; } .header-area .main-nav .nav li.submenu ul li a:hover:before { width: 0px; } .header-area .main-nav .nav li.submenu ul.active { height: auto !important; } .header-area .main-nav .nav li.submenu:after { right: 25px; font-size: 14px; top: 15px; } .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul { height: 0px; } } @media (min-width: 767px) { .header-area .main-nav .nav { display: flex !important; } } .logo { transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); display: flex; align-items: center; gap: 10px; } .logo-image { height: 50px; width: auto; transition: all 0.3s ease; } @media (max-width: 767px) { .logo-text { display: none !important; } .logo { position: relative; left: 0; transform: translateX(0); z-index: 1001; height: 80px; } .menu-trigger.active ~ .main-nav .logo, .menu-trigger.active + .nav .logo { position: absolute; left: 50%; transform: translateX(-50%) !important; } @media (max-width: 480px) { } } /* --------------------------------------------- banner --------------------------------------------- */ .main-banner { position: relative; } #bg-video { min-width: 100%; min-height: 100vh; max-width: 100%; max-height: 100vh; object-fit: cover; z-index: -1; } #bg-video::-webkit-media-controls { display: none !important; } .video-overlay { position: absolute; background-color: var(--bg-overlay); top: 0; left: 0; bottom: 7px; width: 100%; } .main-banner .caption { text-align: center; position: absolute; width: 80%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .main-banner .caption h6 { margin-top: 0px; font-size: 18px; text-transform: uppercase; font-weight: 800; color: var(--bg-light); letter-spacing: 0.5px; } .main-banner .caption h1, .main-banner .caption h2 { margin-top: 30px; margin-bottom: 25px; font-size: 84px; text-transform: uppercase; font-weight: 800; color: var(--bg-light); letter-spacing: 1px; } .main-banner .caption h1 em, .main-banner .caption h2 em { font-style: normal; color: var(--primary-color); font-weight: 900; } /* Pricing Section Styles */ #pricing { background: linear-gradient( 180deg, rgba(247, 247, 247, 0.95) 0%, rgba(255, 255, 255, 1) 100% ); padding: 110px 0 90px; } #pricing .section-heading { margin-top: 0; margin-bottom: 34px; } #pricing .section-heading h2 { letter-spacing: 1.2px; } .pricing-shell { border-radius: 18px; } .pricing-intro { background: var(--bg-light); border-left: 4px solid var(--primary-color); border-radius: 14px; box-shadow: 0 12px 35px rgba(35, 45, 57, 0.08); padding: 24px 26px; margin-bottom: 30px; } .pricing-intro p { margin-bottom: 0; font-size: 16px; line-height: 1.8; color: #4f5a66; } .pricing-card, .pricing-kids-card { background: var(--bg-light); border: 1px solid rgba(35, 45, 57, 0.08); border-radius: 16px; box-shadow: 0 10px 30px rgba(35, 45, 57, 0.07); } .pricing-card { height: 100%; padding: 24px 24px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 16px 35px rgba(35, 45, 57, 0.12); } .pricing-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .pricing-card-top h4 { font-size: 22px; font-weight: 700; line-height: 1.35; color: var(--bg-dark); } .price-tag { background: rgba(255, 85, 0, 0.12); color: var(--primary-color); border: 1px solid rgba(255, 85, 0, 0.25); border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; padding: 10px 14px; } .pricing-card p { font-size: 15px; line-height: 1.75; color: #586573; margin: 0; } .featured-card { border-color: rgba(255, 85, 0, 0.26); background: linear-gradient( 170deg, rgba(255, 85, 0, 0.06) 0%, rgba(255, 255, 255, 1) 36% ); } .massage-list { display: grid; gap: 11px; } .massage-list li { display: flex; justify-content: space-between; align-items: center; border: 1px dashed rgba(35, 45, 57, 0.18); border-radius: 10px; padding: 11px 14px; gap: 12px; } .massage-list span { color: #4f5a66; font-size: 15px; } .massage-list strong { color: var(--bg-dark); font-size: 16px; font-weight: 700; white-space: nowrap; } .pricing-kids-card { border-color: rgba(255, 85, 0, 0.22); background: linear-gradient( 180deg, rgba(255, 85, 0, 0.08) 0%, rgba(255, 255, 255, 1) 50% ); padding: 26px; } .pricing-kids-card h4 { font-size: 26px; font-weight: 800; color: var(--bg-dark); margin-bottom: 16px; } .pricing-kids-card ul { display: grid; gap: 10px; } .pricing-kids-card li { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(35, 45, 57, 0.08); border-radius: 10px; padding: 12px 14px; gap: 12px; } .pricing-kids-card li span { color: #4f5a66; font-size: 15px; } .pricing-kids-card li strong { color: var(--bg-dark); font-size: 16px; font-weight: 700; white-space: nowrap; } .kids-note { margin-top: 14px; margin-bottom: 0; font-size: 15px; color: var(--bg-dark); font-style: italic; font-weight: 500; } @media (max-width: 991px) { #pricing { padding: 95px 0 80px; } .pricing-card-top h4 { font-size: 20px; } } @media (max-width: 767px) { #pricing { padding: 80px 0 65px; } .pricing-intro { padding: 20px 18px; } .pricing-card, .pricing-kids-card { padding: 20px 18px; } .pricing-card-top { flex-direction: column; align-items: flex-start; margin-bottom: 12px; } .massage-list li, .pricing-kids-card li { flex-direction: column; align-items: flex-start; } } /* --------------------------------------------- Client Journey — Put klijenta --------------------------------------------- */ .client-journey { background: var(--bg-light); border-radius: 18px; padding: 40px 36px; box-shadow: 0 8px 28px rgba(35, 45, 57, 0.07); } .journey-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; } .journey-step { flex: 1; text-align: center; padding: 0 16px; } .journey-step-icon { width: 64px; height: 64px; background: rgba(255, 85, 0, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .journey-step-icon i { font-size: 26px; color: var(--primary-color); } .journey-step-num { font-size: 18px; font-weight: 800; color: var(--primary-color); margin-bottom: 8px; line-height: 1; } .journey-step h5 { font-size: 16px; font-weight: 700; color: var(--bg-dark); margin-bottom: 8px; line-height: 1.3; } .journey-step p { font-size: 14px; color: var(--text-light); margin: 0; line-height: 1.6; } .journey-arrow { display: flex; align-items: center; padding-top: 22px; color: var(--primary-color); font-size: 22px; flex-shrink: 0; opacity: 0.55; } @media (max-width: 767px) { .client-journey { padding: 28px 20px; } .journey-steps { flex-direction: column; align-items: center; gap: 0; } .journey-step { width: 100%; max-width: 320px; padding: 16px 0; border-bottom: 1px dashed rgba(255, 85, 0, 0.2); } .journey-step:last-child { border-bottom: none; } .journey-arrow { transform: rotate(90deg); padding: 0; font-size: 20px; } } /* --------------------------------------------- Pricing groups --------------------------------------------- */ .pricing-group-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--primary-color); margin-bottom: 16px; margin-top: 10px; } .pricing-hero-card { border-color: rgba(255, 85, 0, 0.35) !important; background: linear-gradient( 135deg, rgba(255, 85, 0, 0.08) 0%, rgba(255, 255, 255, 1) 50% ) !important; } .pricing-hero-card .pricing-card-top h4 { font-size: 26px; } .price-tag-hero { font-size: 20px !important; padding: 12px 20px !important; } .pricing-massage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .addon-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); margin-bottom: 12px; } @media (max-width: 767px) { .pricing-massage-grid { grid-template-columns: 1fr; } .pricing-hero-card .pricing-card-top h4 { font-size: 20px; } } /* --------------------------------------------- subscribe --------------------------------------------- */ #call-to-action, #call-to-action-2 { padding: 120px 0px; background-image: url(../images/cta-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; text-align: center; } .cta-content h2 { font-size: 36px; text-transform: uppercase; font-weight: 800; color: var(--bg-light); letter-spacing: 1px; } .cta-content h2 em { font-style: normal; color: var(--primary-color); } .cta-content p { font-size: 16px; color: var(--bg-light); margin: 15px 0px 25px 0px; } /* -------------------------------------------- Our Classes -------------------------------------------- */ #our-classes { margin-bottom: 140px; } #tabs ul { margin: 0; padding: 0; } #tabs ul li { margin-bottom: 30px; display: inline-block; width: 100%; } #tabs ul li:last-child { margin-bottom: 0px; } #tabs ul li a { text-transform: capitalize; width: 100%; padding: 30px 30px; display: inline-block; background-color: var(--bg-light); box-shadow: 0px 0px 15px var(--shadow-color); border-radius: 5px; font-size: 19px; color: var(--bg-dark); letter-spacing: 0.5px; font-weight: 600; transition: all 0.3s; } #tabs .main-rounded-button a { text-align: center; padding: 20px 30px; width: 100%; border-radius: 5px; display: inline-block; box-shadow: 0px 0px 15px var(--shadow-color); color: var(--bg-light); font-size: 19px; letter-spacing: 0.5px; font-weight: 600; background-color: var(--primary-color); } #tabs .main-rounded-button a:hover { background-color: var(--primary-hover); } #tabs ul li a img { max-width: 100%; margin-right: 20px; } #tabs ul .ui-tabs-active span { line-height: 90px; border-bottom: none; } #tabs ul .ui-tabs-active a { color: var(--primary-color); } #tabs ul .ui-tabs-active span { color: var(--background-color); } .tabs-content { margin-left: 30px; text-align: left; display: inline-block; transition: all 0.3s; } .tabs-content img { max-width: 100%; overflow: hidden; border-radius: 5px; } .tabs-content h4 { font-size: 23px; font-weight: 700; color: var(--bg-dark); letter-spacing: 0.5px; margin-bottom: 20px; margin-top: 30px; } .tabs-content p { font-size: 14px; color: var(--text-light); margin-bottom: 28px; } /* --------------------------------------------- trainers --------------------------------------------- */ .trainer-item { position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: center; z-index: 1; border-radius: 5px; } .trainer-item:hover { transform: scale(1.04); z-index: 10; } .trainer-item::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 3px; background: linear-gradient( 90deg, transparent, var(--primary-color), var(--primary-color) ); transition: all 0.6s ease-in-out; z-index: 2; } .trainer-item:hover::before { left: 100%; } .trainer-item::after { content: ""; position: absolute; bottom: 0; right: -100%; width: 100%; height: 3px; background: linear-gradient( 270deg, transparent, var(--primary-color), var(--primary-color) ); transition: all 0.6s ease-in-out 0.2s; z-index: 2; } .trainer-item:hover::after { right: 100%; } .trainer-item .down-content { transition: transform 0.3s ease 0.1s; } .trainer-item:hover .down-content { transform: translateY(-5px); } @media (max-width: 768px) { .trainer-item:hover { transform: none; box-shadow: none; } .trainer-item::before, .trainer-item::after { display: none; } } #trainers .trainer-item { background-color: var(--bg-light); border-radius: 5px; box-shadow: 0px 0px 15px var(--shadow-color); padding: 40px; } #trainers .trainer-item img { width: 100%; border-radius: 5px; } #trainers .trainer-item span { font-size: 13px; font-weight: 500; color: var(--primary-color); display: inline-block; margin-top: 25px; margin-bottom: 10px; } #trainers .trainer-item h4 { font-size: 19px; font-weight: 600; color: var(--bg-dark); letter-spacing: 0.5px; margin-bottom: 18px; } #trainers .trainer-item p { margin-bottom: 20px; } #trainers .trainer-item ul.social-icons li { display: inline-block; margin-right: 12px; } #trainers .trainer-item ul.social-icons li:last-child { margin-right: 0px; } #trainers .trainer-item ul.social-icons li a { color: var(--bg-dark); transition: all 0.3s; } #trainers .trainer-item ul.social-icons li a:hover { color: var(--primary-color); } /* --------------------------------------------- contact --------------------------------------------- */ /* KONTAKT INFORMACIJE - ZAMJENA ZA MAPU */ .contact-info-container { width: 100%; height: 100%; background: url("../images/contact-bg.jpg") center/cover no-repeat; display: flex; align-items: center; justify-content: center; padding: 40px; } .contact-info-card { background: var(--bg-dark-light); border-radius: 10px; box-shadow: 0 10px 30px var(--shadow-color); max-width: 500px; width: 100%; overflow: hidden; transition: all 0.3s ease; } .contact-info-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px var(--shadow-color); } .contact-info-header { background: var(--primary-color); color: var(--bg-light); padding: 25px; text-align: center; } .contact-info-header h3 { font-size: 24px; margin-bottom: 5px; font-weight: 700; } .contact-info-header p { font-size: 14px; color: var(--bg-dark-light); } .contact-info-body { padding: 30px; } .contact-item { display: flex; margin-bottom: 25px; align-items: flex-start; } .contact-item i { font-size: 24px; color: var(--primary-color); margin-right: 20px; margin-top: 3px; } .contact-item h4 { font-size: 18px; color: var(--bg-dark); margin-bottom: 8px; font-weight: 600; } .contact-item p { font-size: 15px; line-height: 1.6; color: var(--text-light); margin: 0; } .contact-info-footer { padding: 0 30px 30px; text-align: center; } .btn-contact { display: inline-block; background: var(--primary-color); color: var(--bg-light); padding: 12px 30px; border-radius: 5px; font-weight: 500; transition: all 0.3s; margin-bottom: 20px; } .btn-contact:hover { background: var(--primary-hover); transform: translateY(-2px); } .social-links { display: flex; justify-content: end; gap: 15px; } .social-links a { color: var(--primary-color); font-size: 20px; transition: all 0.3s; } .social-links a:hover { color: var(--primary-hover); transform: translateY(-3px); } .contact-link { color: inherit; text-decoration: none; transition: color 0.3s ease; } .contact-link:hover { color: var(--primary-color); text-decoration: underline; } @media (max-width: 768px) { .contact-info-container { height: auto; padding: 20px; } .contact-item { flex-direction: column; align-items: center; text-align: center; } .contact-item i { margin-right: 0; margin-bottom: 10px; } } #contact-us { padding-top: 80px; } #contact-us .container-fluid .col-lg-6 { padding: 0px; } #contact-us .contact-form { padding: 80px; background-image: url(../images/contact-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } #contact-us .contact-form #contact { background-color: var(--bg-light); padding: 40px; border-radius: 5px; } .contact-form input, .contact-form textarea { color: var(--text-light); font-size: 13px; border: 1px solid --border-color; background-color: var(--bg-light); width: 100%; height: 40px; outline: none; line-height: 40px; padding: 0px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-bottom: 30px; } .contact-form textarea { height: 150px; resize: none; } .contact-form ::-webkit-input-placeholder { /* Edge */ color: var(--text-light); } .contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--text-light); } .contact-form ::placeholder { color: var(--text-light); } .contact-form button { display: inline-block; font-size: 13px; padding: 11px 17px; background-color: var(--primary-color); color: var(--bg-light); text-align: center; font-weight: 400; text-transform: uppercase; transition: all 0.3s; border: none; outline: none; margin-top: -8px; } .contact-form button:hover { background-color: var(--primary-hover); } /* --------------------------------------------- footer --------------------------------------------- */ footer { text-align: center; padding: 30px 0px; } footer p { font-size: 13px; } footer p a { color: var(--primary-color) !important; } .footer-social { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .footer-social a { color: var(--text-light); font-size: 14px; text-decoration: none; transition: color 0.3s ease; display: flex; align-items: center; gap: 6px; } .footer-social a:hover { color: var(--primary-color); } .footer-social a i { font-size: 15px; } @media (min-width: 768px) { .footer-social { justify-content: flex-end; } } /* --------------------------------------------- preloader --------------------------------------------- */ .js-preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-dark); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; opacity: 1; visibility: visible; z-index: 9999; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .js-preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } @-webkit-keyframes dot { 50% { -webkit-transform: translateX(96px); transform: translateX(96px); } } @keyframes dot { 50% { -webkit-transform: translateX(96px); transform: translateX(96px); } } @-webkit-keyframes dots { 50% { -webkit-transform: translateX(-31px); transform: translateX(-31px); } } @keyframes dots { 50% { -webkit-transform: translateX(-31px); transform: translateX(-31px); } } .preloader-inner { position: relative; width: 142px; height: 40px; background: var(--bg-dark); } .preloader-inner .dot { position: absolute; width: 16px; height: 16px; top: 12px; left: 15px; background: var(--bg-light); border-radius: 50%; -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation: dot 2.8s infinite; animation: dot 2.8s infinite; } .preloader-inner .dots { -webkit-transform: translateX(0); transform: translateX(0); margin-top: 12px; margin-left: 31px; -webkit-animation: dots 2.8s infinite; animation: dots 2.8s infinite; } .preloader-inner .dots span { display: block; float: left; width: 16px; height: 16px; margin-left: 16px; background: var(--bg-light); border-radius: 50%; } /* --------------------------------------------- responsive --------------------------------------------- */ @media (max-width: 992px) { .main-banner .caption h1, .main-banner .caption h2 { font-size: 40px; } #features { margin-bottom: 110px; } #features .feature-item { margin-bottom: 30px; } #our-classes .tabs-content { margin-left: 0px; margin-top: 30px; } .trainer-item { margin-bottom: 30px; } #contact-us #map { margin-bottom: -7px; } #contact-us .contact-form { padding: 30px; } #contact-us .contact-form #contact { padding: 30px; } } @media (max-width: 450px) { .feature-item .right-content a.text-button { margin-left: 130px; } } /* FORM STYLES */ .contact-form-container { max-width: 800px; margin: 0 auto; } .contact-form-alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.45; } .contact-form-alert.is-success { background: rgba(40, 167, 69, 0.12); color: #155724; border: 1px solid rgba(40, 167, 69, 0.35); } .contact-form-alert.is-error { background: rgba(220, 53, 69, 0.1); color: #721c24; border: 1px solid rgba(220, 53, 69, 0.35); } /* Honeypot – skriveno od korisnika */ .hp-field { display: none !important; } .modern-form { position: relative; background: var(--bg-light); padding: 1.5rem; border-radius: 10px; box-shadow: 0 10px 30px var(--shadow-color); } .form-group { position: relative; } .form-group label { display: block; margin-bottom: 0.5rem; color: var(--bg-dark); font-weight: 500; font-size: 0.95rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.8rem 0; border: none; border-bottom: 1px solid var(--border-color); font-size: 1rem; transition: all 0.3s ease; background: transparent; } .form-group textarea { min-height: 120px; resize: vertical; } .form-group select { width: 100%; padding: 0.8rem 0; border: none; border-bottom: 1px solid var(--border-color); font-size: 1rem; font-family: inherit; background: transparent; color: var(--bg-dark); appearance: none; -webkit-appearance: none; cursor: pointer; transition: all 0.3s ease; } .form-group select:focus { outline: none; border-color: transparent; } .form-group select:focus ~ .underline { width: 100%; } .form-group .select-arrow { position: absolute; right: 4px; bottom: 14px; pointer-events: none; color: var(--text-light); font-size: 12px; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: transparent; } .underline { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary-color); transition: width 0.4s ease; } .form-group input:focus ~ .underline, .form-group textarea:focus ~ .underline { width: 100%; } .modern-submit-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--primary-color); color: var(--bg-light); border: none; padding: 1rem 2rem; border-radius: 5px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; margin-top: 1rem; overflow: hidden; position: relative; } .modern-submit-btn:hover { background: var(--primary-hover); transform: translateY(-2px); } @media (max-width: 768px) { .contact-form-container { padding: 1rem; } .modern-form { padding: 1.5rem; } } .form-group { position: relative; margin-bottom: 1.8rem; } .error-message { color: var(--primary-color); font-size: 0.75rem; position: absolute; bottom: -18px; left: 0; opacity: 0; transition: opacity 0.3s; } .form-group.invalid .error-message { opacity: 1; } .form-group.invalid input, .form-group.invalid textarea { border-bottom-color: var(--primary-color) !important; } .form-group.invalid .underline { background: var(--primary-color) !important; } /* WhatsApp Button */ .whatsapp-float { position: fixed; width: 75px; height: 75px; bottom: 20px; right: 20px; background-color: #25d366; color: var(--bg-light); border-radius: 50px; text-align: center; font-size: 45px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); z-index: 100; display: flex; align-items: center; justify-content: center; transition: all 0.4s; } /* * Hover samo na uređajima s pravim hoverom (miš). * Na touchu :hover često ostane nakon dodira → gumb bi izgledao kao "tamnija zelena" (#128c7e). */ @media (hover: hover) and (pointer: fine) { .whatsapp-float:hover { background-color: #128c7e; color: var(--bg-light); transform: scale(1.1); transition: all 0.4s; } } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .pulse { animation: pulse 2s infinite; } .modern-testimonials { padding: 80px 0; background-color: #f9f9f9; } .testimonials-carousel { overflow: hidden; position: relative; margin-top: 40px; cursor: grab; } .testimonials-carousel:active, .testimonials-carousel.is-dragging { cursor: grabbing; } .testimonials-carousel.is-dragging .testimonial-card { user-select: none; -webkit-user-select: none; } .testimonial-track { display: flex; gap: 0; animation: scroll 85s linear infinite; width: max-content; will-change: transform; } /* Pauza pri hoveru samo na uređajima s pravim hoverom (ne tableti/touch) */ @media (hover: hover) and (pointer: fine) { .testimonials-carousel:hover .testimonial-track { animation-play-state: paused; } } .testimonial-card { background: white; border-radius: 12px; padding: 30px; width: 350px; flex-shrink: 0; margin-right: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; transition: transform 0.3s ease; display: flex; flex-direction: column; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); } .testimonial-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, #ff5500, #ff8c00); } .rating { color: #ffc107; font-size: 18px; margin: 8px 0 0 0; line-height: 1; letter-spacing: 1px; } .quote { font-style: italic; color: #555; line-height: 1.6; margin-bottom: 18px; position: relative; padding-left: 15px; flex-grow: 1; } .quote::before { content: ""; position: absolute; left: -5px; top: -10px; font-size: 50px; color: rgba(255, 85, 0, 0.1); line-height: 1; } .client-info { display: flex; justify-content: space-between; align-items: center; margin-top: 0; font-size: 14px; gap: 12px; } .client-meta { display: flex; align-items: center; gap: 0; } .client-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff5500, #ff8c00); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.2px; box-shadow: 0 6px 14px rgba(255, 85, 0, 0.22); } .name { font-weight: 700; color: #2f3742; } .date { color: #7b8693; font-size: 13px; font-weight: 500; white-space: nowrap; } .treatment { margin-top: 8px; font-size: 13px; color: #ff5500; font-weight: 500; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (max-width: 768px) { .testimonial-card { width: 300px; padding: 20px; margin-right: 15px; } .client-info { align-items: flex-start; flex-direction: column; gap: 8px; } .rating { margin-left: 0; } } /* ==================================== Usluge Grid Stil + Hover Efekti ==================================== */ #services { padding: 0px 0px 50px 0px; background-image: url(../images/schedule-bg.jpg); } #services .service-grid { margin-top: 35px; } #services .service-card { height: 100%; border-radius: 14px; background: linear-gradient( 160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) ); border: 1px solid rgba(255, 255, 255, 0.18); padding: 24px; color: var(--bg-light); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; overflow: hidden; } #services .service-card-image { margin-top: 18px; border-radius: 10px; overflow: hidden; height: 200px; } #services .service-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } #services .service-card:hover .service-card-image img { transform: scale(1.05); } #services .service-card:hover { transform: translateY(-8px); border-color: rgba(237, 86, 59, 0.6); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28); } #services .service-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } #services .service-index { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--primary-color); } #services .service-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-color: rgba(237, 86, 59, 0.18); color: var(--primary-color); font-size: 18px; } #services .service-card h4 { color: var(--bg-light); font-size: 20px; font-weight: 700; line-height: 1.35; margin-bottom: 0; } #services .service-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #services .service-toggle { border: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-color: rgba(237, 86, 59, 0.22); color: var(--bg-light); flex-shrink: 0; transition: background-color 0.3s ease, transform 0.3s ease; } #services .service-toggle:focus { outline: none; } #services .service-toggle i { font-size: 12px; transition: transform 0.3s ease; } #services .service-toggle[aria-expanded="true"] i { transform: rotate(180deg); } #services .service-collapse { margin-top: 14px; } #services .service-collapse p { color: rgba(250, 250, 250, 0.88); margin-bottom: 0; line-height: 1.75; } #services .service-image { width: 100%; max-width: 240px; border-radius: 10px; margin-top: 20px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); } @media (max-width: 991px) { #services .service-card { padding: 22px; } #services .service-card h4 { font-size: 19px; } } @media (min-width: 992px) { #services .service-toggle { display: none; } #services .service-collapse { display: flex !important; flex-direction: column; flex: 1; height: auto !important; visibility: visible !important; } #services .service-collapse p { flex: 1; } #services .service-card { display: flex; flex-direction: column; } #services .service-card-image { height: 150px; margin-top: 16px; flex-shrink: 0; } } @media (max-width: 575px) { #services .service-grid { margin-top: 24px; } #services .service-card { padding: 20px; } #services .service-card-top { margin-bottom: 12px; } } #services .section-heading h2, #services .section-heading p, #gallery .section-heading h2, #gallery .section-heading p { color: var(--bg-light); } /* About Clinic Section Styles */ #about-us { background-color: var(--bg-light); } .clinic-highlights { margin-top: 50px; align-items: center; } .clinic-image-wrapper { position: relative; border-radius: 5px; overflow: hidden; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .clinic-image { transition: transform 0.5s ease; width: 100%; } .clinic-image-wrapper:hover .clinic-image { transform: scale(1.05); } .image-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); padding: 30px; color: white; transition: all 0.3s ease; } .overlay-content h4 { font-size: 22px; margin-bottom: 5px; font-weight: 700; } .overlay-content p { margin-bottom: 0; opacity: 0.9; color: var(--bg-dark-light); } .clinic-description h3 { font-size: 28px; font-weight: 700; color: var(--bg-dark); margin-bottom: 25px; position: relative; padding-bottom: 15px; } .clinic-description h3:after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background: var(--primary-color); } .mission-statement { background: var(--bg-seasalt); padding: 25px; border-radius: 5px; margin-bottom: 30px; border-left: 4px solid var(--primary-color); } .mission-statement p { font-size: 16px; line-height: 1.7; margin-bottom: 0; color: var(--bg-dark); } .feature-box { background: white; padding: 25px; margin-bottom: 30px; border-radius: 5px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; height: 100%; } .feature-box:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .feature-box i { font-size: 36px; color: var(--primary-color); margin-bottom: 15px; display: inline-block; } .feature-box h5 { font-size: 18px; font-weight: 600; color: var(--bg-dark); margin-bottom: 12px; } .feature-box p { font-size: 14px; color: var(--text-light); margin-bottom: 0; } .cta-buttons { display: flex; flex-wrap: wrap; gap: 15px; } .secondary-button { display: inline-block; padding: 12px 25px; border: 2px solid var(--primary-color); color: var(--primary-color); border-radius: 5px; font-weight: 500; transition: all 0.3s; } .secondary-button:hover { background: var(--primary-color); color: white; } .values-section { margin-top: 70px; } .values-group-label { font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--primary-color); margin-bottom: 30px; } .values-section .row { margin-bottom: 10px; } .value-card { text-align: center; padding: 40px 30px; background: white; border-radius: 5px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; height: 100%; } .value-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .value-icon { width: 80px; height: 80px; background: rgba(255, 85, 0, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; transition: all 0.3s ease; } .value-card:hover .value-icon { background: var(--primary-color); color: white; } .value-icon i { font-size: 36px; color: var(--primary-color); transition: all 0.3s ease; } .value-card:hover .value-icon i { color: white; } .value-card h4 { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: var(--bg-dark); } .value-card p { font-size: 15px; color: var(--text-light); margin-bottom: 0; } @media (max-width: 991px) { .clinic-description { margin-top: 40px; } .value-card { margin-bottom: 30px; } } .cta-buttons .main-button { display: inline-block; font-size: 15px; padding: 12px 20px; background-color: var(--primary-color); color: white !important; text-align: center; font-weight: 500; text-transform: uppercase; transition: all 0.3s; border-radius: 5px; text-decoration: none !important; border: none; cursor: pointer; } .cta-buttons .main-button:hover { background-color: var(--primary-hover); color: white !important; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 85, 0, 0.3); } .cta-buttons .secondary-button { display: inline-block; font-size: 15px; padding: 12px 20px; background-color: transparent; color: var(--primary-color) !important; border: 2px solid var(--primary-color); text-align: center; font-weight: 500; text-transform: uppercase; transition: all 0.3s; border-radius: 5px; text-decoration: none !important; cursor: pointer; } .cta-buttons .secondary-button:hover { background-color: var(--primary-color); color: white !important; transform: translateY(-2px); } .cta-buttons .cta-buttons { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 30px; } /* --------------------------------------------- Gallery Section --------------------------------------------- */ /* scroll s jQuery: offset() − visina headera (scroll-margin ovdje ne koristiti — dupli pomak) */ #gallery { background-image: linear-gradient(rgba(35, 45, 57, 0.84), rgba(35, 45, 57, 0.84)), url(../images/schedule-bg.jpg); background-size: cover; background-position: center; background-attachment: scroll; } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .gallery-item { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; cursor: pointer; } .gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .gallery-overlay { position: absolute; inset: 0; background: rgba(255, 85, 0, 0.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease; } .gallery-overlay i { font-size: 28px; color: #fff; transform: scale(0.7); transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.06); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-item:hover .gallery-overlay i { transform: scale(1); } .gallery-hidden { display: none; } .gallery-load-more { margin-top: 48px; margin-bottom: 60px; } .gallery-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--primary-color); color: #fff; border: none; padding: 14px 36px; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 5px; cursor: pointer; transition: background 0.3s, transform 0.3s, box-shadow 0.3s; } .gallery-btn:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 85, 0, 0.35); } .gallery-btn i { font-size: 12px; transition: transform 0.3s; } .gallery-btn:hover i { transform: translateY(3px); } /* Lightbox */ .gallery-lightbox { position: fixed; inset: 0; background: rgba(14, 17, 21, 0.95); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .gallery-lightbox.active { opacity: 1; pointer-events: all; } .lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; } .lightbox-content img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 6px; display: block; transition: opacity 0.15s ease; } .lightbox-content img.lb-fade { opacity: 0; } .lightbox-counter { margin-top: 12px; color: rgba(255, 255, 255, 0.6); font-size: 13px; font-family: "Poppins", sans-serif; letter-spacing: 1px; } .lightbox-close { position: fixed; top: 20px; right: 28px; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; z-index: 100001; opacity: 0.7; transition: opacity 0.2s, transform 0.2s; font-family: sans-serif; } .lightbox-close:hover { opacity: 1; transform: rotate(90deg); } .lightbox-prev, .lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; z-index: 100001; transition: background 0.25s, transform 0.25s; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-prev:hover, .lightbox-next:hover { background: var(--primary-color); border-color: var(--primary-color); transform: translateY(-50%) scale(1.1); } /* Gallery Responsive */ @media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } @media (max-width: 767px) { .gallery-btn { padding: 10px 22px; font-size: 12px; gap: 7px; } .gallery-load-more { margin-top: 32px; margin-bottom: 50px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } }