/*
Theme Name: Ventiltrade
Description: Ventiltrade.com WordPress theme
Version: 1.0
Author: x
Author URI: x
Template: enfold
*/



/* HERO */
#hero {
  background: url(http://ventiltrade.com/wp-content/uploads/2026/02/ventiltrade-pneumatika-hidraulika-industrijska-oprema-bw.webp);
  background-position: center bottom -10px;
  background-size: contain;
  background-repeat: no-repeat;
}
#hero .av-section-color-overlay-wrap .av-section-color-overlay {
  opacity: 0.95;
  background-color: #f8f8f8;
}

/* VENTILTRADE INTRO */
.vt-intro {
  text-align: center;
}
.html_header_transparency #top .vt-intro .container {
  padding-top: 0;
}
#top .vt-intro h1 {
  font-weight: 600;
  color: var(--color1);
  text-shadow: 1px 1px #ffffff;
  text-transform: lowercase;
  letter-spacing: 0px;
}
#top .vt-intro h1 + p {
  font-size: 20px;
  line-height: 1.5em;
}

/* VENTIL TRADE ICONS */
.vt-icons {
  text-align: center;
}
#top .vt-icons h2 {
  font-weight: 500;
  margin-bottom: 10px;
}
#top .vt-icons .flex_column {
  margin-top: 30px;
  margin-bottom: 50px;
}
.vt-icons span.av_font_icon span.av-icon-char,
.vt-icons span.av_font_icon span.av-icon-char svg {
  fill: var(--color1);
  color: var(--color1);
}
.vt-icons .flex_column:hover span.av_font_icon span.av-icon-char,
.vt-icons .flex_column:hover span.av_font_icon span.av-icon-char svg {
  fill: var(--color3);
  color: var(--color3);
}
#top .vt-icons .flex_column h3 {
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 20px;
}
.vt-icons .flex_column:hover h3 {
  color: var(--color1);
}
.vt-icons .flex_column span.av_font_icon span.av-icon-char,
.vt-icons .flex_column:hover span.av_font_icon span.av-icon-char,
.vt-icons .flex_column span.av_font_icon span.av-icon-char svg,
.vt-icons .flex_column:hover span.av_font_icon span.av-icon-char svg,
.vt-icons .flex_column h3,
.vt-icons .flex_column:hover h3 {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; 
}

#top .vt-icons .flex_column_table {
  padding: 0 0 50px 0;  
  margin-top: 30px !important;
}

#top .vt-icons p {
  margin: 30px 0 0 0;
  line-height: 1.5em;
}
#top .vt-icons p:last-child {
  margin-top: 50px;
}
#top .vt-icons p a.button {
  font-weight: 900;
  border-radius: 2px;
  padding: 15px 30px;
}
/* products */
#top .vt-icons .products {
  margin: 90px 0 0 0;
  font-size: 0;
}
#top .vt-icons .products img {
  display: inline-block;
  max-width: 10%;
  padding: 0 15px
}

/* VENTILTRADE LOGOS */
.logos-wrap {
  /*display: none;*/
}
.logos-wrap .container .content {
  padding-top: 25px;
}

/* ---------------------- */
#kontakt {
  background: #f8f8f8;
}
#kontakt .container .content {
  padding: 100px 0;
}
.ventiltrade p {
  margin: 0;
}
.ventiltrade p.email {
  margin: 0 0 15px 0;
}
#top #kontakt h3,
#top .ventiltrade .location p.company {
  font-size: 22px;
  text-transform: uppercase;
  color: var(--color1);
  font-weight: bold;
  margin-bottom: 5px;
}
#top #kontakt h3 {
  margin-bottom: 0;
}
#top #kontakt h3 + p {
  margin: 15px 0 20px 0;
}
.ventiltrade .location p.company2 {
  margin-bottom: 10px;
  line-height: 1em;
}
.ventiltrade .location p.address,
.ventiltrade .location p.address2 {
  font-size: 15px;
  font-style: italic;

}
.ventiltrade .location p.address2 {
   margin: 0 0 15px 0;
}
.ventiltrade .compnay-details p {
  font-size: small;
}
.ventiltrade .contacts p strong,
.ventiltrade .links p strong {
  display: none;
}
.ventiltrade .contacts p span::after,
.ventiltrade .links p span::after {
  display: inline-block;
  width: 20px;
  margin-right: 5px;
  text-align: center;
  vertical-align: middle;
  font-family: 'entypo-fontello';
  color: var(--color1);
}
.ventiltrade .contacts p.phone span::after {
  content: '\E854';
  transform: scaleX(-1);
}
.ventiltrade .contacts p.whatsapp span::after {
  content: '\F232';
}
.ventiltrade .contacts p.mobile span::after {
  content: '\E8ac';
}
.ventiltrade .contacts p.email span::after {
  content: '\E805';  
}
.ventiltrade .contacts p.web span::after {
  content: '\E8ad';  
}
.ventiltrade .compnay-details p strong {
  color: var(--color1);
  font-weight: normal;
}
.ventiltrade p a {
  color: var(--color1);
  color: #333333;
}
.ventiltrade p a:hover {
  color: var(--color2);
}
.ventiltrade p a,
.ventiltrade p a:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; 
}

.qr {
  max-width: 180px;
  margin-top: 50px
}
.qr img {
  display: table;
  /*padding: 20px;*/
  background: #ffffff;
}
.qr span {
  display: table;
}
.qr p  {
  margin: 0;
  display: table;
}
.qr span {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  width: 100%;
  padding: 10px;
  background: var(--color1);
  margin-top: 5px;
}
@media screen and (max-width: 768px) {
  .qr {display: none;}  
}
/* -- */
#top .main_color .input-text, #top .main_color input[type="text"], #top .main_color input[type="input"], #top .main_color input[type="password"], #top .main_color input[type="email"], #top .main_color input[type="number"], #top .main_color input[type="url"], #top .main_color input[type="tel"], #top .main_color input[type="search"], #top .main_color textarea, #top .main_color select {
  background: #ffffff;
  /*border-radius: 2px;*/
  /*border-left: 3px solid var(--color1);*/
}
#top label:not(.input_checkbox_label) {
  font-weight: bold;
  font-size: 0.92em;
  margin: 0 5px 0 5px;
  text-transform: uppercase;
}
.avia_ajax_form .button {
  margin-top: 15px;
}
/* gdpr */
/* Stilizacija label elementa */
.input_checkbox_label {
    display: flex; /* Uporabimo flexbox za poravnavo vsebine */
    align-items: flex-start; /* Poravna elemente na začetek (zgoraj), kar je ključno za daljše besedilo */
    cursor: pointer; /* Spremeni kurzor v kazalec, da uporabnik ve, da je klikljiv */
    position: relative; /* Potrebno za absolutno pozicioniranje ::before pseudo-elementa */
    padding-left: 30px; /* Naredi prostor za naš custom checkbox na levi strani */
    margin-bottom: 15px; /* Dodaj malo prostora pod labelom */
    font-size: 16px !important; /* Primer velikosti besedila */
    color: var(--color2); /* Barva besedila */
    line-height: 1.4; /* Izboljša berljivost daljšega besedila */
    font-weight: normal !important;
  text-transform: none !important;
}
/* Stilizacija našega custom checkboxa (kvadratek) z ::before pseudo-elementom na labelu */
.input_checkbox_label::before {
    content: ''; /* Obvezen za pseudo-elemente */
    position: absolute;
    left: 0; /* Postavi kvadratek na levo stran labela */
    top: 3px; /* Fina nastavitev vertikalne pozicije. Prilagodi glede na font-size besedila. */
    width: 20px; /* Širina kvadrata */
    height: 20px; /* Višina kvadrata */
    border: 2px solid var(--color2); /* Siva obroba */
    border-radius: 4px; /* Rahlo zaobljeni robovi */
    background-color: #fff; /* Bela notranjost */
    box-sizing: border-box; /* Vključi padding in border v širino/višino */
    transition: all 0.2s ease-in-out; /* Gladka animacija ob spremembi stanja */
}
/* Stilizacija kljukice (označeno stanje) z ::after pseudo-elementom na labelu */
.input_checkbox_label::after {
    content: '';
    position: absolute;
    left: 6px; /* Pozicija kljukice */
    top: 4px; /* Pozicija kljukice */
    width: 6px; /* Širina kljukice */
    height: 12px; /* Višina kljukice */
    border: solid white; /* Bela kljukica */
    border-width: 0 2px 2px 0; /* Samo spodnja in desna obroba za kljukico */
    transform: rotate(45deg); /* Zavrti za 45 stopinj, da dobiš kljukico */
    opacity: 0; /* Privzeto skrita */
    transition: all 0.2s ease-in-out; /* Gladka animacija */
}
/* Stanje, ko je checkbox označen:
   Ker je input z `id="avia_4_1"` zunaj labela (pred njim), lahko uporabimo `input:checked + label` selektor. */
#avia_6_1:checked + .input_checkbox_label::before {
    background-color: var(--color1); /* Modra barva za označen checkbox */
    border-color: var(--color1); /* Modra obroba */
}
#avia_6_1:checked + .input_checkbox_label::after {
    opacity: 1; /* Pokaži kljukico */
}
/* Stilizacija obvezne zvezdice */
.input_checkbox_label .required {
    color: red; /* Označi obvezno polje z rdečo zvezdico */
    font-weight: bold;
}

/* SOCKET */
#socket {
  min-height: 0;
  color: #ffffff;
  background: var(--color2);
}
#top #socket .container {
  padding: 0;
}
#socket .container .content {
  padding: 0;
}

#socket .container .content p {
  margin: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
}

/* RESPONSIVENESS */
@media screen and (max-width: 767px) {
  #top .vt-intro h1 {
    font-size: 25px;
  }
  #top .vt-intro h1 + p {
    font-size: 16px;
  }
}
@media screen and (max-width: 650px) {
  #top .vt-intro h1 {
    margin-bottom: 30px;
  }
  #top .vt-intro h1 span.divider {
    display: table;
    font-size: 0;
    line-height: 0;
    padding: 5px 0;
  }
}
@media screen and (max-width: 767px) {
  #top .vt-icons .products img {
    padding: 5px 5px 0 5px;
    max-width: 20%;
  }
}
@media screen and (max-width: 767px) {
  #kontakt .container .content {
/*    padding-top: 50px;*/
    padding-bottom: 20px;
  }
}

/* Shop links - boxes */
.shopLinks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 35px;
}

.shopLinks > div  {
	background: #f8f8f8;
	padding: 0px;
	border-radius: 8px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/*
.shopLinks > div:nth-child(2) {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
*/
.shopLinks > div {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.shopLinks > div:hover {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	background: #ffffff;
}
.shopLinks > div,
.shopLinks > div:hover {
-webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.shopLinks > div img {
  image-rendering: auto;
  mix-blend-mode: multiply;
	padding: 20px
}
.shopLinks > div h3 {
	margin-bottom: 15px;
	font-size: 17px;
  font-weight: bold!important;
  text-transform: uppercase;
  padding: 0 10px;
}
.shopLinks > div .btn {
	margin: 0 10px 10px 10px;
	display: inline-block;
	padding: 10px 16px;
	background: #3871c2;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
}
.shopLinks > div .btn:hover {
	opacity: 0.5;
}
.shopLinks {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}
@media (max-width: 992px) {
	.shopLinks {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 576px) {
	.shopLinks {
		grid-template-columns: 1fr;
	}
}

/* 404 Page */
.error404-text img {
  max-height: 80px;
  width: auto;
}
.error404-text p {
  margin-bottom: 30px;
}



/* Header */
/* Header */
header#header {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 6px -1px, rgba(0, 0, 0, 0.02) 0px 2px 4px -1px;   
}
header#header .header_bg {
  background: #f8f8f8;
  opacity: 0.9;  
}
header#header .logo img {
  padding: 20px 0;
  image-rendering: auto;
}

header#header.header-scrolled .logo img {
  padding: 10px 0;
}
.logo img {
  content: url("https://ventiltrade.com/wp-content/uploads/2025/06/ventiltrade-scaled.png");
}
.header-scrolled-full .logo img {
  content: url("https://ventiltrade.com/wp-content/uploads/2025/06/cropped-favicon.png");
}
header#header .logo img,
header#header.header-scrolled .logo img,
header#header.header-scrolled-full .logo img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/* menu */
.av-main-nav > li > a {
  font-size: 14px;
  text-transform: uppercase;
  font-family: var(--title);
  font-weight: 600;
}
#top header .av-main-nav > li > a:hover {
  color: var(--color1);
}
.header_color .main_menu ul:first-child > li.current-menu-item > a, 
.header_color .main_menu ul:first-child > li.active-parent-item > a {
  color: #3871c2;
}
#top .av-main-nav ul.sub-menu a {
  background: #ffffff;
  color: #666666;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
}
/* title and breadcrumbs */
#top .title_container {
  background: var(--color1);
  background: #e5e5e5;
}
#top .title_container .main-title {
  font-weight: 500;
}
#top .title_container .breadcrumb {
  font-weight: bold;
  text-transform: uppercase;
}

/* SEARCH RESULTS */
.search-results .template-search .entry-content-wrapper .post-meta-infos {
  display: none;
}
.search-results .template-search .entry-content-wrapper h2 {
  margin-bottom: 0;
}
.search-results .template-search .entry-content-wrapper .entry-content p:first-child {
  margin-top: 0;
}


/* PRODUCT CATEGORIES pages */
/* VENTILTRADE Final page  */
.final-content {
  text-align: center;
}
.html_header_transparency #top .final-content .container {
  padding-top: 0;
}
#top .final-content h1 {
  font-weight: 600;
  color: var(--color1);
  text-shadow: 1px 1px #ffffff;
  text-transform: none;
  letter-spacing: 0px;
  margin: 0 0 30px 0;
}
#top .final-content p {
  font-weight: 400;
}
.avia-button.avia-size-medium {
  font-weight: bold;
  text-transform: uppercase;
  padding: 15px 20px;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 0;
}
/* USP BAR */
#usp-vt {
  min-height: 0;
  position: relative;
  z-index: 9;
}
#usp-vt .container {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #usp-vt .container {
    width: 100%;
    max-width: 100%;
  }
}
#usp-vt .container .content {
  padding: 0;
}

@media screen and (min-width: 600px) {
    body.logged-in .usp-bar.sticky {
      top: 32px;
    }
}

#uspDots {display: none !important;}

        /* USP BAR */
        .usp-bar-wrapper {
            width: 100%;
            background: transparent;
            transition: height 0.1s ease;
        }

        #top .usp-bar {
            background: linear-gradient(135deg, #2c3e50, #3498db);
            background: linear-gradient(135deg, #3871c2 0%, #3498db 100%);
            /* background: linear-gradient(135deg, #3871c2 0%, #0056b3 100%); */
            color: white;
            border-bottom: 3px solid #f1c40f;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            width: 100%;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .usp-bar.sticky {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            animation: slideDown 0.3s ease-out;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-100%);
            }
            to {
                transform: translateY(0);
            }
        }

        .usp-container {
            max-width: 1310px;
            margin: 0 auto;
            min-height: 60px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px 30px;
            position: relative;
        }

        .usp-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 500;
            transition: transform 0.3s ease;
            white-space: nowrap;
        }

        .usp-item:hover {
            transform: translateY(-2px);
        }

        .usp-item i {
            font-size: 20px;
            color: #f1c40f;
            text-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .usp-text {
            white-space: nowrap;
        }
        .usp-text strong {
            font-weight: 600;
            font-family: "Manrope", sans-serif;
            font-family: var(--title);
            text-transform: uppercase;
            color: #ffffff;
        }

        /* DESKTOP - vsi vidni */
        @media screen and (min-width: 769px) {
            .usp-container {
                display: flex !important;
            }

            .usp-item {
                position: relative !important;
                opacity: 1 !important;
                visibility: visible !important;
                display: flex !important;
            }
        }

        /* MOBILE - rotacija */
        @media screen and (max-width: 768px) {
            .usp-container {
                display: block;
                min-height: 50px;
                padding: 12px 20px;
            }

            .usp-item {
                position: absolute;
                left: 20px;
                right: 20px;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.5s ease, visibility 0.5s ease;
                pointer-events: none;
                justify-content: center;
            }

            .usp-item.active {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                position: relative;
                left: auto;
                right: auto;
            }

            .usp-item i {
                font-size: 18px;
            }

            .usp-text {
                font-size: 13px;
            }

            /* Pike za navigacijo */
            .usp-dots {
                display: flex;
                justify-content: center;
                gap: 8px;
                padding: 5px 0 10px 0;
                /*! background: linear-gradient(135deg, #2c3e50, #3498db); */
            }

            .usp-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: rgba(255,255,255,0.3);
                cursor: pointer;
                transition: background 0.3s ease;
            }

            .usp-dot.active {
                background: #f1c40f;
            }
        }

/* PRODUCT GALLERY */
/* Osnovna nastavitev mreže */
.gallery1 {
  display: grid;
  /* Ustvari 6 enakih stolpcev na namizju */
  grid-template-columns: repeat(7, 1fr);
  gap: 15px; /* Razmik med slikami */
  padding: 20px 0;
}

.gallery-item1 {
  background-color: #f4f4f4; /* Nežno ozadje za prazne prostore */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* Določi višino "okvirja" */
}

.gallery-item1 img {
  max-width: 100%;
  max-height: 100%;
  /* To zagotovi, da se slika ne odreže in ohrani razmerje */
  object-fit: contain; 
  display: block;
  mix-blend-mode: multiply;
  padding: 25px;
}

/* Prilagoditev za tablice (3 slike v vrsti) */
@media (max-width: 1024px) {
  #top .gallery1 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Prilagoditev za mobitele (2 sliki v vrsti) */
@media (max-width: 600px) {
  #top .gallery1 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .gallery-item1 {
    height: 150px; /* Nekoliko nižji okvirji za manjše zaslone */
  }
}    

/* CTA2 */
.cta2 {
  background: linear-gradient(135deg, #3871c2 0%, #3498db 100%);
  padding: 30px;
  color: #ffffff;
  border-radius: 8px;
  max-width: 850px;
  margin: 0 auto 50px auto;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}
#top .cta2 h2 {
  font-weight: 900;
  text-transform: none;
  color: #ffffff;
  font-size: 29px;
}
#top .cta2 p {
  font-size: 18px;
  line-height: 1.5em;
  margin: 0 0 3px 0;
}
#top .cta2 p:last-child {
  margin-top: 30px;
}
#top .cta2 p:nth-child(3) {
  font-size: 20px;
}
#top .cta2 p:nth-child(4) {
  font-style: italic;
  font-size: 16px;
}
.cta2 p strong {
  color: #ffffff;
}
.cta2 .cta-button {
  display: table;
  padding: 10px 20px;
  background: white;
  color: #007bff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: transform 0.2s;
  margin: 0 auto;
}
.cta2 .cta-button:hover {
  transform: scale(1.05);
  background: #f8f9fa;
}

/* LOGOS */
.logos-wide {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0 20px;
    justify-items: center;
    margin: 0 auto;
    background-color: #f4f4f4;
    border-radius: 8px;
    padding: 15px;
}

.logos-wide p {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.logos-wide img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: 0 15px;
    mix-blend-mode: multiply;
}

.mobile-only { display: none; }

/* MOBILE SLIDER STYLES */
@media (max-width: 768px) {
    .desktop-only { display: none; }
    .mobile-only { display: block; }

    .logos-mobile-container {
        overflow: hidden;
        background: #f4f4f4;
        padding: 20px 0;
        border-radius: 8px;
        position: relative;
    }

    .logos-slider {
        display: flex; /* Spremenjeno iz inline-flex */
        width: max-content;
        animation: slide-left 50s linear infinite;
    }

    .logos-slide {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #f4f4f4;
    }

    .logos-slide img {
        height: 50px;
        width: auto;
        flex-shrink: 0; /* PREPREČI PREKRIVANJE */
        margin: 0 25px;
        mix-blend-mode: multiply;
        object-fit: contain;
    }

    @keyframes slide-left {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }
}

/* CONTACT FORM */

/* Širina in postavitev za wrapper */
#custom-contact-form-wrapper {
    display: flex;
    justify-content: space-between;  /* Razporeditev v dva stolpca */
    gap: 0;  /* Odstranimo razdaljo med stolpci */
    max-width: 100%;
    margin: 30px auto;
    border: 2px solid #3871c2;  /* Enak rob za oba div-a */
    border-radius: 8px;
}

/* Div za kontaktne podatke (levo) */
#contact-info {
    width: 35%;  /* 50% širine za kontaktne podatke */
    padding: 20px;
    background-color: #3871c2;  /* Modra barva ozadja */
    background: linear-gradient(135deg, #3871c2 0%, #0056b3 100%);
    background: linear-gradient(135deg, #3871c2 0%, #3498db 100%);
    color: #fff;  /* Bela barva besedila */
    border-radius: 0;  /* Zaobljeni robovi samo z leve strani */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
 
    /* Flexbox za centriranje vsebine */
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Vertikalno centriranje */
    align-items: center;  /* Horizontalno centriranje */
    text-align: center;  /* Besedilo bo centrirano */
}

#contact-info h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #fff;
}

#contact-info p {
    font-size: 16px;
    margin: 10px 0;
}

/* Div za obrazec (desno) */
#custom-contact-form {
    width: 65%;  /* 50% širine za obrazec */
    padding: 50px 50px 20px 50px;
    background-color: #fff;
    border-radius: 0 8px 8px 0;  /* Zaobljeni robovi samo z desne strani */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}
#top #custom-contact-form h2 {
    font-size: 24px;
    line-height: 1.3em;
    margin: 0 0 15px 0;
    
  font-weight: 600;
  color: var(--color1);
  text-shadow: 1px 1px #ffffff;
  text-transform: none;
  letter-spacing: 0px;
  
}

/* Postavitev polj v enem row-u (vrstici) */
#custom-contact-form .form-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
#custom-contact-form  p {
    margin-bottom: 0;
}

#custom-contact-form .form-row label {
    font-size: 13px;
    margin-bottom: 5px;
}

#custom-contact-form .form-row input[type="text"],
#custom-contact-form .form-row input[type="email"] {
    width: 100%;  /* Vsako polje zavzame približno polovico širine */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#custom-contact-form .form-row input[type="text"]:focus,
#custom-contact-form .form-row input[type="email"]:focus {
    border-color: #3871c2;
    outline: none;
}

/* Textarea polje za poruku */
#custom-contact-form textarea {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    max-height: 130px;
    height: 130px;
}

#custom-contact-form textarea:focus {
    border-color: #3871c2;
    outline: none;
}

/* Gumb za pošiljanje */
#custom-contact-form input[type="submit"] {
    background-color: #3871c2;
    color: #fff;
    font-size: 16px;
    padding: 10px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 50%;
    margin-top: 10px;
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(135deg, #3871c2 0%, #3498db 100%);
    margin: 15px auto 0 auto;
}

#custom-contact-form input[type="submit"]:hover {
    background: #2f5a94;
    background: linear-gradient(135deg, #3871c2 100%, #3498db 100%);
}

/* Stil za napake */
#custom-contact-form .wpcf7-not-valid-tip {
    color: #ff0000;
    font-size: 12px;
    margin-bottom: 10px;
}

/* Animacija za prehod */
#custom-contact-form {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
    background: linear-gradient(135deg, #f8f8f8 0%, #e5e5e5 100%);
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
#custom-contact-form .wpcf7-spinner {
    margin: 5px auto 0 auto;
}
/* Mobilna optimizacija: Ko je širina zaslona manjša od 768px (mobilni telefoni) */
@media (max-width: 768px) {
    #custom-contact-form-wrapper {
        flex-direction: column;  /* Postavitev v eno vrstico */
    }

    #contact-info,
    #custom-contact-form {
        width: 100%;  /* Oba elementa bosta zavzela 100% širine */
        border-radius: 8px;
    }

    #custom-contact-form {
        padding: 20px;
    }

    /* Manjše velikosti besedila za mobilne naprave */
    #contact-info h3 {
        font-size: 16px;
    }

    #contact-info p {
        font-size: 14px;
    }
}

/* ----------------- */
#contact-info > p span {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 10px;
    display: block;
}
#contact-info > p span + br {
  display: none;
}
#contact-info img {
    max-width: 150px;
    margin-bottom: 0px;
}
#contact-info .contacts {
  margin-top: 20px;
}
#contact-info .contacts a {
    color: #ffffff;
    
}
#contact-info .contacts p strong,
#contact-info .links p strong {
  display: none;
}
#contact-info .contacts p {
    margin-bottom: 20px;
}
#contact-info .contacts p span::after,
#contact-info .links p span::after {
  display: inline-block;
  width: 20px;
  margin-right: 5px;
  text-align: center;
  vertical-align: middle;
  font-family: 'entypo-fontello';
  color: #ffffff;
  font-size: 22px;
}
#contact-info .contacts p.whatsapp {
    display: none;
}
#contact-info .contacts p.phone span::after {
  content: '\E854';
  transform: scaleX(-1);
}
#contact-info .contacts p.whatsapp span::after {
  content: '\F232';
  margin-top: -3px;
}
#contact-info .contacts p.mobile span::after {
  content: '\E8ac';
}
#contact-info .contacts p.email span::after {
  content: '\E805';  
}
#contact-info .contacts p.web span::after {
  content: '\E8ad';  
}

#contact-info .contacts .cta-button {
  display: inline-block;
  padding: 10px 20px;
  background: white;
  color: #007bff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: transform 0.2s;
  margin-top: 15px;
}

#contact-info .contacts .cta-button:hover {
  transform: scale(1.05);
  background: #f8f9fa;
}
@media screen and (max-width: 767px) {
    #contact-info {
        border-radius: 0;
    }
    #contact-info > p {
        display: none;
    }   
}
@media screen and (max-width: 630px) {
    #custom-contact-form .form-row {
        display: block;
    }
    #custom-contact-form .form-row > p {
        width: 100%;
        display: block;
    }
}

/* FAQ */
#top #faq h3 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 0;
}
  .wp-custom-faq {
    max-width: 800px;
    margin: 1rem auto 2rem auto;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }
  .wp-custom-faq details {
    border-bottom: 1px solid #e1e1e1;
  }
  .wp-custom-faq details:last-child {
    border-bottom: none;
  }
  .wp-custom-faq summary {
    padding: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    transition: background 0.3s ease;
  }
  .wp-custom-faq summary:hover {
    background-color: #f1f1f1;
  }
  .wp-custom-faq summary::after {
    content: '+';
    font-size: 1.4rem;
    color: #007cba; /* WordPress modra barva */
  }
  .wp-custom-faq details[open] summary::after {
    content: '−';
  }
  .wp-custom-faq .faq-content {
    padding: 1rem 1.2rem;
    line-height: 1.6;
    color: #444;
    border-top: 1px solid #eee;
  }
  /* Preprečevanje privzetih puščic v Safariju */
  .wp-custom-faq summary::-webkit-details-marker {
    display: none;
  }