@media screen and (max-width: 992px) {
  .banner-overlay {
    position: relative !important;
    top: 2rem !important;
    left: 0 !important;
    border-radius: 0 !important;
    transform: translate(0, 0) !important;
  }
  .services-items .col {
    flex: 1 0 50%;
  }
  .shap-bg {
    display: none !important;
  }
  .img-shaps:before,
  .img-shaps:after {
    display: none !important;
  }
  .img-design-container {
    padding-top: 120px !important;
    padding-bottom: 0 !important;
  }
  .img-design-container .section-title.img-design-title.mt-5 {
    margin-top: 0 !important;
  }
  .img-design {
    top: 20px !important;
    text-align: center !important;
    margin-bottom: 50px !important;
    position: relative !important;
  }
  .pricing-right {
    margin: 50px 0px !important;
  }
  .pricing-row {
    display: block !important;
  }
  .card {
    height: auto !important;
    margin: auto !important;
  }
  .pricing-card-2,
  .pricing-card-5,
  .pricing-card-7,
  .pricing-card-9 {
    margin: 20px auto !important;
  }
  .list-group p {
    padding: 5px 10px !important;
  }
  .logo-design-pricing-row {
    margin: 50px 0px !important;
  }

  .business-card-design-2 {
    top: 50% !important;
  }
  .rofile {
    margin-top: 50px !important;
  }
  .rofile img {
    width: 100% !important;
    height: 100% !important;
  }
  .contact-details {
    padding: 20px 0px !important;
  }
  .img-shaps img {
    position: relative !important;
    width: 100% !important;
  }

  .image-marquee.marquee-left,
  .image-marquee.marquee-right {
    height: 250px !important;
  }

  .feedback-carousel-section {
    margin-top: 20px !important;
  }

  .services-items .row {
    justify-content: center !important;
  }

  /* Logo.html: Váltakozó kép alulra mobilnézetben */
  .pricing-bottom-img-section {
    position: static !important;
    margin-top: 2rem !important;
    text-align: center !important;
  }
  .pricing-bottom-img {
    position: static !important;
    margin: 2rem auto !important;
  }

  /* nevjegykarta-tervezes.html: Váltakozó kép alulra mobilnézetben */
  .image-marquee {
    order: 3 !important;
    width: 100% !important;
    margin-top: 20px !important;
    text-align: center !important;
  }
  .image-marquee img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
  }
}

@media screen and (max-width: 768px) {
  .hogyan-dolgozunk-item {
    width: auto !important;
  }
  .graphic-designer-title {
    margin-bottom: 50px !important;
  }
  .contact-title {
    margin: 50px 0px !important;
  }
  .contact {
    padding: 30px 0px !important;
  }
  .btn {
    margin: 20px 6px !important;
  }
  .dropdown-menu,
  .dropdown-menu li a {
    width: 100% !important;
  }
  .card {
    width: 100% !important;
  }

  .shape-design-bg {
    display: none !important;
  }
  .img-design {
    display: block !important;
  }
  .pricing-bottom-img {
    width: 100% !important;
    padding: 0px 15px !important;
  }

  .pricing-bottom-img img {
    width: 100% !important;
  }

  .portfolio-item .portfolio-img {
    width: 100% !important;
  }

  .contact-page .contact-content .row {
    flex-direction: column !important;
    align-items: center !important;
  }

  .contact-page .contact-content .row > div {
    margin-bottom: 20px !important;
    padding-top: 0 !important;
  }
  .contact-page .contact-form {
    margin: auto !important;
  }
  .contact-form {
    padding: 0 !important;
  }
  .contact-page .contact-details {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .work-hours {
    text-align: center !important;
  }

  .graphic-designer-overlay {
    left: 50% !important;
    top: 50px !important;
    transform: translateX(-50%) !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    max-width: 120px !important;
  }
  .graphic-designer-overlay a {
    font-size: 12px !important;
  }

  .graphic-designer-title h1 {
    text-align: center !important;
    font-size: 28px !important;
    padding: 0 10px !important;
    margin-top: 80px !important;
  }

  .graphic-designer .img-shaps {
    text-align: center !important;
  }
  .graphic-designer .img-shaps img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 90% !important;
    height: auto !important;
  }

  .feedback-carousel-section {
    margin-bottom: 80px !important;
  }
  .contact {
    margin-top: 80px !important;
  }

  /* Social media kezelés oldal mobilnézet:
     A tartalmat oszlopba rendezzük:
     1. Szöveg középen
     2. Kártya kép alatta
     3. Projektről szóló kép legalul
  */
  .online-arculat-page .online-arculat-container {
    position: relative !important;
    padding: 20px !important;
    text-align: center !important;
  }
  .online-arculat-page .online-arculat-top-label {
    padding: 8px 15px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    top: 10px !important;
    left: 0 !important;
  }
  .online-arculat-page .online-arculat-content-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .online-arculat-page .online-arculat-left,
  .online-arculat-page .online-arculat-right {
    width: 100% !important;
  }

  .online-arculat-page .online-arculat-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .online-arculat-page .online-arculat-left h1,
  .online-arculat-page .online-arculat-left p {
    width: 90% !important;
    max-width: 600px !important;
    margin: 0 auto 15px auto !important;
    text-align: center !important;
  }

  /* Kártya kép a left és right elemek után jöjjön másodikként */
  .online-arculat-page .online-arculat-right {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important; /* egymás mellett maradjanak */
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 8px !important; /* kisebb rés, hogy biztosan beférjen */
    width: 100% !important;
    overflow: hidden !important; /* prevent accidental horizontal overflow */
  }

  /* Projektről szóló kép (online-arculat-post-image) legyen a 3. helyen */
  .online-arculat-page .online-arculat-post-image {
    order: 3 !important;
    margin-top: 20px !important;
  }

  .online-arculat-page .online-arculat-left h1,
  .online-arculat-page .online-arculat-left p:not(.online-arculat-post-image p) {
    order: 0 !important; /* Hagyjuk elöl a címet és az első bekezdést */
  }

  .online-arculat-page .online-arculat-right img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Bal oldali kis media oszlop szélessége mobilon */
  .online-arculat-page .online-arculat-right > .tw-w-\[160px\] {
    flex: 0 0 120px !important;
    width: 120px !important;
    max-width: 120px !important;
  }
  .online-arculat-page .online-arculat-right video {
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
    display: block !important;
  }
  .online-arculat-page .online-arculat-right .tw-h-\[300px\] {
    height: auto !important;
  }
  /* Jobb oldali pricing card illesztése a maradék helyre */
  .online-arculat-page .online-arculat-right .web-pricing-card {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100% - 128px) !important; /* 120px oszlop + 8px rés */
    max-width: 240px !important; /* biztosan beférjen 375px nézetben is */
    margin: 0 !important;
  }

  .online-arculat-page .online-arculat-post-image img {
    max-width: 90% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Nyomdai oldal mobilon:
     - Tartalom egymás alatt, középen
     - Kép és form is max-width:90%, center
  */
  .nyomdai-page .nyomdai-content-area {
    flex-direction: column !important;
    align-items: center !important;
    text-align: left !important;
  }
  .nyomdai-page .nyomdai-left,
  .nyomdai-page .nyomdai-right {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .nyomdai-page .nyomdai-right h2 {
    padding: 0 10px !important;
    margin: 0 auto 20px auto !important;
  }
  .nyomdai-page .nyomdai-form form {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Nevjegykarta-tervezes.html: Váltakozó kép alulra mobilnézetben */
  /* Feltételezzük, hogy van egy .image-marquee elem a nevjegykarta-tervezes.html oldalán */
  .image-marquee {
    order: 3 !important;
    width: 100% !important;
    margin-top: 20px !important;
    text-align: center !important;
  }
  .image-marquee img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
  }

  /* Social media kezelés oldal mobilnézetben középre igazítás */
  .online-arculat-page .online-arculat-container,
  .online-arculat-page .online-arculat-content-area,
  .online-arculat-page .online-arculat-left,
  .online-arculat-page .online-arculat-right,
  .online-arculat-page .online-arculat-post-image,
  .online-arculat-page .online-arculat-left h1,
  .online-arculat-page .online-arculat-left p {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media screen and (max-width: 575px) {
  footer .text-end {
    text-align: left !important;
  }
  .search-box {
    position: relative !important;
    margin-bottom: 5px !important;
    margin-top: 10px !important;
  }
  .search-box i {
    font-size: 30px !important;
  }
  .img-design {
    padding: 0px 12px !important;
  }
  .img-design img {
    width: 100% !important;
  }

  .contact-page .contact-content .row > div {
    width: 100% !important;
  }
  .contact-page .contact-form {
    width: 100% !important;
  }
  .contact-page .contact-details a {
    justify-content: center !important;
  }

  .graphic-designer-overlay {
    top: 60px !important;
    max-width: 100px !important;
  }
  .graphic-designer .img-shaps img {
    width: 90% !important;
  }

  .feedback-carousel-section {
    margin-bottom: 100px !important;
  }
  .contact {
    margin-top: 100px !important;
  }

  .online-arculat-page .online-arculat-left h1,
  .online-arculat-page .online-arculat-left p {
    max-width: 90% !important;
  }
  .online-arculat-page .online-arculat-right img {
    max-width: 90% !important;
  }
  .online-arculat-page .online-arculat-post-image img {
    max-width: 90% !important;
  }

  /* Logo.html: Váltakozó kép alulra mobilnézetben */
  .pricing-bottom-img-section {
    margin-top: 2rem !important;
  }
  .pricing-bottom-img {
    margin-top: 2rem !important;
  }

  /* nevjegykarta-tervezes.html: Váltakozó kép alulra mobilnézetben */
  .image-marquee {
    order: 3 !important;
    width: 100% !important;
    margin-top: 20px !important;
    text-align: center !important;
  }
  .image-marquee img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
  }

  /* Social media kezelés oldal mobilnézetben középre igazítás */
  .online-arculat-page .online-arculat-container,
  .online-arculat-page .online-arculat-content-area,
  .online-arculat-page .online-arculat-left,
  .online-arculat-page .online-arculat-right,
  .online-arculat-page .online-arculat-post-image,
  .online-arculat-page .online-arculat-left h1,
  .online-arculat-page .online-arculat-left p {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  .navbar-custom .dropdown-menu {
    background-color: #ffffff !important;
  }

  /* Nevjegykarta-tervezes.html: Váltakozó kép alulra mobilnézetben */
  .image-marquee {
    order: 3 !important;
    width: 100% !important;
    margin-top: 20px !important;
    text-align: center !important;
  }
  .image-marquee img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
  }

  /* Logo.html: Váltakozó kép alulra mobilnézetben */
  .pricing-bottom-img-section {
    position: static !important;
    margin-top: 2rem !important;
    text-align: center !important;
  }
  .pricing-bottom-img {
    position: static !important;
    margin: 2rem auto !important;
  }

  /* Social media kezelés oldal mobilnézetben középre igazítás */
  .online-arculat-page .online-arculat-container,
  .online-arculat-page .online-arculat-content-area,
  .online-arculat-page .online-arculat-left,
  .online-arculat-page .online-arculat-right,
  .online-arculat-page .online-arculat-post-image,
  .online-arculat-page .online-arculat-left h1,
  .online-arculat-page .online-arculat-left p {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media screen and (max-width: 992px) {
  .offcanvas-body .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .offcanvas-body .dropdown-menu {
    width: 100% !important;
    text-align: center !important;
  }

  .offcanvas-body .dropdown-menu li a {
    width: 100% !important;
    text-align: center !important;
  }
  .rotated-borders {
    display: none;
  }
}

/* ÚJ TOVÁBBI FINOMÍTÁSOK A VÉGÉN, HOGY A NYOMDAI ÉS ONLINE OLDAL MÉG JOBB LEGYEN MOBILON */

/* Nyomdai oldal mobilon:
   - Tartalom egymás alatt, középen
   - Kép és form is max-width:90%, center
*/
@media (max-width: 768px) {
  .nyomdai-page .nyomdai-content-area {
    flex-direction: column !important;
    align-items: center !important;
    text-align: left !important;
  }
  .nyomdai-page .nyomdai-left,
  .nyomdai-page .nyomdai-right {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .nyomdai-page .nyomdai-right h2 {
    padding: 0 10px !important;
    max-width: 90% !important;
    margin: 0 auto 20px auto !important;
  }
  .nyomdai-page .nyomdai-form form {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Mobil Nézet (max-width: 768px) */
@media screen and (max-width: 768px) {
  /* Középre igazított szöveg */
  .online-arculat-page .online-arculat-left {
      text-align: center !important;
      padding: 0 !important;
  }

  .online-arculat-page .online-arculat-left h1,
  .online-arculat-page .online-arculat-left p {
      margin: 0 auto 15px auto !important;
      max-width: 100% !important;
  }

  /* Tartalom területe oszlopos elrendezésre */
  .online-arculat-content-area {
      flex-direction: column !important;
      align-items: center !important;
  }

  /* Jobb oldali rész teljes szélességű és középre igazított */
  .online-arculat-right {
      width: 100% !important;
      margin-left: 0 !important;
      margin-top: 20px !important;
      text-align: center !important;
  }

  /* Képek középre igazítása és méretezése */
  .online-arculat-post-image img,
  .online-arculat-right-img {
      max-width: 100% !important;
      height: auto !important;
      display: block !important;
      margin: 20px auto !important;
  }

  /* Konténer szélességének növelése */
  .online-arculat-container {
      width: 95% !important;
      padding: 20px !important;
  }

  /* Váltakozó kép (képgaléria vagy slideshow) nagyítása */
  .image-marquee, 
  .image-marquee .image-track img {
      height: 250px !important; /* Növeljük a magasságot */
  }
  .nyomdai-left{
    padding-right: 0px;
  }
}

/* Tablet Nézet (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Középre igazított szöveg */
  .online-arculat-page .online-arculat-left {
      text-align: center !important;
      padding: 0 10px !important;
  }

  .online-arculat-page .online-arculat-left h1,
  .online-arculat-page .online-arculat-left p {
      margin: 0 auto 20px auto !important;
      max-width: 100% !important;
      font-size: 1.5em;
  }

  /* Tartalom területe oszlopos elrendezésre */
  .online-arculat-content-area {
      flex-direction: column !important;
      align-items: center !important;
  }

  /* Jobb oldali rész teljes szélességű és középre igazított */
  .online-arculat-right {
      width: 100% !important;
      margin-left: 0 !important;
      margin-top: 20px !important;
      text-align: center !important;
  }

  /* Képek középre igazítása és méretezése */
  .online-arculat-post-image img,
  .online-arculat-right-img {
      max-width: 100% !important;
      height: auto !important;
      display: block !important;
      margin: 20px auto !important;
  }

  /* Konténer szélességének növelése */
  .online-arculat-container {
      width: 95% !important;
      padding: 20px !important;
  }

  /* Váltakozó kép nagyítása */
  .image-marquee, 
  .image-marquee .image-track img {
      height: 300px !important;
  }

  /* Ha van konkrét osztály a "váltakozó kép"-hez, pl. .carousel-img */
  .carousel-img {
      max-width: 100% !important;
      height: auto !important;
  }
}

.image-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: transparent;
  height: 300px; /* Alapértelmezett magasság */
  display: flex;
  align-items: center;
}

.image-marquee .image-track {
  display: flex;
  gap: 20px;
  animation: marquee-left 300s linear infinite;
}

.image-marquee.marquee-right .image-track {
  animation: marquee-right 300s linear infinite;
}

.image-marquee img.carousel-img {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 10px;
}

/* Animációk */
@keyframes marquee-left {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
  }
}

@keyframes marquee-right {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(100%);
  }
}

/* Reszponzív Méretezés */
@media screen and (max-width: 425px) {
  .image-marquee {
      height: 250px;
  }

  .image-marquee .image-track img.carousel-img {
      height: 100%;
      width: auto;
  }
}

@media (max-width: 768px) {
  .image-marquee .image-track {
    animation-duration: 10s; /* Még gyorsabb animáció kisebb képernyőkön */
  }
}

.form-check-input {
  accent-color: black;
}

/* 1. Spacing below .banner-overlay */
.banner-overlay {
  margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
  .banner-overlay {
      margin-bottom: 1.5rem; /* Igazítsd a kívánt távolságot */
  }

  /* 2. Hide specific image on mobile */
  .hogyan-dolgozunk-item-right img {
      display: none;
  }

  /* 3 & 7. Hide "Miért dolgozz velünk?" label on mobile */
  .graphic-designer-overlay,
  .graphic-designer-overlay.overlay-inner,
  .graphic-designer-overlay.position-absolute,
  .graphic-designer-overlay.bg-dark,
  .graphic-designer-overlay.py-2,
  .graphic-designer-overlay.px-4,
  .graphic-designer-overlay.d-inline-block,
  .graphic-designer-overlay.fade-in-trigger,
  .graphic-designer-overlay.animate-fade {
      display: none !important;
  }

  /* Alternatív megközelítés, ha szükséges */
  /* .graphic-designer-overlay.overlay-inner.position-absolute.bg-dark.py-2.px-4.d-inline-block.fade-in-trigger.animate-fade {
      display: none !important;
  } */

  /* 4. Adjust "grafikai tervezések" label position */
  .about-overlay {
      position: static !important;
      margin-top: 1.5rem;
      z-index: 1;
  }

  /* 5. Align contact icons to the left on mobile */
  .global-contact-details .contact-details {
      margin-left: 0 !important;
      text-align: left !important;
  }
}

@media screen and (max-width: 992px) {
  /* 6. Hide "Portfólió", "Rólam", and "Kapcsolat" when "Szolgáltatás" dropdown is open */
  .navbar-nav .dropdown.show ~ .nav-item.portfolio-title,
  .navbar-nav .dropdown.show ~ .nav-item.rolam-title,
  .navbar-nav .dropdown.show ~ .nav-item.contact-title {
      display: none;
  }
}

/* 1. Egyenletes hely a hamburger menüben lévő header elemei között */
@media screen and (max-width: 992px) {
  .offcanvas-body .navbar-nav {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important; /* Kitölti a rendelkezésre álló szélességet */
      justify-content: center !important;
  }

  .offcanvas-body .navbar-nav .nav-item {
      flex: 1 1 auto;
      text-align: center;
      margin: 0.5rem 0; /* Egyenletes függőleges margó */
  }

  /* 2. Hide "Kapcsolat", "Portfólió", and "Rólam" when "Szolgáltatás" dropdown is open */
  .navbar-nav .dropdown.show ~ .nav-item.portfolio-title,
  .navbar-nav .dropdown.show ~ .nav-item.rolam-title,
  .navbar-nav .dropdown.show ~ .nav-item.contact-title {
      display: none !important;
  }

  /* 3. Add padding between "Szolgáltatás" dropdown items, remove separators and background */
  .navbar-nav .dropdown-menu .dropdown-item {
      padding: 0.75rem 1.25rem; /* Állítsd be a kívánt paddingot */
      margin-bottom: 0.5rem; /* Kis térköz az elemek között */
  }

  .navbar-nav .dropdown-menu hr.dropdown-divider {
      display: none !important; /* Rejtsük el a csíkokat */
  }

  .navbar-nav .dropdown-menu {
      background-color: transparent !important; /* Távolítsuk el a háttérszínt */
      box-shadow: none !important; /* Távolítsuk el az árnyékot */
  }
}

/* 4. Hide "graphic-designer-overlay" in mobile */
@media screen and (max-width: 768px) {
  .graphic-designer-overlay {
      display: none !important;
  }
  .nyomdai-top-label { top: 90px !important; }
  .nyomdai-container{
    width: 100% !important;
    padding: 0 !important;
  }
  .nyomdai-right{
    margin-left: 0 !important;
  }
  .arlista-btn{
    margin-top: 0 !important;
  }
}


/* Mobil Nézet (max-width: 500px) */
@media screen and (max-width: 500px) {
  .nyomdai-page .nyomdai-left img{
    width: 95%;
    margin: auto;
  }
}
@media screen and (max-width: 425px) {
  /* 1. Középre igazítjuk a formot */
  .contact-form {
      margin: 0 auto !important; /* Középre igazítás */
      max-width: 100% !important; /* Teljes szélesség */
  }

  /* Középre igazítjuk a formot tartalmazó oszlopot */
  .contact-content .col-lg-6.d-flex.justify-content-center.mb-4.mb-lg-0.animate-fade.delay-2.mt-custom {
      margin-top: 0 !important; /* Eltávolítjuk a felső margót */
      margin-left: 0 !important; /* Eltávolítjuk a bal margót */
      padding: 0 !important; /* Eltávolítjuk a belső margót */
      width: 100% !important; /* Teljes szélesség */
      display: flex !important;
      justify-content: center !important;
  }

  /* Biztosítjuk, hogy a sor flex és oszlopirányú legyen */
  .contact-content .row {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
  }

  /* Eltávolítjuk a negatív margót és középre helyezzük a "Kövess minket" oszlopot */
  .contact-content .col-lg-3.d-flex.flex-column.align-items-center.justify-content-center.mt-custom {
      margin-top: 1rem !important; /* Kis felső margó */
      margin-left: 0 !important; /* Eltávolítjuk a bal margót */
      width: 100% !important; /* Teljes szélesség */
      display: flex !important;
      justify-content: center !important;
  }

  /* 2. Form Actions központozása és elrendezés módosítása */
  .form-actions {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
  }

  /* Checkbox és label/link elrendezése */
  .form-actions .form-check {
      display: flex !important;
      align-items: center !important;
      gap: 5px !important;
      margin-bottom: 1rem !important; /* Kis térköz az alsó elemtől */
  }

  /* Checkbox méretének csökkentése */
  .form-check-input {
      width: 1em !important;
      height: 1em !important;
      margin-top: 0 !important; /* Eltávolítjuk az inline margin-top-t */
  }

  /* Label és link stílusának módosítása */
  .form-check-label {
      font-size: 0.75rem !important; /* Kisebb betűméret */
      line-height: 1.2 !important;
      display: flex !important;
      flex-direction: column !important; /* Két sor egymás alatt */
      gap: 2px !important; /* Kis hézag a sorok között */
  }

  .form-check-label a {
      font-style: italic !important;
      color: #000 !important; /* Válaszd ki a kívánt színt */
      text-decoration: underline !important;
  }

  /* Küldés gomb középre helyezése */
  .form-actions .btn {
      width: 100% !important; /* Teljes szélesség */
      max-width: 200px !important; /* Maximális szélesség */
      margin-top: 1rem !important; /* Kisebb felső margó */
      margin-left: 0 !important; /* Eltávolítjuk a bal margót */
  }

  /* 3. Rejtsük el a "Kapcsolat", "Portfólió", és "Rólam" linkeket, amikor a "Szolgáltatás" dropdown nyitva van */
  .navbar-nav .dropdown.show ~ .nav-item.portfolio-title,
  .navbar-nav .dropdown.show ~ .nav-item.rolam-title,
  .navbar-nav .dropdown.show ~ .nav-item.contact-title {
      display: none !important;
  }

  /* 4. Padding és háttér eltávolítása a dropdown menüből */
  .navbar-nav .dropdown-menu .dropdown-item {
      padding: 0.75rem 1.25rem !important; /* Állítsd be a kívánt paddingot */
      margin-bottom: 0.5rem !important; /* Kis térköz az elemek között */
  }

  .navbar-nav .dropdown-menu hr.dropdown-divider {
      display: none !important; /* Rejtsük el a csíkokat */
  }

  .navbar-nav .dropdown-menu {
      background-color: transparent !important; /* Távolítsuk el a háttérszínt */
      box-shadow: none !important; /* Távolítsuk el az árnyékot */
  }
  .checkbox-text{
    font-size: 11px !important;
  }
}

/* Mobil M Nézet (max-width: 375px) */
/* A fenti szabályok már lefedik ezt a szélességet, de ha specifikusabb finomhangolásra van szükség, ide írhatod. */
@media screen and (max-width: 375px) {
  /* Ha specifikusabb szabályokra van szükség, itt adhatod hozzá őket */
}

/* ============================================= */
/* = Kiegészítő iPad (768px - 1024px) média      */
/*   szabályok a kért finomításokhoz =          */
/* ============================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* 1) Általános kártya méretezés, ne legyen levágva semelyik kártya */
  .card {
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 1rem auto !important;
  }
  .card img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 2) Szolgáltatások (services) pontoknál a kép mindig legalul
     Ha van dedikált .services szakasz és .img-design, 
     akkor a tartalmat megelőzően a szöveg, utána a kép. */
  .services .img-design-container {
    order: 1 !important; /* szöveges rész */
  }
  .services .img-design {
    order: 2 !important; /* kép */
  }

  /* 3) Arculattervezés oldalon:
        - Kártyák egymás mellett
        - Kép alatta */
  /* Feltételezve, hogy a .pricing-row fogja a kártyákat, 
     és az .img-design a kép. */
  .pricing-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }
  /* Ha azt akarjuk, hogy a .img-design (nagy kép) lejjebb kerüljön: */
  .img-design {
    order: 2 !important;
    margin-top: 2rem !important;
    text-align: center !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }

  /* 4) Weboldal design: mindhárom kártya egymás mellett,
        a kép (pl. #web-image) alatta, balra igazítva */
  /* Ahol a webes kártyák .pricing-row-ban vannak: */
  .pricing-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  #web-image {
    margin-top: 2rem !important;
    margin-left: 0 !important; /* bal oldali igazítás */
    margin-right: auto !important;
    max-width: 80% !important;
  }

  /* 5) Nyomdai anyag:
        - Árlista nagyobb
        - Kapcsolati rész mellette marad
        - Küldés gomb kisebb legyen */
  .nyomdai-page .nyomdai-left h1 {
    font-size: 2rem !important; /* árlista címe nagyobb */
  }
  .nyomdai-page .nyomdai-left img {
    width: 80% !important; /* árlista kép nagyobb */
    height: auto !important;
  }
  .nyomdai-page .nyomdai-right h2 {
    font-size: 1.1rem !important; /* kicsit nagyobb szöveg */
  }
  .nyomdai-page .nyomdai-form form {
    font-size: 0.95rem !important;
  }
  /* Küldés gomb kisebb */
  .nyomdai-page .arlista-btn .btn {
    font-size: 0.8rem !important;
    padding: 0.4rem 1rem !important;
  }

  /* 6) Social media kezelés:
        - Váltakozó képek (image-marquee) nagyobbak
        - Töltse ki jobban a képernyőt
        - Hogy ne csak felső felében legyen tartalom */
  .online-arculat-page .online-arculat-container {
    min-height: 90vh !important; /* nagyobb függőleges tér */
    padding: 2rem !important;
  }
  .online-arculat-page .online-arculat-post-image img,
  .online-arculat-page .online-arculat-right img {
    max-width: 90% !important;
    margin: 2rem auto !important;
  }
  /* A váltakozó képek (marquee) legyenek magasabbak iPad-en */

  /* Social media kezelés: price card mobil tipográfia */
  .online-arculat-page .web-pricing-card h3 {
    font-size: 12px !important; /* cím */
  }
  .online-arculat-page .web-pricing-card .price-value {
    font-size: 12px !important; /* összeg */
  }
  .online-arculat-page .web-pricing-card ul,
  .online-arculat-page .web-pricing-card ul li,
  .online-arculat-page .web-pricing-card p,
  .online-arculat-page .web-pricing-card a {
    font-size: 10px !important; /* minden más 10px */
    line-height: 1.2 !important;
  }
  .image-marquee {
    height: 400px !important; /* pl. nagyobb magasság */
  }
  .image-marquee img.carousel-img {
    height: 100% !important;
    width: auto !important;
  }

  /* Social media kezelés: 10px listaszöveg mobilon (felülírja a style.css 12px alapot) */
  body.online-arculat-page .web-pricing-card h3 { font-size: 12px !important; }
  body.online-arculat-page .web-pricing-card .price-value { font-size: 12px !important; }
  body.online-arculat-page .web-pricing-card ul,
  body.online-arculat-page .web-pricing-card ul li,
  body.online-arculat-page .web-pricing-card p,
  body.online-arculat-page .web-pricing-card a {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* 7) Névjegykártya oldalon: 
        - Minden kép lehet nagyobb
        - Kártyák menjenek egymás alá */
  .logo-design-pricing-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .logo-design-pricing-row .card {
    margin-bottom: 2rem !important;
    width: 70% !important; /* lehet 80% vagy 90% is ízlés szerint */
  }
  .logo-design-pricing-row .card img {
    width: 100% !important;
    height: auto !important;
  }
}

/* Elérhetőségek középre igazítása */
.contact-content .col-lg-3 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Középre igazítás horizontálisan */
  justify-content: center !important; /* Középre igazítás vertikálisan */
  text-align: center !important; /* Szöveg középre igazítása */
}

.contact-info-detiasl a, 
.work-hours-details p {
  text-align: center !important; /* Linkek és szöveg középre igazítása */
}

/* Telefon (max 576px szélesség) */
@media screen and (max-width: 576px) {
  .modal-dialog {
    max-width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }

  .modal-header {
    padding: 1rem !important;
  }

  .modal-body {
    padding: 1rem !important;
    overflow-y: auto !important;
  }

  .modal-footer {
    padding: 1rem !important;
  }

  .modal-body img,
  .modal-footer img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* Tablet - iPad (577px - 1024px szélesség) */
@media screen and (min-width: 577px) and (max-width: 1024px) {
  .modal-dialog {
    max-width: 90% !important;
    margin: 2rem auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    width: 100% !important;
    max-height: 90% !important;
    border-radius: 10px !important;
  }

  .modal-header {
    padding: 1.5rem !important;
  }

  .modal-body {
    padding: 1.5rem !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important; /* Hogy ne lógjon túl */
  }

  .modal-footer {
    padding: 1.5rem !important;
  }

  .modal-body img,
  .modal-footer img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* Nagyobb kijelzők (1025px - 1366px szélesség) */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .modal-dialog {
    max-width: 80% !important;
    margin: 3rem auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    width: 100% !important;
    max-height: 80% !important;
    border-radius: 15px !important;
  }

  .modal-header {
    padding: 2rem !important;
  }

  .modal-body {
    padding: 2rem !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 300px) !important;
  }

  .modal-footer {
    padding: 2rem !important;
  }

  .modal-body img,
  .modal-footer img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* Nagyobb kijelzők (1367px-től) */
@media screen and (min-width: 1367px) {
  .modal-dialog {
    max-width: 70% !important;
    margin: 4rem auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    width: 100% !important;
    max-height: 70% !important;
    border-radius: 20px !important;
  }

  .modal-header {
    padding: 2rem !important;
  }

  .modal-body {
    padding: 2rem !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 400px) !important;
  }

  .modal-footer {
    padding: 2rem !important;
  }

  .modal-body img,
  .modal-footer img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* Specifikus iPad méretekre (820px és 1024px szélesség) */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  
  /* Arculattervezés oldal modaljainak optimalizálása */
  [data-barba-namespace="arculattervezes"] .modal-dialog {
    max-width: 90% !important;
    margin: 2rem auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-barba-namespace="arculattervezes"] .modal-content {
    width: 100% !important;
    max-height: 90% !important;
    border-radius: 10px !important;
  }

  [data-barba-namespace="arculattervezes"] .modal-header,
  [data-barba-namespace="arculattervezes"] .modal-body,
  [data-barba-namespace="arculattervezes"] .modal-footer {
    padding: 1.5rem !important;
  }

  /* Képek a modalban */
  [data-barba-namespace="arculattervezes"] .modal-body img,
  [data-barba-namespace="arculattervezes"] .modal-footer img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  /* Váltakozó kép alulra helyezése */
  [data-barba-namespace="arculattervezes"] .img-design.shape-design-bg {
    position: relative !important;
    width: 100% !important;
    margin-top: 2rem !important;
    text-align: center !important;
    order: 2 !important;
  }

  /* Kártyák egymás mellett */
  [data-barba-namespace="arculattervezes"] .pricing-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1rem !important; /* Térköz a kártyák között */
  }

  /* Kártyák méretének finomítása */
  [data-barba-namespace="arculattervezes"] .pricing-row .card {
    flex: 1 1 18rem !important; /* Alap szélesség */
    margin-top: 0 !important; /* Eltávolítja a negatív margót */
  }

  /* Kép méretezése */
  [data-barba-namespace="arculattervezes"] .img-design.shape-design-bg img#design-image {
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

}

/* Specifikus iPad méretekre (820px és 1024px szélesség) */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  
  /* Nyomdai oldal: Bal oldali kép nagyítása */
  .nyomdai-page .nyomdai-left img {
    width: 100% !important; /* Teljes szélesség */
    height: auto !important;
    max-width: 500px !important; /* Maximális szélesség */
    margin: 0 auto !important; /* Középre igazítás */
  }

  /* Nyomdai oldal: Küldés gomb kisebbre állítása */
  .nyomdai-page .arlista-btn .btn {
    font-size: 0.9rem !important; /* Kisebb betűméret */
    padding: 0.5rem 1rem !important; /* Csökkentett padding */
  }

  /* Nyomdai oldal: Forma szélességének növelése */
  .nyomdai-page .nyomdai-form form {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Nyomdai oldal: Form elemek igazítása */
  .nyomdai-page .nyomdai-form .form-check-label {
    font-size: 0.85rem !important; /* Kisebb betűméret */
  }

  /* Nyomdai oldal: Kártyák és tartalom közti térköz */
  .nyomdai-page .nyomdai-content-area {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 2rem !important; /* Térköz a bal és jobb oldali elemek között */
  }

}

/* Weboldal Design Oldal: Kártyák és váltakozó kép elrendezése */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  
  /* Kártyák egymás mellett */
  .web-design-container .pricing-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1rem !important; /* Térköz a kártyák között */
  }

  /* Kártyák finomhangolása */
  .web-design-container .pricing-row .card {
    flex: 1 1 18rem !important; /* Alap szélesség */
    margin-top: 0 !important; /* Eltávolítja a negatív margót */
  }

  /* Váltakozó kép alulra helyezése */
  .web-design-container .web-design.shape-design-bg {
    position: relative !important;
    width: 100% !important;
    margin-top: 2rem !important;
    text-align: center !important;
    order: 2 !important;
  }

  /* Kép méretezése */
  .web-design-container .web-design.shape-design-bg img#web-image {
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

}

/* Nyomdai oldal: Bal oldali kép nagyítása és küldés gomb kisebbre */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  
  /* Bal oldali kép nagyítása */
  .nyomdai-page .nyomdai-left img {
    width: 100% !important; /* Teljes szélesség */
    height: auto !important;
    max-width: 500px !important; /* Maximális szélesség */
    margin: 0 auto !important; /* Középre igazítás */
  }

  /* Küldés gomb kisebbre */
  .nyomdai-page .arlista-btn .btn {
    font-size: 0.9rem !important; /* Kisebb betűméret */
    padding: 0.5rem 1rem !important; /* Csökkentett padding */
  }

  /* Forma szélességének növelése */
  .nyomdai-page .nyomdai-form form {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Form elemek igazítása */
  .nyomdai-page .nyomdai-form .form-check-label {
    font-size: 0.85rem !important; /* Kisebb betűméret */
  }

  /* Tartalom területe oszlopos elrendezés */
  .nyomdai-page .nyomdai-content-area {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 2rem !important; /* Térköz a bal és jobb oldali elemek között */
  }

}

/* Nyomdai Oldal: Bal Oldali Kép Még Nagyobbá Tétele iPad Pro Méretre */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  
  .nyomdai-page .nyomdai-left img {
    width: 90% !important; /* További növelés */
    max-width: 600px !important; /* További növelés */
  }

  /* Küldés Gomb További Csökkentése */
  .nyomdai-page .arlista-btn .btn {
    font-size: 0.8rem !important; /* Még kisebb betűméret */
    padding: 0.4rem 0.8rem !important; /* Még kisebb padding */
    max-width: 180px !important; /* Csökkentett maximális szélesség */
  }
}

/* Nyomdai Oldal: Bal Oldali Kép iPad (820px) Méretre */
@media screen and (min-width: 768px) and (max-width: 820px) {
  
  .nyomdai-page .nyomdai-left img {
    width: 85% !important; /* Finomhangolás */
    max-width: 550px !important; /* Finomhangolás */
  }

  /* Küldés Gomb Finomhangolása */
  .nyomdai-page .arlista-btn .btn {
    font-size: 0.85rem !important; /* Kisebb betűméret */
    padding: 0.45rem 0.9rem !important; /* Finomított padding */
    max-width: 190px !important; /* Finomított maximális szélesség */
  }
}


/* Névjegykártya Tervezés Oldal: iPad Pro (1024x1366) és iPad (820x1180) Méretek */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  
  /* Tartalom területe flex elrendezés */
  .nevjegykartya-tervezes-page .img-design-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 1rem !important;
  }

  /* Kártyák flex elrendezése */
  .nevjegykartya-tervezes-page .logo-design-pricing-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1rem !important; /* Térköz a kártyák között */
    margin-top: 2rem !important; /* Térköz a kártyák és a szöveg között */
  }

  /* Kártyák finomhangolása */
  .nevjegykartya-tervezes-page .logo-design-pricing-row .card {
    flex: 1 1 18rem !important; /* Alap szélesség */
    margin-top: 0 !important; /* Eltávolítja a negatív margót */
    margin-left: 0 !important; /* Eltávolítja a bal margót */
  }

  /* Kép finomhangolása */
  .nevjegykartya-tervezes-page .logo-design-pricing-row img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Névjegykártya Tervezés Oldal: Reszponzív Stílusok */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  
  /* 1. Tartalom területe flex elrendezés */
  .nevjegykartya-tervezes-page .img-design-container .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important; /* Térköz a két oszlop között */
    padding: 1rem 0 !important; /* Extra padding */
  }

  /* 2. Bal oldali oszlop (Szöveg) */
  .nevjegykartya-tervezes-page .img-design-container .row .col-lg-6.col-md-10 {
    flex: 1 1 50% !important; /* Fél szélesség */
    max-width: 50% !important;
    padding: 1rem 0 !important;
  }

  /* 3. Jobb oldali oszlop (Kártyák) */
  .nevjegykartya-tervezes-page .img-design-container .row .col-lg-6 {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    padding: 1rem !important;
    margin-top: 0 !important; /* Eltávolítja a negatív margót */
    margin-left: 0 !important; /* Eltávolítja a bal margót */
  }

  /* 4. Kártyák elrendezése flexbox-szal */
  .nevjegykartya-tervezes-page .logo-design-pricing-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1rem !important; /* Térköz a kártyák között */
    margin-top: 2rem !important; /* Felső margó */
    margin-left: 0 !important; /* Eltávolítja a bal margót */
  }

  /* 5. Kártyák finomhangolása */
  .nevjegykartya-tervezes-page .logo-design-pricing-row .card {
    flex: 1 1 18rem !important; /* Alap szélesség */
    max-width: 18rem !important;
    margin-top: 0 !important; /* Eltávolítja a negatív margót */
    margin-left: 0 !important; /* Eltávolítja a bal margót */
  }

  /* 8. Noah kép finomhangolása */
  .nevjegykartya-tervezes-page .pricing-bottom-img-section .pricing-bottom-img {
    width: 100% !important;
    margin-top: 2rem !important;
    text-align: center !important;
  }

  .nevjegykartya-tervezes-page .pricing-bottom-img-section .pricing-bottom-img img#noah-image {
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

}

/* Nagyobb képernyők (min-width: 1367px) */
@media screen and (min-width: 1367px) {
  
  /* Tartalom területe flex elrendezés */
  .nevjegykartya-tervezes-page .img-design-container .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3rem !important; /* Nagyobb térköz */
    padding: 2rem 0 !important; /* Extra padding */
  }

  /* Bal oldali oszlop (Szöveg) */
  .nevjegykartya-tervezes-page .img-design-container .row .col-lg-6.col-md-10 {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
  }

  /* Jobb oldali oszlop (Kártyák) */
  .nevjegykartya-tervezes-page .img-design-container .row .col-lg-6 {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* Kártyák elrendezése flexbox-szal */
  .nevjegykartya-tervezes-page .logo-design-pricing-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 2rem !important; /* Nagyobb térköz a kártyák között */
    margin-top: 2rem !important; /* Felső margó */
    margin-left: 0 !important; /* Eltávolítja a bal margót */
  }

  /* Kártyák finomhangolása */
  .nevjegykartya-tervezes-page .logo-design-pricing-row .card {
    flex: 1 1 18rem !important;
    max-width: 18rem !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* Noah kép finomhangolása */
  .nevjegykartya-tervezes-page .pricing-bottom-img-section .pricing-bottom-img {
    width: 100% !important;
    margin-top: 2rem !important;
    text-align: center !important;
  }

  .nevjegykartya-tervezes-page .pricing-bottom-img-section .pricing-bottom-img img#noah-image {
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

}

/* Kisebb képernyők (max-width: 767px) */
@media screen and (max-width: 767px) {

  /* Flexbox elrendezés a tartalom területén */
  .nevjegykartya-tervezes-page .img-design-container .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important; /* Térköz a két oszlop között */
    padding: 1rem !important; /* Extra padding */
  }

  /* Bal oldali oszlop (Szöveg) */
  .nevjegykartya-tervezes-page .img-design-container .row .col-lg-6.col-md-10 {
    flex: 1 1 100% !important; /* Teljes szélesség */
    max-width: 100% !important;
    padding: 1rem !important;
  }

  /* Jobb oldali oszlop (Kártyák) */
  .nevjegykartya-tervezes-page .img-design-container .row .col-lg-6 {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* Kártyák elrendezése flexbox-szal */
  .nevjegykartya-tervezes-page .logo-design-pricing-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important; /* Térköz a kártyák között */
    margin-top: 2rem !important; /* Felső margó */
    margin-left: 0 !important; /* Eltávolítja a bal margót */
  }

  /* Kártyák finomhangolása */
  .nevjegykartya-tervezes-page .logo-design-pricing-row .card {
    flex: 1 1 100% !important; /* Teljes szélesség */
    max-width: 100% !important;
    margin-top: 0 !important; /* Eltávolítja a negatív margót */
    margin-left: 0 !important; /* Eltávolítja a bal margót */
  }

  /* Noah kép finomhangolása */
  .nevjegykartya-tervezes-page .pricing-bottom-img-section .pricing-bottom-img {
    width: 100% !important;
    margin-top: 2rem !important;
    text-align: center !important;
  }

  .nevjegykartya-tervezes-page .pricing-bottom-img-section .pricing-bottom-img img#noah-image {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

}

/* Extra Finomhangolások Nagyobb Kijelzőkhöz (1210x1644) */
@media screen and (min-width: 1200px) and (max-width: 1644px) {

  /* Bal oldali kép még nagyobb */
  .nevjegykartya-tervezes-page .shape-design-bg img {
    max-width: 600px !important;
  }

  /* Noah kép méretezése */
  .nevjegykartya-tervezes-page .pricing-bottom-img-section .pricing-bottom-img img#noah-image {
    max-width: 70% !important;
  }

}


/* Reszponzív Stílusok Arculattervezés Oldalhoz */
[data-barba-namespace="arculattervezes"] .pricing-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
}

/* Kártyák alapértelmezett stílusai */
[data-barba-namespace="arculattervezes"] .pricing-row .card {
  width: 18rem !important;
  max-width: 18rem !important;
  z-index: 2; /* Kártyák a képek felett */
  margin-top: 0 !important; /* Felülírja az inline negatív margót */
  margin-left: 0 !important;
}

/* Váltakozó kép alapértelmezett stílusai */
[data-barba-namespace="arculattervezes"] .shape-design-bg {
  position: absolute;
  width: auto;
  margin-top: -13rem; /* Eredeti margin */
  text-align: center;
  z-index: 1; /* Kép a kártyák mögött */
}

[data-barba-namespace="arculattervezes"] .shape-design-bg img {
  max-width: 80%;
  height: auto;
  margin: 0 auto;
}

/* Noah kép alapértelmezett stílusai */
[data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img {
  position: absolute;
  margin-top: -13rem;
  width: auto;
  text-align: center;
  z-index: 1; /* Kép a kártyák mögött */
}

[data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img img#noah-image {
  max-width: 80%;
  height: auto;
  margin: 0 auto;
}

/* Reszponzív stílusok kisebb képernyőkhöz (max-width: 767px) */
@media screen and (max-width: 767px) {

  /* Flexbox elrendezés a tartalom területén */
  [data-barba-namespace="arculattervezes"] .img-design-container .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important; /* Térköz a két oszlop között */
    padding: 1rem !important; /* Extra padding */
  }

  /* Kártyák teljes szélességűre állítása */
  [data-barba-namespace="arculattervezes"] .pricing-row .card {
    width: 100% !important;
    max-width: 300px !important;
    margin-top: 0 !important; /* Eltávolítja a negatív margót */
    margin-left: 0 !important;
  }

  /* Váltakozó kép alulra helyezése */
  [data-barba-namespace="arculattervezes"] .shape-design-bg {
    position: relative !important; /* Relatív pozíció */
    width: 100% !important;
    margin-top: 2rem !important; /* Térköz a kártyáktól */
    text-align: center !important;
    order: 2 !important; /* Flexbox sorrend */
    z-index: 1 !important; /* Kép a kártyák mögött */
  }

  /* Váltakozó kép méretezése */
  [data-barba-namespace="arculattervezes"] .shape-design-bg img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Noah kép alulra helyezése */
  [data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img {
    position: relative !important;
    width: 100% !important;
    margin-top: 2rem !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  [data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img img#noah-image {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Gombok középre igazítása és méretének állítása */
  [data-barba-namespace="arculattervezes"] .contact-btn .btn {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    font-size: 1rem !important; /* Betűméret */
    padding: 0.5rem 1rem !important; /* Padding */
  }

  /* Pricing-right szekció margóinak finomhangolása */
  [data-barba-namespace="arculattervezes"] .pricing-right {
    margin-top: 2rem !important; /* Felső margó */
  }

  /* Fix for the overflow and prevent blocking */
  [data-barba-namespace="arculattervezes"] .shape-design-bg,
  [data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img {
    pointer-events: none; /* Ensure images don't block interactions */
  }

}

/* Reszponzív stílusok közepes és nagyobb képernyőkhöz (768px - 1366px) */
@media screen and (min-width: 768px) and (max-width: 1366px) {

  /* Flexbox elrendezés a tartalom területén */
  [data-barba-namespace="arculattervezes"] .img-design-container .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1rem !important; /* Térköz a két oszlop között */
    padding: 1rem !important; /* Extra padding */
  }

  /* Kártyák szélességének állítása */
  [data-barba-namespace="arculattervezes"] .pricing-row .card {
    width: 18rem !important;
    max-width: 18rem !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* Váltakozó kép alulra helyezése */
  [data-barba-namespace="arculattervezes"] .shape-design-bg {
    position: relative !important; /* Relatív pozíció */
    width: 100% !important;
    margin-top: 2rem !important; /* Térköz a kártyáktól */
    text-align: center !important;
    order: 2 !important; /* Flexbox sorrend */
    z-index: 1 !important; /* Kép a kártyák mögött */
  }

  /* Váltakozó kép méretezése */
  [data-barba-namespace="arculattervezes"] .shape-design-bg img {
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Noah kép alulra helyezése */
  [data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img {
    position: relative !important;
    width: 100% !important;
    margin-top: 2rem !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  [data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img img#noah-image {
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Gombok középre igazítása és méretének állítása */
  [data-barba-namespace="arculattervezes"] .contact-btn .btn {
    width: auto !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    font-size: 1rem !important; /* Betűméret */
    padding: 0.5rem 1rem !important; /* Padding */
  }

  /* Pricing-right szekció margóinak finomhangolása */
  [data-barba-namespace="arculattervezes"] .pricing-right {
    margin-top: -5rem !important; /* Felső margó */
  }
}

/* Reszponzív stílusok nagyobb kijelzőkhöz (min-width: 1367px) */
@media screen and (min-width: 1367px) {

  /* Flexbox elrendezés a tartalom területén */
  [data-barba-namespace="arculattervezes"] .img-design-container .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 2rem !important; /* Nagyobb térköz */
    padding: 2rem !important; /* Extra padding */
  }

  /* Kártyák szélességének állítása */
  [data-barba-namespace="arculattervezes"] .pricing-row .card {
    width: 18rem !important;
    max-width: 18rem !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* Váltakozó kép pozícionálása */
  [data-barba-namespace="arculattervezes"] .shape-design-bg {
    position: absolute !important; /* Abszolút pozíció */
    width: auto !important;
    margin-top: -13rem !important; /* Eredeti margin */
    text-align: center !important;
    z-index: 1 !important; /* Kép a kártyák mögött */
  }

  /* Váltakozó kép méretezése */
  [data-barba-namespace="arculattervezes"] .shape-design-bg img {
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Noah kép pozícionálása */
  [data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img {
    position: absolute !important;
    width: auto !important;
    margin-top: -13rem !important;
    text-align: center !important;
    z-index: 1 !important; /* Kép a kártyák mögött */
  }

  [data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img img#noah-image {
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Gombok középre igazítása és méretének állítása */
  [data-barba-namespace="arculattervezes"] .contact-btn .btn {
    width: auto !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    font-size: 1rem !important; /* Betűméret */
    padding: 0.5rem 1rem !important; /* Padding */
  }

  /* Pricing-right szekció margóinak finomhangolása */
  [data-barba-namespace="arculattervezes"] .pricing-right {
    margin-top: -5rem !important; /* Felső margó */
  }
}

/* Extra Finomhangolások Nagyobb Kijelzőkhöz (1200px - 1644px) */
@media screen and (min-width: 1200px) and (max-width: 1644px) {
  
  /* Váltakozó kép méretezése */
  [data-barba-namespace="arculattervezes"] .shape-design-bg img#design-image {
    max-width: 600px !important;
  }
  
  /* Noah kép méretezése */
  [data-barba-namespace="arculattervezes"] .pricing-bottom-img-section .pricing-bottom-img img#noah-image {
    max-width: 70% !important;
  }
}

/* Alapértelmezés szerint elrejtjük a mobile-only szakaszt */
.mobile-only {
  display: none !important;
}

/* 800px és alatta megjelenítjük a mobile-only szakaszt */
@media screen and (max-width: 800px) {
  .mobile-only {
    display: block !important; /* Ha flex elrendezésre van szükség, használhatod a flex-et */
    /* Például, ha a belső div flexbox, akkor lehet:
    display: flex !important;
    flex-direction: column;
    */
  }
}

/* ... Az eredeti responsive.css tartalma ... */

/* === Telefonszempontú módosítások (max-width: 425px) === */
@media screen and (max-width: 425px) {
  /* 1. Banner szöveg – legyen elegendő alsó margó, hogy a szöveg ne lógjon rá a képre */
  .banner-overlay {
    margin-bottom: 3rem !important;
    position: relative !important;
  }
  
  /* 2. „Grafikai tervezések” címke fölötti üres hely csökkentése */
  .about-overlay {
    margin-top: -5rem !important;
  }
  
  /* 3. Küldés gomb – pozíciójának és méretének módosítása */
  .form-actions .btn {
    margin-top: 1rem !important;
    width: 6rem !important;
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  
  /* 4. Footer szöveg balra igazítása, kevesebb belső margóval */
  footer .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  footer p, footer .footer-left {
    text-align: left !important;
    margin-left: 0 !important;
  }
  .col-lg-6.slide-in-left-trigger.animate-slide-in-left {
    display: none !important;
  }
}

/* --- Mobil menü módosítások --- */

/* Biztosítjuk, hogy az offcanvas (mobil menü) relatív pozíciójú legyen,
   így az abszolút pozícionált háromszögek helyesen jelennek meg */
   @media (max-width: 992px) {

    /* A menüpontokat vertikálisan középre helyezzük */
    .offcanvas.offcanvas-end .offcanvas-body {
      margin-top: 7rem;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      font-size: 24px;
    }
    /* Eltávolítjuk a fölösleges margót a navbar-nav-ról, ha szükséges */
    .offcanvas.offcanvas-end .navbar-nav {
      margin-top: 0 !important;
    }
  }
  
  /* Háromszög stílusok a mobil menühöz */
  .triangle {
    position: absolute;
    width: 65%;
    height: 0;
  }
  
  .triangle-top-left {
    top: 0;
    left: 0;
    /* A jobb oldali átlós háromszög:
       100px széles, melynek jobb oldala átlátszó, alja fekete */
       border-left: 200px solid transparent;
       border-top: 200px solid black;
       transform: scaleX(-1);
      
  }
  
  .triangle-bottom-right {
    bottom: 0;
    right: 0;
    /* A bal oldali átlós háromszög:
       100px széles, melynek bal oldala átlátszó, teteje fekete */
    border-right: 200px solid transparent;
    border-bottom: 200px solid black;
    transform: scaleX(-1);

  }
  
  
  /* --- További mobil stílusok (a meglévő szabályok között) --- */
  
  /* ... Ide jöhetnek az eredeti responsive.css egyéb szabályai ... */
  
  @media screen and (max-width: 767px) {
    /* Logo Design Section: Adjust the row and column layout for mobile */
    .logo-design-pricing-row {
      /* flex-direction: column !important; Stack items vertically */
      align-items: center !important; /* Center items horizontally */
      gap: 1rem !important; /* Add some spacing between the cards */
      margin-left: 0 !important; /* Remove the left margin */
    }
  
    /* Adjust the card width to fit the screen */
    .logo-design-pricing-row .card {
      width: 100% !important; /* Make cards full width */
      max-width: 300px !important; /* Limit maximum width for better readability */
      margin: 0 auto !important; /* Center the cards */
    }
  
    /* Ensure the images inside the cards are responsive */
    .logo-design-pricing-row .card img {
      width: 100% !important; /* Make images fill the card */
      height: auto !important; /* Maintain aspect ratio */
      border-radius: 15px !important; /* Keep rounded corners */
    }
  
    /* Adjust the margin and padding for the section */
    .img-design-container {
      padding-top: 80px !important; /* Reduce top padding for better spacing */
      padding-bottom: 20px !important; /* Add some bottom padding */
    }
  
    /* Center the section title and text */
    .img-design-title {
      /* text-align: center !important; */
      padding: 0 1rem !important; /* Add some horizontal padding */
    }
  
    /* Adjust the shape image (if needed) */
    .logo-design.shape-design-bg {
      display: none !important; /* Hide the shape image on mobile if it's not needed */
    }

    body.logo-page {
      text-align: left !important;
    }

    body.logo-page .img-design-container {
      padding-top: 2rem !important; /* Add some top padding */
      padding-bottom: 2rem !important; /* Add some bottom padding */
    }

    body.logo-page .overlay-inner {
      left: 22px;
    }
  }


  @media screen and (max-width: 425px) {
    /* Lower the top label so it isn’t cut off */
    .online-arculat-top-label {
      margin-top: 2rem !important;
      /* You can also adjust padding or font-size here if needed */
    }
    
    /* Make the changing picture a bit bigger */
    #arculat-image {
      max-width: 100% !important; /* Increase size from 90% to full width */
      width: auto !important;
      height: auto !important;
    }
  }
  

  @media screen and (min-width: 992px) {
    #arculat-image {
      max-width: 100% !important;
      width: auto !important;
      height: auto !important;
    }
  }
  
  @media screen and (max-width: 576px) {
    /* Hide the duplicate mobile-only section to avoid showing only images */
    .mobile-only {
      display: none !important;
    }
  
    /* --- Services (Image Design) Section Adjustments --- */
    /* Remove absolute positioning so that the text and image flow naturally */
    .img-design-container {
      position: relative !important;
      padding-top: 2rem !important;
    }
    .shape-design-bg {
      position: relative !important;
      margin-top: 1rem !important;
      text-align: center !important;
    }
    
    /* If the overlay button interferes, reposition it (optional) */
    .logo-design-overlay {
      position: relative !important;
      margin-bottom: 1rem;
    }
  
    /* --- Pricing Section Adjustments --- */
    /* Stack the pricing images and text vertically */
    .pricing .row {
      flex-direction: column !important;
    }
    /* Ensure both columns take full width */
    .pricing .col-lg-7,
    .pricing .col-lg-5 {
      width: 100% !important;
      max-width: 100% !important;
    }
    /* Add spacing between image group and text */
    .pricing .pricing-right {
      margin-top: 2rem !important;
    }
  
    /* Optional: Adjust font sizes for readability on small screens */
    .img-design-title h1 {
      font-size: 1.75rem !important;
    }
    .pricing h2 {
      font-size: 1.5rem !important;
    }
    .pricing p {
      font-size: 1rem !important;
    }
  }
  

/* --- Telephone (Mobile) View Adjustments (max-width: 576px) --- */
@media screen and (max-width: 576px) {
  /* Allow vertical scrolling by removing any fixed height/overflow on main wrappers */
  html, body, #barba-wrapper, .barba-container {
    overflow-y: auto !important;
    height: auto !important;
  }
  
  /* (Keep any other mobile-specific layout adjustments here) */
  /* Example: Ensure content flows naturally */
  .img-design-container,
  .shape-design-bg {
    position: relative !important;
  }
}

/* --- Desktop Adjustments for Pricing Images (min-width: 992px) --- */
@media screen and (min-width: 992px) {
  /* Target the pricing images in the left column of the pricing section */
  .pricing .col-md-7 .row > div:nth-child(2) {
    margin-top: -8rem !important;
  }
  .pricing .col-md-7 .row > div:nth-child(3) {
    margin-top: -10rem !important;
  }
}

@media screen and (min-width: 577px) and (max-width: 992px) {
  /* Allow vertical scrolling on tablet view */
  html, body, #barba-wrapper, .barba-container {
    overflow-y: auto !important;
    height: auto !important;
  }
  
  /* Services (Image Design) Section Adjustments */
  .img-design-container {
    position: relative !important;
    padding-top: 2rem !important; /* Add spacing to prevent text/image cutoff */
  }
  .shape-design-bg {
    position: relative !important;
    margin-top: 1rem !important;
    text-align: center !important;
  }
  
  /* Pricing Section Adjustments */
  /* Stack pricing section content vertically so that images and text don't overlap */
  .pricing .row {
    flex-direction: column !important;
  }
  /* Add spacing between the pricing images and the pricing text */
  .pricing .pricing-right {
    margin-top: 2rem !important;
  }
}

@media screen and (min-width: 577px) and (max-width: 992px) {
  /* Hide the duplicate mobile-only section on tablet view */
  .mobile-only {
    display: none !important;
  }

  /* Additional adjustments for tablet view (if needed) */
  html, body, #barba-wrapper, .barba-container {
    overflow-y: auto !important;
    height: auto !important;
  }
  
  /* Ensure the image design section displays properly */
  .img-design-container {
    position: relative !important;
    padding-top: 2rem !important;
  }
  .shape-design-bg {
    position: relative !important;
    margin-top: 1rem !important;
    text-align: center !important;
  }
  
  /* Adjust the pricing section to stack vertically */
  .pricing .row {
    flex-direction: column !important;
  }
  .pricing .pricing-right {
    margin-top: 2rem !important;
  }
}

.custom-portfolio-img {
  /* Let the image size itself. No forced width or height: */
  max-width: 100%;
  height: auto;

  /* If you still want a box but show entire image: */
  /* object-fit: contain; */

  border-radius: 15px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 2. Modal belső görgetésének letiltása */
.modal-body {
  overflow-y: hidden !important;
}

.modal .modal-body {
  overflow-y: hidden !important;
}

.modal-body img {
  overflow: visible !important;
}

/* Allow scrolling in modal body instead of hiding overflow */
.modal-body,
.modal .modal-body {
  overflow-y: auto !important;
}

/* You can remove the following if not needed */
/* .modal-body img {
  overflow: visible !important;
} */

@media (max-width: 576px) {
  .modal-title.my-5 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .hogyan-dolgozunk-item-right img,
  .graphic-designer .img-shaps img {
    display: none !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .image-marquee .image-track {
    animation-duration: 10s !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Make the offcanvas menu full-width and maintain mobile layout */
  .offcanvas.offcanvas-end {
    width: 100% !important;
    max-width: 100% !important;
  }
  .offcanvas-body .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-top: 3rem;

  }
  /* Increase menu item size and style them as rectangles */
  .offcanvas-body .navbar-nav .nav-item a {
    font-size: 1.7rem !important;       /* Bigger text */
    padding: 1rem 2rem !important;         /* More padding for larger clickable areas */
    display: block;
    margin: 0.5rem 0;                     /* Spacing between items */
    border-radius: 0 !important;          /* Remove rounded corners */
  }
  /* Style dropdown menus similarly */
  .offcanvas-body .navbar-nav .dropdown-menu {
    width: 100% !important;
    border-radius: 0 !important;
    text-align: center;
  }
  .offcanvas-body .navbar-nav .dropdown-menu li a {
    font-size: 1.5rem !important;
    padding: 1rem 1.8rem !important;
    display: block;
    margin: 0.5rem 0;
    border-radius: 0 !important;
  }
  .triangle {
    position: absolute;
    width: 30%;
    height: 0;
  }
  
}


footer .container-fluid {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.5rem !important; /* or whatever you need */
  text-align: left !important;
}
/* Tablet View (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* === General Adjustments for All Pages === */
  /* Adjust the overlay button */
  .service-overlay.overlay-inner,
  .logo-design-overlay.overlay-inner {
    top: 4rem !important; /* Push the overlay button even lower */
    left: 10% !important;
    transform: translateX(-50%) !important; /* Center the overlay button */
    padding: 1.5rem 2.5rem !important; /* Increase padding for better visibility */
    font-size: 1rem !important; /* Slightly larger font for the overlay */
  }

  /* Adjust the section title */
  .section-title.img-design-title {
    margin-top: 5rem !important; /* Push the section title even lower */
    padding: 0 20px !important; /* Add horizontal padding */
  }

  /* Adjust the paragraph text */
  .section-title.img-design-title p {
    margin-top: 2rem !important; /* Add space between title and paragraph */
    line-height: 1.6 !important; /* Improve readability with more line height */
  }

  /* Adjust the image container */
  .img-design-container {
    padding-top: 5rem !important; /* Push the content even lower */
  }

  /* Adjust the shape image */
  .shape-design-bg {
    margin-top: 5rem !important; /* Push the shape image even lower */
  }

  /* Adjust the pricing section */
  .pricing {
    margin-top: 5rem !important; /* Add more space above the pricing section */
  }

  /* === Logo Design Page === */
  /* Adjust the Noah image section */
  .logo-design-page .pricing-bottom-img-section {
    margin-top: 5rem !important; /* Push the Noah image lower */
  }

  /* === Web Design Page === */
  /* No additional adjustments needed (general adjustments cover this page) */

  /* === Arculattervezés Page === */
  /* No additional adjustments needed (general adjustments cover this page) */
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .nyomdai-page .nyomdai-content-area {
    flex-direction: column !important;
    align-items: center !important;
    text-align: left !important;
  }
  .nyomdai-page .nyomdai-left,
  .nyomdai-page .nyomdai-right {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .nyomdai-page .nyomdai-right h2 {
    padding: 0 10px !important;
    max-width: 90% !important;
    margin: 0 auto 20px auto !important;
  }
  .nyomdai-page .nyomdai-form form {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

html, body {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}


.body-overlay {
  display: none !important;
}

.offcanvas {
  overflow-y: auto !important;
}
.offcanvas-body .nav-link {
  position: relative;
  z-index: 10;
}


/* ======== MODAL JAVÍTÁSOK ======== */

/* A modalok teljes szélességben nyíljanak meg, hogy minden kép elférjen */
.modal-dialog {
  max-width: 90vw; /* A modál szélességének növelése */
  margin: 2rem auto;
}

/* A modal tartalma ne legyen túl keskeny, és ne vágja le a képeket */
.modal-content {
  max-height: none !important;
  overflow: visible !important;
  padding: 20px;
}

/* A modal testében ne legyen felesleges görgetés */
.modal-body {
  overflow-y: visible !important;
  padding: 20px;
}

/* ======== KÉPKEZELÉS ======== */

/* Az összes modalban lévő kép teljes szélességben jelenjen meg */
.modal-body img,
.modal-footer img {
  max-width: 100%;
  height: auto;
  object-fit: contain; /* A teljes kép látható marad */
  display: block;
  margin: 0 auto;
}

/* Ha két kép egymás mellett van, biztosítjuk, hogy ne vágja le őket */
.modal-body .row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px; /* Képek közötti tér */
}

.modal-body .row img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ======== CÍMEK JAVÍTÁSA ======== */

/* A címek mindig középen jelenjenek meg */
.modal-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 10px;
}

/* A cím és a képek közötti megfelelő tér biztosítása */
.modal-body .modal-title {
  margin-bottom: 20px;
}

/* ======== MODAL LÁTHATÓSÁG ÉS FORMÁZÁS ======== */

/* A modal ne tartalmazzon felesleges görgetést */
.modal-content {
  max-height: none;
  overflow-y: visible;
}

/* A modal cím és a tartalom közötti megfelelő tér */
.modal-body-content {
  padding: 10px 0;
}

/* Térköz a modal lábrészében lévő képek között */
.modal-footer img {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* ======== RESPONSIVE BEÁLLÍTÁSOK ======== */

/* Mobilnézetben a modal szélességének optimalizálása */
@media (max-width: 576px) {
  .modal-dialog {
    max-width: 95vw;
  }

  .modal-title {
    font-size: 20px;
  }
}

.responsive-portfolio-image {
  height: 290px !important;
  width: 380px !important;
}

@media (max-width: 1400px) {
  .responsive-portfolio-image {
    height: 260px !important;
    width: 340px !important;
  }
}

@media (max-width: 1200px) {
  .responsive-portfolio-image {
    height: 220px !important;
    width: 280px !important;
  }
}

@media (max-width: 991px) {
  .responsive-portfolio-image {
    height: 240px !important;
    width: 320px !important;
  }
}

@media (max-width: 767px) {
  .responsive-portfolio-image {
    height: 280px !important;
    width: 380px !important;
  }
}

@media (min-width: 500px) {
  .modal-row-on-large {
    display: flex;
    justify-content: space-between; 
    gap: 1rem; 
    width: 100%; 
    margin-bottom: 1rem; 
  }

}
.modal-row-on-large {
  max-width: 100% !important;
}

.modal-row-on-large img {
  width: 48% !important;
  height: auto !important;
} 

@media (min-width: 768px) and (max-width: 1024px) {
  .hide-on-tablet {
    visibility: hidden;
  }
}

@media screen and (min-width: 426px) and (max-width: 1366px) {
  .online-arculat-content-area {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 20px !important;
    gap: 20px; 
  }

  .online-arculat-left {
    width: 55% !important;
    text-align: left !important;
    padding-right: 20px !important;
  }

  .online-arculat-left h1,
  .online-arculat-left p {
    text-align: left !important;
    margin-left: 0 !important;
  }

  .online-arculat-right {
    width: 45% !important;
    text-align: right !important;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end; 
  }

  .online-arculat-right img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important; 
  }

  .online-arculat-post-image {
    order: 3 !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 40px !important;
  }

  .online-arculat-post-image img {
    max-width: 80% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

@media screen and (min-width: 426px) and (max-width: 800px) {
  .online-arculat-content-area {
    flex-direction: column !important; 
    align-items: center !important;
    gap: 20px !important; 
  }

  .online-arculat-left {
    width: 100% !important; 
    padding-right: 0 !important; 
    text-align: left !important;
  }

  .online-arculat-right {
    width: 100% !important;
    text-align: center !important; 
    justify-content: center !important; 
  }

  .online-arculat-right img {
    max-width: 80% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .online-arculat-post-image {
    margin-top: 20px !important; 
  }

  .online-arculat-post-image img {
    max-width: 100% !important; 
  }
}

@media screen and (min-width: 577px) and (max-width: 992px) {
  .tablet-extra-margin {
    margin-top: 6rem;
  }
}

@media screen and (min-width: 1025px) {
  .tablet-extra-margin {
    margin-top: -8rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .move-badge-left {
    margin-left: -4rem;
  }

  .move-card-down {
    margin-top: 5rem !important;
  }

  .move-card-down-lot {
    margin-top: 10rem !important;
  }
}

@media screen and (min-width: 426px) and (max-width: 768px) {
  .move-badge-left {
    margin-left: -2.5rem;
  }

  .move-badge-down {
    margin-top: 2.5rem !important;
  }
}

@media screen and (min-width: 1440px) {
  .move-down-bitte {
    margin-top: 5rem;
  }
}

@media screen and (min-width: 768px) {
  .move-card-up {
    margin-top: -5rem;
  }
}

@media screen and (max-width: 1023px) and (min-width: 426px) {
  .move-card-up-2 {
    margin-top: -5rem;
  }
}

@media screen and (min-width: 426px) and (max-width: 768px) {
  .kozepre-more {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
  }
}

html, body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  height: 100% !important;
}

/* Adjust the spacing for dropdown items in mobile and tablet views */
@media (max-width: 991.98px) {
  .navbar.m-nav .dropdown-menu {
    padding-top: 0.2rem !important; /* Reduce the top padding */
    padding-bottom: 0.2rem !important; /* Reduce the bottom padding */
  }

  .navbar.m-nav .dropdown-menu .dropdown-item {
    padding-top: 0.25rem !important; /* Reduce the top padding for each item */
    padding-bottom: 0.25rem !important; /* Reduce the bottom padding for each item */
  }

  .navbar.m-nav .dropdown-menu .dropdown-divider {
    margin-top: 0.25rem !important; /* Reduce the margin for the divider */
    margin-bottom: 0.25rem !important; /* Reduce the margin for the divider */
  }
}



@media (max-width: 768px) {
  .triangle {
    position: absolute;
    width: 10%;
    height: 0;
  }
  
}


@media screen and (min-width: 768px) and (max-width: 1000px) {
  .triangle {
    position: absolute;
    width: 30%;
    height: 0;
  }
  
  .triangle-top-left {
    top: 0;
    left: 0;
    /* A jobb oldali átlós háromszög:
       100px széles, melynek jobb oldala átlátszó, alja fekete */
       border-left: 280px solid transparent;
       border-top: 280px solid black;
       transform: scaleX(-1);
      
  }
  
  .triangle-bottom-right {
    bottom: 0;
    right: 0;
    /* A bal oldali átlós háromszög:
       100px széles, melynek bal oldala átlátszó, teteje fekete */
    border-right: 280px solid transparent;
    border-bottom: 280px solid black;
    transform: scaleX(-1);

  }
  
}

/* Social media kezelés mobil tipográfia felülírás (biztosan betöltődik és érvényesül) */
@media (max-width: 768px) {
  /* Mobile navbar toggler icon visibility */
  .navbar.m-nav .navbar-toggler i.fas.fa-bars { color: #000 !important; font-size: 22px !important; }
  body.online-arculat-page .web-pricing-card h3 { font-size: 12px !important; }
  body.online-arculat-page .web-pricing-card .price-value { font-size: 12px !important; }
  body.online-arculat-page .web-pricing-card ul,
  body.online-arculat-page .web-pricing-card ul li,
  body.online-arculat-page .web-pricing-card p,
  body.online-arculat-page .web-pricing-card a { font-size: 10px !important; line-height: 1.25 !important; }
  /* Felülírjuk a Tailwind 13px utility-t is a kártyán belül */
  body.online-arculat-page .web-pricing-card ul.tw-text-\[13px\] { font-size: 10px !important; }
  /* Ribbon címke méret Social media kezelés oldalon */
  body.online-arculat-page .web-pricing-card.has-popular .ribbon-popular { font-size: 8px !important; }
}