/*
 Theme Name:     Vogauto
 Theme URI:      https://www.vogauto.ba/
 Description:    Katapult Starter Kit   
 Author:         Katapult
 Author URI:     https://www.kkk.ba
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

body {
background-color: #121317;
	}

#main-content {
background-color: #121317;
	}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes display {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

.et_pb_row {
  animation: fadeIn 0.3s ease-in-out;
}

.et_pb_section {
background-color: #121317;
	}

.head-lang-phone {
  display:flex;
  align-items:center;
  padding: 2px 10px;
  justify-content: space-between;
}
.preheader_cont {
padding:0px!important;
}	
.contact-phone-header {
	display:flex;
	align-items: center;
	}

.preheader-vog {
	line-height: 1.4;
    color: #121317;
    font-weight: 600;

	font-size:0.8rem;
}

.preheader-vog.mob {
	line-height: 1.4;
    color: #121317;
    font-weight: 600;
	font-size:0.7rem;
}

#head_languages {
  display:flex;
  align-items:center;
  padding: 2px 20px;
}

.pre-head-col {
  margin-bottom:0px!important;
  padding-top:2px;

}

.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li  {
  margin-top:0px!important;
}

.preheader_cont .et_pb_menu--without-logo.et_pb_menu__menu > nav > ul > li > a {
  font-size:0.7rem!important;;
}  

.et_pb_contact p input, .et_pb_contact p textarea {
background-color: #121317;
}

.et_pb_toggle_close {
    background-color: #121317;
    padding: 20px;
}

p, h1, h2, h3, h4, h5, td, a, input  {
  font-family: Inter;
  color:#fff;
  }
span  {
  font-family: Inter;
  }
p  {
  opacity:0.9;
  }

h2 {
font-size:2.2rem;
font-weight:800;
	}

h3 {
font-size:1.6rem;
font-weight:800;
margin-bottom:20px;
	}
h4 {
font-size:1.2rem;
font-weight:800;
	}

h5 {
font-size:1rem;
font-weight:800;
	}

h6 {
font-size:0.9rem;
font-weight:800;
	}

span {
font-size:0.9rem;
font-weight:400;
	}

.splide__arrow {
background:none;
width: 1em;
	}

.splide__arrow svg {
filL: #FFC700;
	}

.splide__arrow--prev {
left: -1em;
	}

.splide__arrow--next {
right: -1em;
	}

.vog-button {
    display: block;
    width: 100%;
    padding: 10px 20px!important;
    text-align: center;
    background-color: #FFC700;
    color: #1C1D22;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  	font-family: "Inter";
  	font-weight:600;
  	font-size: 1rem;
}

.vog-button:hover {
    background-color: #F26119!important;
}

.vog-divider {
  border-bottom: 2px solid #FFC700;
  max-width:50px;
  margin-top:10px;
  }





#head-vogauto, .head-bb {
border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.head-bb {
	width:100%;
	max-width:100%;
	padding-top:0px;
	padding-bottom:0px;
	display: flex;
	align-items: center;
	}
	

#head-vog-bck-section {
background-color:#121317;
min-height: 94px!important;
margin:0px!important;
padding:0px!important;
}

#headvog-row {
width: 95%!important;
padding-top:5px!important;
padding-bottom:0px!important;
padding-left:0px!important;
padding-right:0px!important;
margin-top:0px!important;
margin-bottom:0px!important;	
max-width: 1160px!important;
margin:auto!important;
animation: display 0.1s ease-in-out;
	
}
.vog-mobile-header-col-1 {
	margin-top:auto;
margin-bottom:auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	}

.slide-in-open {
  width:40px!important;
  padding-right:20px;
  }
#head-vogauto {
  padding:0px!important;
  margin:0px!important;
background-color:#121317;
}

#vogimglogo img, .et_pb_menu__logo img {
height:40px!important;
width:160px!important;
}

.pa-vertical-menu .et-menu > li {
	padding-left: 0px;
	padding-right: 0px;
}
/*make the menu items fullwidth and add space between them*/
#mobile-header .et_pb_menu__menu nav ul li {
	display: block;
	width: 100%;

  border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

.et_pb_menu_1_tb_header.et_pb_menu ul li a {
  	margin: 14px 0!important;
}

#mobile-header .et_pb_menu__menu nav ul li {
  margin: 0px 0;
  margin-bottom: 30px;
}

.slide-in-menu .et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a {
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  padding: 13px 0px;
  margin-bottom: 18px;
}

.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a {
	padding-bottom:0px!important;
}
.slide-in-menu .et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li > a::after {
    content: "\35";
    font-family: "ETmodules";
    margin-right: 2px;
	color: #FFC700;
}

.et_pb_menu .et-menu {
    margin-left: 0px;
    margin-right: 0px;
}

@media (max-width: 980px) {
.et_pb_menu--style-left_aligned .et_pb_menu__wrap {
justify-content: flex-start;
} }

ul#menu-language-switcher-mobile.et-menu.nav  {
flex-flow: row;
display: inline-flex;
column-gap: 15px;  
}

.menu-item-1149 img {
  width:20px!important;
  height:20px!important;
  }

ul#menu-language-switcher-mobile.et-menu.nav img {
  width:32px!important;
  height:32px!important;
  }

/*animation for header menu items */
#head-vogauto-menu .et-menu-nav .et-menu.nav.downwards > li {
    position: relative;
    display: inline-block;
    margin-right: 20px; /* Adjust spacing between menu items */
    padding-bottom: 5px;
	}

/* Styles for the underline */
#head-vogauto-menu .et-menu-nav .et-menu.nav.downwards > li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 11px;
    width: 0;
  	max-width: calc(100% - 22px);
    height: 2px;
    background-color: transparent; /* Initial color for the underline */
    transition: width 0.3s ease; /* Animation effect */
}

/* Styles for active menu item */
#head-vogauto-menu .et-menu-nav .et-menu.nav.downwards > li.current-menu-item::after {
    width: 100%;
    background-color: #FFC700; /* Color for active item underline */
}

/* Styles for hover effect */
#head-vogauto-menu .et-menu-nav .et-menu.nav.downwards > li:hover::after {
    width: 100%;
    background-color: #fff; /* Color for hover item underline */
}

#slide-in-open{
cursor: pointer;
}
  
.line{
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #FFC700;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.line-2 {
top: 8px;
}

.line-3 {
top: 16px;
}
  
#slide-in-open.open .line-1 {
top: 8px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

#slide-in-open.open .line-2 {
display: none;
}

#slide-in-open.open .line-3 {
top: 8px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
  
.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}
  
.slide-in-menu-container {
-webkit-transition: all 0.3s ease !important;
-moz-transition: all 0.3s ease !important;
-o-transition: all 0.3s ease !important;
-ms-transition: all 0.3s ease !important;
transition: all 0.3s ease !important;
}

@media (min-width: 981px) { #mobile-header-vog {
	
	display:none!important;
	}}

@media (max-width: 980px) { #head-vogauto, head-vog-bck-section {
	display:none!important;
	}}

#mobile-header-vog {
	padding-top:0px;
	padding-bottom:0px;
	position: fixed!important;
    top: 0px;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

#slide-in-open {
    width: 60px;
    padding: 15px 20px 25px 0px;
}
#mobile-header { 
	padding-left:15px;
	padding-right:15px;
	}

.et_pb_image_0_tb_header {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    text-align: left;
    margin-left: 0;
}

.et_pb_menu .et_pb_menu__menu, .et_pb_menu .et_pb_menu__menu>nav, .et_pb_menu .et_pb_menu__menu>nav>ul {
	width:100%!important;
	}

.et_pb_menu_0_tb_footer.et_pb_menu .et-menu-nav li a {
	padding-bottom: 10px !important;
    padding-top: 0px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

.et_pb_menu_0_tb_footer.et_pb_menu .et-menu-nav li:last-child a {
 border-bottom: none;
	}

@media (min-width: 981px)  {
.et_pb_row .et_pb_column.et-last-child, .et_pb_row .et_pb_column:last-child, .et_pb_row_inner .et_pb_column.et-last-child, .et_pb_row_inner .et_pb_column:last-child {
    margin-right: 0!important;
	} }

body {
    overflow-x: hidden;
    word-wrap: break-word;
    touch-action: manipulation;
    scrollbar-gutter: stable;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    -webkit-user-drag: none;
    -ms-content-zooming: none;
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

* {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;	
		}

.custom-post-grid {
    display: flex;
    flex-wrap: wrap;
}

.grid-item {
    width: calc(100% / 3); /* 3 columns on desktop */
}
.grid-inner {
    	margin: 10px;
  		    padding: 10px;
    box-sizing: border-box;
    background: #2e3038;
  	border-radius:10px;
  	transition: transform 0.3s ease-in-out;
}
  
.grid-inner:hover {
    transform: translateY(-5px); /* Move grid item upwards on hover */
}  
  
@media screen and (max-width: 992px) {
    .grid-item {
        width: calc(100% / 2); /* 2 columns on tablet */
    }
}

@media screen and (max-width: 576px) {
    .grid-item {
        width: 100%; /* 1 column on mobile */
    }
}
.pozadina-container {
    height: 200px;
    width: 100%;
    overflow: hidden; /* Ensure background image is contained */
    margin-bottom: 18px;
  	border-radius:5px;  
}
  
.pozadina {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out; /* Transition for hover animation */
}  

.grid-inner:hover .pozadina {
    transform: scale(1.1); /* Zoom in image on hover */
}
.naziv {
    margin-bottom: 10px;
  	display: flex;
  	justify-content: space-between;
}
  
.naziv-kolona-2 {
    padding: 17px 10px;
    background-color: #F26119;
    border-radius: 5px;
    display: flex;
    align-items: center;
    height: 30px;
    margin-top: -3px;
}
  
.naziv-kolona-2 span {
    font-size: 0.9rem;
  	font-weight: 600;
  	color:#fff!important;
}
  
.karakteristike_vozila {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 10px;
  	padding: 0 10px;
    color: #fff;
    justify-content: space-between;
}


.vog-button {
    display: block;
    width: 100%;
    padding: 10px 20px;
    text-align: center;
    background-color: #FFC700;
    color: #1C1D22;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  	font-family: "Inter";
  	font-weight:600;
  	font-size: 1rem;
}

.vog-button:hover {
    background-color: #F26119;
}
.naziv {
border-bottom: 1px solid rgba(255, 255, 255, .1);  
}  
  
.iconify-icon {
width: 16px;
opacity:0.6;
margin-right:5px;
}  
  
.karakteristika {
display: flex;
align-items: center;
font-weight: 600 !important;
}  

  
.tooltip {
    position: absolute;
    background-color: #2e3038;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 4px;
    padding: 10px;
    z-index: 9999;
  	max-width:160px;
  }
	

.vog-button {
    display: block;
    width: 100%;
    padding: 10px 20px;
    text-align: center;
    background-color: #FFC700;
    color: #1C1D22;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  	font-family: "Inter";
  	font-weight:600;
  	font-size: 1rem;
}

.vog-button:hover {
    background-color: #F26119;
}

@media (max-width: 980px) {
	.pa-vertical-menu .et_pb_menu__menu {
		display: flex!important;
	}
	.pa-vertical-menu .et_mobile_nav_menu {
		display: none!important;
	}
}

.iti.iti--allow-dropdown.iti--separate-dial-code {
	position: relative;
}

.ikone-onama {
  width:28px;
  height:28px;
  color: #1C1D22;
}

.onama-icon-container {
  border-radius: 0 0 0 60px;
  background:#FFC700;
  position:absolute;
  top:0px;
  right:0px;
  padding: 15px 15px 25px 25px;
}

.naziv-kolona-2  {
	cursor: pointer;
	}

#kontakt-forma .et_pb_contact p input, #kontakt-forma .et_pb_contact p textarea {
	color:#fff!important;
	}

.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a {
	padding: 14px 0;
	}

.headline-form-c-vg {
	padding-top:10px!important;
	padding-bottom:0px!important;
	}

.broj-sjedista-istaknuto {
    position: relative;
    background: #F26119;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    top: -190px;
    max-width: 90px;
    left: 10px;
    cursor: default;
    text-align: center;
}