/**
* Template Name: Medilab
* Template URL: https://bootstrapmade.com/medilab-free-medical-bootstrap-theme/
* Updated: Mar 17 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

body {
    font-family: "Open Sans", sans-serif;
    color: #444444;
}

a {
    color: #b61117;
    text-decoration: none;
}

a:hover {
    color: black;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Raleway", sans-serif;
}

.row {
    /*margin-right: -15px;
    margin-left: -15px;*/
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #b61117;
    border-top-color: #d1e6f9;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/

.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #b61117;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.back-to-top i {
    font-size: 28px;
    color: #fff;
    line-height: 0;
}

.back-to-top:hover {
    background: black;
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

.datepicker-dropdown {
    padding: 20px !important;
}


/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/

#topbar {
    background: #fff;
    height: 40px;
    font-size: 14px;
    transition: all 0.5s;
    z-index: 996;
}

#topbar.topbar-scrolled {
    top: -40px;
}

#topbar .contact-info a {
    line-height: 1;
    color: #444444;
    transition: 0.3s;
}

#topbar .contact-info a:hover {
    color: #b61117;
}

#topbar .contact-info i {
    color: #b61117;
    padding-right: 4px;
    margin-left: 15px;
    line-height: 0;
}

#topbar .contact-info i:first-child {
    margin-left: 0;
}

#topbar .social-links a {
    color: #437099;
    padding-left: 15px;
    display: inline-block;
    line-height: 1px;
    transition: 0.3s;
}

#topbar .social-links a:hover {
    color: #b61117;
}

#topbar .social-links a:first-child {
    border-left: 0;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

#header {
    background: #fff;
    transition: all 0.5s;
    z-index: 997;
    padding: 15px 0;
    top: 40px;
    box-shadow: 0px 2px 15px rgba(25, 119, 204, 0.1);
}

#header.header-scrolled {
    top: 0;
}

#header .logo {
    font-size: 30px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: "Poppins", sans-serif;
}

#header .logo a {
    color: #2c4964;
}

#header .logo img {
    max-height: 50px;
    width: 350px;
}


/**
* Appointment Button *
*/

.appointment-btn {
    margin-left: 25px;
    background: #b61117;
    color: #fff;
    border-radius: 50px;
    padding: 8px 25px;
    white-space: nowrap;
    transition: 0.3s;
    font-size: 14px;
    display: inline-block;
}

.appointment-btn:hover {
    background: black;
    color: #fff;
}

@media (max-width: 768px) {
    .appointment-btn {
        margin: 0 15px 0 0;
        padding: 6px 18px;
    }
    header .iconCart {
        right: 5%!important;
    }
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/


/**
* Desktop Navigation 
*/

.navbar {
    padding: 0;
    text-transform: uppercase;
    font-weight: bold;
}

.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}

.navbar li {
    position: relative;
}

.navbar>ul>li {
    position: relative;
    white-space: nowrap;
    padding: 8px 0 8px 20px;
}

.navbar a,
.navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #2c4964;
    white-space: nowrap;
    transition: 0.3s;
    border-bottom: 2px solid #fff;
    padding: 5px 2px;
}

.navbar a i,
.navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
    color: #b61117;
    border-color: #b61117;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 20px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
}

.navbar .dropdown ul li {
    min-width: 200px;
}

.navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: #082744;
    border: none;
}

.navbar .dropdown ul a i {
    font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
    color: #b61117;
}

.navbar .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}

@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }
    .navbar .dropdown .dropdown:hover>ul {
        left: -100%;
    }
}


/**
* Mobile Navigation 
*/

.mobile-nav-toggle {
    color: #2c4964;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
    color: #fff;
}

@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block;
    }
    .navbar ul {
        display: none;
    }
}

.navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(28, 47, 65, 0.9);
    transition: 0.3s;
    z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
}

.navbar-mobile ul {
    display: block;
    position: absolute;
    top: 55px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    padding: 10px 0;
    background-color: #f8f9fa;
    overflow-y: auto;
    transition: 0.3s;
    border-top: 2px solid #a01300;
    height: fit-content;
}

.navbar-mobile>ul>li {
    padding: 0;
}

.navbar-mobile a,
.navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: #000000;
    border: none;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
    color: #b61117;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
    margin: 15px;
}

.navbar-mobile .dropdown ul {
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
    min-width: 200px;
}

.navbar-mobile .dropdown ul a {
    padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
    font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
    color: #b61117;
}

.navbar-mobile .dropdown>.dropdown-active {
    display: block;
}


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

#hero {
    width: 100%;
    height: 90vh;
    background: url("../img/home-air-conditioner-and-hand-with-remote-control-9ENVA8R-min.jpg") top center;
    background-size: cover;
    margin-bottom: -200px;
}

#hero .container {
    position: relative;
}

#hero h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #b61117;
}

#hero h2 {
    color: #2c4964;
    margin: 10px 0 0 0;
    font-size: 24px;
}

#hero .btn-get-started {
    font-family: "Raleway", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 35px;
    margin-top: 30px;
    border-radius: 50px;
    transition: 0.5s;
    color: #fff;
    background: #b61117;
}

#hero .btn-get-started:hover {
    background: black;
}

@media (min-width: 1024px) {
    #hero {
        background-attachment: fixed;
    }
}

@media (max-width: 992px) {
    #hero {
        margin-bottom: 0;
        height: 100vh;
    }
    #hero .container {
        padding-bottom: 63px;
    }
    #hero h1 {
        font-size: 28px;
        line-height: 36px;
    }
    #hero h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
    }
}

@media (max-height: 600px) {
    #hero {
        height: 110vh;
    }
}


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/

section {
    padding: 60px 0;
    overflow: hidden;
}

.section-bg {
    background-color: #f1f7fd;
}

.section-title {
    text-align: center;
    padding-bottom: 30px;
}

.section-title h2 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: #b61117;
}

.section-title h2::before {
    content: "";
    position: absolute;
    display: block;
    width: 120px;
    height: 1px;
    background: #ddd;
    bottom: 1px;
    left: calc(50% - 60px);
}

.section-title h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background: #b61117;
    bottom: 0;
    left: calc(50% - 20px);
}

.section-title p {
    margin-bottom: 0;
}


/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/

.breadcrumbs {
    /*padding: 20px 0;*/
    background-color: #f1f7fd;
    min-height: 40px;
    margin-top: 120px;
}

@media (max-width: 992px) {
    .breadcrumbs {
        margin-top: 100px;
    }
}

.breadcrumbs h2 {
    font-size: 24px;
    font-weight: 300;
    margin: 0;
}

@media (max-width: 992px) {
    .breadcrumbs h2 {
        margin: 0 0 10px 0;
    }
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.breadcrumbs ol li+li {
    padding-left: 10px;
}

.breadcrumbs ol li+li::before {
    display: inline-block;
    padding-right: 10px;
    color: #6c757d;
    content: "/";
}

@media (max-width: 768px) {
    .breadcrumbs .d-flex {
        display: block !important;
        padding-top: 10px;
    }
    .breadcrumbs ol {
        display: block;
    }
    .breadcrumbs ol li {
        display: inline-block;
    }
    .klimaProduct,
    .klimaGreeProduct,
    .klimaBergenProduct,
    .precistacProduct,
    .klimaDaikinProduct {
        display: grid;
        grid-template-columns: repeat(1, 1fr)!important;
        gap: 20px;
    }
    .listProduct {
        display: grid;
        grid-template-columns: repeat(1, 1fr)!important;
        gap: 20px;
    }
    .pumpaProduct {
        display: grid;
        grid-template-columns: repeat(1, 1fr)!important;
        gap: 20px;
    }
    .preciscacProduct {
        display: grid;
        grid-template-columns: repeat(1, 1fr)!important;
        gap: 20px;
    }
    .multisplitProduct {
        display: grid;
        grid-template-columns: repeat(1, 1fr)!important;
        gap: 20px;
    }
}


/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/

.listCart .content {
    background: #0e0f11 !important
}

.why-us .content {
    /*padding: 30px;*/
    background: #b61117;
    border-radius: 4px;
    color: #fff;
}

.why-us .content h3 {
    font-weight: 700;
    font-size: 34px;
    margin-bottom: 30px;
}

.why-us .content p {
    margin-bottom: 30px;
}

.why-us .content .more-btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 30px 8px 30px;
    color: #fff;
    border-radius: 50px;
    transition: all ease-in-out 0.4s;
}

.why-us .content .more-btn i {
    font-size: 14px;
}

.why-us .content .more-btn:hover {
    color: #b61117;
    background: #fff;
}

.why-us .icon-boxes .icon-box {
    text-align: center;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    padding: 40px 30px;
    width: 100%;
}

.why-us .icon-boxes .icon-box i {
    font-size: 40px;
    color: #b61117;
    margin-bottom: 30px;
}

.why-us .icon-boxes .icon-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.why-us .icon-boxes .icon-box p {
    font-size: 15px;
    color: #848484;
}


/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/

.about .icon-boxes h4 {
    font-size: 18px;
    color: #4b7dab;
    margin-bottom: 15px;
}

.about .icon-boxes h3 {
    font-size: 28px;
    font-weight: 700;
    color: #b61117;
    margin-bottom: 15px;
}

.about .icon-box {
    margin-top: 40px;
}

.about .icon-box .icon {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 2px solid #8dc2f1;
    border-radius: 50px;
    transition: 0.5s;
}

.about .icon-box .icon i {
    color: #b61117;
    font-size: 32px;
}

.about .icon-box:hover .icon {
    background: #b61117;
    border-color: #b61117;
}

.about .icon-box:hover .icon i {
    color: #fff;
}

.about .icon-box .title {
    margin-left: 85px;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 18px;
}

.about .icon-box .title a {
    color: #343a40;
    transition: 0.3s;
}

.about .icon-box .title a:hover {
    color: #b61117;
}

.about .icon-box .description {
    margin-left: 85px;
    line-height: 24px;
    font-size: 14px;
}

.about .video-box {
    background: url("assets/img/about.jpg") center center no-repeat;
    background-size: cover;
    min-height: 500px;
}

.about .play-btn {
    width: 94px;
    height: 94px;
    background: radial-gradient(#b61117 50%, rgba(25, 119, 204, 0.4) 52%);
    border-radius: 50%;
    display: block;
    position: absolute;
    left: calc(50% - 47px);
    top: calc(50% - 47px);
    overflow: hidden;
}

.about .play-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 100;
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.about .play-btn::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    animation-delay: 0s;
    animation: pulsate-btn 2s;
    animation-direction: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid rgba(25, 119, 204, 0.7);
    top: -15%;
    left: -15%;
    background: rgba(198, 16, 0, 0);
}

.about .play-btn:hover::after {
    border-left: 15px solid #b61117;
    transform: scale(20);
}

.about .play-btn:hover::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 200;
    animation: none;
    border-radius: 0;
}

@keyframes pulsate-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}


/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/

.counts {
    background: #f1f7fd;
    padding: 70px 0 60px;
}

.counts .count-box {
    padding: 30px 30px 25px 30px;
    width: 100%;
    position: relative;
    text-align: center;
    background: #fff;
}

.counts .count-box i {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    background: #b61117;
    color: #fff;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.counts .count-box span {
    font-size: 36px;
    display: block;
    font-weight: 600;
    color: #082744;
}

.counts .count-box p {
    padding: 0;
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
}


/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/

.services .icon-box {
    text-align: center;
    border: 1px solid #d5e1ed;
    padding: 80px 20px;
    transition: all ease-in-out 0.3s;
    width: -webkit-fill-available;
}

.services .icon-box .icon {
    margin: 0 auto;
    width: 64px;
    height: 64px;
    background: #b61117;
    border-radius: 5px;
    transition: all 0.3s ease-out 0s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transform-style: preserve-3d;
    position: relative;
    z-index: 2;
}

.services .icon-box .icon i {
    color: #fff;
    font-size: 28px;
    transition: ease-in-out 0.3s;
}

.services .icon-box .icon::before {
    position: absolute;
    content: "";
    left: -8px;
    top: -8px;
    height: 100%;
    width: 100%;
    background: rgba(25, 119, 204, 0.2);
    border-radius: 5px;
    transition: all 0.3s ease-out 0s;
    transform: translateZ(-1px);
    z-index: -1;
}

.services .icon-box h4 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 24px;
}

.services .icon-box h4 a {
    color: #2c4964;
}

.services .icon-box p {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.services .icon-box:hover {
    background: #b61117;
    border-color: #b61117;
}

.services .icon-box:hover .icon {
    background: #fff;
}

.services .icon-box:hover .icon i {
    color: #b61117;
}

.services .icon-box:hover .icon::before {
    background: rgba(255, 255, 255, 0.3);
}

.services .icon-box:hover h4 a,
.services .icon-box:hover p {
    color: #fff;
}


/*--------------------------------------------------------------
# Appointments
--------------------------------------------------------------*/

.appointment .php-email-form {
    width: 100%;
}

.appointment .php-email-form .form-group {
    padding-bottom: 8px;
}

.appointment .php-email-form .validate {
    display: none;
    color: red;
    margin: 0 0 15px 0;
    font-weight: 400;
    font-size: 13px;
}

.appointment .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    font-weight: 600;
}

.appointment .php-email-form .error-message br+br {
    margin-top: 25px;
}

.appointment .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

.appointment .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
}

.appointment .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
}

.appointment .php-email-form input,
.appointment .php-email-form textarea,
.appointment .php-email-form select {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    padding: 10px !important;
}

.appointment .php-email-form input:focus,
.appointment .php-email-form textarea:focus,
.appointment .php-email-form select:focus {
    border-color: #b61117;
}

.appointment .php-email-form input,
.appointment .php-email-form select {
    height: 44px;
}

.appointment .php-email-form textarea {
    padding: 10px 12px;
}

.appointment .php-email-form button[type=submit] {
    background: #b61117;
    border: 0;
    padding: 10px 35px;
    color: #fff;
    transition: 0.4s;
    border-radius: 50px;
}

.appointment .php-email-form button[type=submit]:hover {
    background: black;
}


/*--------------------------------------------------------------
# Departments
--------------------------------------------------------------*/

.departments {
    overflow: hidden;
}

.departments .nav-tabs {
    border: 0;
}

.departments .nav-link {
    border: 0;
    padding: 12px 15px 12px 0;
    transition: 0.3s;
    color: #2c4964;
    border-radius: 0;
    border-right: 2px solid #ebf1f6;
    font-weight: 600;
    font-size: 15px;
}

.departments .nav-link:hover {
    color: #b61117;
}

.departments .nav-link.active {
    color: #b61117;
    border-color: #b61117;
}

.departments .tab-pane.active {
    animation: fadeIn 0.5s ease-out;
    display: contents;
}

.departments .details h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #b61117;
}

.departments .details p {
    color: #777777;
}

.departments .details p:last-child {
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .departments .nav-link {
        border: 0;
        padding: 15px;
    }
    .departments .nav-link.active {
        color: #fff;
        background: #b61117;
    }
}


/*--------------------------------------------------------------
# zaposleni
--------------------------------------------------------------*/

.zaposleni {
    background: #fff;
}

.zaposleni .member {
    position: relative;
    box-shadow: 0px 2px 15px rgba(44, 73, 100, 0.08);
    padding: 30px;
    border-radius: 10px;
}

.zaposleni .member .pic {
    overflow: hidden;
    width: 180px;
    border-radius: 50%;
}

.zaposleni .member .pic img {
    transition: ease-in-out 0.3s;
}

.zaposleni .member:hover img {
    transform: scale(1.1);
}

.zaposleni .member .member-info {
    padding-left: 30px;
}

.zaposleni .member h4 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 20px;
    color: #b61117;
}

.zaposleni .member span {
    display: block;
    font-size: 15px;
    padding-bottom: 10px;
    position: relative;
    font-weight: 500;
}

.zaposleni .member span::after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 1px;
    background: #b2c8dd;
    bottom: 0;
    left: 0;
}

.zaposleni .member p {
    margin: 10px 0 0 0;
    font-size: 14px;
}

.zaposleni .member .social {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.zaposleni .member .social a {
    transition: ease-in-out 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    width: 32px;
    height: 32px;
    background: #a0bcd5;
}

.zaposleni .member .social a i {
    color: #fff;
    font-size: 16px;
    margin: 0 2px;
}

.zaposleni .member .social a:hover {
    background: #b61117;
}

.zaposleni .member .social a+a {
    margin-left: 8px;
}


/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/

.faq .faq-list {
    padding: 0 100px;
}

.faq .faq-list ul {
    padding: 0;
    list-style: none;
}

.faq .faq-list li+li {
    margin-top: 15px;
}

.faq .faq-list li {
    padding: 20px;
    background: #fff;
    border-radius: 4px;
    position: relative;
}

.faq .faq-list a {
    display: block;
    position: relative;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    padding: 0 30px;
    outline: none;
    cursor: pointer;
}

.faq .faq-list .icon-help {
    font-size: 24px;
    position: absolute;
    right: 0;
    left: 20px;
    color: #76b5ee;
}

.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
    font-size: 24px;
    position: absolute;
    right: 0;
    top: 0;
}

.faq .faq-list p {
    margin-bottom: 0;
    padding: 10px 0 0 0;
}

.faq .faq-list .icon-show {
    display: none;
}

.faq .faq-list a.collapsed {
    color: #343a40;
}

.faq .faq-list a.collapsed:hover {
    color: #b61117;
}

.faq .faq-list a.collapsed .icon-show {
    display: inline-block;
}

.faq .faq-list a.collapsed .icon-close {
    display: none;
}

@media (max-width: 1200px) {
    .faq .faq-list {
        padding: 0;
    }
}


/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/

.testimonials .testimonial-wrap {
    padding-left: 50px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
    overflow: hidden;
}

.testimonials .testimonial-item {
    box-sizing: content-box;
    padding: 30px 30px 30px 60px;
    margin: 30px 15px;
    min-height: 200px;
    box-shadow: 0px 2px 12px rgba(44, 73, 100, 0.08);
    position: relative;
    background: #fff;
}

.testimonials .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 10px;
    border: 6px solid #fff;
    position: absolute;
    left: -45px;
}

.testimonials .testimonial-item h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #111;
}

.testimonials .testimonial-item h4 {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
    color: #badaf7;
    font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
}

.testimonials .testimonial-item p {
    font-style: italic;
    margin: 15px auto 15px auto;
}

.testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #b61117;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #b61117;
}

@media (max-width: 767px) {
    .testimonials .testimonial-wrap {
        padding-left: 0;
    }
    .testimonials .testimonials-carousel,
    .testimonials .testimonials-slider {
        overflow: hidden;
    }
    .testimonials .testimonial-item {
        padding: 30px;
        margin: 15px;
    }
    .testimonials .testimonial-item .testimonial-img {
        position: static;
        left: auto;
    }
}


/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/

.gallery .gallery-item {
    overflow: hidden;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

.gallery .gallery-item img {
    transition: all ease-in-out 0.4s;
}

.gallery .gallery-item:hover img {
    transform: scale(1.1);
}


/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/

.contact .info {
    width: 100%;
    background: #fff;
}

.contact .info i {
    font-size: 20px;
    color: #b61117;
    float: left;
    width: 44px;
    height: 44px;
    background: #d6e9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
}

.contact .info h4 {
    padding: 0 0 0 60px;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #2c4964;
}

.contact .info p {
    padding: 0 0 0 60px;
    margin-bottom: 0;
    font-size: 14px;
    color: #4b7dab;
}

.contact .info .email,
.contact .info .phone {
    margin-top: 40px;
}

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {
    background: #b61117;
    color: #fff;
}

.contact .php-email-form {
    width: 100%;
    background: #fff;
}

.contact .php-email-form .form-group {
    padding-bottom: 8px;
}

.contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    font-weight: 600;
}

.contact .php-email-form .error-message br+br {
    margin-top: 25px;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
}

.contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
}

.contact .php-email-form input {
    height: 44px;
}

.contact .php-email-form textarea {
    padding: 10px 12px;
}

.contact .php-email-form button[type=submit] {
    background: #b61117;
    border: 0;
    padding: 10px 35px;
    color: #fff;
    transition: 0.4s;
    border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
    background: black;
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

#footer {
    color: #444444;
    font-size: 14px;
    background: #f1f7fd;
}

#footer .footer-top {
    padding: 60px 0 30px 0;
    background: #fff;
    box-shadow: 0px 2px 15px rgba(25, 119, 204, 0.1);
}

#footer .footer-top .footer-contact {
    margin-bottom: 30px;
}

#footer .footer-top .footer-contact h4 {
    font-size: 22px;
    margin: 0 0 30px 0;
    padding: 2px 0 2px 0;
    line-height: 1;
    font-weight: 700;
}

#footer .footer-top .footer-contact p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
    font-family: "Raleway", sans-serif;
    color: #777777;
}

#footer .footer-top h4 {
    font-size: 16px;
    font-weight: bold;
    color: #444444;
    position: relative;
    padding-bottom: 12px;
}

#footer .footer-top .footer-links {
    margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .footer-top .footer-links ul i {
    padding-right: 2px;
    color: black;
    font-size: 18px;
    line-height: 1;
}

#footer .footer-top .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
    padding-top: 0;
}

#footer .footer-top .footer-links ul a {
    color: #777777;
    transition: 0.3s;
    display: inline-block;
    line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
    text-decoration: none;
    color: #b61117;
}

#footer .footer-newsletter {
    font-size: 15px;
}

#footer .footer-newsletter h4 {
    font-size: 16px;
    font-weight: bold;
    color: #444444;
    position: relative;
    padding-bottom: 12px;
}

#footer .footer-newsletter form {
    margin-top: 30px;
    background: #fff;
    padding: 6px 10px;
    position: relative;
    border-radius: 50px;
    text-align: left;
    border: 1px solid #bfdcf7;
}

.input {
    height: 40px;
    padding: 0px 15px;
    border: 1px solid #E4E7ED;
    background-color: #FFF;
    width: 100%;
}

#footer .footer-newsletter form input[type=email] {
    border: 0;
    padding: 4px 8px;
    width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 20px;
    background: #b61117;
    color: #fff;
    transition: 0.3s;
    border-radius: 50px;
}

#footer .footer-newsletter form input[type=submit]:hover {
    background: black;
}

#footer .credits {
    padding-top: 5px;
    font-size: 13px;
    color: #444444;
}

#footer .social-links a {
    font-size: 18px;
    display: inline-block;
    background: #b61117;
    color: #fff;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 50%;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
}

#footer .social-links a:hover {
    background: black;
    color: #fff;
    text-decoration: none;
}


/* product css */

.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.product-item {
    margin-bottom: 10px;
    text-align: center;
    border: 1px solid #F5F5F5;
    border-bottom: 2px solid #F5F5F5;
    background: white;
    transition: .4s linear;
}

.product-item:hover {
    border-bottom: 2px solid #fc5a5a;
}

.product-item:hover .button {
    background: #fc5a5a;
}

.product-item img {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.product-list {
    padding: 15px 0;
}

.product-list h3 {
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 400;
    color: #444444;
    margin: 0 0 10px 0;
}

.price {
    font-family: "Open Sans";
    font-size: 16px;
    color: #fc5a5a;
    display: block;
    margin-bottom: 12px;
}

.button {
    font-family: "Open Sans";
    display: inline-block;
    padding: 1px 12px 0;
    margin: 0 auto;
    background: #cccccc;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
    line-height: 28px;
    transition: .4s linear
}


/*=========================================================
	09 -> CHECKOUT PAGE
===========================================================*/

.billing-details {
    margin-bottom: 30px;
}

.shiping-details {
    margin-bottom: 30px;
}

.order-details {
    position: relative;
    padding: 0px 30px 30px;
    border-right: 1px solid #E4E7ED;
    border-left: 1px solid #E4E7ED;
    border-bottom: 1px solid #E4E7ED;
}

.order-details:before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -15px;
    height: 30px;
    border-top: 1px solid #E4E7ED;
    border-left: 1px solid #E4E7ED;
    border-right: 1px solid #E4E7ED;
}

.order-summary {
    margin: 15px 0px;
}

.order-summary .order-col {
    display: table;
    width: 100%;
}

.order-summary .order-col:after {
    content: "";
    display: block;
    clear: both;
}

.order-summary .order-col>div {
    display: table-cell;
    padding: 10px 0px;
}

.order-summary .order-col>div:first-child {
    width: calc(100% - 150px);
}

.order-summary .order-col>div:last-child {
    width: 150px;
    text-align: right;
}

.order-summary .order-col .order-total {
    font-size: 24px;
    color: #D10024;
}

.order-details .payment-method {
    margin: 30px 0px;
}

.order-details .order-submit {
    display: block;
    margin-top: 30px;
}

.primary-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #D10024;
    border: none;
    border-radius: 40px;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}


/* add to cart css */

.product {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

#cart {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 20px;
}

#cart-items {
    list-style-type: none;
    padding: 0;
}

#cart-items li {
    margin-bottom: 10px;
}


/* shopping cart */

.container1 {
    /*width: 900px;*/
    margin: auto;
    /*max-width: 90vw;*/
    text-align: center;
    padding-top: 10px;
    transition: 0.5s;
}

header img {
    width: 40px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*padding-top: 20%;*/
}

header .iconCart {
    position: relative;
    z-index: 1;
}

header .totalQuantity {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: x-large;
    background-color: #b31010;
    width: 20px;
    height: 20px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transform: translateX(20px);
}

.klimaProduct,
.klimaGreeProduct,
.klimaBergenProduct,
.precistacProduct,
.klimaDaikinProduct {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.listProduct {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pumpaProduct {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.preciscacProduct {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.multisplitProduct {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.listProduct .item img,
.multisplitProduct .item img,
.klimaProduct .item img,
.klimaGreeProduct .item img,
.klimaBergenProduct .item img,
.precistacProduct .item img,
.klimaDaikinProduct .item img,
.pumpaProduct .item img,
.preciscacProduct .item img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    padding-top: 10px;
}

.listProduct .item,
.multisplitProduct .item,
.klimaProduct .item,
.klimaGreeProduct .item,
.klimaBergenProduct .item,
.precistacProduct .item,
.klimaDaikinProduct .item,
.pumpaProduct .item,
.preciscacProduct .item {
    position: relative;
    padding-bottom: 15px;
    text-align: center;
}

.listProduct .item:hover,
.multisplitProduct .item:hover,
.klimaProduct .item:hover,
.klimaGreeProduct .item:hover,
.pumpaProduct .item:hover,
.preciscacProduct .item:hover {
    box-shadow: 0px 0px 6px 0px #E4E7ED, 0px 0px 0px 2px rgb(182, 17, 23);
    ;
}

.listProduct .item h2,
.multisplitProduct .item h2,
.klimaProduct .item h2,
.klimaGreeProduct .item h2,
.klimaBergenProduct .item h2,
.precistacProduct .item h2,
.klimaDaikinProduct .item h2,
.pumpaProduct .item h2,
.preciscacProduct .item h2 {
    font-weight: 700;
    font-size: x-large;
    height: 90px;
}

.listProduct .item .price,
.multisplitProduct .item .price,
.klimaProduct .item .price,
.klimaGreeProduct .item .price,
.klimaBergenProduct .item .price,
.precistacProduct .item .price,
.klimaDaikinProduct .item .price,
.pumpaProduct .item .price,
.preciscacProduct .item .price {
    font-size: x-large;
}


/*.listProduct .item button {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #e6572c;
    color: #fff;
    width: 50%;
    border: none;
    padding: 20px 30px;
    box-shadow: 0 10px 50px #000;
    cursor: pointer;
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
}

.listProduct .item:hover button {
    transition: 0.5s;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}*/


/* klima product css */


/*.klimaProduct {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.klimaProduct .item img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}

.klimaProduct .item {
    position: relative;
    text-align: center;
}

.klimaProduct .item h2 {
    font-weight: 700;
    font-size: x-large;
}

.klimaProduct .item .price {
    font-size: x-large;
}*/


/*.klimaProduct .item button {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #e6572c;
    color: #fff;
    width: 50%;
    border: none;
    padding: 20px 30px;
    box-shadow: 0 10px 50px #000;
    cursor: pointer;
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
}

.klimaProduct .item:hover button {
    transition: 0.5s;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}*/

.cart {
    color: #fff;
    position: fixed;
    width: 400px;
    max-width: 80vw;
    height: 100%;
    background-color: #0E0F11;
    top: 0px;
    right: -100%;
    display: grid;
    grid-template-rows: 50px 1fr 50px;
    gap: 20px;
    transition: right 1s ease;
    z-index: 1111;
}

.cart .buttons .checkout {
    background-color: #b61117;
    color: #000;
}

.cart h2 {
    color: #E8BC0E;
    padding: 20px;
    height: 30px;
    margin: 0;
}

.cart .listCart .item {
    display: grid;
    grid-template-columns: 50px 1fr 70px;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.cart .listCart img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
}

.cart .listCart .item .name {
    font-weight: bold;
}

.cart .listCart .item .quantity {
    display: flex;
    justify-content: end;
    align-items: center;
}

.cart .listCart .item .quantity span {
    display: block;
    width: 50px;
    text-align: center;
}

.cart .listCart {
    padding: 20px;
    overflow: auto;
}

.cart .listCart::-webkit-scrollbar {
    width: 0;
}

.cart .buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}

.cart .buttons div {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
}

.cart .buttons a {
    color: #fff;
    text-decoration: none;
}

.checkoutLayout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    padding: 20px;
    margin-top: 100px;
}

.checkoutLayout .right {
    background-color: #f8f9fa;
    border-radius: 20px;
    padding: 40px;
    color: #000000;
    box-shadow: 0 10px 20px #5555
}

.checkoutLayout .right .form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    border-bottom: 1px solid #7a7fe2;
    padding-bottom: 20px;
}

.checkoutLayout .form h1,
.checkoutLayout .form .group:nth-child(-n+3) {
    grid-column-start: 1;
    grid-column-end: 3;
}

.checkoutLayout .form input,
.checkoutLayout .form select {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 20px;
    margin-top: 10px;
    border: none;
    /*background-color: #b61117;*/
    /*color: #fff;*/
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.checkoutLayout .right .return .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.checkoutLayout .right .return .row div:nth-child(2) {
    font-weight: bold;
    font-size: x-large;
}

.buttonCheckout {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 20px;
    background-color: #b61117;
    margin-top: 20px;
    font-weight: bold;
    color: #fff;
}

.returnCart h1 {
    border-top: 1px solid #eee;
    padding: 20px 0;
}

.returnCart .list .item img {
    height: 80px;
}

.returnCart .list .item {
    display: grid;
    grid-template-columns: 80px 1fr 50px 80px;
    align-items: center;
    gap: 70px;
    margin-bottom: 30px;
    padding: 0 10px;
    box-shadow: 0 10px 20px #5555;
    border-radius: 20px;
}

.returnCart .list .item .name,
.returnCart .list .item .returnPrice {
    /*font-size: large;*/
    font-weight: bold;
}

.imageDetails {
    height: 160px;
    text-align: center;
    /*padding-left: 40%;*/
}

.info {
    padding-left: 20%;
}

#filters {}

.category1>li {
    display: flex;
}


/* General filter container styling */

#filters {
    margin: 1rem;
    padding: 1rem;
    width: auto;
}


/* Header styling */

#filters h3,
#filters h4 {
    color: #fc5a5a;
    margin-bottom: 1rem;
}

#filters h4 {
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}


/* List and checkbox styling */

#filters ul {
    list-style-type: none;
    padding-left: 0;
}

#filters li {
    margin-bottom: 0.5rem;
}

#filters label {
    font-size: 1rem;
    color: white;
    cursor: pointer;
}

#filters input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 0.5rem;
}

#filters label:hover {
    color: #b31010;
}


/* Responsive design */

@media (max-width: 768px) {
    #filters {
        margin: 1rem;
        padding: 1rem;
        width: auto;
    }
    .checkoutLayout {
        display: contents;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
        padding: 20px;
        margin-top: 100px;
    }
}

.terms {
    margin-top: 70px;
}

.termsp {
    text-align: justify;
}


/* dugme za korpu dodavanje */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700');

/* Color Hexs */


/* Primary Colors */


/* Font Colors */


/* Font Families */


/* Primary */

.btn__primary,
.added__animation span {
    font-family: 'Open Sans', sans-serif;
}

.btn__primary {
    font-size: 16px;
    line-height: 31px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
}

.btn__primary {
    background: #9acfd8;
    color: #fff;
    padding: 15px 20px;
    display: inline-block;
    margin: 50px;
    text-align: center;
    border-radius: 10px;
    border: none;
    outline: none;
    transition: background 0.6s ease;
}

.btn__primary:hover {
    background: rgba(154, 207, 216, 0.65);
}

body {
    position: relative;
    height: 100vh;
}

.added__animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 38px;
    width: 38px;
    display: inline-block;
    border: 2px solid #9acfd8;
    border-radius: 50%;
    text-align: center;
    opacity: 0;
    transform: scale(0.75) translateY(0px);
    transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.18, 1.22, 0.61, 1.38);
}

.added__animation span {
    color: #9acfd8;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: 15px;
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: 14px;
    line-height: 1em;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.added__animation.clicked {
    opacity: 1;
    transform: scale(1) translateY(-30px);
}


/* dugme za korpu */

.listProduct .item button,
.klimaProduct .item button,
.klimaGreeProduct .item button,
.klimaBergenProduct .item button,
.precistacProduct .item button,
.klimaDaikinProduct .item button,
.pumpaProduct .item button,
.multisplitProduct .item button,
.preciscacProduct .item button,
.productDetails button {
    --background: #b61117;
    --text: #fff;
    --cartt: #fff;
    --tick: var(--background);
    position: relative;
    border: none;
    background: none;
    padding: 8px 28px;
    border-radius: 8px;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    min-width: 144px;
    color: var(--text);
    background: var(--background);
    transform: scale(var(--scale, 1));
    transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27);
}

.listProduct .item button:active,
.preciscacProduct .item button:active,
.pumpaProduct .item button:active,
.multisplitProduct .item button:active,
.klimaProduct .item button:active,
.klimaGreeProduct .item button:active,
.productDetails button:active {
    --scale: 0.95;
}

.listProduct .item button span,
.pumpaProduct .item button span,
.multisplitProduct .item button span,
.preciscacProduct .item button span,
.klimaProduct .item button span,
.klimaGreeProduct .item button span,
.klimaBergenProduct .item button span,
.precistacProduct .item button span,
.klimaDaikinProduct .item button span,
.productDetails button span {
    font-size: 14px;
    font-weight: 500;
    display: block;
    position: relative;
    padding-left: 24px;
    margin-left: -8px;
    line-height: 26px;
    transform: translateY(var(--span-y, 0));
    transition: transform 0.7s ease;
}

.listProduct .item button span:before,
.listProduct .item button span:after,
.pumpaProduct .item button .spann:before,
.pumpaProduct .item button .spann:after,
.multisplitProduct .item button span:before,
.multisplitProduct .item button span:after,
.preciscacProduct .item button span:before,
.preciscacProduct .item button span:after,
.klimaProduct .item button span:before,
.klimaProduct .item button span:after,
.klimaGreeProduct .item button span:before,
.klimaGreeProduct .item button span:after,
.klimaBergenProduct .item button span:before,
.klimaBergenProduct .item button span:after,
.precistacProduct .item button span:before,
.precistacProduct .item button span:after,
.klimaDaikinProduct .item button span:before,
.klimaDaikinProduct .item button span:after,
.productDetails .spann:before,
.productDetails .spann:after {
    content: '';
    width: var(--w, 2px);
    height: var(--h, 14px);
    border-radius: 1px;
    position: absolute;
    left: var(--l, 8px);
    top: var(--t, 6px);
    background: currentColor;
    transform: scale(0.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0));
    transition: transform 0.65s ease 0.05s;
}

.listProduct .item button span:after,
.pumpaProduct .item button span:after,
.preciscacProduct .item button span:after,
.multisplitProduct .item button span:after,
.klimaProduct .item button span:after,
.klimaGreeProduct .item button span:after,
.klimaBergenProduct .item button span:after,
.precistacProduct .item button span:after,
.klimaDaikinProduct .item button span:after,
.productDetails .spann::after {
    --w: 14px;
    --h: 2px;
    --l: 2px;
    --t: 12px;
}

.listProduct .item button .cartt,
.preciscacProduct .item button .cartt,
.multisplitProduct .item button .cartt,
.pumpaProduct .item button .cartt,
.klimaProduct .item button .cartt,
.klimaGreeProduct .item button .cartt,
.klimaBergenProduct .item button .cartt,
.precistacProduct .item button .cartt,
.klimaDaikinProduct .item button .cartt,
.productDetails button .cartt {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -13px 0 0 -18px;
    transform-origin: 12px 23px;
    transform: translateX(-120px) rotate(-18deg);
}

.listProduct .item button .cartt:before,
.listProduct .item button .cartt:after,
.pumpaProduct .item button .cartt:before,
.pumpaProduct .item button .cartt:after,
.preciscacProduct .item button .cartt:before,
.preciscacProduct .item button .cartt:after,
.multisplitProduct .item button .cartt:before,
.multisplitProduct .item button .cartt:after,
.klimaProduct .item button .cartt:before,
.klimaProduct .item button .cartt:after,
.klimaGreeProduct .item button .cartt:before,
.klimaGreeProduct .item button .cartt:after,
.klimaBergenProduct .item button .cartt:before,
.klimaBergenProduct .item button .cartt:after,
.precistacProduct .item button .cartt:before,
.precistacProduct .item button .cartt:after,
.klimaDaikinProduct .item button .cartt:before,
.klimaDaikinProduct .item button .cartt:after,
.productDetails button .cartt:before,
.productDetails button .cartt:after {
    content: '';
    position: absolute;
}

.listProduct .item button .cartt:before,
.preciscacProduct .item button .cartt:before,
.pumpaProduct .item button .cartt:before,
.multisplitProduct .item button .cartt:before,
.klimaProduct .item button .cartt:before,
.klimaGreeProduct .item button .cartt:before,
.klimaBergenProduct .item button .cartt:before,
.precistacProduct .item button .cartt:before,
.klimaDaikinProduct .item button .cartt:before,
.productDetails button .cartt:before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--cartt);
    bottom: 0;
    left: 9px;
    filter: drop-shadow(11px 0 0 var(--cartt));
}

.listProduct .item button .cartt:after,
.preciscacProduct .item button .cartt:after,
.pumpaProduct .item button .cartt:after,
.multisplitProduct .item button .cartt:after,
.klimaProduct .item button .cartt:after,
.klimaGreeProduct .item button .cartt:after,
.klimaBergenProduct .item button .cartt:after,
.precistacProduct .item button .cartt:after,
.klimaDaikinProduct .item button .cartt:after,
.productDetails button .cartt:after {
    width: 16px;
    height: 9px;
    background: var(--cartt);
    left: 9px;
    bottom: 7px;
    transform-origin: 50% 100%;
    transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0));
    transition: transform 1.2s ease var(--fill-d);
}

.listProduct .item button .cartt svg,
.preciscacProduct .item button .cartt svg,
.pumpaProduct .item button .cartt svg,
.multisplitProduct .item button .cartt svg,
.klimaProduct .item button .cartt svg,
.klimaGreeProduct .item button .cartt svg,
.klimaBergenProduct .item button .cartt svg,
.precistacProduct .item button .cartt svg,
.klimaDaikinProduct .item button .cartt svg,
.productDetails button .cartt svg {
    z-index: 1;
    width: 36px;
    height: 26px;
    display: block;
    position: relative;
    fill: none;
    stroke: var(--cartt);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.listProduct .item button .cartt svg polyline:last-child,
.preciscacProduct .item button .cartt svg polyline:last-child,
.pumpaProduct .item button .cartt svg polyline:last-child,
.multisplitProduct .item button .cartt svg polyline:last-child,
.klimaProduct .item button .cartt svg polyline:last-child,
.klimaGreeProduct .item button .cartt svg polyline:last-child,
.klimaBergenProduct .item button .cartt svg polyline:last-child,
.precistacProduct .item button .cartt svg polyline:last-child,
.klimaDaikinProduct .item button .cartt svg polyline:last-child,
.productDetails button .cartt svg polyline:last-child {
    stroke: var(--tick);
    stroke-dasharray: 10px;
    stroke-dashoffset: var(--offset, 10px);
    transition: stroke-dashoffset 0.4s ease var(--offset-d);
}

.listProduct .item button.loading,
.preciscacProduct .item button.loading,
.pumpaProduct .item button.loading,
.multisplitProduct .item button.loading,
.klimaProduct .item button.loading,
.klimaGreeProduct .item button.loading,
.klimaBergenProduct .item button.loading,
.precistacProduct .item button.loading,
.klimaDaikinProduct .item button.loading,
.productDetails button.loading {
    --scale: 0.95;
    --span-y: -32px;
    --icon-r: 180deg;
    --fill: 1;
    --fill-d: 0.8s;
    --offset: 0;
    --offset-d: 1.73s;
}

.listProduct .item button.loading .cartt,
.preciscacProduct .item button.loading .cartt,
.pumpaProduct .item button.loading .cartt,
.multisplitProduct .item button.loading .cartt,
.klimaProduct .item button.loading .cartt,
.klimaGreeProduct .item button.loading .cartt,
.klimaBergenProduct .item button.loading .cartt,
.precistacProduct .item button.loading .cartt,
.klimaDaikinProduct .item button.loading .cartt,
.productDetails button.loading .cartt {
    animation: cartt 3.4s linear forwards 0.2s;
}

@keyframes cartt {
    12.5% {
        transform: translateX(-60px) rotate(-18deg);
    }
    25%,
    45%,
    55%,
    75% {
        transform: none;
    }
    50% {
        transform: scale(0.9);
    }
    44%,
    56% {
        transform-origin: 12px 23px;
    }
    45%,
    55% {
        transform-origin: 50% 50%;
    }
    87.5% {
        transform: translateX(70px) rotate(-18deg);
    }
    100% {
        transform: translateX(140px) rotate(-18deg);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}


/* filteri sidebar */

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 11111111;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidebar .col-md-3 {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidebar .col-md-3:hover {
    color: #f1f1f1;
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.closebtn:hover {
    color: white
}

.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: white;
    color: #b61117;
    padding: 10px 15px;
    border: solid 2px black;
    border-radius: 20px;
}

.openbtn:hover {
    background-color: #b61117;
    color: white
}


/*.openbtn i:hover {
    background-color: #b31010;
    color: white!important
}*/

#main {
    transition: margin-left .5s;
    padding: 16px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
    .sidebar {
        padding-top: 15px;
    }
    .sidebar .col-md-3 {
        font-size: 18px;
    }
}


/* search bar */


/* Search Container */

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0px 0px 0px;
    padding: 0 10px;
    /* Dodaj padding za mobilne uređaje */
}

.add-to-cart-button {
    text-align: center!important;
}


/* Search Bar */

#search-bar {
    width: 100%;
    max-width: 600px;
    /* Povećaj max-width za veće ekrane */
    padding: 10px 20px;
    border: 2px solid #ccc;
    border-radius: 50px;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
}

#search-bar::placeholder {
    color: #aaa;
    font-style: italic;
}

#search-bar:focus {
    border-color: #b61117;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
}


/* Media Queries for Responsiveness */

@media (max-width: 768px) {
    #search-bar {
        font-size: 14px;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    #search-bar {
        font-size: 12px;
        padding: 6px 12px;
    }
}


/* lupa */

* Stilizacija input polja */ #search-bar {
    /*padding-right: 30px;*/
    /* Dodajemo prostor za ikonu */
}


/* Stilizacija dugmeta pretrage */

#search-button {
    position: relative;
    top: 50%;
    border: none;
    background: none;
    cursor: pointer;
}


/* Stilizacija ikone lupe */

#search-button i {
    font-size: 1.5rem;
    color: #555;
    /* Boja ikone */
    transition: color 0.3s ease;
    /* Tranzicija boje */
}


/* Stilizacija ikone lupe na hover */

#search-button:hover i {
    color: #000;
    /* Promena boje na hover */
}


/* animacija za search */

.item {
    opacity: 1;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

.hidden {
    display: none;
}


/* Details product css */

.productDetails {
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.productDetails img {
    max-width: 100%;
    border-radius: 8px;
}

.productDetails h2 {
    font-size: 24px;
    margin: 10px 0;
    text-align: center;
    padding-top: 20px;
}

.productDetails .price {
    font-size: 20px;
    color: #b61117;
    margin-bottom: 20px;
    text-align: center;
}

.productDetails .tabs {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.productDetails .tab {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-bottom: none;
    background-color: #f8f9fa;
    margin-right: 5px;
    border-radius: 8px 8px 0 0;
}

.productDetails .tab.active {
    background-color: #fff;
    border-bottom: 2px solid #fff;
    font-weight: bold;
}

.productDetails .tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
}

.productDetails .tab-content.active {
    display: block;
}

.productDetails table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.productDetails table,
.productDetails th,
.productDetails td {
    border: 1px solid #ddd;
}

.productDetails th,
.productDetails td {
    padding: 12px;
    text-align: left;
}

.productDetails th {
    background-color: #f8f9fa;
}

.productDetails a {
    display: inline-block;
    margin-top: 20px;
    color: #b61117;
    text-decoration: none;
}

.productDetails a:hover {
    text-decoration: underline;
}

.empty-cell {
    width: 100px;
}


/* Stil za mobilni prikaz */

@media (max-width: 768px) {
    .productDetails table {
        border: 0;
    }
    .productDetails thead {
        display: none;
    }
    .productDetails tr {
        display: block;
        margin-bottom: 10px;
    }
    .productDetails td,
    .productDetails th {
        display: block;
        text-align: right;
        position: relative;
        padding-left: 50%;
        border-bottom: 1px solid #ddd;
    }
    .productDetails td::before,
    .productDetails th::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 10px;
        font-weight: bold;
        white-space: nowrap;
    }
}


/* Carousel CSS */

.carousel {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
    overflow: hidden;
    border-radius: 8px;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-item {
    position: relative;
    float: left;
    width: 100%;
    /*height: 100%!important;*/
    margin-right: -100%;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
    overflow: hidden;
}

.carousel-item.active {
    display: flex;
}

.carousel img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.carousel-control {
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    cursor: pointer;
    background-color: rgb(0, 0, 0);
}

.carousel-control.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.carousel-control.next {
    right: 0;
    border-radius: 0 3px 3px 0;
}

.carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-item {
    text-align: center;
}


/* Responsive adjustments */

@media (max-width: 768px) {
    .carousel-item {
        height: 300px;
        /* Adjust height for smaller screens */
    }
    .carousel-control {
        font-size: 16px;
        padding: 12px;
    }
    .productDetails .tab-content.active {
        display: contents;
    }
}

@media (max-width: 480px) {
    .carousel-item {
        height: 200px;
        /* Adjust height for smaller screens */
    }
    .carousel-control {
        font-size: 14px;
        padding: 10px;
    }
    .productDetails .tab-content.active {
        display: contents;
    }
}


/* Tabs CSS */

.tabs {
    display: flex;
    margin-top: 20px;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-bottom: none;
    background: #f7f7f7;
    transition: background 0.3s ease;
}

.tab:hover {
    background: #e7e7e7;
}

.tab.active {
    background: #ffffff;
    border-bottom: 1px solid #ffffff;
}


/* Carousel CSS */

.carousel {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
    overflow: hidden;
    border-radius: 8px;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: center;
    height: 400px;
    /* Set a fixed height for the carousel items */
}

.carousel-item.active {
    display: flex;
}

.carousel img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.carousel-control {
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 255);
}

.carousel-control.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.carousel-control.next {
    right: 0;
    border-radius: 0 3px 3px 0;
}

.carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* Responsive adjustments */

@media (max-width: 768px) {
    .carousel-item {
        height: 300px;
        /* Adjust height for smaller screens */
    }
    .carousel-control {
        font-size: 16px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .carousel-item {
        height: 200px;
        /* Adjust height for smaller screens */
    }
    .carousel-control {
        font-size: 14px;
        padding: 10px;
    }
}


/* Tabs CSS */

.tabs {
    display: flex;
    margin-top: 20px;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-bottom: none;
    background: #f7f7f7;
    transition: background 0.3s ease;
}

.tab:hover {
    background: #e7e7e7;
}

.tab.active {
    background: #ffffff;
    border-bottom: 1px solid #ffffff;
}

.tab-content {
    /*display: none;*/
    flex-direction: column;
    overflow: hidden;
    /* Skrivanje viška sadržaja */
}

.tab-content.active {
    display: flex;
}

.tab-content>* {
    flex: 1;
    /* Svi elementi unutar tab-contenta zauzimaju podjednaki prostor */
    overflow-y: auto;
    /* Omogućava scroll ako je sadržaj prevelik */
}

#description {
    overflow-wrap: break-word;
    /* Prekida tekst na odgovarajućim mestima */
}

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

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


/* Stilovi za mobilne uređaje */

@media screen and (max-width: 768px) {
    .tabs {
        flex-direction: row;
        /* Kartice se prikazuju jedna ispod druge na mobilnim uređajima */
    }
    .tab {
        width: 100%;
        /* Kartice zauzimaju celu širinu ekrana */
        margin-bottom: 10px;
        /* Dodatni razmak između kartica */
    }
    .tab-content {
        overflow: visible;
        /* Skrivanje viška sadržaja */
    }
}


/* tabs za check out */

.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-bottom: none;
    background: #f7f7f7;
    transition: background 0.3s ease;
}

.tab-link:hover {
    background: #e7e7e7;
}

.tab-link.active {
    background: #ffffff;
    border-bottom: 1px solid #ffffff;
}

.listProduct .item a,
.pumpaProduct .item a {
    display: block;
}

.klimaGreeProduct .item a {
    display: block;
}

.klimaBergenProduct .item a {
    display: block;
}

.precistacProduct .item a {
    display: block;
}

.klimaDaikinProduct .item a {
    display: block;
}

.tab1 {
    display: none;
}

.tab1.active {
    display: block;
}

.daikinprodavnica {
    /*background-image: url("/images/daikinlogo.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-color: #cccccc;*/
}

@media (max-width: 480px) {
    .checkoutLayout .right .form {
        border-bottom: 1px solid #7a7fe2;
        padding-bottom: 20px;
        display: block;
    }
}


/* carusel pocetna */

.carousel-container {
    position: relative;
    /*max-width: 800px;*/
    width: 100%;
    margin: auto;
    overflow: hidden;
    margin-top: 11%;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height: 800px;
}

.carousel-slide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(0.8);
    /* Početna veličina slike je smanjena */
    transition: opacity 1s ease, transform 1s ease;
    /* Dodajemo tranziciju za skaliranje */
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.carousel-slide.active {
    display: block;
    opacity: 1;
    transform: scale(1);
    /* Postepeno povećava sliku do pune veličine */
}

.carousel-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: white;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    padding: 20px;
    text-align: center;
    font-size: 3.5rem;
    border-radius: 0 0 10px 10px;
    /* Dodaje blago zaobljenje na donje ivice */
    display: flex;
    justify-content: left;
    align-items: center;
    color: #b61117;
    margin: 0;
    font-weight: 700;
    line-height: 56px;
}


/* Mobile Responsiveness */

@media (max-width: 768px) {
    .carousel-container {
        max-width: 100%;
        height: 250px;
        margin-top: 27%;
        /* Smanjuje visinu na mobilnim uređajima */
    }
    .carousel-slide img {
        border-radius: 0;
        /* Uklanja border-radius za mobilne */
    }
    .carousel-text {
        font-size: 1.5rem;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .listProduct {
        grid-template-columns: repeat(2, 1fr);
    }
    #header .logo img {
        max-height: 50px;
        width: 230px;
    }
}


/* slider novi */


/* Modal styling */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    /* Dark background */
}

.modal-content {
    display: block;
    margin: auto;
    max-width: 100%;
    /* Ensure the image does not exceed screen width */
    max-height: 100%;
    /* Ensure the image does not exceed screen height */
    width: auto;
    height: auto;
    object-fit: contain;
    /* Ensure the image fits within the modal without distortion */
    transition: transform 0.3s;
    /* Smooth zoom-in effect */
}

.close2 {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.close2:hover,
.close2:focus {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
}


/* Centering the modal content with respect to the screen */

.modal-content {
    max-width: 90vw;
    /* Limit the image width to 90% of the viewport width */
    max-height: 90vh;
    /* Limit the image height to 90% of the viewport height */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Subtle shadow effect */
    border-radius: 8px;
    /* Rounded corners for a polished look */
}


/* css za wifi modul */

.wifi-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: #f9f9f9;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    left: 30%;
    width: fit-content;
}

.wifi-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.wifi-options label:hover {
    background: rgba(0, 128, 255, 0.1);
}

.wifi-options input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #b61117;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.wifi-options input[type="radio"]:checked {
    background: #b61117;
    border: 2px solid #b61117;
}

.wifi-options input[type="radio"]:checked::before {
    content: "";
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.add-to-cart-button {
    /*-ms-transform: translate(-50%, -50%);*/
    transform: translate(-50%, -50%)!important;
    /*top: 50%;*/
    left: 50%;
    margin-top: 30px;
}

.contactClassButton {
    /*-ms-transform: translate(-50%, -50%);*/
    transform: translate(-50%, -50%)!important;
    /*top: 50%;*/
    left: 50%;
    margin-top: 30px;
}

.noclasslabel {
    box-shadow: none !important
}

@media only screen and (max-width: 767px) {
    .wifi-options {
        left: 0%;
    }
}