/* =========================
   BASE (MOBILE FIRST)
   This block represents the “smallest” layout (<=320/375/414 etc)
   by pulling in what your max-width queries were enforcing.
   ========================= */

body {
  margin: 0px;
  font-family: Arial;
  color: #4c4b4b;
}

a {
  text-decoration: none;
  color: #616161;
}

a:hover {
  color: #2b2b2b;
}

h1 {
  font-size: 40pt;
  font-family: Arial;
  color: #646463;
  font-weight: 300;
}

sup {
  font-size: 12px;
}

h2 {
  font-size: 16pt;
  font-family: Arial;
  font-weight: 600;
  color: #810005;
}

h3 {
  font-size: 15pt;
  font-family: Arial;
  font-weight: 600;
  color: #810005;
  margin: 10px 0px 5px 0px;
}

.claim-footer-html {
  width: 210px;
}

.claim-footer-html h2,
.claim-footer-html h3 {
  font-size: 1rem;
  color: #616161;
}

.vetportal h3 a {
  color: rgb(156, 156, 156);
  font-size: 18px;
}
.vetportal h3 a:hover {
  color: rgb(80, 80, 80);
}

h4 {
  font-size: 25px;
  color: rgb(156, 156, 156);
}

.left {
  float: left;
}
.right {
  float: right;
}

.width50 {
  width: 90%;
  padding: 5%;
}

/* HERO */
.section1 {
  background-image: none;
  background-repeat: no-repeat;
  height: 555px; /* from your <=690 rules */
  margin-top: 20px; /* from your <=690 rules */
  background-size: 180%; /* from your <=690 rules */

  /* from your <=950 hero rules */
  min-height: auto;
  padding-top: 30px;

  position: relative;
  background-color: #fff;
}

.hero-product {
  /* from your <=1170 rules (mobile-ish placement) */
  position: relative;
  left: auto;
  top: auto;
  margin: 0 auto;
  width: min(320px, 80vw);
  height: auto;
  display: block;
  pointer-events: none;
}

.OutsideContainer {
  width: 100%;
}

.InsideContainer {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 5%;
}

.language-switch {
  background-color: #ffe0ba;
  padding: 0px;
  width: 100%;
  height: 80px; /* from <=690 */
  position: absolute; /* from <=690 */
}

.illustration {
  padding-top: 3%;
}

.grnbox {
  background-color: #2f3f2f; /* from <=690 */
  color: #ffffff;
  width: 100%; /* from <=690 */
  height: 40px;
  text-align: right; /* from <=690 */
  line-height: 40px;
  padding-right: 5%; /* from <=690 */
  z-index: 20; /* from <=690 */
  position: relative; /* from <=690 */
}

.clear {
  clear: both;
}

.nmxlogo {
  display: none;
} /* from <=690 */

.logo {
  margin-top: -80px;
  overflow: hidden;
  padding: 5%;
}

.logo.left {
  float: none; /* from <=690 */
  margin: 0 auto; /* from <=690 */
  max-width: 421px; /* from <=690 */
  overflow: visible; /* from <=690 */
  z-index: 10; /* from <=690 */
  position: relative; /* from <=690 */
}

.logo.left img {
  margin-top: -25px; /* from <=690 */
  max-width: 280px; /* from <=690 */
  margin: 0 auto; /* from <=690 */
  display: block; /* from <=690 */
}

/* BerryBest mobile base (from <=950 + <=690 + <=800 + <=1024) */
.BerryBest {
  padding-left: 0;
  width: 90%;
  padding: 5%;
  margin: 5% 0;
  float: none;
}

.BerryBest.right h1 {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  height: auto;
  font-size: 3em; /* from <=800 */
}

.BerryBest h1 {
  text-align: center;
} /* from <=690 */

.BerryBest ul {
  list-style: none;
  padding-left: 0px;
}

.BerryBest ul li {
  padding-left: 40px;
  margin-bottom: 10px;
}

#cranbutton {
  width: 180px;
  background: #d2040b;
  border-radius: 25px;
  height: 45px;
  float: right;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  line-height: 45px;
  text-transform: uppercase;
}

#cranbody {
  line-height: inherit !important;
}

/* accordion: hidden on <=800 */
.accordion {
  display: none;
} /* from <=800 */

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  background-color: #ffe0ba;
  display: none;
  height: 350px;
  margin-top: -45px;
  border-radius: 0 0px 25px 25px;
}

/* in <=800 you hide both desktop & mobile panels (as your CSS currently does) */
#panel1 {
  display: none !important;
} /* from <=800 */
#panel2 {
  display: none !important;
} /* from <=800 */
.accordion1 {
  display: none !important;
} /* from <=800 */
.accordion2 {
  display: none !important;
} /* from <=800 */

.admintext {
  height: 50px;
  width: 100%;
  margin-top: 165px;
  background: #e6b397 80%;
  text-align: center;
  text-transform: uppercase;
  line-height: 50px;
  color: #810005;
  font-size: 21px;
  font-weight: 700;
  border-radius: 0px;
}

.smallproducts {
  display: none;
} /* from <=950 */

.youtubeimagelink {
  display: none;
} /* from <=950/<=800 */

/* mobile youtube + mobile accordion visible on <=800 */
.mobile-youtube {
  width: 100%;
  margin: 0 auto;
  background-image: url("../images/youtubecircle.png");
  background-repeat: no-repeat;
  display: block !important;
  height: 340px;
  background-position: 50% 0;
  background-size: contain;
  margin-top: -50px;
  margin-bottom: 3%;
}

.mobile-accordion {
  background: url(../images/accordion-background.jpg) #810005;
  background-repeat: no-repeat;
  max-width: 100%;
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.25s;
  transition-timing-function: ease-in;
  display: block;
  height: 260px;
  background-position: 50% 0;
}

.mobile-admintext {
  height: 50px;
  width: 100%;
  background: #e6b397 100%;
  text-align: center;
  text-transform: uppercase;
  line-height: 50px;
  color: #810005;
  font-size: 21px;
  font-weight: 700;
  border-radius: 0px;
  display: block;
}

button#m-category-tabs {
  margin-top: 170px;
  position: absolute;
  width: 100%;
}

/* preloader */
#preloader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 999999;
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url(../images/dog-preloader-128-crananidin.gif);
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
}

/* vetportal + footer layout (from <=1024) */
.vetportal {
  text-align: center;
  max-width: 375px;
  float: none; /* from <=1024 */
  margin: 50px auto; /* from <=1024 */
  border: none; /* from <=1024/<=950 */
  padding: 0 !important; /* from <=1024 */
}

.footer {
  background: #ffe0ba;
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 20px;
}

.Contact {
  margin: 0 auto; /* from <=1024 */
  width: 50%; /* from <=1024 */
  float: none; /* from <=1024 */
  padding: 0; /* from <=1024 */
  text-align: center; /* from <=1024 */
}

.Vetlinks {
  margin: 0 auto; /* from <=1024 */
  width: 100%; /* from <=1024 */
  float: none; /* from <=1024 */
  padding: 0; /* from <=1024 */
  text-align: center; /* from <=1024 */
}

.Vetlist1 {
  display: inline-block;
  list-style-type: none;
  padding: 0px;
  height: 100px;
  float: none !important;
}
.Vetlist2 {
  display: inline-block;
  list-style-type: none;
  padding: 0 0 0 40px;
  height: 100px;
  float: none !important;
  vertical-align: top;
}

.textquestions {
  margin-top: 0px; /* from <=1024 */
  margin: 10% 5% 0 5%; /* from <=800 */
  padding-bottom: 20px; /* from <=1024 */
  border-bottom: rgba(0, 0, 0, 0.16);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.textquestions h2 {
  text-align: left;
} /* from <=1024 */

.footerlogo {
  margin: 0 auto; /* from <=1024 */
  width: 318px; /* from <=1024 */
  float: none; /* from <=1024 */
  padding: 0; /* from <=1024 */
  line-height: 100px; /* from <=1024 */
}

.footerarrow {
  margin-top: 0px;
} /* from <=1024 */

.breaker {
  height: 50px;
  width: 100%;
}

/* images */
#flogo {
  width: 100% !important; /* from <=1024 */
  margin: 0 auto;
  display: block;
  padding-top: 50px;
}

/* anchors */
#learnmore,
#top {
  display: block;
  position: relative;
  top: 0px; /* from your many <=* rules */
  visibility: hidden;
}

/* Small text tweaks (from <=414/<=375/<=320) */
@media screen and (min-width: 0px) {
  /* keep as-is; anchor top already 0 */
}
@media screen and (max-width: 414px) {
  .mobile-admintext {
    font-size: 22px;
  }
}
@media screen and (max-width: 375px) {
  .mobile-admintext {
    font-size: 20px;
  }
}
@media screen and (max-width: 320px) {
  .mobile-admintext {
    font-size: 18px;
  }
}

/* portrait 320 special */
@media screen and (max-width: 320px) and (orientation: portrait) {
  button#m-category-tabs {
    margin-top: 170px;
    position: absolute;
    width: 100%;
    line-height: 20px !important;
  }
  #flogo {
    width: 80% !important;
  }
  .Contact a {
    display: block;
    padding: 10px 0 0 0 !important;
  }
}

/* ADA COMPLIANCE */
.vetportal h4 {
  color: #525252 !important;
}
.vetportal h3 a {
  color: #525252 !important;
}

/* Skip to content */
.skip-to-content-link {
  left: 50%;
  position: absolute;
  transform: translateY(-100%);
}
.skip-to-content-link {
  background: #e77e23;
  height: 30px;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
  color: #000000;
}
.skip-to-content-link:focus {
  transform: translateY(0%);
  position: absolute;
  top: 35px;
  z-index: 999999999;
}

/* vetTech */
.vetTech {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}
.vetTech__item {
  margin: 3px 0;
}

/* =========================
   MIN-WIDTH OVERRIDES (progressive enhancement)
   These rebuild your original desktop behavior as the viewport grows.
   ========================= */

/* >= 415px (undo the 414-specific font bump) */
@media screen and (min-width: 415px) {
  .mobile-admintext {
    font-size: 21px;
  }
}

/* >= 569px landscape/other tiny layout diffs were only #learnmore top=0, already 0 */

/* >= 691px : bring back non-mobile header + hero sizing from your desktop baseline */
@media screen and (min-width: 691px) {
  .language-switch {
    height: 40px;
    position: static;
  }
  
  .illustration  {
    display: flex;
    justify-content: center;
  }

  .grnbox {
    width: 110px;
    text-align: center;
    padding-right: 0;
  }

  .nmxlogo {
    display: none; /* your original hides it until your inline head styles show it at >=876, keep as-is here */
  }

  .section1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 755px;
    /*     margin-top: 100px; */
    min-height: 755px;
    /*     padding-top: 120px; */
  }

  .hero-product {
    position: absolute;
    left: clamp(20px, 8vw, 90px);
    top: clamp(20px, 6vw, 70px);
    width: clamp(220px, 28vw, 420px);
    margin: 0;
    margin-top: 5%;
  }

  .BerryBest {
    width: min(520px, 46%);
    margin-right: 7%;
    margin-top: 0;
    margin: 0;
    padding: 0;
    padding-left: clamp(240px, 32vw, 520px);
    float: right;
  }

  .BerryBest.right h1 {
    font-size: 40pt;
    text-align: left;
  }

  .BerryBest h1 {
    text-align: left;
  }
}

/* >= 801px : desktop elements back on, mobile-only off */
@media screen and (min-width: 801px) {
  .mobile-youtube {
    display: none !important;
  }
  .mobile-accordion {
    display: none !important;
  }
  
  .nmx-wtb-btn-container {
    margin: 0 !important;
  }
  
  .textquestions {
  margin: 5%; 
}

  .accordion {
    display: block;
    background-image: url("../images/accordion-background.jpg");
    background-repeat: no-repeat;
    border-radius: 50px;
    height: 260px;
    overflow: hidden;
    width: 695px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.25s;
    transition-timing-function: ease-in;
  }

  /* restore your desktop show/hide intent */
  #panel1 {
/*     display: block !important; */
  }
  .accordion1 {
    display: block !important;
  }
  #panel2 {
    display: none !important;
  }
  .accordion2 {
    display: none !important;
  }
}

/* >= 951px : bring back youtube circle on the right (it was hidden <=950) */
@media screen and (min-width: 951px) {
  .youtubeimagelink {
    display: block;
    float: right;
    margin-top: -65px;
  }
  .smallproducts {
    display: block;
  }
}

/* >= 1025px : restore desktop footer layout (undo <=1024 layout) */
@media screen and (min-width: 1025px) {
  .width50 {
    width: 100%;
    padding: 3% 0;
    margin: 0 auto;
  }
  
  .section1 {
    margin-top: 0;
    padding-top: 0;
  }

  .logo.left {
    float: left;
    margin: 0;
    padding-top: 3%;
  }

  .nmx-wtb-menu {
    margin-top: 5% !important;
  }

  .nmxlogo.right {
    padding-top: 3%;
  }

  .vetportal {
    text-align: center;
    width: 80%;
    max-width: 575px;
    margin: 0 auto;
    border-left-color: rgba(0, 0, 0, 0.16);
    border-left-style: solid;
    padding-left: 10%;
    border-left-width: 1px;
    border: none; /* note: your original had border-left, but you also remove border in <=950; keep desktop left-border: */
    border-left: 1px solid rgba(0, 0, 0, 0.16);
  }

  .Contact {
    width: 350px;
    float: left;
    text-align: left;
  }

  .Vetlinks {
    padding-right: 10%;
    text-align: left;
  }

  .Vetlist1 {
    float: left;
  }
  .Vetlist2 {
    float: right;
  }

  .textquestions {
    margin-top: 80px;
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .footerlogo {
    line-height: 200px;
    margin: 0 auto;
    float: right;
    width: auto;
  }

  #flogo {
    width: 80%;
  }
}

/* >= 1171px : undo <=1170 special hero/product adjustments */
@media screen and (min-width: 1171px) {
  /*   .BerryBest {
    width: 46%;
    margin-top: 500px;
    float: left;
    padding-left: 5%;
  } */

  .section2 {
    margin-top: 50px;
    margin: 50px 5%;
  }

  .youtubeimagelink {
    float: right;
    margin-top: -400px;
  }
}

/* >= 1271px : restore <=1270 differences back to default desktop */
@media screen and (min-width: 1271px) {
  .BerryBest {
    width: min(520px, 46%);
    margin-right: 7%;
    margin-top: 0;
    padding-left: clamp(240px, 32vw, 520px);
    float: right;
  }

/*   .youtubeimagelink {
    float: right;
    margin-top: -265px;
    margin-right: 0;
  } */

  .Contact {
    width: 350px;
    float: left;
  }

  .Vetlinks {
    padding-right: 10%;
  }
}

/* >= 1421px : restore section1 background-position behavior */
@media screen and (min-width: 1421px) {
  .section2 .width50 {
    width: 50%;
  }
  .section1 {
    background-position: 0 0;
  }
  .youtubeimagelink {
    margin-top: -265px;
  }
}

/* >= 1581px : revert <=1580 container paddings */
@media screen and (min-width: 1581px) {
  .InsideContainer {
    padding: 0 5%;
  }

  .section3 {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 5%;
  }

  .youtubeimagelink {
    float: right;
    margin-top: -265px;
  }

  .Vetlinks {
    padding-left: 0;
  }
  .footerlogo {
    padding-right: 0;
  }
}