/* ===== SOUTH END MOBILE HOMEPAGE FINAL OVERRIDE ===== */

@media screen and (max-width: 900px) {

  /* HERO VIDEO - smaller and less zoomed */
  body section.hero {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    position: relative !important;
  }

  body section.hero video.hero-video {
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: #000 !important;
    display: block !important;
  }

  body section.hero .hero-shade {
    height: 360px !important;
  }

  body section.hero .green-strip {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    bottom: 0 !important;
  }

  body section.hero .green-strip .ticker {
    font-size: 32px !important;
    line-height: 76px !important;
  }


  /* CORE SERVICES SECTION */
  body section.services {
    padding-top: 70px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body section.services h1 {
    font-size: 48px !important;
    line-height: 1 !important;
    margin: 0 0 32px 0 !important;
  }

  body section.services .thin-line {
    margin-bottom: 45px !important;
  }

  body section.services .cards {
    display: flex !important;
    flex-direction: column !important;
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 auto 26px auto !important;
    padding: 0 !important;
    gap: 26px !important;
  }

  body section.services .cards.top-row,
  body section.services .cards.bottom-row {
    margin-bottom: 26px !important;
  }

  body section.services article.service-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 34px 28px 38px 28px !important;
    box-sizing: border-box !important;
  }

  /* number + heading next to each other */
  body section.services article.service-card span {
    display: inline-block !important;
    vertical-align: top !important;
    width: 42px !important;
    margin: 5px 10px 0 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  body section.services article.service-card h3 {
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(100% - 58px) !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    font-size: 34px !important;
    line-height: 1.05 !important;
  }

  body section.services article.service-card p {
    display: block !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }


  /* REQUEST QUOTE BUTTON - move closer to Customs Clearance */
  body .quote-under-services-wrap {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    background: transparent !important;
    position: relative !important;
    top: -18px !important;
  }

  body .quote-under-services-wrap a.floating-quote {
    margin: 0 auto !important;
    transform: none !important;
    display: flex !important;
  }


  /* REMOVE WHITE GAP BEFORE NEXT SECTION */
  body .quote-under-services-wrap + section.about,
  body section.about {
    margin-top: -18px !important;
    padding-top: 55px !important;
  }
}

/* ===== MOBILE VIDEO TOP BLACK BAR FIX ===== */

@media screen and (max-width: 900px) {

  body section.hero {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    background: transparent !important;
    overflow: hidden !important;
    position: relative !important;
  }

  body section.hero video.hero-video {
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
    display: block !important;
  }

  body #sel-mobile-menu {
    position: fixed !important;
    top: 185px !important;
    right: 22px !important;
    z-index: 99999999 !important;
  }

  body #sel-mobile-menu-btn {
    background: rgba(255,255,255,0.82) !important;
  }

  body #sel-mobile-menu-panel {
    top: 62px !important;
    right: 0 !important;
  }
}

/* ===== MOVE MOBILE MENU TO TOP RIGHT OF VIDEO ===== */

@media screen and (max-width: 900px) {
  body #sel-mobile-menu {
    position: fixed !important;
    top: 170px !important;
    right: 18px !important;
    z-index: 99999999 !important;
  }

  body #sel-mobile-menu-btn {
    width: 56px !important;
    height: 50px !important;
    padding: 10px !important;
    background: rgba(255,255,255,0.78) !important;
    border-radius: 7px !important;
  }

  body #sel-mobile-menu-btn span {
    width: 36px !important;
    height: 4px !important;
  }

  body #sel-mobile-menu-panel {
    top: 60px !important;
    right: 0 !important;
  }
}



/* ===== MOVE MOBILE MENU TO TOP RIGHT OF VIDEO ===== */



@media screen and (max-width: 900px) {

  body #sel-mobile-menu {

    position: fixed !important;

    top: 100px !important;

    right: 18px !important;

    z-index: 99999999 !important;

  }



  body #sel-mobile-menu-btn {

    width: 56px !important;

    height: 50px !important;

    padding: 10px !important;

    background: rgba(255,255,255,0.78) !important;

    border-radius: 7px !important;

  }



  body #sel-mobile-menu-btn span {

    width: 36px !important;

    height: 4px !important;

  }



  body #sel-mobile-menu-panel {

    top: 60px !important;

    right: 0 !important;

  }

}








/* ===== MOVE MOBILE MENU TO TOP RIGHT OF VIDEO ===== */







@media screen and (max-width: 900px) {



  body #sel-mobile-menu {



    position: fixed !important;



    top: 20px !important;



    right: 18px !important;



    z-index: 99999999 !important;



  }







  body #sel-mobile-menu-btn {



    width: 56px !important;



    height: 50px !important;



    padding: 10px !important;



    background: rgba(255,255,255,0.78) !important;



    border-radius: 7px !important;



  }







  body #sel-mobile-menu-btn span {



    width: 36px !important;



    height: 4px !important;



  }







  body #sel-mobile-menu-panel {



    top: 60px !important;



    right: 0 !important;



  }



}




/* ===== MOBILE SERVICE CARDS CLEAN LAYOUT ===== */

@media screen and (max-width: 900px) {

  body section.services .cards {
    width: 78% !important;
    max-width: 78% !important;
    margin: 0 auto 28px auto !important;
    gap: 28px !important;
  }

  body section.services article.service-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 38px 28px 42px 28px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body section.services article.service-card span {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
  }

  body section.services article.service-card h3 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 34px !important;
    line-height: 1.08 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body section.services article.service-card p {
    display: block !important;
    width: 100% !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 22px !important;
    line-height: 1.28 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
}

/* ===== MOBILE SERVICE CARD HEADING SIZE FIX ===== */

@media screen and (max-width: 900px) {

  body section.services .cards {
    width: 82% !important;
    max-width: 82% !important;
  }

  body section.services article.service-card {
    padding: 38px 24px 42px 24px !important;
  }

  body section.services article.service-card h3 {
    font-size: 27px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  body section.services article.service-card p {
    font-size: 21px !important;
    line-height: 1.3 !important;
  }
}

/* ===== MOBILE SERVICE CARD FINAL FIT FIX ===== */

@media screen and (max-width: 900px) {

  body section.services .cards {
    width: 88% !important;
    max-width: 88% !important;
    gap: 30px !important;
  }

  body section.services article.service-card {
    padding: 36px 18px 40px 18px !important;
    text-align: center !important;
  }

  body section.services article.service-card span {
    font-size: 23px !important;
    margin-bottom: 18px !important;
  }

  body section.services article.service-card h3 {
    font-size: 23px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body section.services article.service-card p {
    font-size: 20px !important;
    line-height: 1.32 !important;
    text-align: left !important;
  }
}

/* ===== MOBILE MOVE QUOTE BUTTON INTO SECURE SECTION ===== */

@media screen and (max-width: 900px) {

  body section.services {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body section.about {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body section.about .quote-under-services-wrap {
    margin: 0 !important;
    padding: 0 0 38px 0 !important;
    background: transparent !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  body section.about .quote-under-services-wrap a.floating-quote {
    width: 220px !important;
    height: 58px !important;
    margin: 0 auto !important;
    transform: translateY(-1px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #28A745 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  body section.about .about-inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body section.about .small-center {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ===== MOVE MOBILE QUOTE BUTTON SLIGHTLY DOWN ===== */

@media screen and (max-width: 900px) {
  body section.about .quote-under-services-wrap {
    padding-top: 22px !important;
    padding-bottom: 34px !important;
  }

  body section.about .quote-under-services-wrap a.floating-quote {
    transform: none !important;
  }
}

/* ===== REDUCE MOBILE GAP BEFORE LOWER GREEN STRIP ===== */

@media screen and (max-width: 900px) {
  body section.about {
    padding-bottom: 0 !important;
  }

  body section.about .about-inner {
    padding-bottom: 35px !important;
    margin-bottom: 0 !important;
  }

  body section.about .about-block:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body section.about .green-strip.lower {
    margin-top: 0 !important;
  }
}

/* ===== FIX GREEN STRIP OVERLAP AFTER GAP CHANGE ===== */

@media screen and (max-width: 900px) {
  body section.about {
    padding-bottom: 0 !important;
  }

  body section.about .about-inner {
    padding-bottom: 85px !important;
    margin-bottom: 0 !important;
  }

  body section.about .about-block:last-of-type {
    margin-bottom: 35px !important;
    padding-bottom: 0 !important;
  }

  body section.about .green-strip.lower {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }
}

/* ===== TINY GAP REDUCTION BEFORE LOWER GREEN STRIP ===== */

@media screen and (max-width: 900px) {
  body section.about .about-inner {
    padding-bottom: 65px !important;
  }

  body section.about .about-block:last-of-type {
    margin-bottom: 25px !important;
  }
}

/* ===== MAKE LOWER GREEN STRIP FULL WIDTH AGAIN ===== */

@media screen and (max-width: 900px) {
  body section.about .green-strip.lower {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  body section.about {
    overflow: hidden !important;
  }
}

/* ===== LOWER GREEN STRIP TOUCH SIDES PROPERLY ===== */

@media screen and (max-width: 900px) {
  body section.about .green-strip.lower {
    width: calc(100% + 44px) !important;
    max-width: calc(100% + 44px) !important;
    margin-left: -22px !important;
    margin-right: -22px !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
  }
}
