*:focus {
  outline: 0 !important;

}

p {
  font-family: "Titillium Web", serif;
  font-weight: 400;
  font-style: normal;
  color: white;
  line-height: 1.8;
}

@media (max-width: 768px) {
  p{
    padding-left: 20px !important; 
  }
}

h4, h5 {
  font-family: "Titillium Web", serif;
  font-weight: 200;
  font-style: normal;
  color: rgb(151, 11, 11);
}

/* Make sure there are no gaps between columns */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.col-6.p-0 {
  padding: 0;
  /* Remove column padding */
}

/* Style for the large square */
.large-square {
  width: 100%;
  padding-top: 100%;
  /* Maintain square aspect ratio for the 600x600px square */
  position: relative;
  border-radius: 0 !important;
  border: 0;
}

/* Style for the small squares container */
.small-squares-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 columns */
  grid-template-rows: repeat(2, 1fr);
  /* 2 rows */
  height: 100%;
  /* This makes sure the grid matches the height of the large square */
}

.small-square {
  padding-top: 100%;
  /* Maintain square aspect ratio for the 300x300px squares */
  position: relative;
  border-radius: 0 !important;
  border: 0;
}

.card-body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;


}

img {
  width: 100%;
}



.card a {
  --bs-card-border-width: 0px;
  border-width: 0;
  text-decoration: none;
}

/*---*/
.brand-image {
  width: 260px;
}

@media screen and (max-width: 768px) {
  .brand-image {
    width: 150px;
    xheight: 10px;
  }
}

/*---------almenuk-----------*/

/* Add hover zoom animation */

.zoom-image {
  width: 100%;
  /* Image takes full width of container */
  height: 100%;
  /* Image takes full height of container */
  transition: transform 0.3s ease-in-out;
  /* Smooth zoom transition */

  top: 0;
  left: 0;
  object-fit: cover;
  /* Ensures the image covers the container */
}

.image-container {

  overflow: hidden;
  /* Ensure overflow is hidden */
  position: relative;
  /* Ensures image is positioned inside */
}

.image-link:hover .zoom-image {
  transform: scale(1.1);
  /* Scale the image to 110% */

}

/* ----- zoom vege ------  */

.square-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image fits perfectly within the square without distortion */
  xoverflow: hidden;
}

/* Container adjustments for mobile view */
/*@media (max-width: 768px) {
  .small-square {
      width: 48%;
      /* Adjust square size on smaller screens 
      padding-bottom: 48%;
  }
}*/
/* Media Query for Tablets Ipads portrait mode */
/*@media (min-width: 768px) and (max-width: 1024px) {
  .small-square {
    width: 20%;*/
/* Adjust square size on smaller screens 
    padding-bottom: 20%;
}
}*/


/* Optional media query for better responsiveness on smaller screens */
@media (max-width: 768px) {
  .col-3 {
    width: 50%;
    /* Two images per row on smaller screens */
    overflow: hidden;
  }
}

/* slide */

.kep {
  background-image: url("http://kameleon.veszabolcs.nhely.hu/csomagolas/hame-alap.jpg");
  background-size: cover;        /* a lényeg: mindig kitölti a konténert */
  background-position: center;   /* középre igazítja a képet */
  background-repeat: no-repeat;  /* ne ismétlődjön */
  width: 100%;
  /*height: 100vh; /* vagy pl. 400px, vagy amit szeretnél */
}





/*paciensek carousel also gombjai*/

.carousel-indicators button {
  background-color: #747474 !important;
  /* Fekete szín */
  border: none;
  /* Ha nincs szükség keretre */
  opacity: 0.5;
  /* Opció: ha halványabb verzió kell */
}

.carousel-indicators .active {
  background-color: rgb(255, 255, 255) !important;
  /* Az aktív indikátor is fekete lesz */
  opacity: 1;
  /* Aktív elem teljesen látszódjon */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E<path d='M5.5 0L4.8.7 1.5 4l3.3 3.3.7.7L2 4l3.5-4z'/%3E%3C/svg%3E");
  
}


/* mobil nezetben eltunteti a ket also ures szines kockat*/
@media (max-width: 768px) {
  .partnerek, .csomagolas{
    display: none; 
  }
}

.color-box {
  transition: background-color 0.8s ease;
}