/* ItemShopSys custom shop css */
/* ===================================== */
/* REKSIOMC.PL ITEMSHOPSYS THEME */
/* ===================================== */

body{
    background:#020a18 !important;
}

/* ================= NAVBAR ================= */

.navbar{
    background:#041022 !important;
    border-bottom:1px solid rgba(255,170,0,.15) !important;
    min-height:65px !important;
    padding:0 !important;
}

/* ukryj logo */

.navbar-brand img,
.navbar-logo,
.header-logo-server{
    display:none !important;
}

/* ukryj wybór języka */

.navbar .dropdown,
.navbar .btn-group{
    display:none !important;
}

/* napis REKSIOMC.PL */

.navbar-brand{
    display:flex !important;
    align-items:center !important;
    text-decoration:none !important;
    min-width:280px !important;

    text-shadow:
        0 0 15px rgba(255,170,0,.15),
        0 0 30px rgba(255,170,0,.10);
}

.navbar-brand::after{
    content:"REKSIO";
    color:#ffffff;
    font-size:34px;
    font-weight:900;
    letter-spacing:1px;
}

.navbar-brand::before{
    content:"MC.PL";
    color:#ffae00;
    font-size:34px;
    font-weight:900;
    letter-spacing:1px;
    order:2;
}

.navbar-brand:hover{
    transform:scale(1.02);
    transition:.2s;
}

.navbar-toggler{
    display:none !important;
}

/* menu */

.navbar-nav .nav-link{
    color:#ffffff !important;
    font-weight:700 !important;
    margin:0 12px !important;
    transition:.2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
    color:#ffae00 !important;
}

/* ================= HERO ================= */

.main-header{
    padding:0 !important;
    margin-top:-8px !important;
    margin-bottom:0 !important;
}

.main-header .container{
    max-width:100% !important;
    width:100% !important;
    padding:0 !important;
}

.main-header .row{
    margin:0 !important;
}

/* usuń lewą kolumnę */

.main-header .col-xl-5,
.main-header .col-lg-5,
.main-header .col-md-5{
    display:none !important;
}

/* banner na pełną szerokość */

.main-header .col-xl-7,
.main-header .col-lg-7,
.main-header .col-md-7{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
}

.header-picture{
    width:100% !important;
    padding:5px 35px 15px !important;
}

.header-picture img{
    width:100% !important;
    max-width:none !important;

    display:block !important;
    margin:0 auto !important;

    border-radius:22px !important;

    box-shadow:
        0 0 35px rgba(255,145,0,.15),
        0 0 80px rgba(255,145,0,.08);
}

/* ================= KARTY ================= */

.card,
.product-card,
.server-card{
    background:#07111f !important;
    border:1px solid rgba(255,170,0,.08) !important;
    border-radius:18px !important;
    overflow:hidden !important;
    transition:.25s;
}

.card:hover,
.product-card:hover,
.server-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,170,0,.25) !important;
}

/* ================= PRODUKTY ================= */

.product-card img{
    transition:.3s;
}

.product-card:hover img{
    transform:scale(1.05);
}

/* ================= PRZYCISKI ================= */

.btn-success,
.btn-primary{
    background:linear-gradient(
        135deg,
        #ff9500,
        #ffb300
    ) !important;

    border:none !important;
    color:#111 !important;
    font-weight:700 !important;
}

.btn-success:hover,
.btn-primary:hover{
    transform:translateY(-2px);
}

/* ================= NAGŁÓWKI ================= */

h1,
h2,
h3,
h4{
    color:#ffffff !important;
    font-weight:800 !important;
}

/* ================= TRYBY ================= */

.server-card{
    min-height:320px !important;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

    .header-picture{
        padding:10px !important;
    }

    .header-picture img{
        width:100% !important;
    }

    .navbar-brand::after,
    .navbar-brand::before{
        font-size:26px !important;
    }

    .navbar-toggler{
        display:block !important;
    }
}
/* ========================= */
/* PRZYCISK DOŁADUJ KONTO */
/* ========================= */

.header-picture{
    position:relative !important;
}

.reksio-click-area{
    position:absolute;

    left:50%;
    top:65.5%;

    transform:translate(-50%,-50%);

    width:650px;
    height:160px;

    z-index:9999;
    cursor:pointer;

    background:transparent;
}
.server-card img{
    height:260px !important;
    object-fit:cover !important;
    border-radius:16px 16px 0 0 !important;
}

.server-card{
    overflow:hidden !important;
}

.server-card:hover{
    transform:translateY(-6px) scale(1.02) !important;
}