@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
}

/* Главни бои за микрофибер крпа */
:root {
    --main-color:#1d4ed8;
    --second-color:#38bdf8;
    --light-color:#f0f9ff;
    --dark-color:#0f172a;
}


.promo-gradient {
    background: linear-gradient(135deg, #042683 0%, #0ea5e9 100%);
}

.text-gradient {
    background: linear-gradient(135deg, #042683 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.custom-shadow {
    box-shadow: 0 20px 40px -15px rgba(14, 165, 233, 0.25);
}


/* Modal прозорец */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15,23,42,0.85);
    backdrop-filter: blur(8px);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9999;

    opacity: 0;
    pointer-events: none;

    transition: 0.3s ease;
}


.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}


.modal-content {
    background:white;
    border-radius:28px;

    padding:40px;

    width:92%;
    max-width:500px;

    text-align:center;

    box-shadow:
    0 25px 50px -12px rgba(0,0,0,.5);

    transform:scale(.9);

    transition:.3s ease;
}


.modal-overlay.active .modal-content {
    transform:scale(1);
}


/* Анимација за слики */
.product-image {
    transition:0.3s ease;
}


.product-image:hover {
    transform:scale(1.03);
}


/* Копчиња */
.main-button {
    background:#2563eb;
    color:white;

    font-weight:800;

    padding:18px 30px;

    border-radius:16px;

    transition:.3s ease;
}


.main-button:hover {
    background:#0ea5e9;
}


/* Картички */
.product-card {

    background:white;

    border-radius:28px;

    border:1px solid #dbeafe;

    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}


/* Поле за форма */
input,
select {

    width:100%;

    background:#f8fafc;

    border:1px solid #cbd5e1;

    border-radius:16px;

    padding:16px;

    font-weight:600;

}


input:focus,
select:focus {

    outline:none;

    border-color:#2563eb;

}


/* Mobile */
@media(max-width:768px){

    .modal-content{
        padding:25px;
    }

}

.gallery-btn {
    transition:0.3s ease;
}

.gallery-btn:hover {
    transform:scale(1.05);
}

.gallery-btn.border-blue-400 {
    border-color:#2563eb !important;
}