/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap');

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
}
html::-webkit-scrollbar {
    
     display: none;
 }

 
html {
     scroll-behavior: smooth;
    
}
body {
     color: #666666;
     font-size: 14px;
     font-family: 'Lato', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 22px;
}

h3 {
     font-size: 18px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 500;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

 :focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}

.flex-direction-column {
     flex-direction: column !important;
}
.algin-items-center{
     align-items: center !important;
}
/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: var(--Theme1);
     width: 100%;
     height: 100%;
}
.loader_bg > h3{
     position: fixed;
     bottom: 0;
     left: 50%;
     transform: translate(-50%);
     color: #ffffffab;
     font-weight: bolder;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}


.loader h3{
     font-size: xx-large;
     color: white;
     font-weight: bold;
     text-align: center;
}
.loader_img{
     width: 600px;
     padding-right: 70px;
     max-width: 200dvw;
}


/*-- header area --*/


.header {
     width: 100%;
     background: transparent;
     padding: 30px 30px;
     position: fixed;
     z-index: 99;
     height: 90px;
     /* background-color: #24242425; */
}


/*-- navigation--*/

.navigation.navbar {
     float: right;
     padding: 0px;
     padding-top: 3px !important;
}

.navigation.navbar-dark .navbar-nav .nav-link {
     padding: 0.5dvw;
     color: #fff;
     font-weight: bolder;
     font-size: clamp(10px, 1dvw, 2.5dvh);
     line-height: 20px;
     text-transform: capitalize;
     transition: 0;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
     color: var(--Theme2);
}

.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
     color: #e70139;
}

/** banner section **/

.banner_main {
     background: url(../images/Orginal/TERMIN.png);
     display: flex;
     align-content: center;
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: 20% 20%;
     padding-bottom: calc(13% + 100px);
     position: relative;
     animation: pullupmain 1.8s cubic-bezier(.85,-0.82,.2,1.41) forwards;
     overflow: hidden;
     animation-delay: 1s;
     opacity: 0;
     max-height: 80dvh;
     width: 100%;
     align-items: flex-start;
}
@keyframes pullupmain {
     from{
          opacity: 0;
          background-position: 20% 20%;
     }
     to{
          opacity: 1;
          background-position: 20% 60%;
     }
}
.banner_main::before{
     content: "";
     position: absolute;
     top: -5%;
     left: -15%;
     width: 25%;
     max-height: 60dvh;
     opacity: 0;
     background-image: url(../images/malowanie.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     aspect-ratio: 1;
     background-color: transparent;
     animation: pullleft 1.4s cubic-bezier(.85,-0.82,.2,1.41) forwards;
     animation-delay: 1.8s;
}
.banner_main::after{
     content: "";
     position: absolute;
     right: -5%;
     bottom: 0%;
     width: 25%;
     max-height: 60dvh;
     min-width: auto;
     background-image: url(../images/Orginal/ScenaObraz.webp);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     aspect-ratio: 1;
     background-color: transparent;
     animation: pullright 1.4s cubic-bezier(.85,-0.82,.2,1.41) forwards;
     animation-delay: 1.4s;
}
@keyframes pullleft {
     from{
          opacity: 0;
          top: -5%;
          left: -15%;
     }
     to{
          
          opacity: 1;
          top: -5%;
          left: -5%;
     }
}
@keyframes pullright {
     from{
          opacity: 0;
          bottom: 0%;
          right: -15%;
     }
     to{
          
          opacity: 1;
          bottom: 0%;
          right: -5%;
     }
}
@media (max-width: 768px) {
     .banner_main::after,.banner_main::before{
          width: 45%;
     }
}
.text-bg {
     max-width: 669px;
     float: right;
     text-align: left;
     width: 100%;
}

.bann_img {
     /* padding-right: 40px; */
}

.bann_img figure {
     margin: 0;
}

.bann_img figure img {
     width: 100%;
}

.text-bg h1 {
     color: #fff;
     font-size: 78px;
     line-height: 96px;
     padding-bottom: 59px;
     font-weight: 800;
     padding-top: 40px;
}

.text-bg i img {
     cursor: pointer;
}

.text-bg a {
     font-size: clamp(7px, 0.9dvw,1.5dvh);
     background-color: #fff;
     color: #ff283f;
     font-weight: 600;
     padding: 22px 0px;
     width: 100%;
     max-width: 320px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     text-transform: uppercase;
}

.text-bg a:hover {
     background-color: #ff283f;
     color: #fff;
     transition: ease-in all 0.5s;
}

.titlepage {
     text-align: center;
     padding-bottom: 60px;
}

.titlepage h2 {
     font-size: 45px;
     color: #060002;
     line-height: normal;
     font-weight: 800;
     padding: 0;
}

.titlepage span {
     font-size: 14px;
     line-height: normal;
     color: #060002;
     padding-top: 25px;
     display: block;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.read_more {
     font-size: 16px;
     background-color: #020001;
     color: #fff;
     padding: 6px 0px;
     height: 44px;
     width: 100%;
     max-width: 144px;
     text-align: center;
     transition: ease-in all 0.5s;
     display: inline-block;
}

.read_more:hover {
     background: #e70139 !important;
     color: #fff !important;
     transition: ease-in all 0.5s;
}

.container {
     max-width: 1170px;
}


/** event schemat section **/
.event-schema-container{
     position: relative;
     margin-top: 5%;
}
/* .event-schema-container::after{
     content: "";
     position: absolute;
     right: 10%;
     bottom: 30%;
     width: 15%;
     min-width: auto;
     background-image: url(../images/Orginal/Antos.webp);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     aspect-ratio: 1;
     background-color: transparent;
     
}
.event-schema-container::before{
     content: "";
     position: absolute;
     right: 10%;
     bottom: 15%;
     width: 10%;
     min-width: auto;
     background-image: url(../images/Orginal/AntosQR.webp);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     aspect-ratio: 1;
     background-color: transparent;
     
} */
/* .event-schema-container::before{
     content: "";
     position: absolute;
     left: 50%;
     top: 32%;
     transform: translate(-50%,-50%);
     width: 100%;
     rotate: -18deg;
     min-width: auto;
     background-image: url(../images/Orginal/Tlo22.png);
     background-size: 88% 100%;
     background-position: -155%;
     background-repeat: no-repeat;
     aspect-ratio: 16/4;
     background-color: transparent;
} */
.event-schema-grid{
     width: 70%;
     margin: -5% auto 4dvw auto;
     background-image: url(../images/Orginal/Sciezka.webp);
     background-size: cover;
     background-position: center bottom;
     aspect-ratio: 1;
     position: relative;
}
.event-schema-title{
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     left: -0%;
     aspect-ratio: 16/2;
     top: 0%;
     font-size: clamp(10px, 1.8dvw, 2.5dvh);
     color: purple;
     font-weight: bolder;
     padding: 1dvw 8dvw 3dvw 8dvw;
     width: 60%;
     max-width: 70%;
     height: auto;
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
     background-image: url(../images/Orginal/Tlo2.webp);
}
.event-step{
     width: 30%;
     color: transparent;
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: 1dvw;
}
.event-step img{
     width: clamp(40px, 30%, 20dvw);
     /* max-width: 6dvh; */
     aspect-ratio: 1;
     
}
.event-step h3{
     color: white;
     font-weight: 700;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     /* visibility: collapse; */
     /* color: transparent; */
     font-size: clamp(7px, 1.5dvw, 1.5dvw);
}
.event-step a{
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     
}
.event-step a:hover img{
     transform: scale(1.1);
}
.event-step:nth-child(1){
     right: -20%;
     top: -5%;
     width: 50%;
     /* flex-direction: row-reverse; */
}

.event-step:nth-child(2){
     right: 17%;
     top: 8%;
     width: auto;
     max-width: 60%;
}

.event-step:nth-child(3){
     left: -10%;
     top: 14%;
     gap: 0;
     width: 40%;
     flex-direction: row-reverse;
}
.event-step:nth-child(3) img{
     width: 60%;
}
.event-step:nth-child(3) img{
     /* max-width: 12dvh; */
     aspect-ratio: 1;
}
.event-step:nth-child(4){
     left: 25%;
     top: 42%;
     width: 50%;
     flex-direction: row;
}

.event-step:nth-child(5){
     left: 50%;
     top: 70%;
     width: 50%;
     gap: 0;
     flex-direction: row;
     position: relative;
}
.event-step:nth-child(5)::before{
     content: "";
     position: absolute;
     width: 100%;
     height: 50%;
     top: -50%;
}
.event-step:nth-child(6){
     left: -5%;
     top: 58%;
     flex-direction: column-reverse;
}
.event-step:nth-child(6) img{
  
     min-width: 14dvw;
     aspect-ratio: 16/9;
}
.event-step:nth-child(4) h3,
.event-step:nth-child(6) h3{
     /* color: rgb(17, 17, 17); */
}
.help-info{
     position: absolute;
     right: -10%;
     bottom: 35%;
     width: 30%;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}
.help-info span{
     color: white;
     text-decoration: underline;
     font-weight: bolder;
}
.help-info h3{
     color: white;
     font-weight: bolder;
}

/* plan section */
.container-plan{
     width: 100%;
     margin: auto;
     display: flex;
     justify-content: center;
     
}
.mid-plan-col{
     width: 100%;
     padding-top: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     pointer-events: none;
}
.plan-col{
     padding: 1rem 0 1rem 0;
     position: relative;
     width: 100%;
     aspect-ratio: 8/1;
     pointer-events: none;
}

.plan-col-hour{
     height: 100%;
     position: absolute;
     aspect-ratio: 5/1;
     left: 50%;
     transform: translate(-50%,0);
     /* aspect-ratio: 4/1; */
     padding: 0 2rem 0 1rem;
     z-index: 5;
}
.plan-col:nth-child(2) .plan-col-hour{
     height: 200%;
     aspect-ratio: 3 / 1;
     bottom: -1rem;

}
.plan-col:nth-child(even) .plan-col-hour{
     /* rotate: 180deg; */
     left: 50%;
     /* right: 50%; */
     transform: translate(-50%,0);
}
.plan-col h3{
     z-index: 1;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
     flex-direction: column;
     left: -2%;
     aspect-ratio: 16/2;
     z-index: 4;
     top: -20%;
     font-size: clamp(7px, 1.3dvw, 2.5dvh);
     color: purple;
     font-weight: bolder;
     padding: 1dvw 8dvw 6dvw 8dvw;
     width: 50%;
     max-width: 60%;
     height: auto;
     cursor: pointer;
     background-size: 90% 100%;
     background-position: center;
     background-repeat: no-repeat;
     background-image: url(../images/Orginal/Tlo2.webp);
}
.plan-col h3 a{
     pointer-events: all;
     text-decoration: underline !important;
}
.plan-col:nth-child(even) h3{
     left: inherit;
     top: 70%;
     right: -0%;
     /* padding: 2dvh 5dvw 4dvh 5dvw; */
}

.main-plan-col,
.end-plan-col{
     color: purple;
     font-weight: bolder;
     width: 150%;
     max-width: 90dvw;
     padding: 2dvw 10dvw 6dvw 10dvw;
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
     background-image: url(../images/Orginal/Tlo2.webp);
}
.main-plan-col h2,
.end-plan-col h2{
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     color: purple;
     font-weight: bolder;
     padding: 1dvw 0 2dvw 0;
     font-size: clamp(10px, 1.8dvw, 2.5dvh);
     
}
.main-plan-col{
     margin-bottom: 2dvw;
}
.end-plan-col{
     margin-top: 8dvw;
}
/** service section **/

.service {
     background: var(--Theme1);
     margin-top: 4dvw;
     padding-bottom: 10px;
     width: 100%;
     position: relative;
}
.service::before{
     content: "";
     opacity: 0;
     /* display: none; */
     position: absolute;
     width: 100%;
     height: 100px;
     z-index: 50;
     background: linear-gradient(var(--Theme1), transparent);
     rotate: 180deg;
     top: -80px;
     left: 0;
}

.service .titlepage {
     text-align: left;
     padding-bottom: 0;
     max-width: 631px;
     float: left;
     padding-left: 20px;
}

.service .titlepage span {
     color: #514f50;
}

.service .titlepage .read_more {
     margin-top: 34px;
}

.service_img {
     padding-left: 30px;
}

.service_img figure {
     margin: 0px;
}

.service_img figure img {
     width: 100%;
}


/** end service section **/
.popup_schema{
     display: none;
     z-index: 999;
     width: 100%;
     height: 100dvh;
     top: 0;
     position: fixed;
     display: flex;
     justify-content: center;
     align-items: center;
}
.popup_schema span{
     width: 100%;
     position: absolute;
     height: 100%;
     background-color: #1f1f1f;
     opacity: 0.7;
}
.popup_schema img{
     z-index: 1;
     cursor: pointer;
     max-height: 95%;
     max-width: 90%;
     margin: auto;
     aspect-ratio: 5 / 7;
     
}

/** solutions section **/
.Linia{
     width: 100%;
     max-width: 100%;
     margin-top: 1dvh;
     margin-left: -0%;
     aspect-ratio: 30/1;
   
}
#workflow{

}
.our_events{
     margin-bottom: 10px;
}
.our_events button{
     padding: 5px;
     border-radius: 10px;
     background-color: var(--Theme2);
}
.our_events a{
     font-weight: 800;
     text-decoration: underline !important;
}
.solutions {
     /* background: rgb(10, 10, 10); */
     background-color: var(--Theme1);
     padding: 45px 0 0 0;
     position: relative;
}
.solutions::before{
     content: "";
     pointer-events: none;
     /* background:linear-gradient(to bottom, transparent, rgb(10, 10, 10)); */
     /* background:linear-gradient(to bottom, transparent, var(--Theme1)); */
     top: -12dvh;
     height: 12dvh;
     width: 100%;
     position: absolute;
}

.solutions .titlepage {
     text-align: center;
     padding-bottom: 0;
}

.solutions .titlepage h2 {
     color: white;
     /* color: purple;
     background-size: 100% 150%;
     background-image: url(../images/Orginal/Tlo2.webp);
     padding: 1dvw;
     font-size: clamp(10px, 1.1rem, 2.5dvh);
     font-weight: 800;
     line-height: normal;
     min-width: 80%; */
}

.solutions .titlepage span {
     color: black;
     font-weight: bold;
}

.solutions .titlepage .read_more {
     background: #fff;
     color: #000000;
     margin-top: 54px;
}

.solutions_img {
     margin-right: -40px;
}

.solutions_img figure {
     margin: 0px;
}

.solutions_img figure img {
     width: 100%;
}

.bento-grid {
     padding: 2rem;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     grid-gap: 10px; /* Adjust the gap between images as needed */
     justify-content: center;
 }
 .bento-grid a{
     background-color: var(--Theme2);
     margin: auto;
     width: 100%;
     padding: 1rem;
     height: 100%;
     position: relative;
     display: flex;
     justify-content: center;
     border: 2px solid rgb(110, 110, 110);
     align-items: center;
     border-radius: 10px;
     transition: transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
 }
 .bento-grid a:hover{
     transform: scale(0.9);
 }
 .bento-grid a:hover::before{
     content: "Zobacz ich!";
     width: 100%;
     height: 20%;
     position: absolute;
     background-color: rgba(36, 36, 36, 0.795);
     bottom: 0;
     left: 0;
     color: white;
     font-size: clamp(10px, 1.4rem, 2dvw);
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .bento-grid a img {
     width: 80%;
     height: auto;
 }
 
 
/** end solutions section **/


/** work section **/

.work {
     background-color: var(--Theme1);
     padding-top: 20px;
}
.work h2{
     color: white;
}
.work span{
     color: black !important;
     font-weight: bolder !important;
}

.our_work {
     margin-bottom: 30px;
}

.our_work figure {
     margin: 0px;
     height: 100%;
     position: relative;
     border: 2px solid black;
}

.our_work figure img {
     width: 100%;
     cursor: none;
     
}
.our_work figure:hover::before{
     content: "";
     background-color: var(--Theme2);
     opacity: 0.3;
     height: 100%;
     width: 100%;
     position: absolute;
}


/** end work section **/


/** footer **/

.footer {
     background-color: var(--Theme2);
     text-align: center;
     
     border: 2px solid black;
}

.multipurpose {
     text-align: left;
}

.multipurpose h3 {
     color: #b3b3b3;
     font-size: 80px;
     line-height: 90px;
     padding-bottom: 0;
     font-weight: bold;
}


.multipurpose p {
     color: #fff;
     font-size: 17px;
     line-height: 30px;
     padding-top: 40px;
     font-weight: 400;
}

.sm_show {
     display: none;
}

.contac_detel {
     background: var(--gray-dark);
     
     padding: 31px 0;
}

.contac_detel ul li img {
     margin-right: 60px;
}

.contac_detel ul li {
     padding-bottom: 25px;
     font-size: 45px;
     color: white;
     line-height: 30px;
}

.contac_detel ul li:last-child {
     padding-bottom: 0;
}

.contac_detel ul li a {
     color: white;
}

.contac_detel ul li a:hover {
     color: #000;
}

.copyright {
     background: var(--Theme2);
}

.copyright p {
     color: black;
     font-size: 17px;
     line-height: 22px;
     padding: 20px 0px;
     font-weight: bolder;
}

.copyright a {
     color: black;
}

.copyright a:hover {
     color: #000;
}


/** end footer **/