@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
  font-family: "Inter", sans-serif;
  color: #000 !important;
  font-size: 16px;
  line-height: 1.6em;
}

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

.xd-baseline {align-items: baseline;}

.xd-brand2 {
  background-color: var(--xd-brand2);
  color: #000 !important
}

:root {
  --xd-brand2: #c1ce00;
  --xd-brand-primary: #2b74b8;
  --background-color: #c2c2c2
}

@media (max-width:600px) {

:root {
    --xdsize-xl: 34px;
    --xdsize-xxl: 98px;
}

 }

/*Common Text Sizes*/
p, ul li {
  font-size: 16px;
  line-height: 1.6em;
}

.xd-brand ul li:before, .liwhite li:before {
  color: var(--xd-white) !important
}



/*hero*/
.xd-design-01 { margin-top:var(--xdsize-xl)!important;margin-bottom:var(--xdsize-xl) !important }
.xd-design-01 h2 {margin-top:var(--xdsize-l) ; margin-bottom:var(--xdsize-l) }
@media (max-width:600px) {.xd-design-01 {padding: 0 var(--xdsize-l);} }


/*xd-design-07*/
.xd-design-07 {
   display: grid;grid-template-columns: repeat(4,  minmax(10px, 1fr));
}
.xd-design-07 > div {padding-left: var(--xdsize-l); padding-right: var(--xdsize-l);} 

.xd-design-07 > div:not(:last-child) {
  border-right: 1px solid var(--xd-border);
}

@media (max-width:600px)  {
  .xd-design-07 {display: grid;grid-template-columns: repeat(2,  minmax(10px, 1fr));
    row-gap: var(--xdsize-xl)
  }
  .xd-design-07 > div:nth-child(even) {
  border-right: 0px 
}

}


/*xd-design-06*/

.xd-design-06 div p:last-child {  margin: 0; }

.xd-design-06 div {
  padding: var(--xdsize-l) ;
  text-wrap:  balance;
}

.xd-design-06 > hr {   border: 1px solid var(--xd-border); margin:0 }

.xd-design-06 h3 {
display:flex; flex-wrap: nowrap; align-items: center;
gap: var(--xdsize-m);justify-content: space-between; 
margin: 0 0 var(--xdsize-l) 0;
}

.xd-design-06 {
  display: grid;
  grid-template-columns:  1fr 1px 1fr 1px 1fr; /* First and third columns take up half the width, second column is 1px wide */
  gap: var(--xdsize-l)/* Optional: Adjust the gap between grid items */
}
@media (max-width:600px) {.xd-design-06 { grid-template-columns: 1fr ;} }

/*xd-design-05*/

.xd-design-05 {
  display: grid;
  grid-template-columns: 1fr 1px 1fr; /* First and third columns take up half the width, second column is 1px wide */
  gap: var(--xdsize-l)/* Optional: Adjust the gap between grid items */
}

@media (max-width:600px) {.xd-design-05 { grid-template-columns: 1fr ;} }
.xd-design-05 div p:last-child {  margin: 0; }

.xd-design-05 div {
  padding: var(--xdsize-l);
  text-wrap:  balance;
}
.xd-design-05 > hr {   border: 1px solid var(--xd-border); margin:0 }

.xd-design-05 h3 {
display:flex; flex-wrap: nowrap; align-items: flex-start;
gap: var(--xdsize-m);justify-content: space-between; 
margin: 0 0 var(--xdsize-l)  0;
}


/*xd-design-04*/
.xd-design-04 {
  display: grid;
  grid-template-columns: 2fr 8fr 2fr; 
  gap: var(--xdsize-l)   0px;
}
.xd-design-04 h2 {
  font-weight: 700;
  letter-spacing: -.04em;
   /* text-shadow:  rgb(0, 0, 0) -0.934277px 0px 0px, rgb(0, 0, 0) 0.934277px 0px 0px */
} 

.xd-design-04 div:nth-child(3)  { display:flex; justify-content: center;align-items: center;}
@media (max-width:600px) {.xd-design-04 {padding: 0 var(--xdsize-l); grid-template-columns: 1fr ;} }



.xd-design-08 {

}


.xd-brand h2 { color:white}
.xd-brand h3 { color:white}

h1 {
  font-weight: 700 !important;
  line-height: 95%;
  letter-spacing: -.04em;
  margin: 0;
  padding: 0;
  font-size: 50px;
  text-wrap: balance;
}

h2 {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2em;
  color: #000;
  text-wrap: balance;
  max-inline-size: 40ch;
}

h3 {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--xd-gray8)
}

.xd-grid-2-columns div, .xd-grid-3-columns div {
  padding: var(--xdsize-l);
  text-wrap: balance;
}

.xd-grid-4-columns div
{
  padding: var(--xdsize-l);
  text-wrap: balance;
}

.xd-grid-3-columns h3,.xd-grid-2-columns h3 {display:flex; flex-wrap: nowrap; align-items: flex-start;
gap: var(--xdsize-m);justify-content: space-between; min-height:2.4em; }  


@media (min-width: 600px) {
.xd-grid-2-columns {
  display: grid;
  grid-template-columns: 1fr 1px 1fr; /* First and third columns take up half the width, second column is 1px wide */
  gap: var(--xdsize-l) /* Optional: Adjust the gap between grid items */
}



.xd-grid-4-columns {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr; /* First and third columns take up half the width, second column is 1px wide */
  gap: var(--xdsize-l) /* Optional: Adjust the gap between grid items */
}

.xd-grid-8-columns {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr; /* First and third columns take up half the width, second column is 1px wide */
  gap: var(--xdsize-l) /* Optional: Adjust the gap between grid items */
}
}


.xd-grid-item{
  border-right: 1px solid var(--xd-border);
}

/*END Common Text Sizes*/

.xd-light {
  background-color: rgba(var(--xd-light-rgb), 0.8) !important
}


/*MENU*/
.xd-menu {
  background-color: rgba(var(--xd-light-rgb), 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  align-items: center;
  justify-content: center;
  display:flex;
  height:80px;
  gap:30px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.xd-menu img {
  max-height: 40px;
}

.xd-menu  .menu-link {
  font-weight: 700;
  font-size: 18px;
  padding: var(--xdsize-m);
  color: var(--xd-dark);
}

.xd-menu  .menu-link:hover {
    filter: brightness(90%);
}

#menu-toggle{display:none}

/* hamburger button */
.menu-btn{display:none;cursor:pointer;padding:.5rem}
.menu-btn span{display:block;width:26px;height:2px;background:#111;margin:6px 0;
  transition:transform .25s ease,opacity .2s ease}

/* menu links */
.menu-links{display:flex;gap:1rem}

/* mobile styles */
@media(max-width:768px){
  .menu-btn{display:block;z-index:20}
  .menu-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;
    background: rgba(var(--xd-light-rgb), 1);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    padding:0 1rem;
    transform:translateY(-10px);
    max-height:0;overflow:hidden;
    transition:all .3s ease;
  }

  /* open state */
  #menu-toggle:checked ~ .menu-links{
    transform:translateY(0);opacity:1;max-height:70vh;
  }

  /* icon morph */
  #menu-toggle:checked + .menu-btn span:nth-child(1){
    transform:translateY(8px) rotate(45deg)
  }
  #menu-toggle:checked + .menu-btn span:nth-child(2){
    opacity:0
  }
  #menu-toggle:checked + .menu-btn span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg)
  }
}



/*MENU END*/







:root {
  --xd-background: var(--xd-white)
}



.xd-brand2 {
  background-color: var(--xd-outline) !important;
}

/*004*/
*:not(img):focus:not(.xd--focus),
table.xd-table tbody tr:hover,
.xd-button:hover:not(.xd--focus) {
  background-color: var(--xd-gray1);
  outline-width: 0;
  -o-transition: all .2s;
  transition: all .2s;

}

/*061*/
.xd-brand {
  background-color: rgb(0, 180, 229, 0.8) !important;
  /* background-color: var(--xdbrand) !important; /*00b4e5*/
  color: white;
}

@media (max-width:600px) {
  .xd-center-m {
    text-align: center;
  }

  .v_box_bullet,
  .v_box_heading {
    margin-left: 8px;
    margin-right: 8px;
  }

}

.router-link-active.xd-button {
  color: var(--xd-white) !important;
  background-color: var(--xd-brand) !important;
}


.xd-image-grayscale100 {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

hr {
  border-top: solid var(--xd-outline) 1px;
  margin: 50px 0;
}

hr.hr-logo:after {
  content: url(../images/platformaerp-cloud-small.png );
  /* Controls the position of the logo */
  left: 50%;
  position: absolute;
  transform: translateY(-65%) translateX(-50%);
  /* Controls the whitespace around the symbol */
  padding: 0px;
  background: #fff;
  z-index: 1;
}

.clients-image {
  background: url(../images/hero/intro-bg.jpg) no-repeat center center;
  background-size: cover;
  min-height: 400px;
  background-color: rgba(74, 72, 77, 0.85);
  margin-top: var(--xdsize-l);
  border-radius: var(--xdsize-m);
}

.about-image {
  background: url(../images/hero/hanelOnas.jpg) no-repeat center center;
  background-size: cover;
  min-height: 400px;
  margin-top: var(--xdsize-l);
  border-radius: var(--xdsize-m);
}

.main-hero-image {
  background: url(../images/hero/platformaerp-dashboard.png) no-repeat top center;
  background-size: cover;
  min-height: 510px;
  border-radius: var(--xdsize-l);
  margin-top: var(--xdsize-l);
}

.handel-hero-image {
  background: url(../images/hero/platformaerp-firma-handlowa.png) no-repeat top center;
  background-size: cover;
  min-height: 510px;
  border-radius: var(--xdsize-l);
  margin-top: var(--xdsize-l);
}

a:hover:not(.xd-button, .xd-hover, .v_box_heading) {
  text-decoration: underline;
}

a:not(.xd-button) {
  color: var(--xd-black);
  display:inline-block;
}

.contact-image {

  background: url(../images/hero/manufacturing-src.jpg) no-repeat center center;
  background-size: cover;
  min-height: 400px;
  margin-top: var(--xdsize-l);
  border-radius: var(--xdsize-m)
}

.manufacturing-hero-image {
  background: url(../images/hero/manufacturing-how-it-works-src.jpg) no-repeat center center;
  background-size: cover;
  min-height: 400px;
  margin-top: var(--xdsize-l);
  border-radius: var(--xdsize-m)
}

.xd-brand-shadow {

  border: 1px solid #dee0e2;
  -webkit-box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  background: #fff;

  border-radius: 0px !important;
  background-color: rgb(0, 180, 229, 0.8) !important;
  /* background-color: var(--xdbrand) !important; /*00b4e5*/
  color: white;
  padding: 26px;
}

.v_box_heading {

  margin-bottom: var(--xdsize-l);
  border: 1px solid #dee0e2;
  border-radius: var(--xdsize-l);
  /* -webkit-box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%); */
  /* box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%); */
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  height: 100%;
  background: #fff;
  padding: 26px;
}

.v_box_number {

  border: 1px solid #dee0e2;
  border-radius: var(--xdsize-l);
  /* -webkit-box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%); */
  /* box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%); */
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  height: 100%;
  background: #fff;
  padding: 12px 0;
}

.v_box_bullet {

  border-radius: var(--xdsize-l);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;

  margin: 4px 0px;
  padding: var(--xdsize-m)
}

.v_box_heading:hover,
.v_box_number:hover,
.v_box_bullet:hover {
  background-color: var(--xd-gray1)
}





.intro-message {
  /* text-shadow: 2px 2px 3px rgba(0,0,0,0.6); */
  color: white;
}

ul {
  list-style-type: none;
  padding: 0 0 0 24px
}

/* ul li { line-height:1.7em;} */
ul li:before {
  content: "\f192";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-left: -2em;
  width: 2em;
  text-align: center;
  color: var(--xd-brand)
}




.xd-image-icon {
  width: 50px;
  text-align: center;
}

.xd-image-icon-small {
  width: 25px;
  text-align: center;
}




@media (max-width: 600px) {
  .grid-4items {
    display: grid;
    grid-template-columns: 100%;
  }

  .grid-item {
    border-bottom: 1px solid var(--xd-border);
    /* Add a light grey border */
    padding: 10px;
  }

  .grid-item:nth-child(3n),
  .grid-item:nth-child(4n) {
    border-bottom: none;
  }

  .grid-item img {
    max-width: 150px !important;
  }
  .grid-item .icon {
    max-width: 100px !important;
  }
}

@media (min-width: 600px) {
  .grid-4items {
    display: grid;
    grid-template-columns: 28% 28% 28% 16%;
  }

  .grid-item {
    border-right: 1px solid var(--xd-border);
    /* Add a light grey border */
    padding: 10px;
  }

  /* Remove the border for every 4th item */
  .grid-item:nth-child(4n) {
    border-right: none;
  }

}

.title-xl {
  font-size: 40px;
  line-height: 1.5em;
  font-weight: 600;
  min-height: 125px;
  /* padding-top: 16px; */
}

.card {
  transition: all 1s;
}

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

.xd-button:hover {
  filter: brightness(90%);
}

.section-lg {
  margin-top: 98px;
  margin-bottom: 98px
}

#form2 .xd-input {
  border-radius: var(--xdsize-m) !important;
}

@media (max-width:600px) {
  .padding-mobile-s {
    padding: 0 var(--xdsize-l);
  }

    .padding-mobile-s {
    padding: 0 var(--xdsize-m);
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.3rem;
  }
  h3 {
    font-size: 1.1rem;
  }

  .section-lg {
    margin-top: var(--xdsize-m);
    margin-bottom: var(--xdsize-m);
  }

  .card {
    padding-top: 0;
    padding-bottom: 0;
  }
}

h1 {
line-height: 1.1em;
font-weight: 800!important;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image:
linear-gradient(var(--angle), rgba(2,0,36,1) 0%, var(--xd-brand) 100% );
  animation: autoRotate 10s linear  infinite;
}

.box {
  border-radius: 20px;
  position: relative;
}
@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@keyframes autoRotate {
  to {
      --angle: 360deg;
  }
}



.xd-design-09 {
  display:flex;
  justify-content: left;
  gap :var(--xdsize-l);
  flex-wrap: wrap;
}


.xd-design-09  a {
  /* background-color: rgba(var(--xd-light-rgb), 0.8);
  backdrop-filter: saturate(180%) blur(20px); */
  align-items: center;
  border: solid 2px var(--xd-gray5);
  font-weight: 500;
  white-space: nowrap;
  padding:var(--xdsize-m) var(--xdsize-l);
  border-radius: 999px;
  display:flex;
  gap:var(--xdsize-m);
  text-decoration: none;
}

.xd-design-09  a:hover {
    text-decoration: none;
background-color:  var(--xd-brand2)
}

body {
  background-image: url(../images/tlo4normal.png), url(../images/tlo4rotate.png);
  background-repeat: no-repeat, no-repeat;
  background-size: 1000px, 1000px; /* adjust as needed */
  background-position: top right, bottom left;
  background-color: rgba(255,255,255,0.9); /* white overlay */
  background-blend-mode: lighten;
}

.tlo5 {
  
  background-image: url(../images/tlo5.png);
  background-repeat: no-repeat, ;
  background-size: 1600px; /* adjust as needed */
  background-position: top center;
  background-color: rgba(255,255,255,0.6); /* white overlay */
  background-blend-mode: lighten;
}


.tlo7 {
    width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image: url(../images/tlo7.png);
  background-repeat:repeat-y ;
  background-size: 50%; /* adjust as needed */
  background-position: top 500px;
  background-color: rgba(255,255,255,0.9); /* white overlay */
  background-blend-mode: lighten;
}