:root {
    --bs-card-border-color: #ceccbe;
    --color5: #ceccbe;
    --color4: #4f4d63;
    --color-active: #302d48;
    --radius: 0.5rem;  
    --color-games: rgb(251, 191, 36);
}

.btn-primary {
    background: #ceccbe;
    border-color: #ceccbe;
    transition: 0.2s;
}

.btn-primary:hover {
    background: #ceccbe;
    border-color: #ceccbe;
    transform: scale(1.1);
}

.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.bg-slate-800 {
    background-color: rgb(30, 41, 59);
}

.text-slate-900 {
  color: rgb(15, 23, 42);
}

.text-slate-700 {
   color: rgb(51, 65, 85) 
}

.text-slate-600 {
  color: rgb(71 85 105);
}

.text-slate-400 {
    color: rgb(148, 163, 184);
}

.text-slate-300 {
    color: rgb(203, 213, 225);
}

.text-slate-200 {
    color: rgb(226, 232, 240);
}

.text-xs {
  font-size: 0.725rem;
  line-height: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-3xl {
  font-size: 2.25rem;
  line-height: 2.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.leading-relaxed {
  line-height: 1.625;
}

.relative {
    position: relative;
}

.invert {
    filter: invert(1);
}

.brightness-0 {
    filter: brightness(0);
}

.shadow {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px !important
}

.hover_shadow_3:hover {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px !important;
}

.transition-colors {
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

.alert-error {
    background-color: rgb(248, 215, 218);
    color: rgb(88, 21, 28);
}

.button {
       background-color: rgb(48, 45, 72);
    padding-left: 2rem;
  padding-right: 2rem;
  border-radius: calc(var(--radius) - 2px);
  height: 2.5rem;
  display: inline-flex;
   align-items: center;
}

.button, .cta {
    transition: .5s;
}

.reveal {
  opacity: 0; 
  animation-delay: var(--animate-delay);
  animation-duration: var(--animate-duration);
}

.animate__animated {
  opacity: 1;
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1220px;
  }
}

a {
  color: inherit;
  text-decoration: inherit;
}

html,
body {
    position: relative;
    height: 100%;
    /* padding-top: 300px; */
}

body {
    /* background: url('../img/tlo-1.jpeg') no-repeat center center fixed; */
    background-size: cover;
    /* color: white; */
    /* padding-top: 170px; */

    
}

header .ico  {
    height: 1rem;
    width: 1rem;;
    align-self: center !important;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 1rem;
  padding-right: 1rem;
  }
}

header .nav-item a {
border-radius: var(--radius);
    padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: block;
}

header .nav-item.active a , header .nav-item.games a {
    background-color: var(--color-active);
    color: white;
}



.fixed header > nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.top-media {
    /* background: #302d48; */
    color: white;
    /* background: #403e56; */
    /* background: #4f4d63; */
}

.top-media a {
    color: white;
    text-decoration: none;
    ;
}

.top-media .social {
    text-align: right;
}

.top-media .social a {
    margin: 5px;
}


.head-banner {
    background-image: linear-gradient(to right bottom, rgb(15, 23, 42), rgb(30, 41, 59));
}

.head-banner .container {
    max-width: 700px;
}

.home {
    position: relative;
}

.home .banner {
    background-image: url('https://images.unsplash.com/photo-1506815444479-bfdb1e96c566?w=1920');
    background-position: center;
    background-size: cover;
    opacity: 0.6;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.home>.glass {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 251, 235, 0.3), rgba(255, 255, 255, 0.4))
}


.home .container {
    position: relative;
}

.home h1 {
    font-size: 3.75rem;
    line-height: 1;
}

.home h1 span {
color: rgb(48, 45, 72);
}


.home .left.visible {
  /* animation: fadeInLeft; */
    animation-duration: 0s;
  animation-duration: 3s;
}

.home .left a {
 
}

.home .left a:hover {
    background-color: rgb(61, 57, 96);
}

.home .left a svg {
    width: 1rem;
    height: 1rem;
    margin-left: 1rem;
}

.home .left a.go-offer {
    background-color: white;
    color: rgb(10, 10, 11);
    border: 1px solid rgb(15, 23, 42);
}

.home .left a.go-offer:hover {
    background-color: rgb(15, 23, 42);
    color: white;
}

.home .right.visible {
  /* animation: fadeInRight; */
    animation-duration: 0s;
  animation-duration: 2s;
}

.home .right .glass {
    filter: blur(40px);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.home .right img {
    border-radius: 16px;
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(226, 232, 240) 0px 0px 0px 2px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

.home .right p {
line-height: 1.625;
}



h2#offer {
    margin-top: -2rem;
}


.box3 .card-footer {
    border: none;
    padding: 5px;
}

.box3 .card-footer a {
    /* width: 100%; */
}

.map {
    /* position: relative;
    aspect-ratio: 1 / 1; */
}

.map .frame {
    background-image: url(img/mapa-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

nav {
    /* background-image: url(img/ramka-3.jpg); */
    /* background-size: contain; */
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: 100% 10px;
}

nav .nav-link {
    font-size: larger;
}

nav .games {
    background: var(--color-games);
    color: white;
    margin: 4px 0px;
    padding: 4px 8px;
}

.navbar-brand img {
      height: 3rem;
    transition: 0.5s;
}

.fixed .navbar-brand img {
    max-height: 40px;
}

#monitor {
    position: relative;
    height: 25vh;
    background-position: fixed;
    /* background-image: url(../img/monitor-chmurki-4.png);
    background-image: url(../img/backgrounds/new/1.jpg);
    background-image: url(../img/backgrounds/new/2.jpg); */
    /* background-size: cover; */
    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    background-image: url(../img/backgrounds/Gemini_Generated_Image_edxa4dedxa4dedxa-h.png);
}

.configurator #monitor {
    height: 15vh;
}

#monitor::after {
    display: block;
    content: '';
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);
    background-image: -moz-linear-gradient(0, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);
    background-image: linear-gradient(0, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);
    background-position: 50% 50%;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-background-size: auto auto;
    background-size: auto auto;
    top: 0;
    right: 0;
    left: 0;
    /* bottom: 90%; */
    height: 20px;
    position: absolute;
}

.cloud {
    animation: cloud-rotate 7s alternate infinite;
    display: inline-block;
    max-width: 100%;
}

.cloud-wrapper {
    position: absolute;
    animation: cloud 100s linear infinite;
    animation-direction: var(--cloud-direction);
    animation-delay: var(--cloud-delay);
    width: 15vw;
    top: var(--cloud-top);
    transition: 30s;
    /* opacity: 0.95; */
    transform: scale(var(--cloud-scale));

    left: 0;
    /* right: 100%; */
    transform: translateX(-100%);
}

h2 {
    /* max-width: 70vw;
    border-radius: 0 10px 10px 0;
    background: white !important;
    color: black;
    border: 1px solid;
    padding: 10px;
    margin-bottom: 20px;
    left: -100%;
    position: relative;

    transition: all 1s; */
}

h2.visible {
    left: 0;
}

h2#games {
    background: var(--color-games);
    color: white;
}

@media (max-width: 992px) {
    .container.about {
        max-width: 100%;
    }
}

.about-left,
.about-right {
    position: relative;
    transition: all 1s ease-in-out 1s;
}

.about-left {
    left: -100vw;
}

.about-right {
    right: -100vw;
    padding: 3rem 0 3rem 3rem;
}

@media (max-width: 992px) {
    .about-right {
        position: absolute;
        width: 100%;
    }
}

.about-right>div {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    font-size: x-large;
}

.visible .about-left {
    left: 0;
}

.visible .about-right {
    right: 0;
}

/* h2#order { */
    /* margin-top: -80px; */
/* } */

.offer .item  {
    border-color: white;
    border-radius: .75rem;
    border-style: solid;
    border-width: 1px;
    transition: .6s;
}

.offer .item.visible  {
    /* animation: fadeInUp; */
    animation-duration: 1s;
}

.offer .item:hover {
    border-color: #302d48;
    
}

.offer .ico {
    height: 5rem;
    width: 5rem;;
    align-self: center !important;
    background-color: rgba(48, 45, 72, 0.1);
    border-radius: .75rem;
    display: flex;
    color: rgb(48, 45, 72);
    font-size: xx-large;
    transition: .6s;
}

.offer .item:hover .ico{
    background-color: rgb(48, 45, 72);
    color: white;
}

.offer .price {
  top: 1rem;  
  right: 0rem;
  font-size: large;

}

.offer .badge {
    transform: rotate3d(1, 2, 1, 45deg) !important;
    font-size: large;
}

.offer .item:hover .price {
    animation: pulse 2s infinite;
}

.service {
    --animate-duration: 0.5s;
}

.service .ico {
    height: 3.5rem;
    width: 3.5rem;;
    align-self: center !important;
    /* background-image: linear-gradient(to right bottom, rgb(48, 45, 72), rgb(61, 57, 96)); */
    /* background-image: linear-gradient(to right bottom, rgb(251, 191, 36), rgb(217, 119, 6)); */
    background-image: linear-gradient(to right, rgb(245, 158, 11), rgb(217, 119, 6));
    border-radius: .75rem;
    display: flex;
    color: white;
    font-size: x-large;
    
}

.service ul {
    display: block;
    padding: 0;
}

.service li {
    display: block;
}

.service li i {
    color: #695735;
    font-size: x-large;
    padding-right: 10px;
}

.service em {
    color: #fbbf24;
    font-style: inherit;
    font-weight: bold;
    font-size: larger;
}

.service .button {
    background-color: rgb(48, 45, 72);
    margin: 0 auto;
    max-width: 300px;
}

.service .button:hover {
  background-color: rgb(61, 57, 96);
}


.service .button  svg {
  width: 1rem;
  height: 1rem;
  margin-left: 1rem;
}

.service .quick .item {
    border: 1px solid rgb(51, 65, 85);
}

.service .quick .item .ico {
    color: rgb(251, 191, 36);
    background: none;
    /* margin: 0 !important; */
    display: block;
    height: unset;
    width: unset;    
}

.service .quick .item h4 { 
    font-size: inherit;
}

.ico>* {
    align-self: center;
}

 .how-to-order {}

.how-to-order .item>.card {
    transition: all 0.5s;
    color: black;
    width: 100%;
    /* animation: flipOutX; */
    animation-duration: 1s !important;
}

.how-to-order .item>.card a {
    text-decoration: none;
    color: black;
    ;
}

.how-to-order .item .item-image {
    margin: 10px auto;
    max-width: 200px;
    position: relative;
}

.how-to-order .item .item-image::after {
    
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border: 1px solid #a0a0a0;

    border-radius: 0 50%;
    

} 

.how-to-order .diagram .box-counter {
   background-color: var(--color5);
  color: var(--color4);
  border-radius: 15px;
  padding: 5px;
  text-align: center;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  min-width: 30px;
}

.how-to-order .cta {
    background-color: rgb(245, 158, 11);
    color: rgb(250, 250, 250);
}

.how-to-order .cta:hover {
    background-color: rgb(217, 119, 6);
}

.how-to-order .shadow:hover {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px !important;
}

.how-to-order .summary .container {
    max-width: 700px;
}

.how-to-order .summary .box-content {
    padding-left: 1rem;
}
.how-to-order .summary .box h3{
    font-size: 16px;
    margin: 0;
}

.how-to-order .summary .box-counter {
    background-color: rgb(245, 158, 11);
    color: white;
    border-radius: 50%;
  line-height: 40px;
  text-align: center;
  width: 40px;
  height: 40px;
  margin-right: 5px;
  min-width: 40px;
  font-weight: bold;
  
}

.visible .item .item-image::after {
    animation: rotate_anim 1s;
    animation-iteration-count: 1;
}

.visible .item:nth-child(1) .item-image::after {
    animation-delay: 1s;
}

.visible .item:nth-child(2) .item-image::after {
    animation-delay: 1.2s;
}

.visible .item:nth-child(3) .item-image::after {
    animation-delay: 1.4s;
}

 .how-to-order .item {
    display: flex;
    align-items: stretch;
}

.how-to-order .item .item-image img {
    border-radius: 0 50%;
  
}

.how-to-order .item>.card .more {
    display: none;
}


.how-to-order .item .diagram-show.active .more {
    display: block !important;
    background: var(--bs-gray-200);
}

.how-to-order .item>.card:hover {
    transform: scale(1.1);

}

.how-to-order .item>.card.active .more {
    display: block;
}

.how-to-order .item>.card.active .more img {
    margin: 15px;
}

.how-to-order .item>.card.active .more-text {
    position: relative;
}

.how-to-order .item>.card.active {
    position: fixed;
    top: 0;
    right: 5%;
    left: 5%;
    z-index: 88888;
    transform: unset;
    overflow: auto;
    max-width: 1200px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    
}

.how-to-order .item>.card {
    /* animation: flipInX; */
    animation-duration: 2s !important;    
}

.how-to-order .item:first-child>.card.visible {
    animation-delay: 0s;
}

.how-to-order .item:nth-child(2)>.card.visible {
    animation-delay: 1s;
}

.how-to-order .item:nth-child(3)>.card.visible {
    animation-delay: 2s;
}

.how-to-order .item>.card.active h3 {
    position: sticky;
    top: 0;
}

.how-to-order .item>.card.active a {
    display: none;
} 

.modal-offer-item {
    display: block;
    position: fixed;
    /* background: white; */
    width: 0;
    height: 0;
    transition: all 0.5s;
    overflow: hidden;
    top: 50%;
    /* padding-bottom: 200px; */
}

.modal-offer-item .card {
    /* height: 75vh; */
    overflow-x: hidden;
    overflow-y: auto;
    /* padding-bottom: 30px; */

    border-radius: 0;
    border: none;
    /* margin: 15px; */
    width: 100%;
    background: none;
}

.modal-offer-item.active .card {
    position: absolute;
    z-index: 7;
    top: 15px;
    animation: rotate_anim 1s;
}

.modal-offer-item.active .card .card-body {
    max-width: 1200px;
    margin: auto;
    background: var(--bs-gray-200);
}

@media (max-width: 767px) {
    .modal-offer-item .txt {
        margin-top: -100px;
        background: #fff;
    }
}

.modal-offer-item img {
    margin: 15px;
}

.offer-item-footer {
    height: 20vh;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* padding: 30px; */
}

@keyframes rotate_anim {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes cloud {
    0% {
        left: 0;
        /* right: 100%; */
        transform: translateX(-100%) scale(var(--cloud-scale));
        /* transform: ; */
    }

    100% {
        /* right:0; */
        left: 100%;
        transform: translateX(100%) scale(var(--cloud-scale));
        /* transform: rotate(360deg); */
    }
}

@keyframes cloud-rotate {
    0% {
        transform: rotate(-3deg);
        ;
    }

    100% {
        transform: rotate(3deg);
        ;
    }
}

.modal-offer-item.active {

    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 88888;
    /* transition: all 1.5s; */
    transform: unset;
    overflow: auto;
    height: auto;
    /* 95vh !important; */
    width: auto;

}

.modal-offer-item.active::after {
    content: '';
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.modal-offer-item h3 {
    position: sticky;
    top: 0;
}

.modal-offer-item .txt {
    background: white;
}

.modal-offer-item .price {
    background: white;
    font-size: larger;
}

.modal-offer-item .cta {
    background: white;
    font-size: larger;
}


/* 
#service {
    background: url(../img/service-8.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    display: none;
}



#service .card {
    
    background: white;
    border-radius: 0;
    padding: 15px 20px;
    border-color: #b3b3b3;
    max-width: 800px;
    margin: 0 auto;


}


#service.show .card {
    height: auto;
}

#service .card h3 {
    line-height: 1.2;
    font-size: 2rem;
    color: black;
    background: none;
    text-align: center;
}

#service .card h4 {
    font-weight: 700;
    margin: 20px 0 0;
    text-align: center;
}

#service .card .card-text {
    font-weight: 400;
    line-height: 1.6;
    font-size: 1rem;
    margin-top: 30px;
    text-align: center;
}

#service .card .card-footer {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: center;
    ;
}

#service .card .card-footer a {
    color: #ffffff !important;
    
    background-color: #695735;

    background-image: none;
    text-transform: uppercase;
    font-weight: 700;
    
    letter-spacing: 1px;
    font-size: 1rem;
    line-height: 1.4;
    padding: 10px 30px;
}

#service .more {
    color: black;
    font-size: xxx-large;
    

}

#service .more.collapsed::after {
    content: "więcej";
    display: block;
}

#service .more.collapsed {
    
}

#service .more::after {
    content: "mniej";
} */


#web-service {
    max-width: 950px;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px
}

.service-head label {
    color: rgb(253, 230, 138);
}

.service-head .price {
    color: rgb(245, 158, 11);
    font-size: 2.25rem;
  line-height: 2.5rem;
}

.service-head {
    background-image: linear-gradient(to right, rgb(245, 158, 11), rgb(217, 119, 6));
}

#web-service em {
    color: rgb(245, 158, 11);
}

.about .team .img-wrapper{
    position: relative;
}

.about .team .blur {
    filter: blur(40px);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #f59e0b33;
     /* var(--color5); */
}

.about .team img {
    /* -webkit-box-shadow: 8px 8px 24px 0px var(--color5);
    -moz-box-shadow: 8px 8px 24px 0px var(--color5);
    box-shadow: 8px 8px 24px 0px var(--color5); */
    position: relative;
    z-index: 1;
    /* border: 5px solid #f59e0b33; */
    /* var(--color5); */
}

.about .badge.skill {
    background-color: rgb(254, 243, 199);
    color: rgb(180, 83, 9);
    padding: 10px 15px;
    margin: 5px;
    font-size: inherit;
    font-weight: inherit;
    border-radius: 15px;
}

.about .cta {
    background-color: rgb(245, 158, 11);
    color: rgb(250, 250, 250);
}


.about .cta:hover {
    background-color: rgb(217, 119, 6);
}

#service2 {
    background-image: url(../img/service-5.jpg);
    background-size: cover;
    background-position: right center;
    font-size: x-large;
    padding: 5rem;
}

#service2>div {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    max-width: 800px;
}


#service2 .more {
    color: black;
    font-size: xxx-large;
    /* transition: 1s; */

}

#service2 .more.collapsed::after {
    content: "więcej";
    display: block;
}

#service2 .more.collapsed {
    /* transform: rotate(180deg); */
}

#service2 .more::after {
    content: "mniej";
}

#service3 {
    /* position: relative; */
}

#service3 .card {
    text-align: center;
    /* padding: 3rem; */
    /* transition: .7s;
    opacity: 0;
    position: relative;
    top: 30px; */

     
}


#service3 .card.visible {
    /* opacity: 1 !important;
    top: 0 !important; */
    /* animation: backInUp;  */
  animation-duration: 2s; /* don't forget to set a duration! */
}

#service3 .card i {
    font-size: xx-large;
}


#service3 .card .card-text {
    color: var(--bs-gray-700);
}

#service-www-wrap {
    position: relative;
    padding: 0 !important;
    max-width: 900px;
}

#service-www {
    /* background-image: url(../img/service-10.jpg);
background-size: auto 90%;
  background-position: right center; */
  font-size: x-large;
  padding: 5rem;
  background-repeat: no-repeat;
  background-color: #46565e;
  position: relative;
  z-index: 5;
  /* width: 200px; */
  margin-bottom: 100px;
}

.contact form {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px !important;
}

.contact form textarea {
    min-height: 20vh !important;
}

.contact .cta:hover {
    background-color: rgb(217, 119, 6);
}

.contact .cta {
  background-color: rgb(245, 158, 11);
  color: rgb(250, 250, 250);
  border: none;
  width: 100%;
  display: block;
}

.contact .contact-details a label {
    cursor: pointer;
}

.contact .contact-details a:hover {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px !important;
}


.contact .contact-details .item i {
    background-color: rgb(254, 243, 199);
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 10px;
    align-content: center;
}



.contact .contact-details a:hover span {
    color: rgb(245, 158, 11);
}

.contact .contact-details a:hover i {
    background-color: rgb(245, 158, 11);
    color: white;
}

.contact .contact-details iframe {

}

@media (max-width: 767px) {
    #service-www-wrap {
        max-width: 100%;
    }

    #service-www {
        font-size: medium;
        padding: 30px 100px 30px 15px;
        border-radius: 0 !important;
    }
}

#service-www.visible {
    /* animation: lightSpeedInRight; */
    animation-duration: 2s;
}

#service3 .earth {
    animation: 7s earth infinite ;
    animation-delay: var(--delay);
    position: absolute;
    /* transform: scale(.7); */
    /* transform-origin: 50% 50%; */
    --height: 100px;
        
    top: calc((-1) * var(--height));
    transform:  scale(.3); 
    right: 10px;
    opacity: 0;
}

.earth img {
    height: var(--height);
    animation: 10s rotating infinite linear ;
}

@keyframes rotating {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(720deg);
    }
}

@keyframes earth {
    0% {
        top: calc((-1) * var(--height));
        /* right: -20px; */
        z-index: 1;
        transform:  scale(.3); 
        right: 10px;
        opacity: 1;
    }

    1% {
        z-index: 10;  
    }

    25% {
        /* top: 50%; */
        /* right: 20px; */
        /* transform: scale(1.4); */
        transform: scale(1.1); 
              
    }

    

    50% {
        top: calc(100% - 0.3 * var(--height));
        /* calc(100% + var(--height)); */
        /* right: 40px; */
        transform: scale(.3); 
        right: 100px;
        z-index: 10; 
        
    }

    

    51% {
        /* top: 50%; */
        /* right: 20px; */
        z-index: 1;
    }

    100% {
        top: calc((-1) * var(--height));
        transform:  scale(.3); 
        /* right: -20px; */
        opacity: 1;
        
    }
}

#validator {
    background-image: url(../img/zebatka-3.jpg);
    background-size: cover;
    background-position: right center;
    font-size: x-large;
    padding: 5rem;
}

@media (max-width: 1200px) {
    #validator {
        background-position: left;
    }
}

@media (max-width: 767px) {
    #validator {
        background-position: center;
        padding: 2rem;
    }
}

#validator.visible {
    /* animation-name: tada; */
    animation-duration: 2s;
    animation-delay: 1s;
}

#validator input,
#validator button {
    font-size: x-large;
}

.modules.swiper {
    width: 100%;
    height: 100%;
    max-height: 690px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 155px;
    padding-top: 15px;
    overflow: hidden;
}


.modules.swiper .swiper-wrapper {
    margin: 0 auto;
    overflow: visible;
}

.modules.swiper .swiper-wrapper:hover {
    position: relative;
    z-index: 11;
}

.modules.swiper .message {
    display: none;
    color: #dadada;
}

.modules.swiper.empty .message {
    display: block;
}

.modules.swiper.empty .swiper-wrapper,
.modules.swiper.empty .swiper-pagination {
    display: none;
    ;
}

.modules .swiper-slide {
    /* border: 1px solid var(--bs-gray-200); */
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: calc((100% - 30px) / 2);
    /* !important; */

    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0;
}

.modules .non-swiper-slide {
    display: none;
    ;
}

.modules .swiper-slide .card-header {
    /* height: 30%; */
    height: 100px;
    background-size: cover;
    background-position: center;
}

.modules .swiper-slide .card-body {
    padding: 0;
    font-size: small;
    height: 100px;
    padding: 5px;
}

.modules .swiper-slide .more {
    display: none;
    position: absolute;
    left: -10px;
    /* right: -100%; */
    /* bottom: -10px; */
    top: -10px;
    background: white;
    z-index: 88;
    /* padding-left: calc(100% + 10px);
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 60px; */
    padding: 20px 20px 60px 20px;
    min-height: 200px;
    width: 400%;
    max-width: 400px;
    min-height: 250px;
    text-align: left;
    /* -webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
    -moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
    box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1); */
    -webkit-box-shadow: 3px 3px 10px 0px rgb(66, 68, 90);
    -moz-box-shadow: 3px 3px 10px 0px rgb(66, 68, 90);
    box-shadow: 3px 3px 10px 0px rgb(66, 68, 90);
    font-size: medium;
    border-radius: 5px;
}

.modules .swiper-slide.show {
    overflow: visible;
}

.modules .swiper-slide.show .card {
    z-index: 99;
    /* margin-bottom: 60px; */
}

.modules .swiper-slide.show .card-body {}

.modules .swiper-slide.show .card {
    opacity: 0;
}

.modules .swiper-slide.show .card-footer {
    display: none;
}

.modules .swiper-slide.show .more {
    display: block;
}

.modules .swiper-slide.left:hover .more {
    top: -10px;
    right: -10px;
    left: unset;
    /* padding-right: calc(100% + 10px);
    padding-left: 20px; */
    /* padding: 20px; */
}

.modules .swiper-slide.show .more .more-footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #4f4d63;
    padding: 10px;
}

.modules .swiper-slide.show .more .basket-add {}

.modules .swiper-slide h3 {
    background: white !important;
    /* font-size: smaller; */
    color: #46565e !important;

    margin: 0;
    padding: 0;
    font-size: large;
    /* rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; */
    /* transform: rotate(-10deg);
    position: absolute;
    left: -10px;
    right: -10px;
    padding: 5px; */
}

.modules .swiper-slide .card {
    background-size: auto;
    background-size: cover;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--bs-gray-200);
}



.diagram canvas {
    position: absolute;
}

.checklist div.box {
    display: block;
    opacity: 0;
    /* width: 80%; */
    padding: 5px;
    /* border-radius: 10px; */
    border-bottom: 1px solid #e0e0e0;
    /* margin: 30px auto; */
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    background: var(--color);
    /* -webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
-moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1); */

}

.checklist div.box .box-counter {
    padding: 0 10px;
    color: white;
    font-size: xx-large;
    float: left;
    /* margin: -10px 10px -10px -10px; */

    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

}


.checklist div.box .box-content {
    background: white;
    padding: 10px;
}

.checklist canvas {
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) scale(0.8);
    transition: cubic-bezier(1, 1.4, .6, 1) .5s;
}

.checklist canvas.checked {
    transform: translateY(-50%) scale(1);
}

.checklist div.box.show {
    opacity: 1;
    animation: checklist_box_show var(--time);
}

@keyframes checklist_box_show {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.contact-form {
    background: #ceccbe;
    margin-top: -45px;
}

.contact-form .container {
    max-width: 1200px;
    overflow: hidden;
    background-image: url(../img/smartfon3.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.contact-form form {
    position: relative;
    width: 80%;
    float: right
}

@media (max-width: 700px) {

    .contact-form .container {
        background-image: none;
    }

    .contact-form form {
        width: 100%;
    }
}

.contact-location {
    color: white;
    background: rgb(70, 86, 94);
}

.contact-location a {
    color: white;
    text-decoration: none;
}

.contact-location a:hover {
    text-decoration: underline;
}

.contact-location a i {
    transition: 0.5s;
    margin: 10px;
    opacity: 0.7;
}

.contact-location a:hover i {
    transform: rotate(360deg);
    opacity: 1;
}

.contact-location .address {
    max-width: 1200px;
    min-height: 380px;
    overflow: hidden;
    background-image: url(../img/wieniawskiego40.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 75%;
}



@media (min-width: 1300px) {
    .contact-location .address {
        background-size: 400px;
    }
}

.contact-location .address>div {
    max-width: 500px;
    margin-left: auto;
}

@media (max-width: 767px) {

    .contact-location .address {
        background-size: 50%;
    }

    .contact-location .address>div {
        max-width: 100%;
        height: 400px;

    }
}

.contact-location address {
    font-size: large;
    padding: 30px 30px 0 30px;
    margin-bottom: 0;
}

.contact-location .social {
    padding-left: 5rem;
}

.contact-location iframe {
    display: block;
}

/* #contact {
    background-image: url(../img/laptop-1.jpeg);
    background-position: left bottom;
    background-size: contain;
    background-repeat: no-repeat;
} */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

#go-to-validator {
    position: fixed;
/* top: 10px; */
z-index: 777777;
padding: 0;
transition: 1s;
display: flex;
  /* left: unset !important; */
  bottom: 0;
  right: 0;
}

#go-to-validator a {
   /* transform: rotate(-90deg); */
  font-size: large;
  /* transform-origin: right bottom; */
  border: 1px solid #46565e;
  border-radius: 10px 0px 0 0;
  padding: 0 0px 0px 15px;
  cursor: pointer;
  background: white;
  border-bottom: none;
  overflow: hidden;
  white-space: nowrap;
  color: #46565e;
  text-decoration: none;
  display: inline-block;


} 

#go-to-validator a i {
    /* position: absolute;
    top: 0;
    right: 0; */
    background:  #46565e;
    color: white;
    padding: 10px 10px;
}

#basket {
    position: fixed;
    top: 10px;
    height: 100%;
    /* left: 90%; */
    /* background: white; */
    z-index: 777777;
    /* border-radius: 15px 0 0 15px; */
    padding: 0;
    max-width: 90%;
    width: 500px;
    transition: 1s;


    /* padding: 15px; */
    /* background: #dadada; */
    right: 0;
    transform: translateX(100%);
}

#basket.empty {
    /* left: calc(100% + 50px); */
    /* left: 100%; */
    right: -45px;

}

#basket.show {
    /* left: 50px */
    /* left: calc() */
    transform: translateX(0);
}


#basket>label {
    position: absolute;
    left: -45px;
    top: 0;
    transform: rotate(-90deg) translateX(-100%);
    font-size: x-large;
    transform-origin: 0 0;
    border: 1px solid #dadada;
    border-radius: 10px 10px 0 0;
    padding: 0 15px 0 0;
    cursor: pointer;
    background: white;
    border-bottom: none;
    overflow: hidden;
    z-index: 1;

}

#basket>label i {
    color: white;
    padding: 10px;
}

#basket .basket-content {
    /* padding: 15px;
    background: #dadada;
    margin-left: 40px; */
    /* min-height: 155px; */
    /* position: absolute;
  top: 0;
  left: 0;
  right: 0; */
    /* bottom: 0; */
    overflow-y: auto;
    max-height: 80vh;
    min-height: 90px;
    background: white;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #dadada;
}

#basket .module {
    padding-bottom: 0;
    padding-top: 10px;
    font-size: smaller;
    min-height: 110px;
    border-top: 1px solid #eaeaed;
    /* padding-bottom: 10px;
    position: relative; */
}

#basket .module .basket-remove {
    padding: 0;
}

/* #basket */
.module-params {
    width: 100%;
    margin: 0;
}

/* #basket */
.module-params li {
    margin: 1px;
}

#basket .price-min {
    color: black;
    float: right;
    /* position: absolute;
  right: 20px;
  bottom: 5px;*/
    margin: 0;
    font-size: larger;
}

#basket .summary {
    font-size: larger;
    text-align: right;
    /* margin: 15px; */
    padding: 10px 15px;
    border-top: 1px solid #eaeaed;
    border-left: 1px solid #dadada;
    background: white;
}

#basket .do-configure {
    width: 100%;
    border-radius: 0;
}

ul.related li {
    padding: .5rem;
    border: 1px solid #dadada;
    margin: .5rem;
    display: flex;
    justify-content: space-between;
}

ul.related li:hover {
    background: rgba(255, 255, 255, 0.5);
}


.main {
    min-height: 90vh;
}


.configurator .main {
    background: var(--bs-gray-200);
    padding-top: 10px;
}

.configurator .lead {
    padding: 5px;
    background: white;
}

.configurator #basket2 {
    background: white;
    padding: 5px calc(.5 * var(--bs-gutter-x));

    
}


/* .basket2 .basket-action {
    color: #4f4d63;
    font-size: x-large;
}


.basket2 .basket-action {
    float: right;
}

.basket2 .module {
    padding: 1rem;
}

.basket2 .module+.module {
    border-top: 1px solid #4f4d63;
}

.basket2 .module-name {
    margin: 0;
    font-weight: bold;
    color: var(--bs-gray-700);

}

.basket2 .module-intro {
    margin: 0;
    color: var(--bs-gray-600);
} */


.basket2 .basket-action {
    color: #4f4d63;
}

.basket2 .module+.module {
    border-top: 1px solid #dee2e6;
}

#basket2 {
    background-color: rgb(255, 251, 235);
    border-color: rgba(245, 158, 11, 0.366) !important;
}

#basket2 h3 {
    font-size: inherit;
}

#basket2  h3 i {
color: rgb(217, 119, 6);
font-weight: normal;
margin: 0 5px 0 0;

}

#basket2   .cta {
background-color: rgba(245, 158, 11, 0.366);
  color: rgb(250, 250, 250);
  border: none;
}

#basket2   .cta:hover {
    background-color: rgb(245, 158, 11);
}

#basket2 .price-min {
    
}

#basket2 .price-min strong {
    font-size: larger;
}

/* .basket2  */
.module-params {
    overflow: hidden;
    padding: 0;
}

/* .basket2  */
.module-params li {
    /* border: 1px solid var(--bs-success-bg-subtle);
    color: var(--bs-success);
    border-radius: 10px;
    float: left;
    margin: 5px;
    padding: 3px;
    display: block; */
    background-color: rgb(254, 243, 199);
  color: rgb(180, 83, 9);
  margin: 5px 5px 5px 0;
    padding: 1px 5px;
  font-size: smaller;
  font-weight: inherit;
  border-radius: 5px;
  float: left;
  display: block;
}

/* .basket2 */
.module-params li i {
    padding: 3px;
}


.configurator form {
    padding: 5px 10px 10px;
    background: white;
    ;
}

.configurator .basket-summary-wrap {
    position: sticky;
    top: 100px;
}

.configurator .basket-summary {
    padding: 5px 10px;
    background: white;
    ;
    margin: 5px 0;
}

.configurator form button {
    /* background: var(--bs-success) !important; */
}

/* .configurator .modules-item {
    position: relative;

}


.configurator .modules-item .card {
    position: relative;
    padding-bottom: 48px;
}

.configurator .modules-item .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
} */

.modules-item .shadow:hover {
 
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px !important;

}

.modules-item h3 {
    font-size: inherit;
}

.modules-item h3 i {
color: rgb(217, 119, 6);
font-weight: normal;
margin: 0 5px 0 0;

}

.modules-item .price strong {
    display: inline-block;
}

.modules-item  .cta {
/* background-color: rgba(245, 158, 11, 0.366); */
background-color: rgb(245, 158, 11);
  color: rgb(250, 250, 250);
  border: none;
}

.modules-item  .cta:hover {
    
}

.basket-summary-wrap {
    position: sticky;
    top: 7rem;

    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px !important;
}

.basket-summary-wrap .cta {
  background-color: rgb(245, 158, 11);
  color: rgb(250, 250, 250);
}

.basket-summary-wrap .cta:hover:not(.disabled) {
  background-color: rgb(217, 119, 6);
}

.basket-summary-wrap .cta.disabled {
    opacity: .4;
}


@media (min-width: 767px) {
    .configurator .modules-item .card>.row {
        height: 100% !important;

    }
}

.module-item-img {
    background-position: center;
}


@media (max-width: 767px) {
    .module-item-img {
        height: 150px !important;
    }
}

/* .configurator .modules-list .more {
    overflow: hidden;
    position: absolute;
    top: calc(100% - 5px);
    left: -1px;
    right: -1px;
    background: white;
    height: 0;
    display: block;
    z-index: 1;
    transition: .3s;
    opacity: 0;
    border-left: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-right: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-bottom-left-radius : var(--bs-card-border-radius);
    border-bottom-right-radius : var(--bs-card-border-radius);
    padding: 5px 10px;
}

.configurator .modules-list .card:hover .more {
    height: auto;
    opacity: 1;
} */



/* .configurator .modules-list {
    display: flex;
  padding: 10px;
  flex-wrap: wrap;
}

.configurator .modules-list>* {
    display: block;
    max-width: calc(20% - 20px);
    padding: 10px;
    margin: 10px;
}

.configurator .modules-list>* .card-footer {
    display: none;
} */


.ready {
    background-color: #3d3960;
}

.ready a {
    color: rgb(48, 45, 72);
}


footer .logo {
    filter: brightness(0) invert(1);
    height: 3rem;
}

footer {
    
}

footer ul {
    display: block;
    padding: 0;
}

footer li {
    display: block;
    padding: .3rem 0;
    margin: 0;
}

footer a {
    
}

footer a:hover {
    color: rgb(251, 191, 36);;
    
}

.footer-contact li a{
    display: flex;
}

.footer-contact i {
    width: 30px;
    display: inline-block;
    transition: 1s;
    text-align: center;
}

.footer-contact a:hover i {
  transform: rotate(360deg);
  opacity: 1;
}

footer .go-configure{
    width: 100%;
  
  justify-content: center;
}

footer .go-configure:hover {
    background-color: rgb(61, 57, 96);
    
}