/* screen - pagrindinis */

 .pagrindinis{
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  height: 2638px;
  overflow: hidden;
  width: 1440px;
}

 .overlap-group2 {
  align-items: center;
  background-color: var(--eerie-black);
  display: flex;
  height: 87px;
  justify-content: flex-end;
  min-width: 1440px;
  padding: 8.3px 58px;
}

 .logo2-300x108png {
  background-image: url(../img/logo2-300x108-png@2x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 53px;
  margin-bottom: 0.44px;
  width: 146px;
  align-content: center;
}

 .frame-2 {
  align-items: flex-start;
  align-self: flex-start;
  display: flex;
  margin-left: 85px;
  min-width: 413px;
}

 .apie-mus {
  height: 70px;
  letter-spacing: 0;
  line-height: 70px;
  margin-top: -1px;
  min-width: 69px;
  white-space: nowrap;
}

 .menu-item {
  height: 70px;
  letter-spacing: 0;
  line-height: 70px;
  margin-left: 40px;
  margin-top: -1px;
  white-space: nowrap;
}

 .kontaktai {
  height: 70px;
  letter-spacing: 0;
  line-height: 70px;
  margin-left: 55px;
  margin-top: -1px;
  white-space: nowrap;
}

 .group-2 {
  height: 38px;
  margin-left: 575px;
  margin-top: 3.0px;
  width: 89px;
}

 .gilmeros_asfalto_gamykla-1 {
  height: 591px;
  object-fit: cover;
  width: 1440px;
}

 .section {
  background-color: var(--white);
  margin-left: -286px;
  padding: 32px 96px;
  position: relative;
  width: 1920px;
}

 .container {
  align-items: flex-start;
  /* display: flex; */
  flex: 0 0 auto;
  justify-content: center;
  position: relative;
  width: 1728px;
}

 .container-9 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  justify-content: center;
  max-width: 1248px;
  min-height: 1px;
  position: relative;
}

 .container-10 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 0px 24px;
  position: relative;
}

 .margin {
  height: 32px;
  justify-content: center;
  padding: 0px 0px 16px;
}

 .container-11 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  height: 16px;
  position: relative;
  width: 100%;
}

 .susisiekite {
  color: #201e1c;
  font-family: var(--font-family-rubik);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: 16px;
}

 .section-1 {
  align-self: stretch;
  height: 58px;
  position: relative;
  width: 100%;
}

 .container-12 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  position: relative;
  width: 1200px;
}

 .container-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  justify-content: center;
  min-height: 1px;
  position: relative;
}

 .container-2 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

 .list {
  gap: 5px;
}

 .item-2 {
  padding: 0px 0px 5px;
}

 .span1 {
  color: var(--black);
  font-family: var(--font-family-rubik);
  font-size: var(--font-size-s);
  font-weight: 400;
}

 .item-4 {
  justify-content: center;
  padding: 0px 0px 5px;
}

 .link {
  align-items: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  position: relative;
}

 .item {
  justify-content: center;
}

 .hero-image-container {
  margin: 0;              /* remove default margin */
  padding: 0;             /* remove default padding */
  width: 100%;            /* full width */
}

.hero-image {
  display: block;         /* remove inline gap */
  width: 100%;            /* fill container width */
  height: auto;           /* keep aspect ratio */
  object-fit: cover;
}

/* 2) Overlap-group (black background, full width) */
.overlap-group {
  width: 100%;
  margin: 0;                  /* no horizontal margin */
  padding: 79px 58px;         /* vertical/horizontal padding as you like */
  background-color: var(--eerie-black);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vector icon at top-left */
.vector {
  align-self: flex-start;  /* anchor to left */
  margin-left: 1px;
  margin-top: 10px;
}

/* Main heading in overlap-group */
.ms-asfalto-miiniai {
  margin-top: 14px;
  margin-left: 1px;
  color: white;
  font-size: 38px;
  line-height: 45px;
  /* rubik-bold-white-38px style */
  width: 100%;
  max-width: 552px;
}

/* 3) Five items row - no scrolling, spaced out, resize images as squares */
.five-items-row {
  display: flex;
  justify-content: space-between;   /* space between columns */
  gap: 20px;                        /* consistent spacing */
  width: 100%;
  max-width: 1440px;               /* or any container limit if needed */
  margin-top: 60px;                /* space from heading */
  flex-wrap: wrap;                 /* allow wrap on smaller screens */
  box-sizing: border-box;
}

/* Each item is a column (1 of 5 on big screens) */
.item-block {
  flex: 1 1 calc((100% - 4*20px) / 5); /* 5 columns, minus 4 gaps of 20px */
  /* Explanation:
   * 100% total width - (4 * 20px for gap) = leftover width
   * / 5 to get each column's size
   */
  background-color: transparent;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-bottom: 40px; /* vertical spacing if wraps occur */
  min-width: 180px;    /* prevent columns from shrinking too small */
}

/* (Optional) Force a certain aspect ratio for the images to be squares: 
   We'll use an extra .image-wrapper with padding-top trick 
   or the modern aspect-ratio property (if you can rely on it).
*/
.image-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  /* Use "aspect-ratio" if fully supported by your target browsers:
     aspect-ratio: 1 / 1;
     Otherwise, fallback to the padding-top hack: */
  padding-top: 100%; /* makes a 1:1 square box */
  margin-bottom: 10px;
}

.rectangle {
  position: absolute;  /* for the padding-top hack */
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Title */
.pavadinimas {
  color: white;
  font-size: 24px;
  margin-bottom: 10px;
  line-height: 1.3;
  white-space: normal;
  word-wrap: break-word; /* wrap text if too long */
}

/* Description */
.trumpas-apraymas-i-keliu-odiu {
  color: white;
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 10px;
  white-space: normal;
  word-wrap: break-word;
}

/* "PIRKTI" link container */
.pirkti-button {
  background-color: var(--persian-red);
  padding: 12px 24px;
  display: inline-block;
  width: 100%;
  align-self: center;
  text-align: center;
  box-sizing: border-box;
  margin-top: 20px;
  color:white;
}

/* This link is already set to white, no underline inline style 
   but you can override here too 
*/
.pirkti-button a {
  color: white;
  text-decoration: none;
  font-size: 14px;
}

/* 4) Responsive breakpoints 
   to avoid 5 columns on small screens 
*/
@media (max-width: 1200px) {
  .item-block {
    flex: 1 1 calc((100% - 3*20px) / 4); 
    /* go down to 4 columns */
  }
}

@media (max-width: 992px) {
  .item-block {
    flex: 1 1 calc((100% - 2*20px) / 3); 
    /* 3 columns */
  }
}

@media (max-width: 768px) {
  .item-block {
    flex: 1 1 calc((100% - 20px) / 2);
    /* 2 columns */
  }
}

@media (max-width: 480px) {
  .item-block {
    flex: 1 1 100%;
    /* single column on very small screens */
  }
}

.flex-row {
  align-items: flex-start;
  display: flex;
  gap: 42px;
  margin-top: 94px;
  width: 100%;
  overflow-x: auto;
}

.rectangle {
  height: 299px;
  width: 299px;
  object-fit: cover;
}

.link-container {
  align-items: flex-start;
  display: flex;
  gap: 42px;
  height: 47px;
  margin-top: 36px;
  width: 100%;
  overflow-x: auto;
}

.link-1, .link-2 {
  align-items: flex-start;
  background-color: var(--persian-red);
  display: flex;
  justify-content: center;
  padding: 16px 32px;
  position: relative;
  width: 299px;
}

.container-5, .container-6 {
  /* unchanged styles */
}

.overlap-group1 {
  /* Adjust width and margins */
  width: 100%;
  margin: 0 auto;
  /* Remove fixed height if possible */
}


 .section-2 {
  position: relative;            /* So pseudo-element can be absolutely positioned */
  width: 100%;                  /* Make it responsive */
  padding: 72px 0;              /* Top/bottom padding as needed */
  background: url(https://cdn.animaapp.com/projects/6785255a99177f783cbfe5df/releases/67852a9a07ad805f6d538b04/img/section.png); center / cover no-repeat;
}

.section-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #171717;    /* var(--eerie-black) if you prefer */
  opacity: 0.5;                 /* The transparency level */
  z-index: 1;                   /* Below the content but above the background */
}

/* Then inside .section-2, your main content container is relative and above the overlay */
.section-2 .container {
  position: relative;
  z-index: 2;                   /* So your text / images appear above the overlay */
  max-width: 1200px;            /* typical responsive container width */
  margin: 0 auto;               /* center it */
}

 .container-7 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  justify-content: center;
  max-width: 624px;
  min-height: 1px;
  position: relative;
}

 .overlay {
  background-color: #171717e6;
  padding: 170.14px 64px;
}

 .margin-1 {
  flex: 0 0 auto;
  padding: 0px 0px 32px;
}

 .container-13 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 32px;
  position: relative;
  width: 100%;
}

 .container-14 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

 .container-15 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

 .list-1 {
  gap: 14px;
}

 .ofisas-piev-g-3-alytus-1 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

 .asfalto-gamykla-fort-g-2-a-alytus-1 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

 .item-5 {
  justify-content: center;
  padding: 0px 0px 14px;
}

 .overlay-1 {
  background-color: #ffffffe6;
  padding: 64px;
}

 .margin-2 {
  flex: 0 0 auto;
  margin-top: -6.05px;
  padding: 0px 0px 32px;
}

 .susisiekite-1 {
  line-height: 45px;
}

 .container-16 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  margin-bottom: -6.05px;
  padding: 0px 0px 20.39px;
  position: relative;
  width: 100%;
}

 .container-17 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 31.6px;
  padding: 0px 0px 10.56px;
  position: relative;
  width: 100%;
}

 .input {
  align-self: stretch;
  background-color: var(--alabaster);
  border: 1px solid;
  border-color: var(--alto);
  border-radius: 2px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 13.75px;
  width: 100%;
}

 .container-8 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

 .container-18 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  padding: 5px 0px 6.56px;
  position: relative;
}

 .input-1 {
  background-color: var(--persian-red);
  display: inline-flex;
  padding: 16px 32px;
}

 .overlap-group3 {
  align-items: flex-end;
  background-color: #1e1e1e;
  display: flex;
  
}

 .heading {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

 .infogilmeralt-2 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

 .input-2 {
  align-items: flex-start;
  flex: 0 0 auto;
  position: relative;
}

 .item-6 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
}

 .list-2 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

 .margin-3 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

 .overlay-2 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  position: relative;
}

 .phone-2 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

 .section-3 {
  align-items: center;
  display: flex;
  flex-direction: column;
}

 .susisiekite-2 {
  align-self: stretch;
  letter-spacing: 0;
  margin-top: -1.00px;
  position: relative;
}

/* Fix language dropdown alignment */
#top-bar .nav-item {
  display: flex;
  align-items: center;
 
}

#top-bar .nav-link {
  display: flex;
  align-items: center;
  padding: 0; /* Remove default padding that might offset alignment */
}