/* Theme Name: Camperfection Theme URI: https://www.bozooart.com Author: BozooArt Author URI: https://www.bozooart.com Version: 1.0.0 */ :root { --primary: #62C03A; --green-2: #62C03A; --green: #094D52; --orange: #DEA459; --beige: #F3F1E4; --gray: #BFBFBF; --smoke: #F9F9F9; --borderline: #FFFFFF1A; --text: 'Pathway Extreme', sans-serif; --title: 'Big Shoulders', sans-serif; --anim: all ease 0.5s; --slow: all ease 0.7s; --check: url("data:image/svg+xml,%3Csvg%20height%3D%2213%22%20width%3D%2218%22%20fill%3D%22none%22%20viewBox%3D%220%200%2018%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.1094%200.640625C17.6172%201.10938%2017.6172%201.92969%2017.1094%202.39844L7.10938%2012.3984C6.64062%2012.9062%205.82031%2012.9062%205.35156%2012.3984L0.351562%207.39844C-0.15625%206.92969%20-0.15625%206.10938%200.351562%205.64062C0.820312%205.13281%201.64062%205.13281%202.10938%205.64062L6.21094%209.74219L15.3516%200.640625C15.8203%200.132812%2016.6406%200.132812%2017.1094%200.640625Z%22%20fill%3D%22%23C20000%22%2F%3E%3C%2Fsvg%3E"); --green-arrow: url("data:image/svg+xml,%3Csvg%20height%3D%2212%22%20width%3D%2217%22%20fill%3D%22none%22%20viewBox%3D%220%200%2017%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.6875%206.71875L11.6875%2010.7188C11.3125%2011.125%2010.6562%2011.125%2010.2812%2010.7188C9.875%2010.3438%209.875%209.6875%2010.2812%209.3125L12.5625%207H1C0.4375%207%200%206.5625%200%206C0%205.40625%200.4375%205%201%205H12.5625L10.2812%202.71875C9.875%202.34375%209.875%201.6875%2010.2812%201.3125C10.6562%200.90625%2011.3125%200.90625%2011.6875%201.3125L15.6875%205.3125C16.0938%205.6875%2016.0938%206.34375%2015.6875%206.71875Z%22%20fill%3D%22%23C20000%22%2F%3E%3C%2Fsvg%3E"); --white-arrow: url("data:image/svg+xml,%3Csvg%20height%3D%2212%22%20width%3D%2217%22%20fill%3D%22none%22%20viewBox%3D%220%200%2017%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.6875%206.71875L11.6875%2010.7188C11.3125%2011.125%2010.6562%2011.125%2010.2812%2010.7188C9.875%2010.3438%209.875%209.6875%2010.2812%209.3125L12.5625%207H1C0.4375%207%200%206.5625%200%206C0%205.40625%200.4375%205%201%205H12.5625L10.2812%202.71875C9.875%202.34375%209.875%201.6875%2010.2812%201.3125C10.6562%200.90625%2011.3125%200.90625%2011.6875%201.3125L15.6875%205.3125C16.0938%205.6875%2016.0938%206.34375%2015.6875%206.71875Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); --gray-arrow: url("data:image/svg+xml,%3Csvg%20height%3D%2212%22%20width%3D%2217%22%20fill%3D%22none%22%20viewBox%3D%220%200%2017%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.6875%206.71875L11.6875%2010.7188C11.3125%2011.125%2010.6562%2011.125%2010.2812%2010.7188C9.875%2010.3438%209.875%209.6875%2010.2812%209.3125L12.5625%207H1C0.4375%207%200%206.5625%200%206C0%205.40625%200.4375%205%201%205H12.5625L10.2812%202.71875C9.875%202.34375%209.875%201.6875%2010.2812%201.3125C10.6562%200.90625%2011.3125%200.90625%2011.6875%201.3125L15.6875%205.3125C16.0938%205.6875%2016.0938%206.34375%2015.6875%206.71875Z%22%20fill%3D%22%239E9E9E%22%2F%3E%3C%2Fsvg%3E"); --black-arrow: url("data:image/svg+xml,%3Csvg%20height%3D%2212%22%20width%3D%2217%22%20fill%3D%22none%22%20viewBox%3D%220%200%2017%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.6875%206.71875L11.6875%2010.7188C11.3125%2011.125%2010.6562%2011.125%2010.2812%2010.7188C9.875%2010.3438%209.875%209.6875%2010.2812%209.3125L12.5625%207H1C0.4375%207%200%206.5625%200%206C0%205.40625%200.4375%205%201%205H12.5625L10.2812%202.71875C9.875%202.34375%209.875%201.6875%2010.2812%201.3125C10.6562%200.90625%2011.3125%200.90625%2011.6875%201.3125L15.6875%205.3125C16.0938%205.6875%2016.0938%206.34375%2015.6875%206.71875Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); } /* Resetiranje osnovnih stilova */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 17px; } body { font-family: 'Pathway Extreme', sans-serif; line-height: 1.6; color: #000; margin: 0; padding: 0; background: #FFFEF0 url('img/bg.png'); padding: 15px } h1, h2, h3, h4, h5, h6 { margin: 20px 0; font-weight: 700; font-family: 'Big Shoulders', sans-serif; } h1 { font-size: 3.125em; font-weight: 500; color: var(--navy); } h2 { font-size: 2.7em; line-height: 1.1em; font-weight: normal; } h3 { font-size: 1.75em; font-weight: normal; } h4 { font-size: 1.5em; } h5 { font-size: 1.25em; } h6 { font-size: 1em; } a { text-decoration: none; transition: var(--anim); color: #000; } ul { margin: 0; padding: 0; list-style-type: none; } img { max-width: 100%; height: auto; } .mobile-nav { display: none; } #main { background: #000; } .container { width: 1290px; margin: 0 auto; position: relative; } /* header */ #header { width: 100%; align-items: center; transition: var(--anim); background: var(--green); border-radius: 30px 30px 0 0 } #header .header-top { text-align: center; padding: 15px 0; border-bottom: 1px solid #FFFFFF20; font-size: .9rem; color: #FFFFFF80; } #header .header-top span { margin: 0 25px; color: #FFFFFF20; } #header .header-top a { color: #FFFFFF80; padding-bottom: 4px; } #header .header-top a:hover { color: var(--primary)} #header .header-top svg { width: 20px; position: relative; top: 4px; margin: 0 10px; fill: #FFFFFF80; transition: var(--anim) } #header .header-top svg.instagram { top: 6px; } #header .header-top a:hover svg { fill: var(--primary)} .home#header { position: absolute; background: transparent; } .header-wrapper { display: grid; grid-template-columns: 30% 40% 30%; align-items: center; width: 100%; padding: 30px 60px; } .site-branding { display: flex; align-items: center; } .site-branding img { width: 250px; display: block; } #primary-menu { display: flex; justify-content: center; align-items: center; margin-top: 3px; } #primary-menu li { display: inline; font-weight: 500; } #primary-menu li a { margin-right: 60px; text-transform: uppercase; position: relative; font-weight: 700; font-size: 1rem; color: #fff; white-space: nowrap } #primary-menu li a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background-color: var(--primary); transition: var(--anim); } #primary-menu .current-post-ancestor a, #primary-menu li a:hover::after { width: 100%; } #primary-menu .current-post-ancestor a, #primary-menu li.current-menu-item a::after { width: 100%; } #primary-menu li:last-child a { margin: 0; } #primary-menu .sub-menu { display: none; } #site-navigation { display: flex; justify-content: center; align-items: center; } .nav-order { display: flex; justify-content: end; align-items: center; } .nav-order a { border: 1px dashed #fff } .nav-order a:hover { background: var(--primary) var(--white-arrow) no-repeat 90% center; border: 1px solid var(--green) } .wpml-switcher { margin-left: 60px; position: relative; } .current-lang { display: flex; align-items: center; cursor: pointer; } .wpml-switcher img { width: 24px; height: 24px; margin-right: 10px; } .wpml-switcher span { text-transform: uppercase; font-weight: 500; color: #fff; } .current-lang svg { margin-left: 10px; fill: #fff; width: 14px; } .current-lang:hover svg { fill: var(--green); } .current-lang:hover span { color: var(--green); } .language-dropdown { display: none; position: absolute; top: 100%; left: -10px; border-radius: 4px; margin-top: 0px; z-index: 1000; width: 100px; padding: 0; } .language-dropdown li { list-style: none; padding: 0; } .language-dropdown li a { display: flex; align-items: center; text-decoration: none; background: rgba(0 0 0 / .07); padding: 5px 10px; } .language-dropdown li a:hover span { color: var(--green) } .wpml-switcher:hover .language-dropdown { display: block; } .btn { background: var(--green) var(--white-arrow) no-repeat 85% center; display: inline-block; padding: 15px 60px 15px 30px; border-radius: 50px; position: static; text-align: center; font-size: .9rem; color: #fff; font-weight: 700; text-transform: uppercase; } .btn:hover { background: #000 var(--white-arrow) no-repeat 90% center; } .btn.white { text-transform: uppercase; color: var(--green); background: #fff var(--black-arrow) no-repeat 85% center; border: 1px dashed var(--green) } .btn.white:hover { background: #fff var(--black-arrow) no-repeat 90% center; opacity: .75; border: 1px solidvar(--green) } .buttons .btn:first-child { margin-right: 20px; } section { padding: 100px 0 } .subtitle, .section-subtitle { color: var(--primary); font-weight: 700; font: 2.5rem 'Caveat' } .section-title { font: 4rem var(--title); text-transform: uppercase; color: var(--green); font-weight: 700 } #about { display: flex; } .about-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .about-media img { border-radius: 30px; } .about-content { display: flex; height: 100%; flex-direction: column; justify-content: center; } .about-content ul { margin: 20px 0} .about-content li { padding-left: 30px; margin: 10px 0; background: var(--check) no-repeat 0 center } .cta { padding: 100px 0; background: var(--ebony) no-repeat center; background-size: cover; display: flex; justify-content: center; align-items: center; } .cta-holder { display: grid; grid-template-columns: 70% 30%; } .cta .entry-text { width: 70%; font-size: 1.117rem } .cta .button { height: 65px; background-position: 85% center } .cta .button:hover { background-position: 90% center } /* footer */ #footer { background: var(--green) url('img/footer-bg.png') no-repeat center bottom; background-size: cover; padding: 60px 0 40px; color: #fff; position: relative; z-index: 2; font-weight: 300; border-radius: 0 0 30px 30px } #footer::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--green); opacity: 0.8; z-index: -1; border-radius: 0 0 30px 30px; } #footer a { color: #fff; } #footer ul { list-style-type: none; margin: 0; padding: 0; } #footer li { margin-bottom: 10px; } #footer .footer-wrapper { display: grid; grid-template-columns: 60% 20% 20%; } #footer h4 { font-weight: 700; text-transform: uppercase; color: var(--primary) } #footer .footer-bottom { margin-top: 20px; padding-top: 20px; color: var(--gray); font-size: .875em; } #footer .footer-bottom .container { display: flex; border-top: 1px solid var(--borderline); padding-top: 20px; } #footer .footer-bottom a { color: var(--gray); margin-left: 60px; } #footer .footer-bottom a:hover { color: #fff; } #footer .footer-bottom .master { float: right } #footer .footer-logo { width: 300px; margin-bottom: 30px; } #footer .desc { margin-bottom: 7px; } #footer .credits { margin-left: auto; } #footer .social { padding: 15px 0 0 35px; position: relative } #footer .social a { margin-right: 35px; } #footer .social svg { width: 24px; fill: #fff; transition: var(--anim) } #footer .social a:hover svg { fill: var(--primary) } #footer address { font-style: normal ; } #footer address li { padding-left: 35px; margin-bottom: 20px; } #footer address .phone { background: url('img/icons/phone.svg') no-repeat 0; } footer address .mail { background: url('img/icons/mail.svg') no-repeat 0; } #footer address li a { padding-bottom: 3px; } #footer address li a:hover { color: var(--primary) } .hero { background: #000 url('img/hero.jpg') no-repeat right center; background-size: cover; min-height: 100vh; display: flex; align-items: center; color: #fff; } .hero h1 { color: #fff; margin: 0; font-size: 5rem; line-height: 1em; } .hero h1 span { color: var(--green) } .hero-desc { font-size: 1.2rem; color: var(--gray); width: 50%; margin-bottom: 30px; } .button { display: flex; height: auto; } /* menu */ .burger-container { position: relative; display: inline-block; height: 50px; width: 50px; cursor: pointer; z-index: 10000 !important; transform: rotate(0deg); transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .burger-container #burger { width: 30px; height: 8px; position: relative; display: block; margin: -4px auto 0; top: 50%; } .burger-container #burger .bar { width: 100%; height: 3px; display: block; position: relative; background: #fff; transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition-delay: 0s; } .burger-container #burger .bar.topBar { transform: translateY(0px) rotate(0deg); } .burger-container #burger .bar.btmBar { transform: translateY(6px) rotate(0deg); } .mobile-menu.menu-opened { height: 100%; transition: all 0.3s ease-in, background 0.5s ease-in; transition-delay: 0.25s; } .mobile-menu.menu-opened .burger-container { transform: rotate(90deg); } .mobile-menu.menu-opened .burger-container #burger .bar { transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition-delay: 0.2s; } .mobile-menu.menu-opened .burger-container #burger .bar.topBar { transform: translateY(4px) rotate(45deg); } .mobile-menu.menu-opened .burger-container #burger .bar.btmBar { transform: translateY(2px) rotate(-45deg); } .mobile-nav { all: unset; box-sizing: border-box; position: fixed; right: -100%; width: 100%; height: 100%; background: var(--green) url('img/dark_tree.png'); top: 70px; transition: right 0.5s ease; z-index: 9999; display: flex; flex-direction: column; padding: 0px 50px 0 50px; justify-content: center; overflow-y: auto; } .mobile-nav.active { right: 0; } .mobile-nav .close-button { font-size: 50px; color: #fff; } .mobile-nav ul { margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100%; list-style: none; } .mobile-nav li { padding: 20px 0; cursor: pointer; display: flex; align-items: start; position: relative; } .mobile-nav li a { color: #fff; text-transform: none; font-size: 1.15rem; padding: 0 15px; } .mobile-nav li a:hover, .mobile-nav ul li.current-menu-item a, .mobile-nav ul li.current-menu-item a:hover { color: var(--green); } .mobile-nav li:last-child { border-bottom: 0 } #header.boom { transition: transform 0.3s ease, padding 0.3s ease; transform: translateY(-100%); } #header.sticky { margin-top: 0; width: 100%; position: fixed; background: var(--green); box-shadow: 0 1px 22px rgba(0, 0, 0, 0.2); transform: translateY(0); z-index: 1000; top: 0; opacity: 1 !important } #header.sticky .logo { padding: 10px 0 } #header.sticky .logo img { width: 60px } #header.sticky .header-top { display: none } #header .logo a:last-child { display: none } #header.sticky .logo a:first-child { display: none } #header.sticky .logo a:last-child { display: block } .mobile-menu { display: none } #offers { background: #000 url('img/offer-bg.jpg') right 0 no-repeat; color: #fff; } #offers .offers-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; } #offers .offer-item { padding: 50px; border-radius: 30px; box-shadow: 0px 0 2px var(--green); background: url('img/box-bg.png') center no-repeat; ) } #offers .offer-item img { margin-bottom: 10px; margin-top: -10px } #offers .offer-item:hover { transform: translateY(-5px); box-shadow: 0px 0px 30px var(--green); background: url('img/box-bg.png') center no-repeat; } #offers .section-title { margin-bottom: 60px; } .offer-description { color: var(--gray) } #offers h3 { margin: 0; padding: 0; font: 1.5rem 'Lato'; font-weight: 500; margin-bottom: 10px } #offers .offer-description { margin-bottom: 20px; } #offers .btn { border: 1px solid var(--cherry); background: #000 var(--green-arrow) no-repeat 85% center;; color: var(--green); text-transform: uppercase; transition: var(--anim) } #offers .btn:hover { background: #000 var(--white-arrow) no-repeat 90% center;; box-shadow: inset 0 2px 2px rgba(0 0 0 / .8); color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);} .cta { background: rgba(56 46 23 / .2) url("img/h1_bg.png") no-repeat right 0; color: var(--green); padding: 100px 0 } .cta .container { display: flex; justify-content: center; flex-direction: column; } .cta h3 { font-size: 3rem; font-weight: 700; text-transform: uppercase; } .cta .entry-text { opacity: .75 } .button-cta { display: flex; justify-content: end; } .button-cta .btn { width: 100%; height: 65px; padding: 20px 0 } #testimonials { background: url('img/bg.png') no-repeat center top; background-size: cover } #testimonials .section-subtitle, #testimonials .section-title { text-align: center } .testimonial-slider { overflow: hidden; position: relative; } .testimonial { padding: 30px; border-radius: 10px;text-align: left; } .testimonial blockquote { font-size: 1.1rem; line-height: 1.6; margin-bottom: 20px; } .testimonial-author { font-weight: 700; font-size: 1rem; border-top: 1px solid var(--green); padding-top: 20px; } .testimonial-author h4 { font-weight: normal; margin: 0; padding: 0; line-height: 1em } .author-position { font-size:1rem; font-weight: 300 } .swiper-pagination { margin-top: 20px; } #news { text-align: center; } .news-slider { position: relative; width: 100%; padding: 20px 0; } .news-article { text-align: center; transition: var(--anim); text-align: left; } .news-article:hover { transform: translateY(-5px); } .news-image img { width: 100%; height: auto; border-radius: 30px !important; } .news-title { font-size: 2em; font-weight: bold; margin: 15px 0 10px; line-height: 1.2em } .news-title a { text-decoration: none; color: var(--green) } .news-excerpt { font-size: 1rem; color: rgba(0 0 0 / .75); line-height: 1.5em } .swiper-button-prev, .swiper-button-next { color: #000; } .swiper-pagination-bullet-active { background: var(--green); } .more { margin-top: 30px; } .entry-content a, #footer a { position: relative; } .entry-content a::after, #footer a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background-color: var(--primary); transition: var(--anim); } .entry-content a:hover::after, #footer a:hover::after { width: 100%; } #newsletter { background: url('img/newsletter-bg.jpg') center no-repeat; background-size: cover; } #newsletter .container { display: flex; align-items: center; justify-content: center; flex-direction: column; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0px; } .animation { opacity: 0; filter: blur(3px); transform: translateY(200px); transition: all .7s ease-out; } .animation.fadeup { opacity: 1; transform: translateY(0); filter: blur(0); } .delay-1 { transition: var(--slow); transition-delay: .1s; } .delay-2 { transition: var(--slow); transition-delay: .2s; } .delay-3 { transition: var(--slow); transition-delay: .3s; } .delay-4 { transition: var(--slow); transition-delay: .4s; } .delay-5 { transition: var(--slow); transition-delay: .5s; } .delay-6 { transition: var(--slow); transition-delay: .6s; } .delay-7 { transition: var(--slow); transition-delay: .7s; } .delay-8 { transition: var(--slow); transition-delay: .8s; } .delay-9 { transition: var(--slow); transition-delay: .9s; } .delay-late { transition: var(--slow); transition-delay: 1.5s; } .enter-title { background: var(--green) url('img/bc-pattern.png') right 0 no-repeat; color: #fff; } .enter-title .container {display: flex;align-items: center;align-content: center; min-height: 200px; justify-content: center; } .enter-title h1 { margin: 0; color: #fff; padding: 0; line-height: 1.4em; font-size: 3rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em } .main { padding: 100px 0; } .entry-content { width: 940px; margin: 0 auto; } .entry-content.wide { width: 100%; } .entry-content .excerpt { font-size: 1.25rem; font-weight: 700; margin-bottom: 60px; border-left: 5px solid var(--green); padding-left: 30px; line-height: 1.8em } .entry-content.wide .excerpt { width: 75% } .entry-content a { font-weight: 700; color: var(--green) } .services.offers-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .services .offer-item { background: var(--smoke); padding: 60px; } .services .offer-item img { float: left; margin-right: 30px; margin-top: -12px; transition: var(--anim) } .services h3 { margin: 0; } .services .offer-description { color: #000; clear: both; margin-top: 20px; transition: var(--anim) } .services a:hover .offer-item { background: var(--green); color: #fff; box-shadow: 0 0 15px rgba( 0 0 0 / .5) } .services a:hover .offer-item .offer-description { color: #fff; } .services a:hover .offer-item img { filter: invert(1) brightness(1) sepia(1) saturate(0); } .contact-info { background: url('img/bg.png'); padding: 60px 0 } .contact-info .container { display: flex; flex-wrap: wrap; gap: 30px; } .contact-item { flex: 1 1 calc(25% - 30px); display: flex; flex-direction: column; align-items: center; text-align: center; } .contact-item h4 { font: 1.2rem 'Lato'; font-weight: 700 } .contact-form {display: grid; grid-template-columns: 45% 45%; gap: 10%; } .frm_style_formidable-style.with_frm_style .frm_submit button, .frm_style_formidable-style.with_frm_style .frm_submit button:hover { all: unset; } .with_frm_style .btn { cursor: pointer !important; } .with_frm_style .btn button:hover { background: none !important; } .with_frm_style input[type=text], .with_frm_style input[type=email], .with_frm_style input[type=phone], .with_frm_style input[type=search], .with_frm_style textarea { border-radius: 0; padding: 15px 20px; } .with_frm_style .btn { width: 200px; transition: var(--anim) } .faq .elementor-widget-n-accordion .e-n-accordion-item-title-text { font: 2rem var(--title) !important; padding: 30px 0; text-transform: uppercase; } .blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; } .post h1 { font-size: 4rem; margin: 0 0 50px; font-weight: 700; margin-top: -50px; text-transform: uppercase; color: var(--green); line-height: 1.2em } .post .entry-content { width: 940px; } .post .entry-thumbnail { margin-bottom: 30px; background: url(img/tree.png); padding: 35px; } .post .entry-thumbnail img { border-radius: 30px } .entry-content { font-size: 1rem } .entry-content .entry-text h1, .entry-content .entry-text h2, .entry-content .entry-text h3, .entry-content .entry-text h4, .entry-content .entry-text h5, .entry-content .entry-text h6 { font-weight: bold; color: #222; margin: 20px 0 10px; line-height: 1.4; } .entry-content .entry-text h2 { margin-top: 60px; font-size: 2.5rem; border-bottom: 1px solid rgba(0 0 0 / .1); color: var(--green); margin-bottom: 30px; padding-bottom: 10px; font-weight: 500; } .entry-content .entry-text h3 { margin-top: 40px; font-size: 2rem; color: var(--steel); font-weight: 500; } .entry-content .entry-text h2:first-child { margin: 0 0 15px; } .entry-content .entry-text h3:first-child { margin: 0; } .entry-content .entry-text p { margin: 0 0 30px; } .entry-content .entry-text p + ul { margin-top: -20px; } .entry-content .entry-text ul { list-style-type: disc; } .entry-content .entry-text ul, .entry-content .entry-text ol { margin: 0 0 15px 20px; padding: 0; } .entry-content .entry-text ul li, .entry-content .entry-text ol li { margin: 5px 0; } .entry-content .entry-text { line-height: 1.8em; } .entry-content .entry-text img { max-width: 100%; height: auto; display: block; margin: 15px 0; } .entry-content .entry-text blockquote { font-style: italic; color: #555; margin: 20px 0; padding-left: 15px; border-left: 3px solid #ccc; } .table { width: 100%; border-collapse: collapse; border-spacing: 0; border: 1px dashed var(--green); } .table th, .table td { padding: 10px; border: 1px dashed var(--green); text-align: left; } .table thead tr { background-color: rgba(0 0 0 / .1); font-weight: bold; } .table tbody tr:nth-child(even) { background-color: rgba(0 0 0 / .1); } .post .entry-text h2 { color: var(--green); text-transform: uppercase; } #hot { background: #fdcd00; } .hot-wrapper { display: grid; grid-template-columns: 25% 65%; gap: 10%; } .newsletter-form { margin-top: 30px } .newsletter-form input{ padding: 10px; width: 400px; } .newsletter-form button { border: none; cursor: pointer; } #sb_instagram .sbi_photo img { border-radius: 30px; } /* responsive */ @media (max-width: 1400px) { .header-wrapper { grid-template-columns: 20% 60% 20%; } } @media (max-width: 1300px) { .container { width: 100%; padding: 0 30px; } .header-wrapper { grid-template-columns: 20% 60% 20%; } h1 { font-size: 2.75em; } h2 { font-size: 2.4em; } h3 { font-size: 1.4em; } h4 { font-size: 1.25em; } h5 { font-size: 1em; } h6 { font-size: .9em; } .cta-holder { grid-template-columns: 70% 30%; } .cta .entry-text { width: 90% } #footer { padding: 60px 0 40px; } #footer h4 { font-size: 2rem; margin: 0 } .about-wrapper { display: grid;grid-template-columns: 30% 65%; gap: 5%; } .section-title { font-size: 3rem; } @media (max-width: 1200px) { .wpml-switcher { margin-left: 10px; } #primary-menu li a { margin-right: 30px; } #primary-menu li:last-child a { margin: 0; } } @media (max-width: 1080px) { #site-navigation, .nav-order { display: none } .header-wrapper { display: flex; } body { font-size: 16px; } .cta-holder { display: flex; flex-direction: column; align-items: start } .cta-holder .btn.white { margin-top: 30px; width: 300px; } #offers .offer-item { padding: 30px; } #offers .btn { width: 100%; position: relative; bottom: 0; } .nav { display: none } #header { grid-template-columns: 16% 84% ; } .mobile-menu {display: flex;align-items: end;width: 100%;justify-content: flex-end;} .nav-right { justify-content: end } .cta { padding: 60px 0 } #footer .footer-bottom a { margin-left: 30px } } @media (max-width: 980px) { #footer { background: #000; } #offers .offers-list { grid-template-columns: repeat(2, 1fr); } #footer .footer-wrapper { display: block; } .footer-menu { margin-bottom: 30px; } .button-cta { justify-content: start; } .main { padding: 60px 0 } .entry-content, .post .entry-content { width: 100% } .blog { grid-template-columns: repeat(2, 1fr); gap: 30px !important; } .news-image img { width: 100% !important } .services .offer-item { padding: 30px; } .services.offers-list { gap: 15px; } #header.fixer { position: fixed !important; top: 0 !important; transform: translateY(0) !important; background: #000 !important; z-index: 1000; } } @media (max-width: 768px) { body { margin: 0; padding: 0 } #header { border-radius: 0; padding: 0 } #footer, #footer::before { border-radius: 0; } .header-wrapper { padding: 15px; } .container { padding: 0 15px; } section { padding: 50px 0; } .site-branding img { width: 300px; } #footer .footer-bottom .master { display: block; float: none; display: flex; margin-top: 30px; text-align: center; } #footer .footer-bottom .master a { margin: 0 } .hero-desc { width: 100%; } .hero-desc .cta { padding: 30px 0 60px} .cta-holder { display: block; } .cta .entry-text { padding: 0; } #about .about-wrapper { display: block; } #about .about-media { width: 25%; margin-bottom: 30px; } #header { grid-template-columns: 30% 70%; } .hot-wrapper { grid-template-columns: 40% calc(60% - 30px); gap: 30px; } .news-image img { width: 50%; margin: 0 auto; display: block; } .news-title, .news-excerpt { text-align: center; } .news-excerpt { margin-bottom: 20px; } #offers .offer-item { padding: 15px; } #offers .offers-list { gap: 15px; } .enter-title h1, .post h1 { font-size: 4rem } .contact-info .container { display: grid; grid-template-columns: repeat(2, 1fr); /* Dvije kolone */ gap: 30px; } .contact-form { display: block; } .services.offers-list { display: block; } .services .offer-item { margin-bottom: 15px; } .offer-title { font-size: 2rem; } .entry-content.wide .excerpt { width: 100%; } #header.sticky { background: #000; } #header .header-top { display: none } .news-article { margin-bottom: 0 !important } .enter-title h1 { font-size: 2rem; } .table td { line-height: 1.4em; font-size: .91rem } .cta h3 { font-size: 2.7rem; line-height: 1.2em } } @media (max-width: 480px) { #offers .offer-item { border-radius: 15px; } #offers h3 { font-size: 1.25rem } .buttons .btn.white { margin-bottom: 20px; } .hot-wrapper { display: block; } .about-media img { width: 100%; } #about .about-media { width: 50%; margin-bottom: 30px } #offers .offer-item { padding: 20px 10px; } #offers .offers-list { display: block; } #offers .offers-list .offer-item { margin-bottom: 15px; } #footer .footer-bottom .container { display: block; } .footer-bottom span { display: block; margin: 10px 0 ; } #footer .footer-bottom a { margin: 0 } #footer { padding-bottom: 20px } .newsletter-form input { margin-bottom: 30px; } .news-image img { width: 100% } #header { height: 70px } .hero h1 { font-size: 4rem; } .cta-holder .btn.white, .newsletter-form input { width: 100% } .faq h2 { font-size: 2rem; } .blog { display: block; } .news-article { margin-bottom: 60px; } } @media (max-width: 360px) { }