/* =====================================================
   MINSK-PESOK.BY
   Industrial Premium Theme
   ===================================================== */

:root {

    /* Brand Colors */

    --dark: #111827;
    --dark-2: #1F2937;

    --yellow: #FBBF24;
    --yellow-hover: #F59E0B;

    --light: #F8FAFC;

    --text: #111827;
    --text-muted: #64748B;

    --border: #E5E7EB;

    --radius: 14px;

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

    --transition: .25s ease;
}

/* =====================================================
   BASE
   ===================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--light);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
}

a {
    transition: var(--transition);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text);
    font-weight: 700;
    line-height: 1.25;
}

.section-title {
    margin-bottom: 30px;
    font-weight: 700;
}

/* =====================================================
   HEADER
   ===================================================== */

.uk-navbar-container {
    background: rgba(17,24,39,.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.uk-logo {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: 1px;
}

.uk-navbar-nav > li > a {
    color: rgba(255,255,255,.85) !important;
}

.uk-navbar-nav > li > a:hover {
    color: var(--yellow) !important;
}

/* =====================================================
   HERO
   ===================================================== */
.hero {

    background:
        /**linear-gradient(
            rgba(17,24,39,.80),
            rgba(17,24,39,.85)
        ),*/
        url('../images/bg_hero.jpg');

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 720px;

    color: #fff;
}

.hero h1 {

    color: #fff;

    font-size: 58px;

    line-height: 1.1;

    margin-bottom: 20px;
}

.hero p {

    color: rgba(255,255,255,.85);

    font-size: 20px;
}

.hero-highlight {
    color: var(--yellow);
}

/* =====================================================
   BUTTONS
   ===================================================== */

.uk-button-primary,
.uk-button-warning {

    background: var(--yellow);
    color: var(--dark);

    border: 0;

    font-weight: 700;

    border-radius: 10px;

    transition: var(--transition);
}

.uk-button-primary:hover,
.uk-button-warning:hover {

    background: var(--yellow-hover);

    color: var(--dark);

    transform: translateY(-2px);
}

.uk-button-default {

    border-radius: 10px;
}

/* =====================================================
   CARDS
   ===================================================== */

.uk-card-default {

    border-radius: var(--radius);

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    transition: var(--transition);
}

.uk-card-default:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.12);
}

/* =====================================================
   CALCULATOR
   ===================================================== */

.calc-box {

    background: #fff;

    padding: 30px;

    border-radius: var(--radius);

    box-shadow: 0 15px 50px rgba(0,0,0,.15);
}

.calc-header h3{

    margin-bottom:5px;

}

.calc-header p{

    color:var(--text-muted);
    margin-bottom:20px;

}

.calc-label{

    display:block;
    margin-bottom:8px;
    font-weight:600;
	color: #111827;

}

.calc-select{

    height:54px;
    border-radius:12px;

}

.calc-result{

    margin-top:25px;

    background:#f8fafc;

    border-radius:12px;

    padding:20px;

    text-align:center;

}

.calc-result-label{

    font-size:14px;

    color:var(--text-muted);

    margin-bottom:10px;

}

.calc-price{

    font-size:36px;

    font-weight:800;

    color:var(--yellow-hover);

    line-height:1;

}

.calc-note{

    margin-top:10px;

    color:var(--text-muted);

    font-size:13px;

}

/* =====================================================
   FORMS
   ===================================================== */

.uk-input,
.uk-select,
.uk-textarea {

    border-radius: 10px;

    border: 1px solid var(--border);

    background: #fff;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {

    border-color: var(--yellow);

    box-shadow:
        0 0 0 3px rgba(251,191,36,.15);
}

/* =====================================================
   ADVANTAGES
   ===================================================== */

.feature-card {

    text-align: center;

    font-weight: 600;
}

.feature-card:hover {

    border-color: var(--yellow);
}

/* =====================================================
   TYPES
   ===================================================== */

.types-section {

    background: #fff;
}

.types-section h3 {

    color: var(--dark);
}

.types-section .uk-card:hover h3 {

    color: var(--yellow-hover);
}

/* =====================================================
   SEO BLOCK
   ===================================================== */

.seo-section {

    background: var(--light);
}

.seo-section p {

    color: var(--text-muted);

    margin-bottom: 18px;
}

.seo-section h2 {

    color: var(--dark);
}

/* =====================================================
   PRICES
   ===================================================== */

.price-card {

    text-align: center;

    border-top: 4px solid var(--yellow);
}

.price-card h3 {

    margin-bottom: 10px;
}

.price-card .price {

    color: var(--yellow-hover);

    font-size: 34px;

    font-weight: 700;
}

/* =====================================================
   DELIVERY CITIES
   ===================================================== */

.city-tag {

    background: var(--dark);

    color: #fff;

    padding: 8px 14px;

    border-radius: 30px;

    margin: 5px;

    display: inline-block;
}

.city-tag:hover {

    background: var(--yellow);

    color: var(--dark);
}

/* =====================================================
   FAQ
   ===================================================== */

.uk-accordion-title {

    font-weight: 600;

    color: var(--dark);
}

.uk-accordion-title:hover {

    color: var(--yellow-hover);
}

/* =====================================================
   CTA
   ===================================================== */

.cta-section {

    background: linear-gradient(
        135deg,
        var(--dark),
        var(--dark-2)
    );

    color: #fff;
}

.cta-section h2 {

    color: #fff;
}

.cta-section p {

    color: rgba(255,255,255,.75);
}

/* =====================================================
   FOOTER
   ===================================================== */

.footer {

    background: #0B1220;

    color: rgba(255,255,255,.8);
}

.footer a {

    color: var(--yellow);
}

.footer a:hover {

    color: #fff;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 960px) {

    .hero {

        min-height: auto;

        padding: 90px 0;
    }

    .hero h1 {

        font-size: 38px;
    }

    .hero p {

        font-size: 18px;
    }

    .calc-box {

        margin-top: 30px;
    }

}

@media (max-width: 640px) {

    .hero h1 {

        font-size: 32px;
    }

    .result {

        font-size: 24px;
    }

}