/*
Theme Name: Hello Elementor Child
Theme URI: guardial.io
Template: hello-elementor
Author: Guardial
Author URI: guardial.io
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1776446538
Updated: 2026-04-17 17:22:18

*/

.footer > .e-con-inner {
border-top: 2px solid var(--e-global-color-accent);
border-bottom: 2px solid var(--e-global-color-accent);
margin-left: auto;
margin-right: auto;
}
/* --- TESTIMONIAL CAROUSEL - FINAL REFINEMENT --- */

/* 1. Odvajanje celog vidžeta od sadržaja ispod (povećano za 20px) */
.elementor-widget-testimonial-carousel.modified-carousel {
    margin-bottom: 180px !important; 
}

/* 2. Kontejner sa prostorom za strelice */
.elementor-widget-testimonial-carousel.modified-carousel .elementor-widget-container {
    padding-bottom: 120px !important;
    overflow: visible !important;
}

/* 3. Sakrivanje default smeća */
.elementor-widget-testimonial-carousel.modified-carousel .swiper-pagination,
.elementor-widget-testimonial-carousel.modified-carousel .elementor-swiper-button svg {
    display: none !important;
}

/* 4. Krugovi za strelice - ODVOJENI DODATNO (bottom: -100px) */
.elementor-widget-testimonial-carousel.modified-carousel .elementor-swiper-button {
    position: absolute !important;
    top: auto !important;
    bottom: -100px !important; /* Ovde smo ih odaljili od kartica */
    width: 50px !important;
    height: 50px !important;
    border: 1px solid #333 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    transition: 0.3s !important;
    cursor: pointer !important;
}

/* 5. Ubacivanje tvojih SVG ikonca preko maske */
.elementor-widget-testimonial-carousel.modified-carousel .elementor-swiper-button::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background-color: #333 !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

/* Putanje za tvoje SVG-ove */
.elementor-widget-testimonial-carousel.modified-carousel .elementor-swiper-button-prev::before {
    -webkit-mask-image: url('https://previewcollectionteam.com/wp-content/uploads/2026/04/arrow_back.svg') !important;
    mask-image: url('https://previewcollectionteam.com/wp-content/uploads/2026/04/arrow_back.svg') !important;
}

.elementor-widget-testimonial-carousel.modified-carousel .elementor-swiper-button-next::before {
    -webkit-mask-image: url('https://previewcollectionteam.com/wp-content/uploads/2026/04/arrow_forward.svg') !important;
    mask-image: url('https://previewcollectionteam.com/wp-content/uploads/2026/04/arrow_forward.svg') !important;
}

/* 6. Centriranje strelica u sredinu */
.elementor-widget-testimonial-carousel.modified-carousel .elementor-swiper-button-prev {
    left: calc(50% - 60px) !important;
    right: auto !important;
}

.elementor-widget-testimonial-carousel.modified-carousel .elementor-swiper-button-next {
    left: calc(50% + 10px) !important;
    right: auto !important;
}

/* 7. Hover efekat */
.elementor-widget-testimonial-carousel.modified-carousel .elementor-swiper-button:hover {
    background-color: #f2e8d5 !important;
    border-color: #d4b27a !important;
}

.elementor-widget-testimonial-carousel.modified-carousel .elementor-swiper-button:hover::before {
    background-color: #d4b27a !important;
}

/* 1. Sakrivanje dugmeta - precizniji selektor */
.custom-product-grid ul.products li.product .add_to_cart_button {
    display: none !important;
}

/* 2. Reorder elemenata */

/* Postavljamo flex na link wrapper */
.custom-product-grid ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
}

/* Slika - ide na vrh */
.custom-product-grid ul.products li.product a.woocommerce-LoopProduct-link img {
    order: 1 !important;
    margin-bottom: 15px !important;
}

/* Cena - ide u sredinu (iznad naslova) */
.custom-product-grid ul.products li.product a.woocommerce-LoopProduct-link .price {
    order: 2 !important;
    display: block !important;
    margin-bottom: 5px !important;
}

/* Naslov - ide na dno */
.custom-product-grid ul.products li.product a.woocommerce-LoopProduct-link .woocommerce-loop-product__title {
    order: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 1. Reset kontejnera - pravimo ga da bude "vazdušni jastuk" preko celog ekrana */
.mobile-menu-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Reset samog Menu Vidžeta */
.mobile-menu-wrapper .elementor-widget-n-menu,
.mobile-menu-wrapper .elementor-widget-wordpress-menu {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* 3. Gađamo listu i linkove - ovde ih silom centriramo */
.mobile-menu-wrapper ul.elementor-nav-menu,
.mobile-menu-wrapper .elementor-nav-menu--main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 4. Sređujemo izgled teksta da ne bude "uzas" */
.mobile-menu-wrapper .elementor-item {
    text-align: center !important;
    font-size: 1.8 rem !important; /* Podesi veličinu po želji */
    line-height: 1.2 !important;
    padding: 20px 0 !important;
    width: auto !important;
    display: block !important;
    white-space: nowrap !important; /* Sprečava da "Property Search" ide u dva reda */
}

/* 5. Ubijamo taj hover box i ostala sranja */
.mobile-menu-wrapper .elementor-item:hover,
.mobile-menu-wrapper .elementor-item:focus,
.mobile-menu-wrapper .elementor-item.elementor-item-active {
    background-color: transparent !important;
    color: #B89664 !important; /* Zlatna boja za real estate */
}

@media (min-width: 768px) and (max-width: 1024px) {
    
    /* 1. Centriranje kontejnera */
    .mobile-menu-wrapper {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100vh !important;
        padding: 0 10% !important; /* Dajemo mu malo vazduha sa strana */
    }

    /* 2. Menu Vidžet */
    .mobile-menu-wrapper .elementor-nav-menu--main {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Linkovi - Smanjen font i bolji razmak */
    .mobile-menu-wrapper .elementor-item {
        text-align: center !important;
        /* Koristimo 4vw da bi se font skalirao sa ekranom, ali limitiramo ga */
        font-size: clamp(24px, 4vw, 36px) !important; 
        line-height: 1.3 !important;
        padding: 15px 0 !important;
        letter-spacing: 3px !important;
        font-weight: 300 !important; /* Tanji font izgleda skuplje */
        text-transform: uppercase !important;
        white-space: normal !important; /* Dozvoli prelom ako je baš mali tablet */
    }

    /* 4. Hover - diskretno zlato */
    .mobile-menu-wrapper .elementor-item:hover {
        color: #B89664 !important;
        letter-spacing: 5px !important;
        transition: all 0.4s ease !important;
    }
}
/* Osnovno stanje - gađamo link unutar diva sa klasom slistings */
.slistings .elementor-button {
    transition: all 0.3s ease-in-out !important;
    border: 2px solid transparent !important; /* Rezervišeš prostor */
}

/* Hover stanje */
.slistings .elementor-button:hover {
    background-color: transparent !important; /* Da bi postalo "ghost" dugme */
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

/* Fix za ikonicu (ako i ona treba da pobeli) */
.slistings .elementor-button:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}
/* Osnovno stanje za crno dugme */
#buttonblack {
    transition: all 0.3s ease-in-out !important;
    border: 2px solid transparent !important; /* Rezervišeš prostor da ne trzme */
}

/* Hover efekat - beli border */
#buttonblack:hover {
    border-color: #ffffff !important;
   /* Pravi ga u "ghost" dugme */
    color: #ffffff !important;
}

/* 1. Boja za Phone: i Email: */
.custom-contact-section .gold-label {
    color: #DBB877 !important;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
}

/* 2. Boja za same podatke (ubijamo pink linkove) */
.custom-contact-section .contact-value {
    color: #333333 !important; /* Ovde stavi crnu ili tamno sivu koju koristiš na sajtu */
    text-decoration: none !important;
    transition: 0.3s;
}

/* 3. Hover efekat za podatke - čisto da se zna da su linkovi */
.custom-contact-section .contact-value:hover {
    color: #DBB877 !important;
    text-decoration: underline !important;
}

@media (max-width: 767px) {
    /* 1. Glavni omotač menija - pretvaramo ga u stub */
    .elementor-widget-n-menu.fmenu .e-n-menu-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important; /* Razmak između linkova u footeru */
        width: 100% !important;
        padding: 0 !important;
    }

    /* 2. Svaka pojedinačna stavka menija */
    .fmenu .e-n-menu-item {
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* 3. Sam kontejner linka (da centriramo tekst unutra) */
    .fmenu .e-n-menu-title-container {
        justify-content: center !important;
        padding: 5px 0 !important;
        display: flex !important;
    }

    /* 4. Tekst linka - osiguravamo da nema čudnih margina */
    .fmenu .e-n-menu-title-text {
        text-align: center !important;
        width: auto !important;
    }

    /* 5. Fix za Active state (ako želiš da neutrališeš onu zlatnu boju samo ovde) */
    .fmenu .e-n-menu-title.e-current .e-n-menu-title-text {
        color: inherit !important; /* Povlači boju iz Normal stanja */
    }
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, 
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: #000 !important;
}
/* Primer za Elementor slajder - fiksiraj odnos stranica */
.elementor-swiper, .swiper-container {
    aspect-ratio: 16 / 9; /* Ili odnos tvojih slika, npr. 4/3 */
    overflow: hidden;
}

/* Sprečava skakanje sadržaja dok se Swiper ne inicijalizuje */
.elementor-widget-image-carousel .swiper-wrapper {
    display: flex;
}

/* Targets all links within your sub-menus */
.sub-menu .elementor-sub-item {
    text-transform: uppercase;
}

/* ========================================================
   LAPTOP FIX (1024px to 1550px) - TIGHTER & CLEANER
   ======================================================== */
@media (max-width: 1550px) and (min-width: 1024px) {

    /* 1. MAIN CONTAINER: Push edges inward to bring menus closer to the center */
    #header_pop, 
    .main_h.e-parent {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        padding-left: 4vw !important; /* Increased to push left menu inward */
        padding-right: 4vw !important; /* Increased to push right menu inward */
    }

    /* 2. LEFT & RIGHT COLUMNS: Reduce gaps between different widgets */
    .elementor-element-e3eca04, /* Left column */
    .elementor-element-8648ec1  /* Right column */ {
        width: auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important; /* Reduced from 15px */
    }

    /* 3. SOCIAL ICONS: Tighter grouping */
    .elementor-element-139dd93 .elementor-social-icons-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important; /* Reduced gap */
    }
    .elementor-element-139dd93 .elementor-grid-item {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* 4. MENU NAVIGATION: Smaller font, less space between links */
    .main_h .elementor-nav-menu .elementor-item {
        padding-left: 7px !important; /* Tighter padding */
        padding-right: 7px !important;
        font-size: 13px !important; /* Crisper font size for laptops */
        white-space: nowrap !important; 
    }
	
	.main_h .sub-menu .menu-item .elementor-sub-item {
		font-size: 13px;
	}

    /* 5. BUTTON: More compact */
    .main_h .elementor-button {
        padding: 8px 15px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* 6. LOGO: Significantly decreased size for better proportion */
    .main_h img {
        max-height: 65px !important; /* Drastically reduced from 90px */
        width: auto !important;
    }
    
    /* Shrink even further when scrolling (sticky mode) */
    .black-mode.main_h img {
        max-height: 50px !important;
    }
}

/* ========================================================
   LAPTOP FIX (1024px do 1550px) - INNER HEADER (.inner_h)
   ======================================================== */
@media (max-width: 1550px) and (min-width: 1024px) {

    /* 1. GLAVNI KONTEJNER: Skupljanje ivica ka centru i zabrana preloma */
    .inner_h.e-parent {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        padding-left: 4vw !important; 
        padding-right: 4vw !important; 
    }

    /* 2. LEVA I DESNA KOLONA: Zadržavanje u jednom redu, manji razmak */
    .elementor-element-9634456, /* Leva kolona (Ikonice + Meni 1) */
    .elementor-element-6038e47  /* Desna kolona (Meni 2 + Dugme) */ {
        width: auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important; 
    }

    /* 3. SOCIJALNE IKONICE: U liniji, bez Grid pucanja */
    .elementor-element-29300c4 .elementor-social-icons-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important; 
    }
    .elementor-element-29300c4 .elementor-grid-item {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* 4. MENI NAVIGACIJA: Tanji razmaci i manji font */
    .inner_h .elementor-nav-menu .elementor-item {
        padding-left: 7px !important; 
        padding-right: 7px !important;
        font-size: 13px !important; 
        white-space: nowrap !important; 
    }

    /* 5. DUGME: Kompaktnije */
    .inner_h .elementor-button {
        padding: 8px 15px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* 6. LOGO: Značajno smanjen za bolji balans na laptopu */
    .inner_h img {
        max-height: 65px !important; 
        width: auto !important;
    }
    
    /* Dodatno smanjivanje kada se skrola (is-shrunk stanje iz tvog JS-a) */
    .inner_h.is-shrunk img {
        max-height: 45px !important;
    }
}

/*********/

header .main_h .elementor-item {
	padding: 13px 10px !important;
	font-size: 15px !important;
}

.elementor-widget-social-icons .elementor-grid {
	display: flex;
	align-items: center;
}