/* ===========================================
   SMALL SCREENS (PHONES)
   =========================================== */
@media (max-width: 767px) {
  /* GENERAL */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }

  body {
    font-size: 0.95rem;
    overflow-x: wrap;
  }

  .section-heading {
    font-size: 1.5rem;
    margin-bottom: 0.5em;
  }

  /* NAVBAR */
  .navbar {
    flex-direction: column;
    align-items: center;
    height: 3em;
    padding: 1em 0.5em;
    /* gap: 0.5em; */
    background-color: var(--primary-3);
    top: 0;
  }

  .navbar .logo {
    width: 10em;
    padding-top: 0.5em;
  }

  .navbar .logo.big {
    display: none;
  }

  .navbar .text {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    font-size: 0.85rem;
    display: none;

    /* display: none !important; */
  }

  .navbar .nav-item {
    padding: 0.4em 0.75em;
  }

  .navbar .nav-item.contact-us {
    width: 8em;
    font-size: 0.85rem;
  }

  .mobile-menu {
    display: block;
  }

  /* HERO SECTION */
  .hero {
    flex-direction: column-reverse;
    /* justify-content: space-evenly; */
    gap: 1em;
    padding: 1em 1em;
    text-align: center;
    width: 100vw;
    /* overflow-x: wrap; */
  }

  .hero.index .ww {
    width: 100%;
  }

  .hero .media {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero.index .ww .media {
    display: none;
  }

  .hero-cover::before {
    content: "";
    background-color: black;
    z-index: -4;
    width: 100%;
    height: 140vh;
    position: absolute;
    bottom: 0;
    /* top: 10em; */
  }

  .hero .content {
    width: 100%;
    padding: 0;
  }

  .hero .width {
    display: none;
  }

  .hero .media {
    width: 100%;
  }

  .hero .media img {
    width: 100%;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero h3 {
    font-size: 0.9rem;
    width: auto;
    margin: 0 auto 1em auto;
  }

  .hero .buttons {
    flex-direction: column;
    gap: 0.75em;
    justify-content: center;
    align-items: center;
    padding: 1em 2em 2em 2em;
    margin: 0 0 4em 0;
  }

  .hero .buttons .btn {
    padding: 0.75em;
    font-size: 1rem;
  }

  .slider-container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    top: 9em;
    right: 0;
    margin: 1em auto;
    padding: 1em 3em;
  }

  .slider-container.about-page {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    top: 5em;
    right: 0;
    margin: 1em auto;
    padding: 1em 3em;
  }

  .slider-container.about-page .slider img {
    width: 50vh;
  }

  .slider img {
    width: 40vh;
    height: auto;
  }

  /* ABOUT US */
  .about-us {
    margin: 1em;
    padding: 1.5em;
  }

  .about-us .section-container {
    flex-direction: column;
    gap: 1.5em;
  }

  .about-us .section-content,
  .about-us .section-image {
    width: 100%;
  }

  .about-us .section-content button {
    width: 100%;
    padding: 1em;
    font-size: 1.25rem;
  }

  .about-us .section-image .image {
    width: 100%;
    padding-left: 0;
  }

  .about-us h2 {
    font-size: 1.8rem;
  }

  .donut {
    width: var(--size-s);
    height: var(--size-s);
  }

  .donut-container img {
    width: 85vw;
  }

  .about-us .floater,
  .about-us .floater-2 {
    display: none;
  }

  /* ACTIONS SECTION */
  .actions-section .cards-container {
    flex-direction: column;
    gap: 1.5em;
    max-width: 80vw;
  }

  .actions-section .card {
    width: 100%;
  }

  .actions-section .section-heading {
    font-size: 2rem;
  }

  /* DISTRIBUTION MEANS */
  .distribution-means {
    padding: 1em;
  }

  .section-conten {
    flex-direction: column;
    gap: 1.5em;
  }

  .section-conten .card.even {
    background-color: var(--bg-dt);
  }

  .section-conten .card.even h3 {
    color: var(--primary-3);
  }

  .section-conten .card.even p {
    color: white;
  }

  .section-conten .img,
  .section-conten .cards-info {
    width: 100%;
    padding: 0;
  }

  .section-conten .img img {
    width: 125%;
  }

  .cards {
    flex-direction: column;
    align-items: center;
  }

  .cards.two,
  .cards.three,
  .cards.one {
    padding: 0 0 0 0;
  }

  .distribution-means .card {
    width: 100%;
  }

  .break {
    display: none;
  }

  /* TESTIMONIALS */
  .testim {
    padding-bottom: 1em;
  }

  .testim .wrap {
    padding: 1em;
  }

  .testim h2 {
    font-size: 1.8rem;
  }

  .testim .arrow {
    font-size: 1.5rem;
  }

  .testim .dots {
    bottom: 20px;
  }

  .testim .cont > div {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0 2em 0;
    opacity: 0;
  }

  .footer {
    flex-direction: column;
    text-align: left;
    gap: 1em;
  }
  .footer .contacts {
    justify-content: center;
    justify-content: left;
  }

  .footer .section.form {
    text-align: left;
  }

  .footer .section.links h3 {
    padding-top: 0;
  }

  /* CALL TO ACTION */

  .call-to-action form {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .call-to-action input {
    padding: 0.75em;
    font-size: 1.25rem;
    width: 100%;
  }

  .call-to-action button {
    width: 100%;
    padding: 1em;
  }

  /* ===========================================
   ABOUT US PAGE
   =========================================== */

  .why-us .why-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .why-us .why-wrapper .why-card {
    width: 80%;
  }

  /* ===========================================
   FLYER DISTRIBUTIONS
   =========================================== */

  .flyer-distribution-page {
    flex-direction: column;
    margin: 2em auto;
    max-width: 90vw;
  }

  .flyer-distribution-page h3 {
    text-align: center;
  }

  .flyer-distribution-page .section-text h2 {
    text-align: center;
    justify-self: center;
  }

  .flyer-distribution-page .section-text {
    width: 100%;
    padding: 0.5em;
    margin: 0;
  }

  .flyer-distribution-page .section-text button {
    justify-self: centerx;
  }

  .flyer-distribution-page .selection {
    width: 100%;
  }

  .flyer-distribution-page .section-cards {
    display: none;
  }

  .flyer-distribution-page .section-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }

  .flyer-distribution-page .section-card {
    padding: 1em;
  }

  .flyer-distribution-page .section-text button {
    margin: 0.75em auto;
    width: 100%;
  }

  /* =============================================
                CHECK-OUT SECTION
=============================================== */

  .check-out {
    flex-direction: column-reverse;
    padding: 3vh 10vw;
  }

  .check-out .text-side {
    width: 100%;
    padding-left: 10vw;
  }

  .check-out .image-side {
    width: 100%;
  }

  .check-out .lower-section {
    display: flex;
    flex-direction: column;
    gap: 2em;
  }

  .check-out .lower-section .sec {
    width: 80%;
  }

  /* =============================================
               drops
=============================================== */

  .drops {
    display: flex;
    flex-direction: column;
  }

  .drops .street-run-drop .content {
    display: flex;
    flex-direction: column;
  }

  .drops .street-run-drop .content .text-ff {
    margin: 0 3vw;
    width: 100%;
  }

  .drops .street-run-drop .content .text-ff h3 {
    line-height: 1em;
    text-align: left;
  }

  .drops .street-run-drop .content .text-ff h2 {
    line-height: 0.8em;
    text-align: left;
    margin-top: 0.3em;
  }

  .drops .street-run-drop .content .cards-container-ff {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 100%;
  }

  .drops .street-run-drop .content .cards-container-ff .card-ff {
    width: 100%;
    height: calc(width);
  }

  /* RESIDENTIAL */

  .drops .residential-letterbox-drop {
    padding: 1em;
    margin: 0 3vw;
  }

  .drops .residential-letterbox-drop .content {
    display: flex;
    flex-direction: column;
  }

  .drops .residential-letterbox-drop .content .text-center {
    width: 100%;
  }

  .drops .residential-letterbox-drop .content .image-gh {
    width: 100%;
  }

  /* COMMON DROP */

  .drops .common-drop {
    padding: 3vh 3vw;
  }

  .drops .common-drop h2 {
    padding-bottom: 0.25em;
  }

  .drops .common-drop .content-ft {
    width: 90vw;
    height: auto;
    margin-bottom: 1em;
    flex-direction: column-reverse;
  }

  .drops .common-drop.even .content-ft {
    flex-direction: column-reverse;
  }

  .drops .content-ft .image-side-ft {
    width: 100%;
  }

  .drops .content-ft .image-ft {
    width: 100%;
    height: 20em;
  }

  .drops .content-ft .text-side-ft {
    width: 100%;
    padding: 1em;
  }

  /* ===========================================
   EVENT PROMOTIONS
   =========================================== */

  body#event-promotions {
    max-width: 100vw;
  }

  .event-promo {
    padding: 5vh 5vw;
  }

  .event-promo .image-side {
    flex-direction: column;
    width: 100%;
    padding-right: 0;
  }

  .event-promo .image-side .event-card {
    width: 100%;
  }

  .single-event {
    /* max-width: 1200px; */
    padding: 3vh 3vw;
    flex-direction: column;
    /* align-items: center; */
  }

  .single-event#event-signs,
  .single-event#printed {
    flex-direction: column;
  }

  .single-event#event-signs .image-side .img.one {
    width: 90%;
  }

  .single-event#event-signs .image-side .img.two,
  .single-event#event-signs .image-side .img.three {
    width: 40%;
  }

  .single-event .text-side {
    width: 100%;
    padding: 0 1em;
  }

  .single-event .text-side .upper-section {
    padding-bottom: 1em;
    width: 100%;
  }

  .single-event .image-side {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .single-event#event-postering .image-side .img.one {
    width: 90%;
  }

  .single-event#event-postering .image-side .img.two,
  .single-event#event-postering .image-side .img.three {
    width: 40%;
  }

  /* =============================================
                PROMOTIONAL DISTRIBUTION
=============================================== */

  .promot {
    flex-direction: column;
    width: 90vw;
    padding: 0.5em;
  }

  .promot .image,
  .promot .cont {
    width: 100%;
  }

  .promot .image {
    width: 100%;
    margin: 1em 0;
  }

  .promot .cont {
    display: flex;
    flex-direction: column;
    padding: 1em;
  }

  .promot .cont button {
    width: 80%;
    margin: 1em auto;
    align-self: center;

    padding: 0.5em;
    font-size: 1.2rem;
    margin: 1em 0;
    border: none;
    border-radius: 0.2em;
  }

  /* ===========================================
   CONTACT US PAGE
   =========================================== */

  .contact-section {
    width: 100%;
    padding: 3em 0;
    max-width: 90vw;
  }

  .contact-section .contact-container {
    flex-direction: column;
    padding: 1em;
  }

  .contact-section .contact-form,
  .contact-section .contact-info {
    width: 100%;
  }

  .contact-section .contact-info {
    display: flex;
    flex-direction: column;
  }

  .contact-section .contact-info .social {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contact-section .contact-info .info-group-big .info-group {
    display: flex;
    flex-direction: column;
  }

  .contact-section .contact-info .info-group-big .info-group .info-item {
    width: 100%;
  }

  /* =============================================
                  FAQ SECTION
=============================================== */

  .faq-section {
    max-width: 90vw;
  }

  /* ===========================================
   SMALL SCREENS (PHONES)
   =========================================== */

  .pricing {
    flex-direction: column;
    /* padding: 1em 5vw 0 5vw; */
  }

  .pricing .card-ty.one,
  .pricing .card-ty.two {
    width: 100%;
  }

  .pricing .card-ty.two .card-tz.one,
  .pricing .card-ty.two .card-tz.two {
    width: 100%;
  }

  .pricing .card-ty.two {
    background: none;
    padding: 0;
    box-shadow: none;
    margin-bottom: 0;
  }

  .pricing .card-ty.two .card-tz.one {
    color: var(--primary-3);
    margin-bottom: 0.5em;
  }

  .pricing .card-ty.two .card-tz.two {
    flex-direction: column;
    gap: 1em;
  }

  .pricing .card-ty.two .card-tw {
    width: 100%;
  }

  .pricing .card-tw button {
    font-size: 1.25rem;
  }

  /* =============================================
                GET MY FLYERS
=============================================== */

  .get-my {
    flex-direction: column;
  }

  .get-my .single-event {
    width: 100%;
  }

  #event-promotions .single-event {
    flex-direction: column;
    padding: 5vh 5vw;
  }

  #event-promotions .single-event#event-signs,
  #event-promotions .single-event#printed {
    flex-direction: column;
  }

  #event-promotions .single-event .text-side,
  #event-promotions .single-event .image-side {
    width: 100%;
  }

  #event-promotions .single-event .text-side {
    padding: 0 1em;
  }

  #event-promotions .single-event .text-side .upper-section {
    width: 100%;
  }

  /* Mobile responsive styling for testimonial arrows */

  .testim .arrow {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .testim .arrow.left {
    left: 10px;
  }

  .testim .arrow.right {
    right: 10px;
  }
}

@media all and (max-width: 300px) {
  body {
    font-size: 0.875rem;
  }
}

@media all and (max-width: 500px) {
  .testim .arrow {
    font-size: 1.5rem;
  }

  .testim .cont div p {
    line-height: 25px;
  }
}

@media (max-width: 480px) {
  .testim .arrow {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .testim .arrow.left {
    left: 5px;
  }

  .testim .arrow.right {
    right: 5px;
  }
}