* {
 margin: 0;
 padding: 0px;
 box-sizing: border-box;
     
     /* border:1px solid red; */
     }
     h3 {
 font-family:'Montserrat', 'Arial Black', sans-serif, Helvetica;
 font-weight: 400 500;
     }
     
     h4 {
 font-family:'Montserrat', 'Arial Black', sans-serif, Helvetica;
 font-weight: 400 500;
     }
     
     p {
 font-family:'Montserrat', 'Arial Black', sans-serif, Helvetica;
 font-weight:  400 500;
     }
     
     li {
 font-family:'Montserrat', 'Arial Black', sans-serif, Helvetica;
 font-weight: 400 500;
 text-align: left;
     }
     .main-column-container {
 max-width: 1540px;
 margin: 0 auto;
 padding: 0px 0px 0px 0px;
     }
     .nav{
 display: flex;
     }
     .nav-Ksa{
 display: flex;
 justify-content: flex-end;
     }
     .logo{
 padding: 10px 30px 0px 0px;
     }

     .nav, .dog, .cat, .about, .contact, .where {
 gap: 40px;
 align-content: center; 
 font-size: 13px;
 font-family:'Montserrat', 'Arial Black', sans-serif, Helvetica;
 font-weight: 400 500 700;
     }
     .nav img {
 max-width: 50px;
 align-items: center;
 margin-right: auto;
     }
     .nav .dog {
 margin-left: auto;
     }
     .nav:first-child {
 margin-left: auto;
     }
     .header-img-container {
 position: relative;
 text-align: center;
 margin: 0 auto;
 max-width: 1540px;
     }
     .headerMaxWidth-container {
 display: flex;
 margin: 0 auto;
 max-width: 1540px;
     }
     .header-img-container img{ /* centering an image https://www.w3schools.com/css/css3_image_center.asp */
 width: 100%;
 display: flex;
 justify-content: center;
 max-width: 1540px;
 display: block;
 margin: 0 auto;
     }
     
     .top-left-logo { /* text+logo over image: https://www.w3schools.com/howto/howto_css_image_text.asp */
 position: absolute;
 padding-bottom: 5%;
 left: 10%;
 width: 19%;
 max-width: 227px;
 min-width: 150px;
     }
     .bottom-left-txt {
 position: absolute;
 bottom: 10%;
 left: 10%;
 text-shadow: 0 0.3em 0.3em #33363b; margin: 0px 0 0px;
     }
     .bottom-left-txt-Ksa {
 text-shadow: 0 0.3em 0.3em #33363b; margin: 0px 0 0px;
 position: absolute;
 bottom: 10%;
 right: 5%;
      }
     .bottom-left-txt p {
 color: #ffffff;
 font-size: calc(36px + 6 * ((100vw - 320px) / 680)); /* variable font size w max-width https://www.w3schools.com/howto/howto_css_responsive_text.asp*/
 line-height: calc(40px + 6 * ((100vw - 320px) / 680));
     
     /* font-size: 3vw; /* variable font size w max-width https://www.w3schools.com/howto/howto_css_responsive_text.asp*/
     /* line-height: 3.2vw;  */
 text-align: left;
 font-weight: bold;
     }
    .bottom-left-txt-Ksa p {
 color: #ffffff;
 font-size: calc(36px + 6 * ((100vw - 320px) / 680)); /* variable font size w max-width https://www.w3schools.com/howto/howto_css_responsive_text.asp*/
 line-height: calc(40px + 6 * ((100vw - 320px) / 680));

 /* font-size: 3vw; /* variable font size w max-width https://www.w3schools.com/howto/howto_css_responsive_text.asp*/
 /* line-height: 3.2vw;  */
 text-align: right;
 font-weight: bold;
                }
     .bottom-center-logo {
 position: absolute;
 bottom: -25%;
 left: 53%;
 width: 15%;
 max-width: 180px;
     }

     .bottom-center-logo-IL {
  position: absolute;
  bottom: -25%;
  left: 45%;
  width: 15%;
  max-width: 180px;
     }
     
     .main-content { 
 width: 95%;
 text-align: center;
 margin: 0 auto;
 max-width: 1540px;
 padding-top: 70px;
     }
     
     .txt-body-one {
 width: 100%;
 text-align: center;
 margin: 0 auto;
     }
     
     .txt-body-one h4{
 width: 100%;
 text-align: center;
 padding-top: 60px;
     }
     
     .txt-body-one p {
 padding-top: 5px;
 width: 60%;
 text-align: center;
 margin: 0 auto;
     }
     
     .activ-biome-benefit { 
 max-width: 1000px;
 margin: 0 auto;
     }
     
     .activ-biome-benefit h3 {
 padding-top: 40px;
 text-align: center;
     }
     
     .activ-biome-benefit p {
 text-align: center;
     }
     
     
     .col-section-center, .h3, .p {
 padding-top: 40px;
 text-align: center; 
 background-color: #f6f7f7;
     }
     
     .col-section-center p {
 text-align: center;
     }
     
     .col-center-fullwidth {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: center;
 display: block;
 margin: 0 auto;
 text-align: center;
 background-image: linear-gradient(to top, #e9ebeb, white);
 padding: 10px 0px 30px 0px;
     }
     .col-center-fullwidth img {
 width: 100%;
 height: auto;
 max-width: 1187px;
 padding: 40px;
     
     }
     .activBiome-flexContainer { /* flex 1x3 https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_responsive2 */
 display: flex;
 flex-wrap: wrap;
 text-align: center;
 padding-top: 20px;
 margin: 0 auto;
 max-width: 1300px;
 gap: 20px; 
     }
     .flex-item-left, .flex-item-center, .flex-item-right  {
 padding: 10px;
 flex: 25%;
 background-color: #f6f7f7;
 margin: 0 auto;
 max-width: 400px;
     }
     .oneByTwo-layout-flex {
 display: flex;
 flex-wrap: wrap;
 text-align: center;
 padding-top: 30px;
 margin: 0 auto;
 max-width: 1300px;
 gap: 20px; 
     }
     
     .activBiome-flexContainer H3, p, img{
 padding: 0px 0px 5px 0px;
 text-align: center;
 margin: 0 auto;
     }
     .activBiome-flexContainer img {
 padding-top: 30px; 
     }
     .activBiome-flexContainer p {
 padding: 30px 0px 20px 0px;
 font-weight: bold; 
     }
     .gutter-container {
 width: 80%;
 text-align: center;
 margin: 0 auto;
 max-width: 1091px;
     }
     
     .one-by-two_flexbox {
 display: flex;
 flex-direction: row;
 text-align: center;
 padding-top: 30px;
 margin: 0 auto;
 max-width: 1300px;
 padding: 30px 0px;
     
     }
     
     .one-by-two_flexbox, .second {
     
     }
     
     .col-left-flex {
 padding: 10px;
 flex: 60%;
 max-width: 700px;
 text-align: center;
     
     }
     
     .col-right-flex {
 padding: 10px;
 flex: 60%;
 max-width: 700px;
     }
     
     .col-right-flex h3, p, li {
 padding: 20px 0px 0px 0px;
 line-height: 25px;
 text-align: left;
     }
     
     .col-right-flex h3 {
 font-weight: bold; 
     }
     
     .col-left-flex img {
 width: 100%;
 height: auto;
 max-width: 540px;
     }
     
     .col-right-flex li {
 list-style: none !important;
 line-height: 24px;
 padding: 5px 0px; 
 text-align: left;
     }
     
     .line-break-border {
 border-bottom: 3px solid #f6f7f7;
     }
     
     .center-restricted-width {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: center;
 display: block;
 margin: 0 auto;
 text-align: center;
 padding: 30px 0px 30px 0px;
 background-color: #f6f7f7;
 max-width: 1330px;
     }
     
     .col-section-center.second {
 width: 100%;
 max-width: 1091px;
 margin: 0 auto;
 & p {
  padding-bottom: 40px;
 }
 & img {
  max-width: ;
 }
     }
     
 .col-section-center.third {
 padding: 40px 0px 0px 0px;
 background-color: #ffffff;
  & p {
  width: 90%;
  padding-bottom: 40px;
 }
 & img {
  padding-bottom: 50px;
 }
 }
 .nl-img {
 max-width: 1034px !important;
 }

 .col-section-center img {
 max-width: 1091px;
 width: 100%;
 display: flex;
     }

  .col-section-center-Ksa img {
 max-width: 700px;
 width: 100%;
 display: flex;
 padding: 40px 0px 0px 0px;
                }
     
     .flex-col, .last {
 background-color: #0054a4;
 padding: 20px 0px 0px 0px;
 color: #ffffff;
 & h3 {
  color: #ffffff;
 }
     }
     
     /* https://www.youtube.com/watch?v=3T0gjtXRNC0 */
     .grid-container-1 {
 display: grid;
 grid-template-columns: 
 repeat(auto-fit, minmax(300px, 1fr));
 justify-content: center;
 padding-top: 20px;
     }
     .card-colum {
 padding: 2em;
 margin: 10px;
 background-color: #f6f7f7;
 text-align: center;
     }
     .child-flex {
 display: flex;
 align-items: center;
 flex-direction: column;
     }
     .child-flex-one {
 display: flex;
 flex-direction: column;
 align-items: center;
     }
     
     footer {
 background-color: #0054a4;
 color: #ffffff;
 font-family:'Montserrat', 'Arial Black', sans-serif, Helvetica;
 font-weight: 400 500 700;
 padding: 20px 0px 0px 0px;
 text-decoration: none;
 margin: 0 auto;
 text-align: center;
 & img {
  padding: 0px 0px 40px 0px;
 }
 & p {
  width: 86%;
  font-size: 13px;
 }
 & a:hover {
  text-decoration: underline;
 }
     }
     .foot-flex-parent {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-items: center;
 color: #ffffff;
 justify-content: center;
 
     }
     footer p {
 margin: 0 auto;
 justify-content: center;
 text-align: center;
 padding: 30px 0px 70px 0px;
     }
     
     .foot-1 {
 padding: 5px 0px;
 & a {
  margin: 10px;
  color: #ffffff;
  text-decoration: none;
  border-right: 1px solid #4d88bf;
  padding: 0px 10px 0px 0px;
  font-size: 14px;
 }
     }
     
     .spacer{
 padding: 20px 0px;
     }
     
     
     /* ==========================================================================
      Media query Responsive layout 1130px
     ============================================================================= */
     @media (max-width: 1130px) {
     .main-content { 
 text-align: center;
 margin: 0 auto;
 padding-top: 45px;
 }
     .one-by-two_flexbox {
  flex-direction: column;
  flex: 100%;
 
 }
     .one-by-two_flexbox.second {
  flex-direction: column-reverse; /* https://www.youtube.com/watch?v=lyvbZJ12DmE */
  flex: 100%;
 }
     
     .col-left-flex, .col-right-flex {
  width: 100%;
  margin: 0 auto;
 }
 .bottom-left-txt p {
  font-size: 3vw;
  line-height: 3.4vw;;
 }
 .gutter-container {
  width: 97%;
 }
 
 }
     
     /* ==========================================================================
      Media query Responsive layout 900px
     ============================================================================= */
     @media (max-width: 900px) {
 .flex-item-left, .flex-item-center, .flex-item-right {
   flex: 100%;
 }
     
 .left {
  display: flex;
  flex-direction: row;
  text-align: left;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 20px 80px 20px 20px;
  & p {
   text-align: left;
  }
 }
 .txt-body-one p {
  width: 90%;
 }
 }
     
     @media (max-width: 650px) {
     .card-colum {
 padding: .5em;
 margin: 3px;
     }
     
     .child-flex {
 flex-direction: row;
 text-align: left;
 justify-content: center;
 align-items: center;
 height: auto;
  & img {
   max-width: 150px;
  }
  & h3 { 
   padding-bottom: 20px;
  }
  }
     
     .child-flex-one{
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 width: 75%;
 & h3 {
  width: 100%;
  height: 30px;
  text-align: left;
  padding: 5px 0px 5px 15px;
  align-items: flex-start;
 }
 & p {
  width: 100%;
  text-align: left;
  align-items: flex-start;
  padding: 0px 0px 5px 15px;
 }
     }
     .feature-img{
 content:url("https://image.info.hillspetnutrition.com/lib/fe2d11717064057f771d79/m/1/004c9137-2fec-40cf-b209-c0eaa7e272eb.jpg");
 }
     .main-content { 
 text-align: center;
 margin: 0 auto;
 padding-top: 20px;
 }
     .top-left-logo {
  position: absolute;
  padding-bottom: 5%;
  left: 1%;
  width: 19%;
  max-width: 227px;
  min-width: 130px;
  display: none;
 }
     .logo {
 content:url("https://image.info.hillspetnutrition.com/lib/fe2d11717064057f771d79/m/1/c9b5519c-6a28-49a4-8d16-16af343fbe49.png");
 max-width: 100px;
 height: auto;
 padding: 0px 0px 0px 0px;
 }
     .bottom-left-txt p {
  color: #ffffff;
  font-size: 19px;
  line-height: 22px;
  }
     .bottom-center-logo {
 min-width: 90px;
 left: 48%;
 bottom: -20%;
  }
     
 }
     
     
     /* ==========================================================================
      Media query Responsive layout 500px
     ============================================================================= */
     
 @media (max-width: 550px) {
     .bottom-left-txt {
 position: absolute;
 bottom: 10%;
 left: 5%;
 }
     .child-flex img {
 max-width: 80px;
 }
     }