@media screen and (max-width: 1280px) {
     p {
          font-size: 18px !important;
     }

     a {
          font-size: 18px !important;
     }

     html,
     body {
          width: 100% !important;
          max-width: 100vw !important;
          overflow-x: hidden !important;
          box-sizing: border-box !important;
     }

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

     .btn-groups .btn {
          display: block;
          text-align: center;
          margin-left: 10px;
          margin-right: 10px;
     }

     .btn-group {
          display: block;
          /* na mobilu se dají pod sebe*/
          width: 100%;
     }

     .faq-button {
          display: inline-flex;
          width: 50% !important;
          height: auto;
     }

     .cosmetic-row {
          flex-direction: column;
          padding: 20px;
          gap: 20px;
     }

     .cosmetic-row img,
     .info-text {
          min-width: 100%;
          max-width: 100%;
     }

     .cosmetic-row img {
          min-height: auto;
          width: 100%;
     }

     .fa-hand-point-down {
          font-size: 29px;
          margin-left: 20%;
     }

     .comment-form {
          max-width: 900px;
     }

     .form-title h2 {
          max-width: 900px;
     }

     .box input,
     .box textarea {
          font-size: 18px;
     }

     label {
          font-size: 30px;
     }

     .footer-row {
          flex-wrap: wrap;
          justify-content: center;
     }
}

@media screen and (max-width: 1024px) {
     .form-title h2 {
          text-align: center;
     }

     .comment-form p {
          text-align: center;
     }

     .fa-hand-point-down {
          font-size: 25px;
          margin-left: 50%;
          margin-top: 45px;
          color: #3b6b64;
     }
}

/* Mobilní verze - hamburger */
@media screen and (max-width: 768px) {
     .menu {
          position: relative;
          /* Aby ikona držela v rohu */
     }

     .menu ul li {
          margin: 15px;
     }

     .main-nav {
          display: flex;
          /* Musí být flex! */
          flex-direction: column;
          left: auto !important;
          /* Zruší případné zarovnání zleva */
          margin: 0 !important;
          transform: none;
          /* Zruší jakékoliv posouvání/centrování */
          /* Položky pod sebou */
          /* pozicování vysouvacího panelu */
          position: fixed !important;
          top: 0 !important;
          right: -100%;
          /* Schované vpravo mimo obrazovku */
          width: 75% !important;
          /* Šířka vysunutého menu */
          height: 100vh;
          background-color: rgba(30, 30, 30, 0.95);
          /* Barva pozadí menu */
          box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
          z-index: 9999;
          transition: right 0.9s ease-in-out;
          /* Animace vysunutí */
          padding-top: 80px;
          /* Aby první položka nebyla pod ikonou */
     }

     /* Třída, kterou přidáme pomocí JS pro vysunutí */
     .main-nav.open {
          right: 0 !important;
     }

     .main-nav li a {
          width: 100%;
          padding-left: 10px;
          padding-right: 10px;
          text-align: center;
          color: #fff;
     }

     .main-nav a {
          font-size: 25px;
          display: block;
          padding: 15px 0;
          letter-spacing: 1.3px;
          transition: all 0.3s;
     }

     .main-nav a:hover,
     .main-nav a:active {
          padding-left: 10px;
          padding-right: 10px;
          color: #ffcc00;
          /* Tady si dej svou barvu webu */
          background-color: rgba(255, 255, 255, 0.05);
     }

     .mobile-nav-icon {
          display: block;
          float: right;
          position: absolute;
          top: 16px;
          right: 25px;
          z-index: 10001;
          /* Musí být nad menu*/
          cursor: pointer;
     }

     .mobile-nav-icon img {
          height: 40px;
          width: auto;
     }

     .outset-link p {
          margin: 20px;
          padding-left: 10px;
          font-size: 22px;
     }

     .text-about p {
          width: 100%;
          font-size: 20px;
     }
}

/* Mobilní verze - hamburgerMenu -- O mně, Blog, FAQ, zásady ochrany, cookies */
@media screen and (max-width: 768px) {
     .subpage-menu {
          position: relative;
     }

     .subpage-menu ul li {
          margin: 15px;
     }

     .main-navbar {
          display: flex;
          /* Musí být flex! */
          flex-direction: column;
          left: auto !important;
          /* Zruší případné zarovnání zleva */
          margin: 0 !important;
          transform: none;
          /* Zruší jakékoliv posouvání/centrování */
          /* Položky pod sebou */
          /* pozicování vysouvacího panelu */
          position: fixed !important;
          top: 0 !important;
          right: -100%;
          /* Schované vpravo mimo obrazovku */
          width: 75% !important;
          /* Šířka vysunutého menu */
          height: 100vh;
          background-color: rgba(30, 30, 30, 0.95);
          /* Barva pozadí menu */
          box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
          z-index: 9999;
          transition: right 0.9s ease-in-out;
          /* Animace vysunutí */
          padding-top: 80px;
          /* Aby první položka nebyla pod ikonou */
     }

     /* Třída, kterou přidáme pomocí JS pro vysunutí */
     .main-navbar.open {
          right: 0 !important;
     }

     .main-navbar li a {
          width: 100%;
          padding-left: 10px;
          padding-right: 10px;
          text-align: center;
          color: #fff;
     }

     .main-navbar a {
          font-size: 25px;
          display: block;
          padding: 15px 0;
          letter-spacing: 1.3px;
          transition: all 0.3s;
     }

     .main-navbar a:hover,
     .main-navbar a:active {
          padding-left: 10px;
          padding-right: 10px;
          color: #ffcc00;
          /* Tady si dej svou barvu webu */
          background-color: rgba(255, 255, 255, 0.05);
     }

     .mobile-navbar-icon {
          display: block;
          float: right;
          position: absolute;
          top: 16px;
          right: 25px;
          z-index: 10001;
          /* Musí být nad menu*/
          cursor: pointer;
     }

     .mobile-navbar-icon img {
          height: 40px;
          width: auto;
     }

     .info-box,
     .product-row,
     .perfume-row,
     .aboutbox-row {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          align-items: stretch;
          gap: 30px;
          margin: 80px 0 100px;
     }

     .cosmetic-row {
          flex-direction: column;
          padding: 20px;
          gap: 20px;
     }

     .cosmetic-row img,
     .info-text {
          min-width: 100%;
          max-width: 100%;
     }

     .cosmetic-row img {
          min-height: auto;
          width: 100%;
     }

     .faq-button {
          display: inline-flex;
          width: 100% !important;
          height: auto;
     }

     .contact .btn {
          display: block;
          margin-left: 10px;
          margin-right: 10px;
     }
}


/* Mobilní verze kontaktní formulář */
@media screen and (max-width: 768px) {
     .contact h2 {
          text-align: center;
     }

     .form-title h2 {
          text-align: center;
     }

     .comment-form p {
          text-align: center;
     }
}

/** Mobilní verze pro FAQ **/
@media screen and (max-width: 768px) {
     .faq-container {
          padding: 0 15px;
          margin-top: 50px;
     }

     .faq-container h1 {
          font-size: 24px;
     }

     .faq-intro {
          font-size: 14px;
          margin-bottom: 30px;
     }

     summary {
          padding: 15px;
          font-size: 15px;
     }

     .faq-content {
          font-size: 14px;
          /* Čitelnější písmo na malém displeji */
          padding: 0 15px 15px;
     }

     figure img {
          width: 100%;
          height: auto;
     }

     /* Úprava tlačítka "Chci se zeptat osobně" */
     .contact-btn {
          display: block;
          /* Tlačítko bude přes celou šířku */
          width: 100%;
          padding: 18px 0;
          /* Vyšší pro pohodlné kliknutí palcem */
          font-size: 17px;
          animation: pulse-wave 2s infinite;
     }

     /* Centrování patičky na mobilu (pro tvůj FAQ-btn v patičce) */
     .footer-row {
          flex-direction: column;
          align-items: center;
          text-align: center;
     }

     .faq-wrapper {
          text-align: center;
          /* Tlačítko v patičce bude na mobilu uprostřed */
          margin-bottom: 20px;
     }
}

@media screen and (max-width: 480px) {
     .header-text h1 {
          font-size: 170% !important;
     }

     .heading-main h2 {
          font-size: 150% !important;
     }

     .outset h2 {
          font-size: 35px !important;
     }

     .outset-box .outset-text {
          line-height: 1.1;
          font-size: 18px;
     }

     .outset-box .outset-link-text {
          padding-left: 13px;
          font-size: 0.9em;
          line-height: 2;
     }

     .outset-box .project-text {
          font-size: 15px;
     }

     .text-about {
          font-size: 15px;
     }

     .concept p {
          line-height: 1.1;
          font-size: 20px;
     }

     .main-nav {
          width: 100% !important;
     }

     .info-box,
     .blog-box {
          padding: 10px !important;
     }

     html,
     body {
          width: 100% !important;
          max-width: 100vw !important;
          overflow-x: hidden !important;
          box-sizing: border-box !important;
     }

     .fancy-hr {
          display: none !important;
     }

     .info-box img {
          overflow-x: hidden !important;
     }

     .perfume-row img {
          overflow-x: hidden !important;
     }

     .perfume-row .text-content p {
          margin-left: 30px;
     }

     .buttons .btn {
          margin: 40px;
          padding: 0;
          max-width: 80%;
          height: 60px;
     }

     .about-btn {
          display: inline-block;
          align-items: center;
          justify-content: center;
          margin: 10px;
          background: #096a6a;
     }
}

@media screen and (max-width: 420px) {
     p {
          font-size: 14px !important;
     }

     a {
          font-size: 15px !important;
     }

     .heading-main h2 {
          font-size: 17px !important;
     }

     .heading-main i {
          font-size: 15px;
     }

     html,
     body {
          width: 100% !important;
          max-width: 100vw !important;
          overflow-x: hidden !important;
          box-sizing: border-box !important;
     }

     .info-box img {
          overflow-x: hidden !important;
     }

     .perfume-row img {
          overflow-x: hidden !important;
     }

     .aboutbox-row img {
          overflow-x: hidden !important;
     }

     .perfume-row .text-content p {
          font-size: medium !important;
          margin-left: 0px;
     }

     .information-box {
          width: 150px;
     }

     .information-box i {
          font-size: 10px !important;
          display: block;
          padding: 3%;
     }

     .information-box h3 {
          font-size: 15px !important;
          position: relative;
          display: inline;
          letter-spacing: 1.5px;
          font-weight: 600;
     }

     .side-text h4 {
          font-size: 11.5px !important;
     }

     .cont {
          font-size: 11px !important;
          padding-left: 20px;
     }

     .buttons .btn {
          padding: 8px;
          height: auto;
     }

     .buttons .btn:hover,
     .buttons .btn:active {
          background: rgb(54, 111, 111);
     }

     .buttons .btn a {
          color: #000;
          text-decoration: none !important;
     }

     .buttons .btn a:hover,
     .buttons .btn a:active {
          color: #fff;
     }

     .buttons .text h4 {
          font-size: 12px;
          color: #fff;
          padding: 0;
          font-weight: 600;
          text-align: center;
          letter-spacing: 1px;
     }

     .about-btn {
          display: inline-block;
          align-items: center;
          justify-content: center;
          margin: 10px;
          background: #096a6a;
          animation: pulse-wave 4s infinite !important;
     }

     .about-btn:hover {
          animation: none;
     }

     .about-btn a {
          font-size: 16px;
     }

     .infooutset p {
          margin: 20px;
          padding-left: 10px;
          text-indent: -51px;
          font-size: 14px;
     }

     .infooutset i {
          font-size: 10px;
          flex-shrink: 0;
     }
}

/* Responzivní footer */
@media screen and (max-width: 992px) {
     .footer-row {
          flex-wrap: wrap;
          justify-content: center;
     }

     .col {
          width: 50%;
          text-align: center;
          margin-bottom: 3rem;
     }

     .col h4::after {
          left: 50%;
          transform: translateX(-50%);
     }
}

@media screen and (max-width: 600px) {
     .col {
          width: 100%;
     }

     /* seznam našich e-shopů */
     .clean-list ul {
          grid-template-columns: 1fr;
          /* Na mobilu se vrátí k jednomu sloupci */
          padding: 10px;
     }

     .info-container {
          padding: 20px 15px;
          /* Horní/dolní 20px, boční 15px */
     }

     .teamwork-container {
          padding: 20px 15px;
          /* Horní/dolní 20px, boční 15px */
     }

     .info-box,
     .product-row,
     .perfume-row,
     .aboutbox-row {
          width: 100%;
          /* Boxy se roztáhnou na celou šířku mobilu... */
          max-width: none;
          /* ...ale díky paddingu kontejneru se nedotknou okrajů */
          margin-bottom: 15px;
          /* Mezera mezi boxy, když jsou pod sebou */
     }

     .photos img {
          max-width: 100%;
     }
}

/* responzivní tlačítka v úvodu "Jak začít" */
@media screen and (max-width: 768px) {
     .btn-groups .btn {
          display: block;
          text-align: center;
          margin-left: 10px;
          margin-right: 10px;
     }

     .btn-group {
          display: block;
          /* na mobilu se dají pod sebe*/
          width: 100%;
     }

     .btn-group .button {
          width: 100%;
          /* Na mobilu budou skoro přes celou šířku */
          font-size: 16px;
          /* Trochu zmenšíme písmo pro menší displej */
          display: block;
          text-align: center;
          margin-left: -0.9px;
          margin-right: 10px;
     }

     #contact .btn {
          width: 100%;
          display: block;
          margin-left: 10px;
          margin-right: 10px;
     }

     .fa-hand-point-down {
          font-size: 25px;
          margin-left: 50%;
          margin-top: 45px;
          color: #3b6b64;
     }
}

/* Responzivita - boxy: Na mobilu pod sebe */
@media (max-width: 768px) {
     .product-flex {
          grid-template-columns: 1fr;
          text-align: center;
     }

     .product-img img {
          margin: 0 auto;
     }
}

@media screen and (max-width: 768px) {
     .info-box-flex {
          grid-template-columns: 1fr;
          text-align: center;
     }

     .info-box img img {
          margin: 0 auto;
     }

     .outset img {
          height: auto;
     }

     .img img {
          height: auto;
     }

     .images img {
          height: auto;
     }
}

/* Responzivní šipka - up */
@media screen and (max-width: 768px) {
     .up {
          right: 15px;
          bottom: 15px;
          width: 38px;
          height: 38px;
          font-size: 14px;
          border-radius: 8px;
          opacity: 0.8;
     }

     /* Při dotyku na mobilu se na chvíli zvýrazní */
     .up:active {
          opacity: 1;
          transform: scale(0.9);
     }
}