.cursor{
    cursor: pointer;
}
.b-bg{
    background-color: black;
}

.dot {
    width: 20px;
    height: 20px;
    background-color: #dc3545;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    -webkit-animation: blink 1s infinite;
            animation: blink 1s infinite; /* Add blinking animation */
}

/* Define the keyframes for the blink animation */
@-webkit-keyframes blink {
    0% {
        opacity: 1; /* Fully visible */
    }
    50% {
        opacity: 0; /* Fully transparent */
    }
    100% {
        opacity: 1; /* Back to fully visible */
    }
}
@keyframes blink {
    0% {
        opacity: 1; /* Fully visible */
    }
    50% {
        opacity: 0; /* Fully transparent */
    }
    100% {
        opacity: 1; /* Back to fully visible */
    }
}


.product-image .dot:nth-child(2) {
  top: 42%; /* Adjust percentage as needed */
  left: 35%; /* Adjust percentage as needed */
}

.product-image .dot:nth-child(3) {
  top: 60%; /* Adjust percentage as needed */
  left: 55%; /* Adjust percentage as needed */
}


.slika-zgoraj {
    background-image: url("../assets/images/Xellbox_lines+text.jpg"); 
    height: 100vh;
    background-size: cover;
    background-position: center -100px;
    width: 100%;
}

.slika-zgoraj-test {
    background-image: url("../assets/images/Xellbox_1stpage-blank-new-17.png"); 
    height: 100vh;
    background-size: cover;
    background-position: center -100px;
    width: 100%;
}
.slika-zgoraj-petek {
    background-image: url("../assets/images/Xellbox_december-17.png"); 
    /* background-color: rgba(150, 94, 83, 0.86); */

 background-color: #1b98f118;

    
    height: 100vh;
    background-size: cover;
    background-position: center -100px;
    width: 100%;

}

.slika-zgoraj-petek h5{
    position: absolute;
    top:0;
    right: 0;
}


.glavni-napis{
    position: absolute;
    top:20%;
    left:10%;
}

.alarm-napis{
    position: absolute;
    bottom:39%;
    left:10%;
}

.fire-napis{
    position: absolute;
    top:19%;
    right:20%;
    padding-left: 5%;
}

.hatch-napis{
    position: absolute;
    top:49%;
    right:10%;
}

.smoke-napis{
    position: absolute;
    bottom:13%;
    right:23%;
}

.graf-zadaj{
    background-color: rgba(255, 255, 255, 0.86);
}

.razmak-gor-why{
    padding-top: 10%;
}


.crta{
    width: 100%;
    height: 2px;
    background-color: red;
}

.crta-fire{
    width: 110%;
    height: 120px;
    border-top: 1px solid red;
    border-left: 1px solid red;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}

.crta-alarm{
    width: 200%;
    height: 120px;
    border-top: 1px solid red;
    
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}

.crta-smoke{
        width: 110%;
    
    border-bottom: 1px solid red;
    border-left: 1px solid red;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}

.crta-hatch{
    width: 110%;
    height: -120px;
    border-top: 1px solid red;
    
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
.l-shape {
            width: 100%;
            height: 100px;
            border-top: 10px solid red;
            border-left: 10px solid red;
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
        }

.side-menu{
    font-size: 1.3rem;
    color: black;
    font-weight: 700;
}

a{
    text-decoration: none;
}

.xell-opis{
    line-height: 2.5rem;
    font-size: 1.3rem;
}

.absolute-header{
    position: absolute;
    width: 100%;
}

/* .nav-item{
    color: white !important;
} */

.slika-sredina{
    height: 60vh;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0 70%;
    object-position: 0 70%;
}

.onas-slika-sredina{
    height: 60vh;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0 70%;
    object-position: 0 70%;
}


.sirina-strani{
    margin: 0 10%;
}

.sirina-header{
    margin: 0 10%;
}

.razmak-gor-dol{
    padding: 10% 0;
}

.razmak-gor-dol-prva{
    padding: 10% 0 7%;

}

.razmak-gor-dol-box{
    padding: 3% 0;
}

.swiper-bg-1{
    background-image: url("../assets/images/Xellbox-our-story-e-scooter.jpg");
    position: relative;
    height: 60vh!important;
    background-size: cover;
    background-position: 0 90%;  
    width: 100%;
}

.swiper-1-pravokotnik{
    position: absolute;
    bottom: 10%;
    left:10%;
    background-color: rgba(255, 255, 255, 0.8);
    width: 40%;
    padding: 1rem;
    
    font-size: 1.2rem;
}


.swiper-bg-2{
    height: 60vh!important;
    position: relative;
    background-size: cover;
    background-position: 50% 50%;  
    width: 100%;  
    background-image: url("../assets/images/Xellbox-our-story-fire.jpg");
}

.swiper-bg-3{
    background-image: url("../assets/images/Xellbox-our-story-box.jpg");
    position: relative;
    height: 60vh!important;
    background-size: cover;
    background-position: 0 95%;  
    width: 100%;
}

.swiper-3-pravokotnik{
    position: absolute;
    bottom: 20%;
    right:5%;
    background-color: rgba(255, 255, 255, 0.8);
    width: 40%;
    padding: 1rem;
    
    font-size: 1.2rem;
}

.swiper-bg-4{
    background-image: url("../assets/images/Xellbox-our-story-family.jpg");
    position: relative;
    height: 60vh!important;
    background-size: cover;
    background-position: bottom;  
    width: 100%;
}

.swiper-bg-5{
    background-image: url("../assets/images/Xellbox-photo-30 (Custom).jpg");
    position: relative;
    height: 60vh!important;
    background-size: cover;
    background-position: bottom;  
    width: 100%;
}

.swiper-4-pravokotnik{
    position: absolute;
    top: 10%;
    left:10%;
    background-color: rgba(255, 255, 255, 0.8);
    width: 40%;
    padding: 1rem;
    
    font-size: 1.2rem;
}

.swiper-5-pravokotnik{
    position: absolute;
    bottom: 10%;
    right:10%;
    background-color: rgba(255, 255, 255, 0.8);
    width: 40%;
    padding: 1rem;
    
    font-size: 1.2rem;
}

.slika-sivine{
    background-image: url("../assets/images/sivina.jpg");   
    position: relative;
    height: 30vh!important;
    background-size: cover;
    background-position: center;  
    width: 100%;
}

.slika-sivine-prva{
    background-image: url("../assets/images/sivina.jpg");   
    position: relative;
    height: 15vh!important;
    background-size: cover;
    background-position: center;  
    width: 100%;
}
/* .box-position{
-webkit-box-shadow: -10px 0 0px rgba(0, 0, 0, 1);
        box-shadow: -10px 0 0px rgba(0, 0, 0, 1);

}

.box-padd-right{
    padding-right: 10%;
} */
  .custom-shadow {
    -webkit-box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
  }

  /* Box styling: rounded on the left, straight on the right */
  .category-box {
    border-radius: 30px 0 0 30px;
    background-color: #f0f0f0; /* Adjust this to your desired color */
    padding: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 10px;
    position: relative;
  }

  /* Offset each box progressively to the left */
  .box-1 {
    margin-left: 10%;
    background-color: #555555;
    color: white;
  }

  .box-2 {
    margin-left: 20%;
    background-color: #868686;
    color: white;
  }

  .box-3 {
    margin-left: 30%;
    background-color: #b3b3b3;
  }

  .box-4 {
    margin-left: 40%;
    background-color: #d3d3d3;
  }

  /* Black section at the start of the box */
  .black-bar {
    background-color: black;
    width: 30px;
    height: 100%;
    border-radius: 30px 0 0 30px;
  }

  /* Image section */
  .icon-section {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding: 0 8px;
    border-right: 2px solid rgba(0, 0, 0, 0.1);
  }

  /* Text styling */
  .text-section {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    text-align: right;
    padding-left: 15px;
  }

  .text-section p {
    margin: 0;
  }

  .category-title {
    font-weight: bold;
    text-transform: uppercase;
  }

.gumb-specifikacije{
    background-color: #d1d1d1; 
    color: #000; 
    font-size: 1.2em; 
    font-weight: bold; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 30px; 
    -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2), 
                0 5px 10px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2), 
                0 5px 10px rgba(0, 0, 0, 0.3); 
    cursor: pointer; 
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease; 
    
}


.gumb-specifikacije:hover {
    background-color: #bdbdbd; /* Slightly darker gray on hover */
}

.home-business{
    height: 500px;
    width: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.bela-xellbox-slika{
    background-image: url("../assets/images/slika-belina.jpg");
    position: relative;
    background-size: cover;
    background-position: center;  
    width: 100%;
}

.slika-beline{
    background-image: url("../assets/images/belina.jpg");   
    position: relative;
    height: 15vh!important;
    background-size: cover;
    background-position: center;  
    width: 100%;
}

.sirina-modela{
    width: 70%!important;
}

.btn-collapse{
    padding: 0;
    margin: 0;
}


/* Stran about */

.onas-slika-zgoraj{
    background-image: url("../assets/images/Xellbox-about.jpg");
    height: 40vh;
    background-size: cover;
   background-position: center;  
    width: 100%;
}

.about-slika-sredina{
    height: 30vh;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0 42%;
    object-position: 0 42%;
}
.product-info {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.product-info h2, .product-info h3 {
    margin-top: 0;
}

.product-info ul {
    list-style-type: none;
    padding-left: 0;
}



.product-info li strong {
    font-weight: bold;
}

/* Stran contact */

.kontakt-slika-zgoraj{
    background-image: url("../assets/images/kontakt.jpg");
    height: 40vh;
    background-size: cover;
   background-position: center;  
    width: 100%;
}

.form-group {
    margin-bottom: 15px;
}

label {
    font-weight: bold;
    color: #333;
}

input[type="text"],
input[type="email"],
select,
textarea {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 14px;
    color: #333;
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: #007bff;
    outline: none;
}

button[type="submit"] {
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #333;
}

button[type="submit"]:hover {
    background-color: white;
    border:1px solid #333;
    color: #333;
}

/* Stran producer */

.producer-slika-zgoraj{
    background-image: url("../assets/images/mineralka.jpg");
    height: 40vh;
    background-size: cover;
   background-position: 0% 30%;  
    width: 100%;
}

.producer-slika-sredina{
    height: 60vh;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0 70%;
    object-position: 0 70%;
}


.legal-notice {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f8f9fa;
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.legal-notice h1 {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.legal-notice h2 {
    font-size: 1.5rem;
    margin-top: 30px;
    color: #0056b3;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 10px;
}

.legal-notice h3 {
    font-size: 1.25rem;
    margin-top: 20px;
    color: black;
    font-weight: 700;
}

.legal-notice p {
    font-size: 1rem;
    color: #555;
    margin: 10px 0;
}

.publisher-info {
    margin-top: 40px;
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.publisher-info h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #333;
    text-transform: uppercase;
}

.publisher-info p {
    font-size: 1rem;
    color: #555;
    margin: 10px 0;
}

.publisher-info strong {
    color: #0056b3;
    font-size: 1.1rem;
}

.contact-info p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 10px 0;
}

.contact-info p i {
    margin-right: 10px;
    color: #0056b3;
}

.contact-info a {
    color: #007bff;
    text-decoration: none;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.contact-info a:hover {
    color: #0056b3;
}

@media only screen and (max-width: 600px) {
    .sirina-modela{
        width: 100%!important;
    }
    .swiper-1-pravokotnik, .swiper-3-pravokotnik, .swiper-4-pravokotnik{
        position: absolute;
        bottom:10%;
        top:auto;
        left:5%;
        background-color: rgba(255, 255, 255, 0.8);
        width: 90%;
        padding: 0.6rem;
        text-transform: uppercase;
        font-size: 0.7rem;
    }
    .swiper-bg-1, .swiper-bg-4{
        background-position: -200px -60px;  
    }
    .home-business{
        width: 100%;
    }
    .xell-opis{
        font-size: 1rem;
        line-height: 2rem;
    }
    .razmak-gor-dol-box{
        padding: 20% 0;
    }
    .gumb-specifikacije{
        font-size: 1rem;
    }
    .sirina-header{
        margin: 0 1%;
    }
    .slika-zgoraj {
        background-image: url("../assets/images/Xellbox_mobile2.jpg");
        background-position: center;
        /* background-size: contain;  */
        /* background-color: black;
        
        background-position: center; 
        background-repeat: no-repeat; */
    }
        .slika-zgoraj-petek {
        background-image: url("../assets/images/Xellbox_december-07.png"); 
    }
        .slika-sredina{
   height: auto;
    -o-object-fit: contain;
   
       object-fit: contain;    
}
.kontakt-slika-zgoraj, .producer-slika-zgoraj, .onas-slika-zgoraj{
    height: 30vh;
    
}
.sirina-strani{
    margin: 0 3%;
}
  .box-3,
  .box-4,
  .box-2,
   .box-1{
    margin-left: 0;
  }
  .icon-section img{
    width: 50px;
  }
  .row-reverse{
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
  }
}