body {
    Padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background-image: url(images/bg-grey.png);    
}

/*-----------------------------------------    global      --------------------------------------*/
.container {
    width: 90%; 
    margin: auto;
    overflow: hidden;
    height: 80%;
}

/* positions running man logo the left top corner */
.logo img {
    float: left;
    padding: 10px;
    width: 240px;
    height: 115px;
    position: absolute;
    top: -9px;
    left: -19px;
}


/* references the background that the navigation resides at */
header {
    background: #2C3D55;   
    padding-top: 30px;
    padding-bottom: 27px;
    min-height: 60px;
    border-bottom: white 1px solid;  
    width: 100%; 
}

/*targets the  Navigation menu */
header a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;

}

header nav ul {
    position: absolute;
    right: 55px;
}

/* targets the navigation menu hover and the current navigation page that is opened. */
ul .current a {
    font-weight: bold;    
}

#hero {
    background-color: #2C3D55;
    height: 570px;
}

#main-col {
    float:left;
    width: 40%;
    margin: 0 0 0 160px;
    color: #ffffff;  
    font-size: 40px;
    font-style: italic;
}

/*-----------------------  hamurger menu properties ----------------------------*/
/* hides hamburger menu components on large screens */
.sidebar {
    visibility: hidden;
}

#hamburgermenu {
    margin: 0;
    height: 0;    
}

@media all and (max-width: 1115px) {

    nav, #hero-image img {
        visibility: hidden;
    }  

    #home p,
    .icon-section,
    .contact-button
     {
        display: none;
    }

    #home img {
        margin: 1% 0 0 11%;
    }

     #main-col {
        font-size: 1.5rem;
        text-align: center;
    }  
    
    
        /* * -----------------------------------   HAMBURGER MENU BEGINS  --------------------------------*/    
        .sidebar {
            visibility: visible;
            position: fixed;
            top: 5px;
            right: -200px;
            background: #2C3D55;
            width: 250px;
            height: 100%;
            transition: .3s;
            z-index: 3;
            margin-right: -50px;
        }
    
        /* .pro {
            background: url(./images/selfimg.png);
            background-size: cover;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: auto;
        } */
    
        h2 {
            text-align: center;
            font-size: 1rem;
            color: #fff;
        }
    
        .sidebar ul {
            margin: 0;
            padding: 20px 0;
        }
    
        .sidebar li {
            list-style: none;
        }
    
        .sidebar a {
            padding: 10px 20px;
            color: #fff;
            display: block;
            text-decoration: none;
            border-bottom: 1px solid rgba(0, 0, 0.2);
            font-size: 15px;
        }
    
        .sidebar a:hover {
            background: #7CAE7A;
        }
    
        .sidebar-Btn {
            position: absolute;
            top: 10px;
            left: -95px;
            width: 50px;
            height: 50px;
            box-sizing: border-box;
            cursor: pointer;
            background: none;
            border: none;
            outline: none;
        }
    
        .sidebar-Btn span {
            display: block;
            width: 35px;
            height: 5px;
            background: #7CAE7A;
            position: absolute;
            top: 24px;
            transition: .3s;
        }
    
        .sidebar-Btn span:before {
            content: '';
            width: 100%;
            height: 5px;
            background: #7CAE7A;
            position: absolute;
            top: -10px;
            right: 0;
            transform: .3s;
        }
    
        .sidebar-Btn span:after {
            content: '';
            width: 100%;
            height: 5px;
            background:#7CAE7A;
            position: absolute;
            top: 10px;
            right: 0;
            transform: .3s;
        }
    
        .active {
            right: 50px;
        }
    
        .sidebar-Btn.toggle span {
            background: transparent;
        }
    
        .sidebar-Btn.toggle span:before {
            top: 0;
            transform: rotate(-45deg);
        }
    
        .sidebar-Btn.toggle span:after {
            top: 0;
            transform: rotate(45deg);
        }
    }
    
/*----------------hamburger menu ends ----------------------------*/ 

/* =========================
   HERO – base section
   ========================= */
#hero {
  background: #223245;      /* theme background */
  color: #e9eef7;
}

/* We use grid **areas** so we can make CTA span both columns cleanly */
#hero .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: 1fr 480px;     /* text | image */
  grid-template-areas:
    "main  media"   /* headline left, image right */
    "cta   cta";    /* CTA spans both columns → lets us center it perfectly */
  align-items: center;
  gap: 48px;
}

/* Map your blocks to areas */
#main-col   { grid-area: main; }
#hero-image { grid-area: media; }
.banner-btn { grid-area: cta;   }

/* =========================
   LEFT COLUMN – headline
   ========================= */
#main-col .hero-title {
  margin: 0 0 16px;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(2rem, 4.5vw, 4rem); /* 32px → 64px responsive */
}
#main-col .hero-title span { display: block; }

#main-col p {
  margin: 12px 0 0;
  max-width: 60ch;
  color: #cfd8e6;
}

/* =========================
   CTA BUTTON – dead-center across hero, uppercase, smooth hover fade
   ========================= */
.banner-btn {
  /* Because this row spans both columns, we can center the button perfectly */
  justify-self: center;         /* centers in the full-width "cta" row */
  text-align: center;
  width: 100%;                  /* provides a consistent centering context */
  margin-top: 4px;              /* fine-tune vertical spacing under the headline */
}

.banner-btn a {
  display: inline-block;
  text-transform: uppercase;    /* GET IN TOUCH */
  letter-spacing: 0.6px;
  font-weight: 700;

  background: transparent;
  color: #e9eef7;
  border: 2px solid #e9eef7;
  padding: 12px 26px;
  border-radius: 6px;
  text-decoration: none;

  /* Slow, smooth fade to white on hover */
  transition: 
    background-color 700ms ease,
    color 700ms ease,
    border-color 700ms ease,
    transform 120ms ease-out;
}

.banner-btn a:hover {
  background: #ffffff;
  color: #223245;
  border-color: #ffffff;
}

.banner-btn a:active { transform: translateY(1px); }

.banner-btn a:focus-visible {
  outline: 3px solid #9bd1ff;   /* accessible focus ring */
  outline-offset: 2px;
}

/* =========================
   RIGHT COLUMN – image (80% width) + subtle motion
   ========================= */
#hero-image {
  position: relative;
  display: grid;                 /* center its child easily */
  place-items: center;           /* centers the .herocolumnimage box */
  overflow: visible;
}

#hero-image .herocolumnimage {
  width: 80%;                    /* your requested 80% */
  max-width: 100%;
  margin: 0 auto;                /* center it in the column */
}

#hero-image .herocolumnimage img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;

  /* Smooth, subtle left↔right motion (GPU-friendly) on wide screens */
  animation: heroImageSlide 2s ease-in-out .2s infinite alternate;
  will-change: transform;
}

#hero-image .herocolumnimage img:hover {
 filter: brightness(1.5); /* Slightly brighten the image */
}

/* Transform-based keyframes for smoothness and performance */
@keyframes heroImageSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(clamp(10px, 2.2vw, 28px)); }
}

/* =========================
   WIDE screens (>1440px) – optional tuning
   ========================= */
@media (min-width: 1441px) {
  #hero .container {
    max-width: 1320px;
    grid-template-columns: 1fr 520px;
    gap: 56px;
  }
}

/* =========================
   Keep TWO-COLUMN layout
   1440px → 1000px
   ========================= */
@media (max-width: 1200px) {
  #hero .container {
    grid-template-columns: 1fr 420px; /* gently reduce image column width */
    gap: 40px;
  }
}

/* =========================
   Stack neatly at and below 1000px
   Order: headline → image → button
   Center everything
   ========================= */
@media (max-width: 1115px) {
  #hero .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "media"
      "cta";
    gap: 28px;
    padding: 56px 20px;

    justify-items: center;       /* center child blocks horizontally */
    text-align: center;          /* center text for stacked view */
  }

  /* Ensure blocks use full row width when stacked */
  #main-col,
  #hero-image,
  .banner-btn { width: 100%; }

  #main-col p,
  #main-col .hero-title { margin-left: auto; margin-right: auto; }

  /* Keep the image at 80% of the row and centered when stacked */
  #hero-image .herocolumnimage { width: 80%; margin: 0 auto; }

  /* Disable image motion on stacked/mobile to keep layout stable */
  #hero-image .herocolumnimage img {
    animation: none;
    transform: none;
  }

  /* Strong centering for CTA when stacked */
  .banner-btn {
    
justify-self: center;  /* dead center in that full-width row */
    text-align: center;
    width: 100%;   
  }

  .banner-btn a { padding: 14px 28px; } /* larger tap target */
}

/* =========================
   Accessibility: Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
  #hero-image .herocolumnimage img {
    animation: none !important;
    transform: none !important;
  }
  .banner-btn a {
    transition: none;
  }
}

header a:hover {
    color: hsl(0, 0%, 100%);
    font-weight: bold;
    transition: 0.2s;
}

header li {
    display: inline-block;
    padding: 0 20px 0 20px;
}


#bottombanner img{
    width: 100%;
    height: 140px;     
}

/* TODO Add a video clip when Gabrielle has it prepared */
/* .chiroVideo {
    position: absolute;
    left: 20%;
    top: 67%;
} */
 

 /* .chiroVideo video {  */
    /* width: 100%; makes it responsive to container */
    /* max-width: 800px; limits it to 800px */
    /* height: 350px; */
   
   /* height: auto; /* keeps the aspect ratio */

    /* position: absolute; */
    /* left: 30%; */
    /* top: 67%; */
  /* } */

/* ---------------------------ABOUT ----------------------------- */
#about {
    margin: 0 0 2% 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-size: 70px 70px;
    background-position: center center;
}

.highlight {
    font-weight: bold;
}

#columnone {
    float:left;
    width: 15%;
    margin: 2% 0 0 17%;   
}

#columnone img {
    width: 80%;
    border-radius: 50%;
    margin: 45px 0 0 45px;
}

#columntwo {
    float: right;
    width: 25%;
    margin: 65px 40% 20px 10px;
}

#columntwo #titleone{
    font-size: 60px;
    color: #2C3D55;
    font-family: "Merriweather", serif;  
    text-transform: uppercase;
    font-weight:normal;
} 

#columntwo #findtitle {
    font-size: 60px;
    color: #2C3D55;
    font-family: "Merriweather", serif;  
    text-transform: uppercase;
    font-weight:normal;
    width: 730px;
} 

  #columntwo #titletwo{
    position: relative;
    text-decoration: none;
    font-size: 31px;
    font-family: "Open Sans", sans-serif;
    margin: -60px 0 0 0;
    color: #7CAE7A;
    text-transform: uppercase;
    transition: font-style 0.3s ease;
} 

#columntwo #articleOneTitle {
    font-size: 50px;
    color: #2C3D55;
    font-family: "Merriweather", serif;  
    text-transform: uppercase;
    font-weight:normal;
}

#columntwo #titletwo::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color:#2C3D55;
    transition: width 1s ease;
}   

#columntwo #titletwo:hover::after{
    width: 100%;   
    font-style: italic;   
} 

/* Makes text italic when hovered over */
#columntwo #titletwo:hover{   
    font-style: italic;   
} 

#vertical-line img {
    position: relative;
    top: 120px;
    left: 35px;
}

.rootgluteline1 img {
position: relative;
    top: 97px;
    left: 30px;
}

#horizontal-line img {
    position: relative;
    top: 0;
    left: 45px;
    width: 100%;
}

.rootgluteline2 img {
    position: relative;
    top: 0;
    left: 45px;
    width: 100%;
}

.aboutparagraph p {
    margin: 1rem auto ;
    width: 50%;
    font-size: 1.2rem;
    line-height: 1.77778em;
    color: #2C3D55;
}

#about-two {
    margin: 0 0 1% 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-image: url(images/bg-grey.png);
    background-size: 70px 70px;
    background-position: center center;
}

#columnone {
    float:left;
    width: 15%;
    margin: 2% 0 0 17%;   
}
#columnthree img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    margin: 25% 0 0 155%;   
}

#columnfour {
    float: right;
}

#columnfour h3 {
    position: relative;
    top: 35px;
    left: -79%;
     font-size: 50px;
     color: #2C3D55;
     font-family: "Merriweather", serif;  
     text-transform: uppercase;
     font-weight:normal;
 }

 #titlethree{
    font-size: 31px;
    font-family: "Open Sans", sans-serif;
    color: #7CAE7A;
    text-transform: uppercase;
    margin: -10px 0 0 -78%;
} 

 #titlethree:hover {
    color: #7CAE7A;
    font-style: italic;
    transition: 0.2s;
} 

#vertical-line2 img {
    margin: 4% 0 0 22%;
    height: 97px;
}

#horizontal-line2 img {
    margin: 5% 0 0 0;
    width: 90%;
}

/*--------------------------------------------------      Services Prooperties     -----------------------------------------------*/
#service-section {
    width: 100%;
    padding: 70px 0;
    background-size: 70px 70px;
    background-position: center center;
}

#service-section h4 {
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 30px;
    color: black;
}

.service-container {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
}

.single-service {
    flex-basis: 48%;
    text-align: center;
    border-radius: 7px;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
}

.single-service img {    
    width: 100%;
    border-radius: 7px;
    height: 535px;
}

/* adds the dark cyan over the images */
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    border-radius: 7px;
    cursor: pointer;
    background: linear-gradient(rgba(0,0,0,0.5), #2C3D55);
    opacity: 0;
    transition: 1s;
}

/* creates dark cyan when hovered over images */
.single-service:hover .overlay  {
    opacity: 1;
    
}

.service-details {
    width: 80%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    opacity: 0;
    transition: 1s;
}

hr {
    background: #fff;
    height: 2px;
    border: 0;
    margin: 15px auto;
    width: 60%;    
}

.service-details p {
    font-size: 20px;
}

.single-service:hover .service-details {
    bottom: 40%;
    opacity: 1;
}

/*----------------------------  Disclaimer ------------------------------*/

#disclaimer {
    width: 100%;
    height: auto;
    font-size: 16px;
    background-color: #233144;
    background-image: url(images/bg-blueline.png);
    background-size: calc(793px / 3) calc(785px / 3);
    background-position: center center;
    color: #fff;
    padding: 4.25em 0;
}



#disclaimertext {
    float: left;
    width: 45%;
    border:4px solid white;
    color: white;   
}

#disclaimertext h1 {
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 1.5rem;
}

#disclaimertext p {
    font-size: 1.2rem;
    padding: 10px;
}


#connectwithus {
    float: right;
    width: 45%;
    border: 4px solid white;
    color: white;
}

#connectwithus h1 {
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 1.5rem;
}

#connectwithus p {
    font-size: 1.2rem;
    padding: 10px;
}



/*----------------------------------------- Latest Articles Section ----------------------------*/

#articlebanner img{   
    width: 100%;
    height: 140px;   
}

#latestarticles {
    margin: 0 0 2% 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-size: 70px 70px;
    background-position: center center;

}

#articleColumnOne img {
    width: 12%;
    border-radius: 50%;
    margin: 8% 0 0 0;
}

#columntwo {
    float: right;
    width: 25%;
    margin: 65px 40% 20px 10px;
}

#columntwo #titleone{
    font-size: 60px;
    color: #2C3D55;
    font-family: "Merriweather", serif;  
    text-transform: uppercase;
    font-weight:normal;
} 

#columntwo #findtitle {
    font-size: 60px;
    color: #2C3D55;
    font-family: "Merriweather", serif;  
    text-transform: uppercase;
    font-weight:normal;
    width: 730px;
} 

#articleonetitle {
    margin: 2% 0 0 4%;
    color: #2C3D55;
    font-size: 3rem;
    font-family: "Merriweather",serif;
}

#article2title {
    margin: 2% 0 0 4%;
    color: #2C3D55;
    font-size: 3rem;
    font-family: "Merriweather",serif;
}

#article2title2 {
    margin: 25px 0 0 70px;
    color: #2C3D55;
    font-size: 1.6rem;
    font-family: "Merriweather",serif;
    text-decoration: underline;
}

#latestarticles p {
float: left;
width: 52%;
padding: 5px;
font-family: "Open Sans", sans-serif;
font-size: 1.2em;
line-height: 1.77778em;
color: #2C3D55;
margin: 20px 0 0 70px;
}

#article1image img {
    float: right;
    width: 31%;
    height: 350px;
    margin: 20px 110px 0 0;
}

#article2content {
width: 80%;
padding: 5px;
font-family: "Open Sans", sans-serif;
font-size: 1.3em;
line-height: 1.77778em;
color: #2C3D55;
margin: auto auto;
}

#article2content2 {
float: left;
width: 52%;
padding: 5px;
font-family: "Open Sans", sans-serif;
font-size: 1.2em;
line-height: 1.77778em;
color: #2C3D55;
margin: 20px 0 0 70px;
}

#article2image img {
    float: right;
    width: 31%;
    height: 370px;
    margin: -30px 110px 0 0;
}

#latestarticle3 {
    margin: 40px 0 20px 0;
}

#article3title {
margin: 20px auto;
text-align: center;
width: 50%;
font-family: "Open Sans", sans-serif;
font-size: 1.7rem;
line-height: 1.77778em;
color: #2C3D55;
}

#article3content {
float: left;
width: 50%;
padding: 5px;
font-family: "Open Sans", sans-serif;
font-size: 1.2em;
line-height: 1.77778em;
color: #2C3D55;
margin: 20px 0 0 70px;
}

#article3image img {
    float: right;
    width: 30%;
    height: 370px;
    margin: 20px 110px 0 0;
    padding: 5px 0 10px 0;
}

#article4title {
    margin: 3% 0 0 4%;
    color: #2C3D55;
    font-size: 3rem;
    font-family: "Merriweather",serif;
}

#article4content {
width: 80%;
padding: 5px;
font-family: "Open Sans", sans-serif;
font-size: 1.3em;
line-height: 1.77778em;
color: #2C3D55;
margin: auto auto;
}

#article4title2 {
    margin: 25px 0 0 70px;
    color: #2C3D55;
    font-size: 1.6rem;
    font-family: "Merriweather",serif;
    text-decoration: underline;
}

#article4content2 {
    float: left;
    width: 50%;
    padding: 5px;
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
    line-height: 1.77778em;
    color: #2C3D55;
    margin: 20px 0 0 70px;
}

#article4image img {
    float: right;
    width: 30%;
    height: 370px;
    margin: -30px 110px 0 0;
    padding: 5px 0 10px 0;
    display: block;
}

#article5title {
    margin: 6% 0 0 4%;
    color: #2C3D55;
    font-size: 3rem;
    font-family: "Merriweather",serif;
}

#article5content {
width: 80%;
padding: 5px;
font-family: "Open Sans", sans-serif;
font-size: 1.3em;
line-height: 1.77778em;
color: #2C3D55;
margin: auto auto;
}

#article5title2 {
    margin: 25px 0 0 70px;
    color: #2C3D55;
    font-size: 1.6rem;
    font-family: "Merriweather",serif;
    text-decoration: underline;
}

#article5content2 {
    float: left;
    width: 40%;
    padding: 5px;
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
    line-height: 1.77778em;
    color: #2C3D55;
    margin: 20px 0 0 70px;
}

#article5image img {
    float: right;
    width: 45%;
    height: 370px;
    margin: -30px 110px 0 0;
    padding: 5px 0 10px 0;
}

#article6title {
    margin: 6% 0 0 0;
    text-align: center;
    color: #2C3D55;
    font-size: 3rem;
    font-family: "Merriweather",serif;
}

#latestarticle6 .article6box {
    float: left;
    width: 30%;
    text-align: center;
    padding: 20px;  
    height: 45%;
}

.article6box p {
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
    line-height: 1.77778em;
    color: #2C3D55;
    height: 45%;
}

.article6box img {
    border-radius: 50%;
}

.articlesbutton {
    margin: 20px auto;
    text-align: center;


}

.rootglutetitle1 {
font-size: 42px; 
width: 850px; 
font-weight: bold;
 margin-top: 7%;
 color:  #2C3D55;

}


#horizontal-line {
    width: 80%;
}

.btnMoreArticles {
  display: inline-block;
  padding: 10px 45px;
  /* margin: 0 auto; */
  /* text-align: center; */
  background-color: #7CAE7A;   
  color: white;
  text-decoration: none;       /* Remove underline */
  border: none;
  border-radius: 4px;
  font-size: 18px;
  font-weight: bold;

  cursor: pointer;
  transition: background-color 0.3s ease;  
}

.btnMoreArticles:hover {
background-color:  #2C3D55;
}
/* ---------------------------  First Article ------------------------- */

#latestarticle7 {
    padding: 50px 0;
}

#article7box1 {
    width: 47%;
    height: 288px;
    margin: 0 auto;
    font-size: 16px;
    background-color: #2C3D55;
    /* background-image: url(images/bg-blueline.png); */
    background-size: calc(793px / 3) calc(785px / 3);
    background-position: center center;
    color: #fff;
    padding: 1rem 1rem;
    display: block;
    text-decoration: none;

}
#article7box1:hover {
    filter: brightness(1.5);     /* Slightly brighten the image */
    transition: transform 0.5s ease, filter 0.5s ease;    /* Smooth transition */
}

#article7box1 #imgPainTriggers {
    position: relative;
    top: -15px;
    left: -15px;
    float: left;
    width: 32%;
    height: 315px;
}

#article7title {
    width: 52%;   
    margin: -1% 0  0 48%;
    font-family: "Merriweather", serif;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1.2em;
    padding: 0 0 -15px 0;
    cursor: pointer;
}


#article7box1 #lineArticleTitle {
    background-color:#2C3D55; 
    margin:  0 0 0 16%; 
    width: 44%;
}

#article7content {
    width: 45%;
    font-size: 16px;
    font-family: "Open Sans",sans-serif;
    float: right;
    margin: 0 7% 0 0;   
    padding-top: 18px;
}

/*-------------------------- Root Glutes Page Article ----------------------------*/

#latestarticle8, #mucusLatestArticle {
    padding: 0 0 10px 0;
}

#article8title, #article8title2, #article8title3, 
#article8title4, #article8title5, #mucusArticleTitle
 {
    font-size: 42px;
    color: #2C3D55;
    text-align: center;   
    font-weight: bold;
    unicode-bidi: isolate;
}

#article8content, #article8content2, #article8content4,
 #article8content5, #mucusArticleContent {
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
    line-height: 1.77778em;
    color: #2C3D55;
    width: 70%;
    margin: 0 auto;
}

#article8content3 {
    width: 45%;
    margin: 0 0 0 15%;
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
    line-height: 1.77778em;
    color: #2C3D55;
    padding: 0 8% 0 0;
    height: auto;
    float: left;
}

#article8image img {
    height: 250px;
}

#mucusArticleTitle2 {
     font-size: 32px;
    color: #2C3D55;
    text-align:left;
    width: 70%;
    margin-left: 15%;    
    font-weight: bold;
}



/* --------------------------- Mucus Production Article ---------------------------------*/

#latestarticle9 {
    padding: 50px 0;
}

#article9box1 {
    width: 47%;
    height: 288px;
    margin: 0 auto;
    font-size: 16px;
    background-color: #2C3D55;
    background-size: calc(793px / 3) calc(785px / 3);
    background-position: center center;
    color: #fff;
    padding: 1rem 1rem;
    display: block;
    text-decoration: none;

}
#article9box1:hover {
    filter: brightness(1.5);     /* Slightly brighten the image */
    transition: transform 0.5s ease, filter 0.5s ease;    /* Smooth transition */
}

#article9box1 #imgMucusProduction {
    position: relative;
    top: -15px;
    left: -15px;
    float: left;
    width: 32%;
    height: 315px;
}

#article9title {
    width: 52%;    
    margin: -1% 0  0 48%;
    font-family: "Merriweather", serif;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1.2em;
    padding: 0 0 -15px 0;
    cursor: pointer;
}


#article9box1 #lineArticleTitle {
    background-color:#2C3D55; 
    margin:  0 0 0 16%; 
    width: 44%;
}

#article9content {
    width: 45%;
    font-size: 16px;
    font-family: "Open Sans",sans-serif;
    float: right;
    margin: 0 7% 0 0;   
    padding-top: 18px;
}

.flex-container {
  display: flex;
  align-items: center; /* vertically center items */
  gap: 20px; /* space between image and text */
}

.flexbox-item-1 {
  width: 50%;
 min-height: 200px;
     font-family: "Open Sans", sans-serif;
    font-size: 1.125em;
    line-height: 1.77778em;
    color: #2C3D55;
    margin-left: 15%;
}

.flexbox-item-2 {
  height: auto;
}



.mucusContainer2 {
    float: left;
    width: 85%;
    padding: 10px;
}

.mucusSubTitle, .mucusSubTitle2 {
    color: #0ba6c2;
    margin: 7% 0 0 15%;
}

.mucusArticleContent1 {
    font-family: "Open Sans", sans-serif;
    font-size: 1.2rem;
    line-height: 1.77778em;
    color: #2C3D55;
    margin: 0 auto;
    width: 70%;
}

.mucusArticleContent2 {
    font-family: "Open Sans", sans-serif;
    font-size: 1.125em;
    line-height: 1.77778em;
    color: #2C3D55;
    margin: 0 auto;
    width: 70%;
}

.mucusQuestion {
    font-weight: bold;
}

/* --------------------------- Why Sports Questions ---------------------------------*/

#latestarticle10 {
    padding: 50px 0;
}

#article10box1 {
    width: 47%;
    height: 288px;
    margin: 0 auto;
    font-size: 16px;
    background-color: #2C3D55;
    background-size: calc(793px / 3) calc(785px / 3);
    background-position: center center;
    color: #fff;
    padding: 1rem 1rem;
    display: block;
    text-decoration: none;

}
#article10box1:hover {
    filter: brightness(1.5);     /* Slightly brighten the image */
    transition: transform 0.5s ease, filter 0.5s ease;    /* Smooth transition */
}

#article10box1 #imgWhySports {
    position: relative;
    top: -15px;
    left: -15px;
    float: left;
    width: 32%;
    height: 315px;
}

#article10title {
    width: 52%;    
    margin: -1% 0  0 48%;
    font-family: "Merriweather", serif;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1.2em;
    padding: 0 0 -15px 0;
    cursor: pointer;
}


#article10box1 #lineArticleTitle {
    background-color:#2C3D55; 
    margin:  0 0 0 16%; 
    width: 44%;
}

#article10content {
    width: 45%;
    font-size: 16px;
    font-family: "Open Sans",sans-serif;
    float: right;
    margin: 0 7% 0 0;   
    padding-top: 18px;
}




/*---------------------------------- End of Latest articles    ------------------------
 ---------------------------------------------------------------------------------------- */

/*---------------------------------- Social Proof --------------------------------------- */
#socialproof {
    margin: 0 0 2% 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-size: 70px 70px;
    background-position: center center;
    height: 550px;

}

#socialproof h1{
    text-align: center;
}


/*----------------------------------------------- Contact Section   ------------------------------------------ */

#contactplaybook {
    margin: 0 0 2% 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-size: 70px 70px;
    background-position: center center;
}

/*   ----------------------------------------------- Reach Us Page(Form)   -------------------------------------------------------- */
#reachus-section {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 50px 0;
}

#reachus-section::before {
    width: 100%;
    padding: 50px 0;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgba(0,0,0,0.5),#2C3D55), url(images/contactusimage.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100%;
    opacity: 0.9;
    z-index: -1;
}

 /*------ -----------------------form properties ------------------------------- */
form {
    background-color: #2C3D55;
    border-radius: 8px;
}

#reachus-section h1 {
    color: #7CAE7A;
    padding-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-left: 47%;    
}

#reachus-section h1::after {
    content:'';
    width: 50px;
    height: 35px;
    background: linear-gradient(#7CAE7A,#fff);
    position: absolute;
    top: -20px;
    left: 0;
    z-index: -1;
    transform: rotate(10deg);
    border-top-left-radius: 35px;
    border-bottom-right-radius: 35px;
}

#reachus-section p {
    max-width: 550px;
    margin: 0 auto;
    padding-bottom: 15px;
    color: #ccc;
    font-weight: bold;
    font-size: 15px;
}

.chiroplaybook {
    width: 800px;
    margin:  0 auto;
    padding: 1rem;
}

label {
    color: white;
}

input {
    width: 100%;
    margin-bottom: 15px;
    height: 20px;
}

textarea {
    width: 100%;
    min-height: 100px;
    max-height: 300px;
}

.btnSend {
    display: block;
    color: white;
    background-color: #7CAE7A;
    padding: 8px 110px;
    margin: 20px 0 0 20px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border-radius: 12px;
}

.btnSend:hover {
    background-color: #2C3D55;
}

/*----------------------------------------------------- end of the form    -------------------------------------------- */



/*-----------------------------------------------   Footer section   ------------------------------------------ */

#footer-section {
    padding: 40px 0 40px 0;
    background: #7CAE7A;
}


.footerbox {
    float: left;
    width: 25%;
    text-align: center;
}

#footerbasicinfo {
    margin-right: -150%;
}


.footerbox iframe {
    width: 135%;
    height: 500px;
    margin-left: 90px;
}


.footerbox img {
    width: 20%;
    border-radius: 50%;
    margin: -45px 0 0 0;
   
}

#footer-titleone {
    color: white;
    font-family:'Times New Roman', Times, serif;
    font-size: 4rem;
    margin: -120px 0 0 0;
}

#footer-titletwo {   
    font-family:'Times New Roman', Times, serif;
    font-size: 2.5rem;
    color: white; 
    letter-spacing: 10px;
    margin: -35px 0 0 0;

}

#footeraddressone {
color: white;
font-size: 1.5rem;
font-family: "Open Sans", sans-serif;

}

#footeraddresstwo {
    color: white;
    font-size: 1.5rem;
    font-family: "Open Sans", sans-serif;    
    margin-top: -32px;
 }

#footerphoneno {    
    color: white;
    font-size: 1.5rem;
    font-family: "Open Sans", sans-serif;
    margin: -5px 0 0 0;
}

#footeremail {
   
    color: white;
    font-size: 1.5rem;
    font-family: "Open Sans", sans-serif;

} 

#footeremail a {
    color: white;
    text-decoration: none;
    transition: color 0.5s ease, text-decoration 0.5s ease;
}

  #footeremail a:hover {
    color: #2C3D55;
    text-decoration: underline;
  }

.icon-section {   
    float: right;
    margin: -3% 17% 0 0;
    padding-top: 10px;
}

.icon-section a {
    font-size: 2rem;
    color: white;
    padding: 0 5px;
}

.icon-section a:hover {
    color: #2C3D55
}

#footeropenhours {
    color: white;
    font-size: 2rem;
    text-decoration: underline;
}

.footerbox p {
    color: white;
    font-size: 1.3rem;    
}

#designer {
    margin: 10px auto;
    text-align: center;
    color: white;
    font-size: 1.2rem;
}

#designertwo {
    margin-top: -25px;
}


/*  ---------------------------------------------     MEDIA QUERIES  ----------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------*/

@media(max-width: 768px) {

    .service-details, .overlay, .single-service:hover, .single-service  {
        display: block;
        color: #ccc;
        transition: none;
        background: none;
        pointer-events: none;
        transform: none;
        opacity: none;
        all: unset;
    }

    .single-service {    
        width: 100%;
        border-radius: 7px;
        height: 420px;
    }

.single-service img {
    opacity: 0.4;
    width: 100%;
    height: 100%;
}

    .single-service .service-details h3 {
    margin: -300px 0 0 25px;
    color: #000;
    text-align: center;
    overflow: hidden;
    }
    

    .single-service .service-details p {
        margin: auto auto;
        font-weight: 800;
        color: #000;
        display: block;
       font-size: 1.3rem;
        text-align: center; 
        padding: 5px;             
    }


 header a,   ul.current a, #hero,
#main-col, #hero-image, .herocolumnimage img,
header li, .banner-btn, .banner-btn a, #about, #columnone,
#columnone img , #columntwo, #columntwo #titleone, .aboutparagraph p,

#columntwo #articleOneTitle, #latestarticles p, 
#article2content, #article2content2, #article2image img, #latestarticle3 p,
 #article4content, #article4content2, 
#article5content2, .icon-section, #designer
 {
        list-style: none;
        float: none;
        text-align: center;
        overflow: hidden;
        width: 100%;     
    }

       .banner-btn {
        display: none;
    }


    #article8box1, #article8content, 
    #article8content2, #article8content3, 
    #article8content4, #article8content5,
    #mucusArticlebox, #mucusArticleContent
    {
        list-style: none;
        float: none;
        text-align: center;
        overflow: hidden;
        width: 100%;  
        display: block;
        margin: auto; 
    }

     #latestarticle8, #mucusLatestArticle {
        margin: -7% auto 0 auto;
     }

     #article8title, #article8title2, #article8title3,
      #article8title4, #article8title5, #mucusArticleTitle,
      #mucusArticleTitle2 {
        list-style: none;
        float: none;
        font-size: 26px;
        text-align: center;
        overflow: hidden;
        width: 100%;  
        margin: 0 auto;
        display: block;
     }

     #article8image img {
        display: block;
        margin: auto; 
     }   

    header nav ul {
        margin-top: 40%;
    }

    #horizontal-line {
        margin: -15px 0 0 0;
    }

    .logo img {
        height: 28%;
        width: 102%;
        margin: auto auto;
    }

     #articleonetitle,
     #article5title, #article6title, #article2title {
        font-size: 30px;
        text-align: center;
        display: block;
        width: 100%;       
    }

    #columntwo #findtitle {
        font-size: 25px;
        padding: 0 0 10px 0;
        text-align: center;
        display: block;
        width: 100%;       
    }

    #article2content, #article2content2, #latestarticle3 #article3content,
    #article4content2, #article5content2, .article6box p  {
        text-align: center;
        display: block;
        width: 88%;
        margin: auto auto;
        padding: 0 5px;
       }

    #about-two #findtitle {
        margin: 0 0 10% 0;
    }

    #columntwo #titletwo {
        font-size: 25px;
        text-align: center;
        display: block;
        width: 100%;
    }

    #latestarticle3 h2, #article4title {
        font-size: 25px;
        width: 100%;
        text-align: center;
    }

    #article1image img, #article2image img, #article3image img, #article4image img,
    #article5image img {
        margin: 10px auto;
        width: 90%;
        display: block;
    }

     #columnone, #vertical-line, .article6box img  {
        display: none;
    }
    
    #main-col {
        font-size: 1.5rem;
        margin: 50% auto 0 auto;
        width: 100%;
    }


    #latestarticles p {
        width: 100%;
        text-align: center;
        display: block;
        margin: 0 auto;
    }

    .single-service {
        flex-basis: 100%;
        margin-bottom: 30px;
        overflow: hidden;
        display: block;
        list-style: none;
    }

    .service-details p {
        font-size: 12px;
        flex-basis: 100%;
        margin-bottom: 30px;
        overflow: hidden;
        display: block;
        list-style: none;
    }

#disclaimer, #disclaimertext, #disclaimertext h1,
#disclaimertext p, #connectwithus {
flex-basis: 100%;
overflow: hidden;
list-style: none;
float: none;
text-align: center;
width: 100%;
height: 50%;
border: none;
}


    #latestarticle6 .article6box {
        margin-bottom: -30px;
        list-style: none;
        float: none;
        text-align: center;
        overflow: hidden;
        width: 100%;
    }

    #footer-section .footerbox {
        list-style: none;
        float: none;
        text-align: center;
        overflow: hidden;
        width: 100%;
    }

    #footerbasicinfo {
        margin: 30px 0 0 0;
    }

    #footerbasicinfo img {
        padding: 0 0 20px 0;
    }

   #reachus-section p,
    .chiroplaybook,  .footerbox iframe {
        margin: auto auto;
    }

    .chiroplaybook{
        width: 85%;
    }

    .chiroVideo {
    display: none;
    }
}

@media(min-width: 768px) and (max-width: 1440px) {

    .navbar {
        display: block;
        margin: 205px 0 0 0;
       
    }

    .service-details, .overlay, .single-service:hover, .single-service  {
        display: block;
        color: #ccc;
        transition: none;
        background: none;
        pointer-events: none;
        transform: none;
        opacity: none;
        all: unset;
    }

    .single-service {    
        width: 100%;
        border-radius: 7px;
        height: 420px;
    }

.single-service img {
    opacity: 0.4;
    width: 100%;
    height: 100%;
}

    .single-service .service-details h3 {
    margin: -250px 0 0 25px;
    color: #000;
    text-align: center;
    overflow: hidden;
    }
    

    .single-service .service-details p {
        margin: auto auto;
        font-weight: 800;
        color: #000;
        display: block;
       font-size: 1.5rem;
        text-align: center;              
    }


    header a, #reachus-section,
  #about, #columnone, .aboutparagraph p,
#columnone img , #columntwo, #columntwo #titleone,
#columntwo #articleOneTitle, 
#article2content, #article2content2, #latestarticle3 p,
#article4content, #article4content2,
#article5content2, .icon-section, #designer
 {
        list-style: none;
        float: none;
        text-align: center;
        overflow: hidden;
        width: 100%;
    }
    
    .logo img {
        width: 100%;
        height: 28%;
    }

    header nav ul {
        list-style: none;
        float: none;
        text-align: center;
        overflow: hidden;
        width: 85%;
        text-align: center;
        background-color: #2C3D55;  
        margin: 170px 0 0 0;   
    }

     #main-col {
        font-size: 1.5rem;
        margin: 20% auto 0 auto;
        width: 100%;
        display: block;
    }

    #columnone, #vertical-line, .article6box img {
        display: none;
    }

    #columntwo #findtitle {
        margin: 0 0 5% 4%;
        font-size: 2.5rem;
        width: 100%;
    }

    #columntwo #titletwo {
        font-size: 30px;
    }

    #articleonetitle,
    #article5title, #article6title, #article2title
  {
       font-size: 35px;
       text-align: center;
       margin-top: 15px;
       display: block;
   }  



   #article2content, #article2content2, #article3content,
   #article5content2, #article8content3 {
    text-align: center;
    display: block;
    width: 88%;
    margin: auto auto;
    padding: 5px;  
 }

 .article6box p {
    padding-bottom: 10px;
   }
   
   #article1image img,   #article2image img,
   #article3image img,   #article4image img {
       width: 45%;
       height: 455px;
       margin: 10px 27% 0 0;
       display: block;
   }

   #article5image img {
       width: 75%;
       height: 455px;
       margin: 10px 125px 0 0;
       display: block;
   }

   #article8image img {
    margin: 2%  0 2% 40%;
   }
     
      #article8title4  {
        list-style: none;
        float: none;
        font-size: 32px;
        text-align: center;
        overflow: hidden;
        width: 100%;  
        margin: 0 auto;
        display: block;
     }
   
   #latestarticles p {
    width: 100%;
    text-align: center;
    display: block;
    margin: 0 auto;
}

   .single-service {
    flex-basis: 100%;
    margin-bottom: 30px;
    overflow: hidden;
}

#disclaimer, #disclaimertext, #disclaimertext h1,
#disclaimertext p, #connectwithus {
flex-basis: 100%;
overflow: hidden;
list-style: none;
float: none;
text-align: center;
width: 100%;
height: 50%;
border: none;
}

#latestarticle6 .article6box {
    margin-bottom: -50px;
    list-style: none;
    float: none;
    text-align: center;
    overflow: hidden;
    width: 90%;
}

#article4content2 {
        width: 90%;
}

 #latestarticle8, #mucusLatestArticle {
        margin: -7% auto 0 auto;
     }

     .rootgluteline1 img {
    visibility: hidden;
}

#reachus-section h1,  #reachus-section p,
.chiroplaybook,  .footerbox iframe {
    margin: auto auto;
}

.chiroplaybook{
    width: 85%;
}

#footer-section .footerbox {
    list-style: none;
    float: none;
    text-align: center;
    overflow: hidden;
    width: 100%;
}

#footerbasicinfo {
    margin: 20px 0 0 0;
}

    .chiroVideo {
        display: none;
    }
    
}


/* Section was created for article listings to enable readability on small screens.*/
@media(min-width: 0) and (max-width: 715px) { 
     .chiroarticles7, .chiroarticles9, .chiroarticles10 {
       background: #2C3D55;
     }

     #article7box1, #article9box1, #article10box1 {
        margin-bottom: 155px;
     }     
     
    }


@media(min-width: 0) and (max-width: 1000px) { 

    .articleElementOne {
        margin-top: -1px;
        margin-bottom: 30px;
    }

    .articleElementThree {
        margin-top: -27px;
    }  

     #latestarticle7, #latestarticle9, #latestarticle10 {
        padding-top: 10px;       
     }

     .chiroarticles7, .chiroarticles9, .chiroarticles10 {
       background: #2C3D55;
     }


      #article7title, #article9title, #article10title {
        margin: 0 auto;
        width: 100%;
      }

      #article7box1 #lineArticleTitle,  #article9box1 #lineArticleTitle,
      #article10box1 #lineArticleTitle  {
        margin: 0 auto;
        width: 100%;
      }

     #article7box1, #article9box1, #article10box1{
    width: 100%;
    max-width: 100%;
    padding: 2% 9% 18% 2%;

     }

      #article7box1 #imgPainTriggers, #article9box1 #imgMucusProduction,
      #article10box1 #imgWhySports {
        width: 90%;
        margin-left: 4%;
        padding-right: 10px;
      }

      #article7title, #article9title, #article10title {
        text-align: center;
        width: 95%;
            display: block;

      }

      #article7box1 #lineArticleTitle,  #article9box1 #lineArticleTitle,
      #article10box1 #lineArticleTitle {
        width: 90%;
        display: block;
        margin: 0 auto;
      }

#article7content, #article9content, #article10content {
    width: 92%;
    overflow: hidden;
    display: block;  
}

     .rootglutetitle1 {
    width: 100%;
    list-style: none;
    float: none;
    font-size: 30px;
    overflow: hidden;
    margin: 55px auto 40px auto;
}

.rootgluteline2 img {
    width: 100%;
    position: relative;
    top: -110px;
    left: 0; 
}

.rootgluteline1 img {
    visibility: hidden;
}

     #latestarticle8, #mucusLatestArticle {
        margin: -7% auto 0 auto;
     }

     #articlelistings {
     margin: 40px 0 0 0;
     }

        #main-col {
        font-size: 1rem;
        text-align: center;
    }
}


@media(min-width: 1001px) and (max-width: 1299px) {

    .logo img {
        width: 100%;
        height: 28%;
    }

   #article7box1 #imgPainTriggers, #article9box1 #imgMucusProduction,
   #article10box1 #imgWhySports {
    position: relative;
    top: -15px;
    left: -15px;
    float: left;
    width: 32%;
}

#article7title, #article9title, #article10title {
    width: 52%;
    margin-left: 39%;
    margin-top: -1%;
    font-family: "Merriweather", serif;
    font-weight: 600;
    font-size: 1em;
    line-height: 1.2em;
    cursor: pointer;
}

#article7box1 #lineArticleTitle, #article9box1 #lineArticleTitle,
#article10box1 #lineArticleTitle {
    margin: 0 0 0 8%;
}


#article7content, #article9content, #article10content {
    width: 52%;
    font-family: "Open Sans",sans-serif;
    float: right;
    font-size: 14px;
    margin: 0 7% 0 0;   
}

     #main-col {
        font-size: 1.5rem;
        margin: 25% auto 0 auto;
        text-align: center;
    }  
    
.rootglutetitle1 {
    width: 800px;
    list-style: none;
    float: none;
    font-size: 30px;
    overflow: hidden;
    margin: 55px auto 40px auto;
}

.rootgluteline2 img {
    margin: -9% auto 0 auto;
    width: 100%;
        position: relative;
    top: -110px;
    left: 0; 
}

     #latestarticle8, #mucusLatestArticle {
        margin: -7% auto 0 auto;
     }

     .rootgluteline1 img {
    visibility: hidden;
}
}

@media(min-width: 1300px) and (max-width: 1495px) {

    nav {
     list-style: none;
        float: none;
        text-align: center;
        overflow: hidden;
        width: 100%;     
}

#article7title, #article9title, #article10title {
    width: 52%;
    margin-left: 48%;
    margin-top: -1%;
    font-family: "Merriweather", serif;
    font-weight: 600;
    font-size: 1em;
    line-height: 1.2em;
    cursor: pointer;
}

#article7content, #article9content, #article10content {
    width: 45%;
    font-family: "Open Sans",sans-serif;
    float: right;
    margin: 2% 7% 0 0;   
}

.rootglutetitle1 {
width: 800px;
  list-style: none;
        float: none;
        font-size: 30px;
                overflow: hidden;
                margin: 55px auto 40px auto;
}

.rootglutetitle2 {
    width: 110%;
margin: 0 auto;
}


.rootgluteline2 img {
    visibility: hidden;
}

     #latestarticle8, #mucusLatestArticle {
        margin: -7% auto 0 auto;
     }

           #article8title4 {
        list-style: none;
        float: none;
        font-size: 36px;
        text-align: center;
        overflow: hidden;
        width: 100%;  
        margin: 0 auto;
        display: block;
     } 
    }

@media(min-width: 1496px) and (max-width: 1600px) {

#article7title, #article9title, #article10title {
    width: 52%;
    margin-left: 48%;
    margin-top: -1%;
    font-family: "Merriweather", serif;
    font-weight: 600;
    font-size: 1.2em;
    line-height: 1.2em;
    cursor: pointer;
}

#article7content, #article9content, #article10content {
    width: 45%;
    font-family: "Open Sans",sans-serif;
    float: right;
    margin: 2% 7% 0 0;   
}

.rootglutetitle2 {
    width: 450px;
}

      #article8title4 {
        list-style: none;
        float: none;
        font-size: 36px;
        text-align: center;
        overflow: hidden;
        width: 100%;  
        margin: 0 auto;
        display: block;
     }


}

@media(min-width: 1501px) and (max-width: 1650px) {

      .about-img img {
        margin-top: -28%;
    }

        #article8title4 {
        list-style: none;
        float: none;
        font-size: 36px;
        text-align: center;
        overflow: hidden;
        width: 100%;  
        margin: 0 auto;
        display: block;
     }
}

@media(min-width: 1651px) and (max-width: 1840px) {
          #article8title4 {
        list-style: none;
        float: none;
        font-size: 36px;
        text-align: center;
        overflow: hidden;
        width: 100%;  
        margin: 0 auto;
        display: block;
     }
}

@media(min-width: 0px) and (max-width: 970px) {

.flex-container {
  display: flex;
  align-items: center; /* vertically center items */
  gap: 20px; /* space between image and text */
  flex-wrap: wrap;
}

.flexbox-item-1 {
    width: 80%;
}

.flexbox-item-2 {
    width: 55%;
    margin: auto;
}
}

@media(min-width: 0px) and (max-width: 550px) {
.flex-container {
  display: flex;
  align-items: center; /* vertically center items */
  gap: 20px; /* space between image and text */
  flex-wrap: wrap;
}

.flexbox-item-1 {
    width: 80%;
      margin: auto;
}

.flexbox-item-2 {
    margin: auto;
    width: 85%;
}

.mucusSubTitle {
   margin: auto;
   padding-top: 10px;
}

#mucusArticleTitle2 {
    font-size: 22px;
    margin-top: 15px;
}
}