/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/
@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
/**@import url(css/font-awesome.min.css);**/
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
/**@import url(swiper.min.css);**/
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

@font-face {
font-family: "myFont";
src: url("../nulshock bd.otf");
}

@font-face {
    font-family: "myFont2";
    src: url("../Righteous-Regular.ttf");
}

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
    transition: all 0.3s ease-in-out;
    font-family: myFont;
    
}

html {
     scroll-behavior: smooth;
     overflow-x: hidden;
     height: 100%;
    
}

/* === KONAČNA ISPRAVKA ZA STICKY FOOTER === */
/* Zamenite vaš postojeći body stil ovim */
body {
      
     font-size: 14px;
     line-height: 1.80857;
     font-weight: normal;
     overflow-x: hidden;
     margin: 0;
     padding: 0;
     /* Dodata ispravna logika odavde */
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     
      
}
.content-wrap {
    flex: 1 0 auto;
}
.footer {
    flex-shrink: 0; /* Futer se ne smanjuje */
   
}
/* ======================================= */

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,h2,h3,h4,h5,h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {font-size: 24px}
h2 {font-size: 22px}
h3 {font-size: 18px}
h4 {font-size: 16px}
h5 {font-size: 14px}
h6 {font-size: 13px}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul, li, ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 20px;
     font-weight: 300;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

 :focus {
     outline: 0;
}

.paddind_bottom_0 {
     padding-bottom: 0 !important;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}



.navbar-form input {
     border: none !important;
}

.navbar-toggler-icon {
    border-radius: 10px;
    padding: 25px;
    margin: 20px;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     width: 100%;
}

.layout_padding {
     padding-top: 90px;
     padding-bottom: 0px;
}

.padding_0{
     padding: 0px;
}


.header_section {
    width: 100%;
    background-color: #000;
}
.logo {
    width: 18%;
}

.logo img {
    width: 150px;
}

.navbar {
    padding: 20px 30px;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding: 10px 25px;
    font-size: 18px;
}

.bg-light {
    position: relative;
    background-color: #000000 !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #fefeff;
    font-weight: 500;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #912b69;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: #912b69;
}


.header_section .navbar-nav .nav-link {
    color: #fefeff; /* Zadržavamo belu boju teksta */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); /* Dodajemo senku */
}


.header_section .logo img {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
}




/* Podešavanje pozicije slike u baneru */
.image_1 {
    width: 80%;         /* Zadržavamo širinu */
    padding-top: 100px;  /* Povećali smo sa 40px da bi slika bila niže */
    margin-left: auto;  /* Ovo centrira sliku horizontalno */
    margin-right: auto; /* Ovo centrira sliku horizontalno */
    display: block;     /* Osiguravamo ispravan prikaz za margine */
}

.video_text{
    padding-top: 150px;
    width: 100%;
    font-size: 50px;
    color: #fefeff;
    font-weight: 600;
    text-transform: uppercase;
}

.controller_text {
    width: 100%;
    font-size: 70px;
    color: #912b69;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 50px;
}

.banner_text {
    width: 100%;
    font-size: 22px;
    color: #fefeff;
    font-weight: 500;
    margin-left: 0px;
    padding-top: 5px;
    letter-spacing: 1.5px;
}

.shop_bt {
    width: 35%;
    font-size: 18px;
    text-align: center;
    background-color: #fcfcfd;
    color: #191919;
    border-left: 10px solid #912b69;
    border-radius: 30px;
    border-right: 10px solid #912b69;
    border-top: 4px solid #912b69;
    border-bottom: 4px solid #912b69;
    padding: 5px 0px;
    margin-top: 40px;
    margin-bottom: 100px;
}

.shop_bt a{
    color: #191919;
}

.shop_bt a:hover{
    color:  #912b69;
}

#my_slider a.carousel-control-prev {
    position: absolute;
    left: 15px;
    top: 85%; /* Promenjeno sa 100% */
}

#my_slider .carousel-control-prev, #my_slider .carousel-control-next {
    width: 65px;
    height: 50px;
    background:  #912b69;
    opacity: 1;
    font-size: 30px;
    color: #fff;
    border-radius: 100px;
}

#my_slider .carousel-control-prev:hover, #my_slider .carousel-control-next:hover, #my_slider .carousel-control-prev:focus, #my_slider .carousel-control-next:focus {
    background: black;
    color: #fff;
}

#my_slider a.carousel-control-next {
    position: absolute;
    left:100px;
    top: 85%;
}

.image_11 img {
    width: 100%;
    padding-top: 100px;
}

.image_4 img {
    margin-bottom: 130px;
    width: auto;
}

.about_section {
    width: 100%;
    max-width: 100%;
    min-height: 90vh;
    height: auto;
    padding: 50px 0;
    /* NOVO: Animacija pozadine sa gradijentima */
 background: black 100%;
    background-size: 200% 200%; /* Veća pozadina za animaciju */
    animation: gradientAnimation 10s ease infinite alternate; /* Animacija traje 10s, ponavlja se */

    background-position: center top;
   
    display: flex;
    align-items: center;

    margin-bottom: 31px;
    position: relative; 
}


.about_section .container {
    margin-top: 50px;
  width: 100%;
    box-shadow: 0 0 50px rgba(145, 43, 105, 0.5);
    border-radius: 25px;
    overflow: hidden;
    padding: 60px; /* Dodajte unutrašnji padding od 20px sa svih strana */
}

.about_section .row {
    display: flex;
    align-items: center; /* Vertikalno centriranje kolona unutar reda */
    justify-content: center; /* Horizontalno centriranje kolona ako ima viška prostora */
}

.image_22 img {
     max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    margin-top: 0;
    height: auto;
    display: block;
    /* NOVO: Dodajte tranziciju za glatke promene */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    /* NOVO: Početna senka za dubinu */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);

}

.image_22 img:hover {
    /* NOVO: Skaliranje pri prelasku mišem */
    transform: scale(1.03);
    /* NOVO: Intenzivnija senka pri prelasku mišem */
    box-shadow: 0 12px 35px rgba(145, 43, 105, 0.6);
}

.about_text {
    width: 100%;
    font-size: 45px;
    color: #ffffff; /* Vraćamo belu boju teksta */
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
    margin-top: 0;
    margin-bottom: 20px;
    /* Uklanjamo gradijent i srodna svojstva */
    /* background: linear-gradient(45deg, #912b69, #e065a3); */
    /* -webkit-background-clip: text; */
    /* background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    /* color: transparent; */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Možete zadržati diskretnu senku ili je ukloniti */
}

.lorem_text{
    width: 100%;
    font-size: 16px;
    color: #fefeff;
    margin: 0 0 15px 0; /* Margine za pasuse: gore, desno, dole, levo */
    text-align: left; /* Poravnavanje teksta levo */
    line-height: 1.6; /* Povećavamo razmak između redova za bolju čitljivost */
    max-width: 550px; /* Ograničavamo širinu teksta za bolju čitljivost */
       text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}




.product_section{
    width: 100%;
}

.product_section_2 {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 150px;
}

.product_text{
    width: 100%;
    font-size: 50px;
    color: #24292f;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.product_section {
    background-color: white;
    margin-bottom: 200px;
}

.long_text{
    width: 100%;
    font-size: 16px;
    color: #363636;
    margin-left: 0px;
    text-align: center;
}

.price_text {
    width: 100%;
    font-size: 30px;
    color: #912b69;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    padding-top: 40px;
}

.game_text {
    width: 100%;
    font-size: 30px;
    color: #2d343e;
    text-align: center;
}

.see_main{
     width: auto;
    margin: 0 auto;
    text-align: center;
    position: relative; /* Keep this to make z-index effective */
    z-index: 1001; /* Increase z-index significantly to put it above the waves */
    margin-top: 30px;
    margin-bottom: 50px;
}

.see_bt {
   /* Current properties that make it large: */
    /* width: 100%; <- This makes it take 100% of its parent (.see_main, which is 17% of page) */
    /* float: right; <- This might also contribute to stretching */

    /* Proposed changes: */
    width: 200px; /* Set a fixed width, adjust as needed (e.g., 180px, 220px) */
    max-width: 100%; /* Ensure it doesn't overflow its parent if parent is smaller */
    display: inline-block; /* Change to inline-block to allow width control and centering */
    float: none; /* Remove float to prevent layout issues */
    
    font-size: 18px;
    text-align: center;
    background-color: #fcfcfd;
    color: #191919;
    border-left: 10px solid #912b69;
    border-radius: 30px;
    border-right: 10px solid #912b69;
    border-top: 4px solid #912b69;
    border-bottom: 4px solid #912b69;
    padding: 5px 0px; /* This padding also affects overall size */
    margin-top: 40px; /* Keep consistent with existing margin-top */
    margin-bottom: 50px; /* Keep consistent spacing to the next section (Kontakt Forma) */
}

.see_bt a{
    color: #191919;
}

.see_bt a:hover{
    color: #912b69;
}

.video_section{
    width: 100%;
    min-height: 65vh;
    background-color:rgb(0, 0, 0);
    height: auto;
    padding: 100px;
}

.video_text_2{
    width: 100%;
    font-size: 50px;
    color: #912b69;
    font-weight: 600;
    text-transform: uppercase;
}

.controller_text_2 {
    width: 100%;
    font-size: 58px;
    color: #fefeff;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 50px;
}

.banner_text_2 {
    width: 100%;
    font-size: 16px;
    color: #fefeff;
    font-weight: 500;
    margin-left: 0px;
    padding-top: 50px;
}

/* Adjust the margin below the slider to control spacing to the next section */
#testimonial-slider {
    position: relative;
    height: auto; /* Let content define height */
    overflow: hidden;
    /* Reduce this margin-bottom as well if needed. */
    /* If the content within the slider is correctly contained by min-height of testimonial_section_2, */
    /* this margin can be reduced to create less gap before the "VIŠE" button. */
    margin-bottom: 30px; /* Adjusted from 50px */
}
.testimonial-item {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
}

.testimonial-item.active {
    opacity: 1;
    visibility: visible;
}

.testimonial_section{
   width: 100%;
    padding-top: 20px;
    min-height: 500px; /* **Crucial:** Ensure this value is large enough to contain the tallest testimonial card */
    position: relative; /* Necessary for absolute positioning of testimonial-item children */
    margin-bottom: 140px;
}

.testimonial_text{
    width: 100%;
    font-size: 46px;
    font-weight: bold;
    text-align: center;
    color: #191919;
    text-transform: uppercase;
}

.ipsum_text{
    width: 100%;
    font-size: 16px;
    color: #191919;
    text-align: center;
    margin-left: 0px;
}

/* Reduce the minimum height of the testimonial section's wrapper */
.testimonial_section_2 {
    width: 100%;
    padding-top: 50px;
    /* Adjust this value based on your actual content height. */
    /* Start by significantly reducing it from 550px, e.g., to 400px or 380px. */
    /* If the content still overlaps, increase it slightly. */
    min-height: 380px; /* Adjusted from 550px */
    position: relative; /* Crucial for absolute positioned children */
}

.box_main {
    width: 75%; /* Keep its defined width */
    margin: 0 auto; /* Keep it centered horizontally */
    text-align: left; /* Set default text alignment to left for content flow */
    border: 2px solid #424242;
    padding: 40px; /* Keep padding inside the box */
    border-radius: 20px;
    box-sizing: border-box; /* Crucial for consistent sizing with padding */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack content (quote icon, text, client info) vertically */
    align-items: flex-start; /* Align items to the start of the cross-axis (left) */
    justify-content: space-between; /* Distribute space vertically if needed */
    min-height: 380px; /* Ensure a minimum height for the card itself */
      margin-bottom: 20px; /* Keep a consistent bottom margin for the card itself */
}

.quote_icon{
     width: 100%; /* Take full width to allow text-align */
    text-align: left; /* Align quote icon to the left */
    margin-bottom: 20px; /* Space below the icon */
}

.dolor_text {
        width: 100%; /* Ensure text takes full available width */
    font-size: 16px;
    color: #191919;
    text-align: left; /* Align text to the left */
    margin: 0 0 20px 0; /* Standardize margins: top, right, bottom, left */
}

.client_main{
   width: 80%; /* Give it more room within the box_main */
    background-color: #912b69;
    height: auto;
    display: flex; /* Make it a flex container */
    flex-direction: row; /* Arrange items (image and text) horizontally */
    align-items: center; /* Vertically center items (image and text block) */
    justify-content: flex-start; /* Align items to the start (left) of the row */
    padding: 15px; /* Add padding inside the purple box */
    margin-top: 10px; /* Space from the testimonial text above */
    margin-bottom: 0; /* Remove bottom margin */
    border-radius: 10px;
    box-sizing: border-box; /* Include padding in sizing */
}

.client_left{
  flex-shrink: 0; /* Prevent this item from shrinking */
    margin-right: 15px; /* Space between image and text */
    /* Ensure no float or width: 100% here */
}

/* Client Right - Text container (Name and Title) */
.client_right {
    flex-grow: 1; /* Allow this div to take up remaining horizontal space */
    text-align: left; /* Align text to the left within this block */
    /* Ensure no width: 100% or padding-top here */
}

.images_5{
   width: 70px; /* Slightly smaller icon for better fit */
    height: 70px; /* Keep it square */
    overflow: hidden;
    border-radius: 50%; /* Make it circular */
    display: flex;
    justify-content: center;
    align-items: center
}


.images_5 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
    display: block;
}


.sandy_text {
    font-size: 18px; /* Adjusted size for clarity */
    color: #fefeff;
    margin-bottom: 2px; /* Small space between name and title */
    line-height: 1.2;
}
.sandy_text_1 {
    font-size: 16px; /* Adjusted size for clarity */
    color: #191919;
    margin: 0; /* Remove default margins */
    line-height: 1.2;
}
.contact_section{
    width: 100%;
    height: auto;
    padding-bottom: 90px;
    margin-bottom: 0;
    margin-left: 65px;
    margin-bottom:100x;
    
}

.image_6{
    width: 80%;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-30px);
	}
	100% {
		transform: translatey(0px);
	}
}

.email_box {
    width: 100%;
}

.email-bt {
    color: #000000;
    width: 100%;
    height: 55px;
    font-size: 18px;
    padding: 20px 20px 0px 0px;
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #888686;
}

.massage-bt {
    color: #000000;
    width: 100%;
    height: 80px;
    font-size: 18px;
    padding: 36px 20px 10px 0px;
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #888686;
}

.button1 {
    background: #912b69;
    border: none;
    color: #faf9f9;
    width: 160px;
    height: 58px;
    font-size: 24px;
    padding-top: 3px;
    border-radius: 30px;
    text-align: center;
    margin-top: 20px;
}

.button1:hover{
    background-color:black;
}

.footer {
    
    position: relative;
    width: 100%;
    background: #912b69;
    min-height: 100px;
    padding: 120px 50px 20px 50px;
    flex-shrink: 0; /* Dodajte ili proverite da li ovo postoji */
}

.social-icon, .menu {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;
}

.social-icon__item, .menu__item {
    list-style: none;
}

.social-icon__link {
    font-size: 2rem;
    color: #fff;
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
}

.social-icon__link:hover {
    transform: translateY(-10px);
    color: black;
}

.menu__link {
    font-size: 1.2rem;
    color: #fff;
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
    text-decoration: none;
    opacity: 0.75;
    font-weight: 300;
}

.menu__link:hover {
    opacity: 1;
    color: black;
}

.footer p {
    color: #fff;
    margin: 15px 0 10px 0;
    font-size: 1rem;
    font-weight: 300;
}

.wave {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("../images/wave_transparent_912b69.png");
    background-size: 1000px 100px;
}

.wave#wave1 {
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animateWaves 4s linear infinite;
}

.wave#wave2 {
    z-index: 999;
    opacity: 0.5;
    bottom: 10px;
    animation: animate 4s linear infinite !important;
}

.wave#wave3 {
    z-index: 1000;
    opacity: 0.2;
    bottom: 15px;
    animation: animateWaves 3s linear infinite;
}

.wave#wave4 {
    z-index: 999;
    opacity: 0.7;
    bottom: 20px;
    animation: animate 3s linear infinite;
}

@keyframes animateWaves {
    0% {
      background-position-x: 1000px;
    }
    100% {
      background-position-x: 0px;
    }
}

@keyframes animate {
    0% {
      background-position-x: -1000px;
    }
    100% {
      background-position-x: 0px;
    }
}

.copyright_section{
    width: 100%;
    background-color: #912b69;
    height: auto;
}

.copyright_text{
    width: 100%;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    margin-left: 0px;
}

.copyright_text a{
    color: #ffffff;
}

.copyright_text a:hover{
    color: #000;
}

.forma1 {
    color: white;
    text-align: center;
}

.footer .copyright {
    font-size: 20px;
    text-align: center;
}

/* --- Konfiguracije Stranica --- */

.konfiguracija-card {
    background-color: #000000;
    border: 3px solid #e0e0e0;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.konfiguracija-card:hover {
    transform: translateY(-10px);
    box-shadow: 100 100px 125px rgba(145, 43, 105, 1);
}

.konfiguracija-card img {
    width: 100%;
    height: 400px;
    object-fit: contain;
      border-top: 50px solid #000000;
    background-color: #000;
}

.konfiguracija-body {
    padding: 25px 35px; /* Povećali smo levi i desni padding sa 25px na 35px */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: #000;
}

.konfiguracija-title {
    font-size: 20px;
    font-weight: bold;
    color: #1a1a1a;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: center;
    padding-top: 20px;
}

.konfiguracija-opis {
    font-size: 15px;
    color: #666;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.konfiguracija-spec {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.konfiguracija-spec li {
    font-size: 14px;
    color: #333;
    padding: 4px 0;
    border-bottom: 3px dashed #eee;
}

.konfiguracija-spec li:last-child {
    border-bottom: none;
}

.konfiguracija-cena {
    font-size: 32px;
    font-weight: bold;
    color: #912b69;
    margin-bottom: 20px;
    text-align: center;
}

.konfiguracija_bt {
    text-align: center;
}

.konfiguracija_bt a {
    display: inline-block;
    background-color: #912b69;
    color: #ffffff;
    padding: 12px 40px;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.konfiguracija_bt a:hover {
    background-color: #111111;
    color: #ffffff;
}

/* --- Media Queries --- */

@media (max-width: 767px) {
  .video_text {
    font-size: 38px;
  }
  .controller_text {
    font-size: 45px;
    line-height: 1.1;
  }
  .banner_text {
    font-size: 18px;
    padding-top: 20px;
  }
  .shop_bt {
    width: 50%;
    margin-top: 20px;
  }

  .about_section .col-md-6 {
    padding-bottom: 20px; /* Dodajte razmak na dnu kolone sa tekstom */
}
  .about_section .col-md-6:first-child,
  .contact_section .col-md-6:first-child {
    margin-bottom: 40px;
   
  }
  .social-icon__link {
    font-size: 2rem;
    margin: 0 15px;
  }
}



/* ================================================== */
/* STILOVI ZA FLIP KARTICE USLUGA                       */
/* ================================================== */

/* --- Glavni kontejner kartice --- */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 420px;
  perspective: 1000px;
  margin-bottom: 30px;
 
}

/* --- Unutrašnji deo koji se rotira --- */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}



/* --- Stilovi za prednju i zadnju stranu (zajednički) --- */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* --- Stil prednje strane --- */
.flip-card-front {
  background-color: #ffffff;
  border: 3px solid #f0f0f0;
  color: black;
}

/* --- Stil zadnje strane --- */
.flip-card-back {
  background-color: #912b69;
  color: white;
  transform: rotateY(180deg);
  padding: 20px;
}

/* --- Stilovi za sadržaj unutar kartica --- */
.usluga-icon svg {
  width: 80px;
  height: 80px;
  fill: #912b69;
  margin-bottom: 25px;
    fill: #ffffff !important;
}

.usluga-title-front {
  font-size: 20px;
  font-weight: bold;
  color: #1a1a1a;
  text-transform: uppercase;
  line-height: 1.3;
}

.usluga-title-back {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.flip-card-back .usluga-opis {
  font-size: 15px;
  color: #f0f0f0;
  margin: 0 0 15px 0;
  flex-grow: 1;
  line-height: 1.6;
}

.flip-card-back .usluga-cena {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 15px 0;
  padding: 10px 0;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.usluga-btn {
  background: #ffffff;
  color: #912b69;
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  transition: all 0.3s ease;
}

.usluga-btn:hover {
  background: #111111;
  color: #ffffff;
}

/*
   ==================================================
   Stilovi za FADE animaciju banera
   ==================================================
*/
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: 1s; /* Trajanje tranzicije */
    transition-property: opacity;
    -webkit-transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
    opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
    transform: none; /* Uklanja translate(x) da bi se izbeglo pomeranje */
    -webkit-transform: none;
}


/* 

/* Dodatno za manje ekrane (već postoji u responsive.css ali proveriti) */
@media (max-width: 767px) {
  .about_section .col-md-6:first-child {
    margin-bottom: 30px; /* Razmak između slike i teksta na manjim ekranima */
  }
  .about_text, .lorem_text {
    text-align: center; /* Centriraj tekst na manjim ekranima */
  }
  .shop_bt_2 {
    margin-left: auto; /* Centriraj dugme na manjim ekranima */
    margin-right: auto;
    display: block; /* Dugme neka bude blok element na manjim ekranima */
  }
  .image_22 {
      min-height: 250px; /* Smanjiti min-height slike na mobilnim uređajima */
  }
}
*/
/* Za strelice karusela */
#my_slider .carousel-control-prev, #my_slider .carousel-control-next {
    position: absolute; /* Ili relative, zavisi od dizajna */
    z-index: 10; /* Mora biti veći od pozadine (koja je default 0) */
}

/* Za tekst i sliku računara */
.video_text, .controller_text, .banner_text, .shop_bt, .image_1, .image_11 {
    position: relative; /* Potrebno za z-index */
    z-index: 5; /* Dovoljno da bude iznad pozadine */
}


/* ==================================================
STILOVI SAMO ZA POČETNU STRANICU (HOMEPAGE)
==================================================
*/

/* Prikazuje video samo na početnoj stranici */
.background-video {
  display: none; /* Sakriven po default-u */
}
body.homepage .background-video {
  display: block; /* Prikazan samo na stranici sa klasom .homepage */
}

/* Čini navigaciju providnom i lebdećom samo na početnoj */
body.homepage .header_section,
body.homepage .header_section .bg-light {
    background: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* Dodaje senku na linkove i logo samo na početnoj */
body.homepage .header_section .navbar-nav .nav-link {
    color: #fefeff;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}
body.homepage .header_section .logo img {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
}

/* Gura sadržaj banera na dole samo na početnoj */
body.homepage .banner_section {
    padding-top: 100px;
}

body.homepage .header_section .navbar-nav .nav-link:hover {
    color: #912b69; /* Vaša tematska ljubičasta boja */
    text-shadow: none; /* Uklanjamo senku na hover radi čistijeg izgleda boje */
}


/* Menja belu pozadinu sekcije sa uslugama u crnu */
.product_section {
    background-color: #000000;
}

/* Menja boju teksta u toj sekciji da bi bio čitljiv na crnoj pozadini */
.product_section .product_text,
.product_section .long_text {
    color: #ffffff;
    background-color: #000;
}

/* Menja boju span elementa u naslovu */
.product_section .product_text span {
    color: #912b69; /* Zadržavamo tematsku ljubičastu boju */
}


/* ================================================================
   FINALNI KOD ZA BANER SEKCIJU (VIDEO, ZATAMNJENJE, TALAS)
   ================================================================
*/

/* 1. Glavni kontejner za baner */
.banner_section {
    position: relative; /* Neophodno za pozicioniranje elemenata unutar njega */
    overflow: hidden;
    min-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000; /* Crna pozadina u slučaju da video ne radi */
}

/* === ZATAMNJENJE POZADINSKOG VIDEA === */
.banner_section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15); /* Kontroliše nivo zatamnjenja */
    z-index: 2; /* Postavlja sloj iznad videa (1) a ispod teksta (4) */
}

/* 2. Video u pozadini - KORISTIMO ID KOJI JE U VAŠEM HTML-u */
#banner-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Redosled: 1 (najdublje) */
}




/* 5. Sadržaj banera (tekst, dugmići) */
.banner_section .container {
    position: relative;
    z-index: 4; /* Redosled: 4 (na samom vrhu) */
}


/* ================================================================
   STILOVI ZA CRNU TEMU (DARK MODE)
   ================================================================
*/

/* --- 1. Globalna pozadina i boja teksta --- */
body {
    background-color: #111111; /* Tamna pozadina umesto bele */
    color: #f0f0f0; /* Svetla boja za osnovni tekst */
}

/* --- 2. Flip Kartice u "Naše Usluge" sekciji --- */
/* Menjamo belu prednju stranu kartice u tamnu */
.flip-card-front {
    background-color: #1e1e1e; /* Tamno siva pozadina za karticu */
    border: 1px solid #333333;
}

/* Menjamo boju naslova na prednjoj strani kartice */
.usluga-title-front {
    color: #ffffff;
}

/* Ikonica je već ljubičasta i izgleda dobro, nju ne diramo. */


/* --- 3. Sekcija "Utisci naših korisnika" --- */
/* Pošto ova sekcija nema svoju pozadinu, sada će se videti tamna pozadina body-ja.
   Potrebno je samo da promenimo boju teksta. */

.testimonial_text,
.ipsum_text,
.dolor_text {
    color: #ffffff; /* Sav tekst u ovoj sekciji postaje beo */
}

/* Malo posvetljujemo okvir oko testimonijala da se vidi */
.box_main {
    border: 2px solid #444444;
}


/* --- 4. Kontakt Forma --- */
/* Polja za unos činimo vidljivim na tamnoj pozadini */
.email-bt,
.massage-bt {
    color: #ffffff; /* Boja teksta koji se unosi */
    border-bottom: 1px solid #555555; /* Svetlija donja linija */
}

/* Stil za placeholder tekst (npr. "Ime", "Email") */
.email-bt::placeholder,
.massage-bt::placeholder {
    color: #888888;
}


/* --- 5. Stranica "Konfiguracije" (ako je koristite) --- */
/* Menjamo izgled kartica za pojedinačne konfiguracije */

.konfiguracija-card {
    background-color: #1e1e1e;
    border-color: #333333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

.konfiguracija-card:hover {
    box-shadow: 0 2px 25px rgba(145, 43, 105, 1); /* Zadržavamo glow efekat */
}

.konfiguracija-title {
    color: #ffffff;
}

.konfiguracija-opis {
    color: #cccccc;
}

.konfiguracija-spec li {
    color: #dddddd;
    border-bottom-color: #333333;
}


/* ================================================================
   NOVI STIL ZA KARTICE USLUGA (CRNA TEMA SA GLOW EFEKTOM)
   ================================================================
*/

/* 1. Unutrašnji deo kartice - dodajemo tranziciju za glow efekat */
.flip-card-inner {
    /* Dodajemo tranziciju za senku da se glatko menja zajedno sa rotacijom */
    transition: transform 0.8s, box-shadow 0.8s;
    transform-style: preserve-3d; /* Osigurava 3D efekat */
}


/* 2. Prednja strana kartice */
.flip-card-front {
    background-color: #000000; /* Crna pozadina */
    border: 4px solid rgba(255, 255, 255, 0.1); /* Suptilni beli okvir */
    
    /* Početni, diskretni "glow" efekat */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}


/* 3. Ikonica na prednjoj strani */
.usluga-icon svg {
    fill: #ffffff; /* Bela boja ikonice */
}


/* 4. Naslov na prednjoj strani */
.usluga-title-front {
    color: #ffffff; /* Bela boja naslova */
}


/* 5. Pojačavamo "glow" efekat na prelaz mišem (pre nego što se kartica okrene) */
.flip-card:hover .flip-card-inner {
    /* Postojeći transform ostaje, dodajemo jaču senku u tematskoj boji */
    transform: rotateY(180deg);
    box-shadow: 0 0 35px rgba(145, 43, 105, 0.6); /* Ljubičasti glow na hover */
}


/* === ISPRAVKA ZA BOJU IKONICE (forsiramo belu boju) === */

.usluga-icon svg,
.usluga-icon svg path {
    fill: #ffffff !important;
}

/* ================================================================
   UKLANJANJE RAZMAKA IZMEĐU SEKCIJA
   ================================================================
*/

/* 1. Uklanja razmak ispod "O nama" sekcije */
.about_section {
    margin-bottom: 100px !important;
    
}

/* 2. Uklanja razmak ispod "Kontakt" sekcije */
.contact_section {
    margin-bottom: 100px !important;


}


/* ================================================================
   ISPRAVKA RAZMAKA KOD FUTERA
   ================================================================
*/

html, body {
    background-color: #000000 !important;
}

/* ================================================================
   FINALNI KOD ZA BANER SEKCIJU (VIDEO, ZATAMNJENJE, TALAS)
   ================================================================
*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s, visibility 0.5s;
}
#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}
.loader-logo img {
    width: 150px;
    animation: pulse 1.5s infinite ease-in-out;
}
.loader-text {
    color: #912b69;
    margin-top: 20px;
    font-family: 'myFont2', sans-serif; /* Your custom font */
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}


/* --- Styles for Particles.js Background --- */

/* 1. Make the 'About' section a positioning context */
.about_section {
    position: relative;
    /* Add padding to give the content box some space from the edges */
    padding-top: 100px;
    padding-bottom: 100px;
}

/* 2. Style the particle canvas to act as a background */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Sits in the back */
}

/* 3. Style the content container to look like the image */
.about_section .container {
    position: relative;
    z-index: 2; /* IMPORTANT: Ensures this sits ON TOP of the particles */
    
    /* These new styles create the box from your screenshot */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    border: 2px solid #912b69; /* Your theme's purple border */
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 0 25px rgba(145, 43, 105, 0.4); /* A subtle purple glow */
}


/* --- Blinking Cursor Animation --- */
.blinking-cursor {
    font-weight: 100;
    font-size: inherit; /* Inherits the size of the h1 */
    color: #912b69; /* Your theme's purple color */
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { color: transparent; }
    50% { color: #912b69; }
}

/* --- FINAL Version: 3D Tilt with CONTOURED Border Glow --- */

/* Create the 3D space for the card */
.product_section_2 .col-lg-4 {
    perspective: 1000px;
}

.flip-card {
    position: relative; /* This is needed for the ::before element */
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
}

/* We use the ::before pseudo-element to create the glow.
   This allows the glow to follow the border-radius. */
.flip-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* This creates the glow effect */
    box-shadow: 0 0 30px rgba(145, 43, 105, 0.8);

    /* This is the KEY FIX: Match the border-radius of the card */
    border-radius: 15px; 
    
    /* Start with the glow hidden */
    opacity: 0;
    
    /* Make the fade-in/out smooth */
    transition: opacity 0.4s ease;
    
    /* Ensures we don't accidentally see this element */
    z-index: -1; 
}

/* Replace the old rule with this new one */
.flip-card.is-flipped::before {
    opacity: 1;
}


/* === KURSOR SAMO ZA RAČUNARE (UREĐAJI SA MIŠEM) === */

/* 1. Podrazumevano, svuda je prisutan standardni sistemski kursor. */
body, a, button {
    cursor: auto; /* Vraćamo podrazumevani kursor svuda */
}

/* 2. Naši div-ovi za kursor su sakriveni po defaultu na svim uređajima. */
.cursor-outer-v, .cursor-outer-h,
.cursor-inner-v, .cursor-inner-h {
    display: none;
}

/* 3. Media query koji se aktivira SAMO na uređajima koji imaju miš (hover i fini pointer). */
@media (hover: hover) and (pointer: fine) {
    
    /* Sakrivamo podrazumevani kursor SAMO na računarima. */
    body, a, button {
        cursor: none;
    }

    /* Prikazujemo naše div-ove za kursor i stilizujemo ih. */
    .cursor-outer-v, .cursor-outer-h,
    .cursor-inner-v, .cursor-inner-h {
        display: block; /* Važno: Prikazujemo kursor ponovo */
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        transform-origin: center center;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        mix-blend-mode: difference;
        z-index: 10001;
    }

    /* Ostatak postojećih stilova za izgled i animaciju kursora ide ovde */
    .cursor-outer-v { width: 3px; height: 32px; background-color: #fff; transform: translate(-50%, -50%); }
    .cursor-outer-h { width: 32px; height: 3px; background-color: #fff; transform: translate(-50%, -50%); }
    .cursor-inner-v { width: 1px; height: 32px; background-color: #000; transform: translate(-50%, -50%); }
    .cursor-inner-h { width: 32px; height: 1px; background-color: #000; transform: translate(-50%, -50%); }

    .cursor-outer-v.active,
    .cursor-outer-h.active {
        transform: translate(-50%, -50%) scale(1.5);
    }

    .cursor-outer-v.clicked,
    .cursor-outer-h.clicked,
    .cursor-inner-v.clicked,
    .cursor-inner-h.clicked {
        transform: translate(-50%, -50%) rotate(45deg) scale(0.9);
    }
}

/* --- Styles for Particles.js on the "O nama" Page --- */

/* 1. Make the main section a positioning context */
.about_page_section {
    position: relative;
    overflow: hidden; /* Prevents any potential overflow issues */
}

/* 2. Ensure the main content stays on top of the particles */
.about_page_section .container {
    position: relative;
    z-index: 2; /* Sits on top of the particles */
}

/* === MEKANI FADE PRELAZ NA DNU BANERA === */
/* === POBOLJŠAN (JAČI) FADE PRELAZ NA DNU BANERA === */


.banner_section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* POVEĆANO: Povećana visina za jači i duži fade efekat. */
    height: 300px; /* Bilo je 250px, slobodno menjajte ovu vrednost. */
    
    /* PRILAGOĐENO: Gradijent sada postaje potpuno crn malo ranije. */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 90%);
    z-index: 3;
}


/* === KP BADGE - FINALNA VERZIJA (Desktop) === */
.kp-badge-section-final {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ključno: ravnomerno raspoređuje 3 elementa */
    gap: 20px;
    max-width: 500px;
    margin: 40px auto;
    padding: 20px 25px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #555;
    border-radius: 15px;
    position: relative;
}

.kp-badge-logo-final img {
    width: 140px; /* PODEŠAVAMO ŠIRINU - slobodno menjaj ovu vrednost */
    height: auto; /* Visina će se automatski izračunati da sačuva proporcije */
    display: block;
    transition: transform 0.3s ease;
}

.kp-badge-logo-final:hover img {
    transform: scale(1.1);
}

.kp-badge-stats-final {
    text-align: center; /* Ključno: centrira sav tekst unutar ovog bloka */
    font-family: myFont, sans-serif !important;
    color: #ffffff;
}

.kp-badge-stats-final .kp-badge-broj {
    font-size: 42px;
    font-weight: bold;
    line-height: 1;
}

.kp-badge-stats-final .kp-badge-opis {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    line-height: 1.2;
}

.kp-badge-button-final {
    background-color: transparent;
    color: #fcfcfd;
    padding: 10px 20px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    border: 2px solid #fcfcfd;
    transition: all 0.3s ease-in-out;
    font-family: myFont, sans-serif !important;
}

.kp-badge-button-final:hover {
    background-color: #fcfcfd;
    color: #191919;
}

/* ==========================================
   FINAL BLACK FRIDAY WHEEL STYLES
   ========================================== */

.wheel-modal {
    display: none;
    position: fixed;
    z-index: 10000; /* Visok z-index da bude iznad svega */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px); /* Malo jači blur za bolji efekat */
    align-items: center;
    justify-content: center;
    padding: 20px; /* Padding da ne udara u ivice na mobilnom */
}

.wheel-modal.active {
    display: flex !important;
    animation: fadeInWheel 0.3s ease-in-out;
}

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

.wheel-container {
    background: linear-gradient(135deg, #1a1a1a, #080808);
    border: 2px solid #912b69;
    border-radius: 25px;
    padding: 35px 25px;
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 480px; /* Optimalna širina */
    box-shadow: 0 0 60px rgba(145, 43, 105, 0.5);
}

.close-wheel {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s;
}

.close-wheel:hover {
    color: #912b69;
}

.wheel-title {
    color: white;
    font-family: 'myFont', sans-serif !important; /* Tvoj font */
    margin-bottom: 15px;
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wheel-text {
    color: #ccc;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.5;
    font-family: 'myFont', sans-serif !important;
}

.wheel-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 35px auto;
}

.wheel-pointer {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #ffffff;
    z-index: 5;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.7));
}

#wheelCanvas {
    width: 100%;
    height: 100%;
    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1); /* Glatka animacija */
}

.spin-button {
    background-color: #912b69;
    color: white;
    border: none;
    padding: 18px 45px;
    font-size: 22px;
    font-family: 'myFont', sans-serif !important; /* Tvoj font */
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 25px rgba(145, 43, 105, 0.4);
    transition: all 0.3s ease;
}

.spin-button:hover {
    background-color: white;
    color: #912b69;
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(145, 43, 105, 0.7);
}

.spin-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Stilovi za rezultat */
.result-circle {
    width: 160px;
    height: 160px;
    border: 6px solid #912b69;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 25px auto;
    background: rgba(145, 43, 105, 0.15);
    box-shadow: 0 0 30px rgba(145, 43, 105, 0.3) inset;
}

.coupon-code {
    font-size: 26px;
    color: #fff;
    background: #222;
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px dashed #912b69;
    margin: 10px auto 20px auto;
    display: inline-block;
    font-family: 'myFont', sans-serif !important;
    letter-spacing: 1px;
}

/* RESPONSIVE PODESAVANJA ZA MOBILNE */
@media (max-width: 480px) {
    .wheel-container {
        padding: 30px 20px;
        width: 95%;
    }
    .wheel-title {
        font-size: 26px;
    }
    .wheel-wrapper {
        width: 260px; /* Manji točak na manjim ekranima */
        height: 260px;
        margin-bottom: 25px;
    }
    .spin-button {
        padding: 15px 35px;
        font-size: 18px;
        width: 100%; /* Dugme preko cele širine na mobilnom */
    }
    #result-amount {
        font-size: 38px !important;
    }
    .coupon-code {
        font-size: 22px;
        padding: 10px 15px;
    }
}


/* ==========================================
   USLOVI KUPOVINE STRANICA (Card Design)
   ========================================== */

/* Naslovi */
.terms_title {
    text-align: center;
    font-size: 50px;
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.terms_subtitle {
    text-align: center;
    color: #aaa;
    font-size: 16px;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid Layout */
.terms_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding-bottom: 50px;
}

/* Stil Kartice */
.term_card {
    background-color: #111;
    border: 1px solid #333;
    border-radius: 15px;
    padding: 30px;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

/* Efekat lebdenja */
.term_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(145, 43, 105, 0.3);
    border-color: #912b69;
}

.term_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #912b69;
    opacity: 0;
    transition: opacity 0.3s;
}

.term_card:hover::before {
    opacity: 1;
}

/* Ikonice */
.term_icon {
    font-size: 40px;
    color: #912b69;
    margin-bottom: 20px;
}

.term_card h3 {
    color: white;
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.term_card p {
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

/* Divider linija unutar kartice */
.divider {
    height: 1px;
    background: #333;
    margin: 15px 0;
}

/* Warning box za transport */
.warning-box {
    background: rgba(255, 255, 0, 0.1);
    border-left: 3px solid yellow;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.warning-box ion-icon {
    color: yellow;
    font-size: 24px;
    min-width: 24px;
}
.warning-box span {
    color: #ddd;
    font-size: 13px;
    font-style: italic;
}

/* Široka kartica (Depozit) */
.wide_card {
    grid-column: 1 / -1; /* Proteže se preko celog reda */
    background: linear-gradient(135deg, #151515 0%, #0d0d0d 100%);
}

.card_content_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.left_text, .right_note {
    flex: 1;
    min-width: 300px;
}

.right_note {
    background: rgba(145, 43, 105, 0.1);
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed #912b69;
}

.right_note ul {
    list-style-type: none;
}

.right_note ul li {
    color: #fff;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
    font-size: 14px;
}

.right_note ul li::before {
    content: '•';
    color: #912b69;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Danger Kartica (Gubitak garancije) */
.danger_card {
    grid-column: 1 / -1;
    border: 1px solid #ff4444;
    background: rgba(255, 0, 0, 0.05);
}

.danger_card h3 {
    color: #ff4444;
}

.danger_card .term_icon {
    color: #ff4444;
}

.danger_list {
    list-style: none;
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}

.danger_list li {
    color: #ddd;
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 5px;
    border-left: 3px solid #ff4444;
    font-size: 14px;
}

/* Responsive prilagođavanje */
@media (max-width: 768px) {
    .terms_title {
        font-size: 36px;
    }
    .wide_card, .danger_card {
        grid-column: auto; /* Na mobilnom se vraća u jednu kolonu */
    }
    .card_content_flex {
        flex-direction: column;
        gap: 15px;
    }
    .left_text, .right_note {
        min-width: 100%;
    }
    .danger_list {
        grid-template-columns: 1fr;
    }
}

/* --- ISPRAVKA ZA USLOVI STRANICU (Talasi i Razmak) --- */

.terms_section {
    position: relative;
    z-index: 5; /* Da budemo sigurni da je sadržaj iznad pozadine */
    /* Ovo je ključno: Pravimo veliki razmak na dnu da talasi ne prekriju dugme */
    padding-bottom: 250px !important; 
}

/* Dugme za nazad - osiguravamo da je iznad talasa i klikabilno */
.shop_bt_2 {
    position: relative;
    z-index: 100; 
    margin: 50px auto 0 auto;
    background-color: #111; /* Dodajemo pozadinu da se bolje vidi */
}

.shop_bt_2 a {
    color: white !important;
}

.shop_bt_2:hover {
    background-color: #912b69;
}

/* Osiguravamo da kartice ne odu preširoko na velikim ekranima */
.terms_section .container {
    max-width: 1140px;
}

/* RESPONSIVE FIX ZA MOBILNI */
@media (max-width: 768px) {
    .terms_section {
        padding-bottom: 150px !important; /* Malo manji razmak na mobilnom */
    }
    .shop_bt_2 {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================
   NOVO DUGME "NAZAD NA POČETNU" - FINAL
   ========================================== */

/* Okvir koji sigurno centrira dugme */
.button-wrapper-center {
    width: 100%;
    text-align: center; /* Ovo centrira unutrašnji element */
    margin-top: 60px;
    margin-bottom: 20px;
    position: relative;
    z-index: 100;
}

.back-to-home-btn {
    display: inline-flex; /* Inline-flex dozvoljava centriranje parent-a */
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    padding: 18px 45px;
    
    /* DEFAULT STANJE: Crna pozadina, Ljubičasti okvir */
    background-color: #000000; 
    border: 2px solid #912b69;
    border-radius: 50px;
    
    color: #fff;
    font-family: 'myFont', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important;
    
    /* Suptilan sjaj */
    box-shadow: 0 0 15px rgba(145, 43, 105, 0.2);
    transition: all 0.3s ease-in-out;
}

.back-to-home-btn ion-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
    color: #912b69; /* Ikonica je ljubičasta u startu */
}

/* HOVER STANJE: Postaje LJUBUČASTO */
.back-to-home-btn:hover {
    background-color: #912b69; /* Pozadina postaje ljubičasta */
    color: #fff; /* Tekst ostaje beo */
    transform: translateY(-5px);
    
    /* Jači sjaj */
    box-shadow: 0 0 30px rgba(145, 43, 105, 0.8);
}

.back-to-home-btn:hover ion-icon {
    color: #fff; /* Ikonica postaje bela na hover */
    transform: translateX(-5px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .back-to-home-btn {
        width: 90%; /* Na mobilnom šire */
        padding: 15px 0;
    }
}


/* ==========================================
   POPRAVKA ZA OSTALA DUGMAD (.shop_bt_2)
   ========================================== */

.shop_bt_2 {
    width: auto;
    display: inline-block; /* Vraćamo da bude u liniji */
    float: none;
    
    font-size: 16px;
    text-align: center;
    
    /* Crna pozadina da se slaže sa sajtom */
    background-color: #111; 
    color: #ffffff;
    
    /* Originalni ljubičasti okvir */
    border-left: 10px solid #912b69;
    border-right: 10px solid #912b69;
    border-top: 4px solid #912b69;
    border-bottom: 4px solid #912b69;
    
    border-radius: 30px;
    padding: 10px 30px;
    margin-top: 30px;
    
    transition: all 0.3s ease;
}

/* Osiguravamo da je tekst linka beo */
.shop_bt_2 a {
    color: #ffffff !important;
    text-decoration: none;
}

/* Hover efekat */
.shop_bt_2:hover {
    background-color: #912b69; /* Postaje ljubičasto */
    border-radius: 10px; /* Ivice se menjaju */
    transform: translateY(-3px); /* Malo odskoči */
    cursor: pointer;
}

/* Responsive fix za mobilni */
@media (max-width: 768px) {
    .shop_bt_2 {
        display: table;
        margin: 30px auto; /* Centrira na mobilnom */
    }
}

/* =========================================
   WEB DEVELOPMENT - NOVI DIZAJN
   ========================================= */

/* --- NOVA HERO SEKCIJA SA SLIKOM --- */
.wd-hero-section {
    position: relative;
    height: 85vh; /* Malo viša sekcija za bolji efekat slike */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Default pozadina ako slika ne učita */
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax efekat - slika stoji dok skroluješ */
    
    overflow: hidden;
    padding-top: 60px;
}

.wd-main-title {
    font-size: 70px; /* Veći naslov */
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8); /* Senka da se bolje vidi preko slike */
}

.wd-hero-text {
    font-size: 20px;
    color: #f0f0f0; /* Svetlija boja teksta */
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

/* Prilagođavanje za mobilni */
@media (max-width: 768px) {
    .wd-main-title { font-size: 40px; }
    .wd-hero-section { height: auto; padding: 150px 0 100px 0; }
}

/* --- NOVE USLUŽNE KARTICE (ZAMENA ZA FLIP) --- */
.wd-card {
    background-color: #111; /* Tamna pozadina */
    border: 1px solid #333; /* Diskretan okvir */
    border-radius: 20px;
    padding: 40px 30px;
    text-align: left; /* Tekst poravnat levo za profesionalniji izgled */
    transition: all 0.3s ease;
    height: 100%;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

/* Hover efekat - Ceo box zasija ljubičasto i malo se podigne */
.wd-card:hover {
    transform: translateY(-10px);
    border-color: #912b69;
    box-shadow: 0 10px 40px rgba(145, 43, 105, 0.2); /* Ljubičasti sjaj */
    background-color: #161616;
}

.wd-icon {
    font-size: 50px;
    color: #912b69; /* Ljubičasta ikonica */
    margin-bottom: 25px;
    transition: transform 0.3s;
}

.wd-card:hover .wd-icon {
    transform: scale(1.1); /* Ikonica se malo poveća na hover */
    color: #fff; /* Ikonica postaje bela na hover */
}

.wd-card h3 {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.wd-card p {
    color: #888;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* --- STILOVI ZA PAKETE (CENOVNIK) --- */
.wd-price-card {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 15px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.wd-price-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px rgba(145, 43, 105, 0.4);
    border-color: #912b69;
}

.wd-featured {
    border: 2px solid #912b69;
    background: linear-gradient(180deg, #1e1e1e 0%, #1a0d14 100%);
    transform: scale(1.05);
    z-index: 2;
}

.wd-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #912b69;
    color: white;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: bold;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-transform: uppercase;
}

.wd-plan-title {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.wd-price {
    font-size: 40px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 5px;
    font-family: 'myFont', sans-serif;
}

.wd-desc {
    color: #888;
    font-size: 14px;
    margin-bottom: 30px;
    font-style: italic;
}

.wd-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
    padding-left: 15px;
}

.wd-features li {
    color: #ddd;
    margin-bottom: 12px;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.wd-features li i {
    color: #912b69;
    margin-right: 10px;
    font-size: 14px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .wd-main-title { font-size: 36px; }
    .wd-hero-section { height: auto; padding: 100px 0; }
    .wd-featured { transform: scale(1); margin: 20px 0; }
    .wd-card { text-align: center; } /* Na mobilnom centriramo tekst kartice */
}

/* Dodatak za style.css - FIX ZA PREKLAPANJE */

#paketi {
    position: relative;
    z-index: 5; /* Osigurava da su kartice IZNAD talasa ako se slučajno dodirnu */
}

.wd-price-card {
    background-color: #111; /* Osigurava da se pozadina ne providi */
    z-index: 6;
}

/* =========================================
   POPRAVKA ZA NAVIGACIJU (DA NE LOMI TEKST)
   ========================================= */

.navbar-expand-lg .navbar-nav .nav-link {
    white-space: nowrap !important;  /* Ovo je ključno - zabranjuje lomljenje teksta */
    padding-left: 10px !important;   /* Smanjujemo razmak levo */
    padding-right: 10px !important;  /* Smanjujemo razmak desno */
    font-size: 15px !important;      /* Malo smanjujemo font da sve stane (bilo je 18px) */
}

/* Opciono: Malo smanji logo da ostavi više mesta za tekst */
.logo img {
    max-width: 130px !important; /* Bilo je 150px */
}


/* Guranje navigacije skroz desno */
.header_section .navbar-nav {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* =========================================
   GEEKBIT TECH MAPA (CLEAN FIX)
   ========================================= */

/* Nova sekcija koja drži mapu */
.map-section-full {
    width: 100%; /* Zauzima celu širinu ekrana */
    padding: 0;
    margin: 0;
    background: #000;
    overflow: hidden; /* Skriva bilo kakav višak */
    margin-top: 50px; /* Razmak od forme */
}

.tech-map-full {
    position: relative;
    width: 100%; /* 100% širine svog roditelja (koji je sada ceo ekran) */
    padding: 0;
    background: #050505;
    
    /* Tech linije gore i dole */
    border-top: 2px solid #912b69;
    border-bottom: 2px solid #912b69;
    
    /* Glow efekat */
    box-shadow: 0 0 40px rgba(145, 43, 105, 0.3);
}

/* OSTATAK STILOVA OSTAJE ISTI (ALI IH PREKOPIRAJ ZA SVAKI SLUČAJ) */

.map-title-center {
    position: absolute;
    top: 20px;
    width: 100%;
    z-index: 10;
    color: #fff;
    font-family: 'myFont', sans-serif;
    font-size: 30px;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
}

.custom-map-container {
    position: relative;
    height: 500px;
    width: 100%;
    border: none;
    overflow: hidden;
}

/* Filteri */
.custom-map-container iframe {
    width: 100%;
    height: 100%;
    display: block;
    filter: invert(100%) grayscale(100%) contrast(120%);
    opacity: 0.7;
    transition: all 0.5s ease;
}

.tech-map-full:hover iframe {
    opacity: 1;
    filter: invert(100%) grayscale(100%) contrast(130%);
}

/* Overlay */
.custom-map-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(145, 43, 105, 0.25);
    mix-blend-mode: overlay; 
    pointer-events: none;
    z-index: 2;
}

/* Nova sekcija koja drži mapu */
.map-section-full {
    width: 100%; 
    padding: 0;
    background: #000;
    overflow: hidden;
    
    /* KLJUČNA PROMENA: */
    /* Negativna margina "vuče" mapu na gore da pojede prazan prostor ispod forme */
    margin-top: -50px; 
    
    /* Razmak od futera ostaje veliki */
    margin-bottom: 150px; 
    
    position: relative;
    z-index: 10; 
}
/* RESPONSIVE */
@media (max-width: 768px) {
    .custom-map-container {
        height: 350px;
    }
    .map-title-center {
        font-size: 20px;
        top: 10px;
    }
}