@import url('https://fonts.googleapis.com/css2?family=Cormorant+Upright:wght@300;400;500;600;700&family=Rubik+Wet+Paint&display=swap');

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      --main-bg-color: #e1e2e4;
      --main-text-color: white;
      --main-link-color: #047b91;
      --main-link-hover-color: #c490d1;
      --main-border-color: #ccc;
      --main-border-radius: 0.25rem;
      --main-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      --main-transition: 0.3s;
      --main-font-family: 'OpenDyslexic3', sans-serif;

      --secondary-bg-color: #ebeaea;
      --secondary-text-color: white;
      --secondary-link-color: #7d8cc4;
      --secondary-link-hover-color: #a0d2db;
      --secondary-border-color: #ccc;
      --secondary-border-radius: 0.25rem;
      --secondary-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      --secondary-transition: 0.3s;
      --secondary-font-family: 'OpenDyslexic3', sans-serif;

      --accent-color: #a0d2db;
      --tertiary-color: #ededee;
      --fourth-color: #f0f3f2;

}

/* * {
   font-family: 'OpenDyslexic3', sans-serif;
} */

h1, h2, h3, h4, h5, h6 {
      color: black;
      font-family: "Playfair Display", serif;
}

p, a, li {
      color: black;
      font-family: "Alice", serif;
}


.nav {
      background-color: var(--secondary-bg-color);
      color: black;
      font-family: var(--main-font-family);
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      overflow: hidden; 
      
      width: 100%;
      max-width: 1250px;
      z-index: 100;
      top: 0;
      opacity: .99;
      margin: 0 auto;
      
      
}



.topnav {
      overflow: hidden;

}

.topnav .navicon {
      display: none;
}

nav a {
      color: black;
      text-decoration: none;
      transition: var(--main-transition);
      padding: 3px;
}

nav a:hover {
      color: var(--main-link-color);
}

nav ul {
      display: flex;
      flex-direction: row;
      list-style: none;
      gap: 15px;     
      height: 30px;
}

nav > img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      padding: 0;
}

.navicon {
      width: 30px;
      height: 30px;
}

.topnav {
      overflow: hidden;
}

.topnav .navicon {
      display: none;
}

.spotifylogo {
      width: 30px;
}

.spotifynav {
      margin: 0;  
      padding: 0;
      display: inline;
}

.widget {
      display: none;
      position: fixed;
      top: 65px;
      right: 300px;
      z-index: 100;
      width: 30px;
      height: 30px;
}

.widget > iframe {
      width: 300px;
      height: 500px;
}


.activelink {
      color: var(--main-link-color);
      
      text-decoration: underline;
      
}

.activelink a {
      color: var(--main-link-color);
      
}

section {
      max-width: 1250px;
      margin:0 auto;
      background-color: var(--fourth-color);
    
}
.evensection {
      background-color: var(--fourth-color);
      color: var(--secondary-text-color);
      box-shadow: var(--secondary-box-shadow);
      transition: var(--secondary-transition);
      font-family: var(--secondary-font-family);
      /* min-height: 50vh; */
      padding: 0 2rem;
      padding-bottom: 3rem;
      z-index: 10;
}

.evensection h2 {
      color: black;
      font-size: 2rem;
      text-align: center;
      margin-bottom: 1rem;
      z-index: 10;
      padding-top: 5px;
}

.oddsection {
      background-color: var(--fourth-color);
      color: black;
      box-shadow: var(--main-box-shadow);
      transition: var(--main-transition);
      font-family: var(--main-font-family);
      /* min-height: 50vh; */
      padding: 0;
}

.oddsection h1 {
      color: black;
      font-size: 2.5rem;
      text-align: center;
      margin-bottom: 1rem;
      
}

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

.herologo {
      width: 400px;
      margin: 0 auto;
      display: block;
      border-radius: 5px;
}

.oddsection h2 {
      color: black;
      font-size: 2rem;
      text-align: center;
      margin-bottom: 1rem;
      
      z-index: 10;
}

.section {
      padding: 2rem;
}


.herowrap {
   position: relative;

   z-index: 1;
}

.herotext {
      text-align: center;
      background-color: var(--fourth-color);
      max-width: 80vw;
      margin: 0 auto;
      padding: 20px;
}

.herowrap:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
      width: 100%;
      
   height: 100%;
   opacity: 1;
   background-image: url('starrysky.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   z-index: 1;
}

.hero {
   position: relative;
      height: 100%;
      padding-top: 50px;
      padding-bottom: 35px;
      z-index: 1;
      opacity: 1;
}

.hero h2 {
      width: 800px;
      text-align: center;
      margin: 0 auto;
      font-size: rem;      color: var(--main-text-color);
      text-align: center;
      margin-bottom: 1rem;
}

.hero h3 {
      font-size: 1rem;
      color: var(--main-text-color);
      text-align: center;
      margin-bottom: 1rem;
}

.herocontactcontainer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: row;
      gap: 1rem;

}

.herocontact a {
      color: white;
      text-align: center;
}

.herocontact {
      
}




.btn {
      background-color: var(--main-bg-color);
      color: var(--main-text-color);
      border: none;
      padding: 0.5rem 1rem;
      border-radius: var(--main-border-radius);
      cursor: pointer;
      transition: var(--main-transition);
      text-align: center;
}

.herocontact {
      background-color: var(--main-border-color);
      color: white;
      border: none;
      text-align: center;
      font-size: 1.5rem;
      font-family: var(--main-font-family);
      height: 0px;
      width: 0px;
      cursor: pointer;


}

.meetamie > img {
      width: 300px;
      border-radius: 50%;
      margin: 0 auto;
      display: block;
}

.meetamie {
      padding-bottom: 200px;
      padding-top: 100px;
      padding-inline: 30px;
}

.curve {
      max-width: 1250px;
      margin: 0 auto;
      margin-top: -230px;
      margin-bottom: -20px;
      opacity: 1;
      z-index: 100;
}

/* .curveheader {
      margin-bottom: -160px;
      background-color: var(--main-bg-color);
} */

footer {
      background-color: var(--fourth-color);
      color: var(--main-bg-color);
      font-family: var(--main-font-family);
      padding: 1rem;
      display: flex;
      justify-content: center;
      flex-direction: column;
      gap:1rem;
      max-width: 1250px;
      margin: 0 auto;
}

.footermain {
      display: flex;
      justify-content: space-around;
      flex-direction: row;
      align-items: center;
      gap: 15px;
}

.footeremergency {
      font-family: 'OpenDyslexic3Bold', sans-serif;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 15px;
}

.emergencyimage {
      width: 80%;
}

.footerhighlight {
      text-align: center;
      color: black;
      max-width: 800px;
      margin: 0 auto;
}


.footerconnections {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   gap: 15px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.footerconnections img {
      width: 50px;

}

.footersmall {
      font-size: 0.65rem;
      text-align: center;
}

.footerbutton a {
      background-color: black;
      color: var(--main-text-color);
      border: none;
      padding: 0.5rem 1rem;
      border-radius: var(--main-border-radius);
      cursor: pointer;
      transition: var(--main-transition);
      font-size: 2rem;

}

.footerbutton.btn {
      padding: 0;

}

.bubble {
   width: 400px;
   text-align: center;
   background-color: white;
   border-radius: 15px;

}

.emergencybubble {
      width: 1000px;
      height: 500px;
      text-align: center;
      /* background-color: white; */
    
      border-radius: 500px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
}

.emergencybubble h2 {
      width: 600px;
      
}

.feesection {
      
      padding-top:100px;
      display: flex;
      justify-content: center;
      padding-inline: 40px;
      flex-direction: row;
      gap: 2rem;
      color: black;
}

.feesection  li {
      font-size: 1.5rem;;
}

.feesection p {
      font-size: 1.5rem;
}

.servicestitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url('stripe-pink.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 100px;
      margin: 0 auto;
}

.modalitiestitle {
      display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
      background-image: url('stripe-light-blue.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 100px;
      margin: 0 auto;

}

.abouttitle {
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url('/stripe-light-blue.png');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      height: 250px;
}

.meetamietitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url('stripe-pink.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 100px;
      margin: 0 auto;
}

.professionalinfotitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url('stripe-light-blue.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 100px;
      margin: 0 auto;
}

.faqtitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url('stripe-pink.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 700px;
      height: 200px;
      margin: 0 auto;
}

.feestitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url('stripe-dark-blue.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 100px;
      margin: 0 auto;
}

.feestitle h2 {
      color: white;
}

.insurancetitle h2 {
      color: white;
}     

.insurancetitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url('stripe-purple.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 100px;
      margin: 0 auto;
}

.meetamietitle h2 {
      font-size: 3rem;
}

.resourcestitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url('stripe-pink.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 100px;
      margin: 0 auto;
}

.noticestitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url('stripe-pink.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 100px;
      margin: 0 auto;
}

.contacttitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url('stripe-pink.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 100px;
      margin: 0 auto;
}

.servicesection {
      min-height: 500px;
      padding: 20px;
      
      max-width: 800px;
      width: 90vw;
      margin: 0 auto;
}

.servicesection > ul {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      
}

.servicesection > ul > li {
      text-align: center;
      list-style: none;
      background-color: var(--secondary-bg-color);
      color: var(--secondary-text-color);
      padding: 1rem;
      border-radius: var(--secondary-border-radius);
      box-shadow: var(--secondary-box-shadow);
      transition: var(--secondary-transition);
}

.servicesheadliner {
      max-width: 800px;
      width: 90vw;
      margin: 0 auto;
      padding-inline: 4rem;
      padding-bottom: 20px;
}

.faq {
      padding-block: 25px;
      margin-inline: 2rem;
}

.faqcontainer {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
      padding-bottom: 20px;
      
}

.playlists {
      background-color: white;
}

.playlist {
      width: 600px;
}

.spotify {
      
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 2rem;
      padding-bottom: 200px;

}

.spotify h2 {
      font-size: 3rem;;
}

.contactinfo {
      padding-top: 100px;
      min-height: 500px;
      text-align: center;
}
.contactform {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
      color: black;
      padding-bottom: 100px;
}

.contactform > form {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
}

.contactform > form > input {
      padding: 0.5rem;
      border-radius: var(--main-border-radius);
      border: 1px solid var(--main-border-color);
      font-size: 2rem;
      
}

.formtop {
      font-size: 1.2rem;
}

.formtop input {
      padding: 0.5rem;
            border-radius: var(--main-border-radius);
            border: 1px solid var(--main-border-color);
            font-size: 1.5rem;
}

.radiobuttons label {
      font-size: 1.5rem;
}

.location label {
      font-size: 1.5rem;
}

.location legend {
      font-size: 1.5rem;
}

.contactform > form > textarea {
      padding: 0.5rem;
      border-radius: var(--main-border-radius);
      border: 1px solid var(--main-border-color);
      min-height: 200px;
      min-width: 500px;
}

.contactform > form > button {
      padding: 0.5rem 1rem;
      border-radius: var(--main-border-radius);
      border: 1px solid var(--main-border-color);
      background-color: var(--main-bg-color);
      color: var(--main-text-color);
      cursor: pointer;
      transition: var(--main-transition);
}           

.contactform > form > button:hover {
      background-color: var(--main-link-color);
}

.contactform > form > button:active {
      background-color: var(--main-link-hover-color);
}

.contactform > form > button:focus {
      outline: none;
}

.contactform > form > button:disabled {
      background-color: var(--main-border-color);
      color: var(--main-text-color);
      cursor: not-allowed;
}

.radiobuttons {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 550px;
}

.stars1 {
      width: 50px;
}

.stars2 {
      width: 100px;
      margin-left: 150px;
}

.stars3 {
      width: 150px;
}

.meetings {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: row;
      gap: 1rem;
}

.meetamie p {
      max-width: 800px;
      margin: 0 auto;
}

.amieimg {
      width: 500px;
      border-radius: 50%;
      margin: 0 auto;
      display: block;
}

.staricon {
      width: 25px;
      padding-right: 10px;
}

.starsinsurance {
      width: 80px;
      margin: 20px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
}

ul.serviceslist {
      list-style-type: none;
}

ul.feeslist {
      list-style-type: none;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
      background-color: var(--main-bg-color);
      color: black;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: center;
      border: none;
      outline: none;
      transition: 0.4s;
      font-family: "openDyslexic3", sans-serif;
      font-size: 1.3rem;
      border: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
      background-color: var(--tertiary-color);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
      padding: 6px 18px;
      background-color: white;
      display: none;
      overflow: hidden;
      max-width: 800px;
      text-align: left;
      margin-bottom: 6px;
}

.panel ul {
      list-style-type: none;
}

.accordioncontainer {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      
}

.accordion2 {
      background-color: var(--tertiary-color);
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: center;
      border: none;
      outline: none;
      transition: 0.4s;
      font-family: "openDyslexic3", sans-serif;
      font-size: 1.3rem;
      border: 1px solid var(--main-border-color);
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion2:hover {
      background-color: var(--tertiary-color);
}

/* Style the accordion panel. Note: hidden by default */
.panel2 {
      padding: 0 18px;
      background-color: var(--main-link-hover-color);
      display: none;
      overflow: hidden;
}

.accordioncontainer {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;

}

small.servicesmall {
      color: BLACK;
      text-align: center;
      display: flex;    
      justify-content: center;
}

.about {
      padding-top: 20px;
      padding-inline: 4rem;
      color: black;
      font-size: 1.4rem;
      line-height: 1.3;

}

.amieimg {
      padding-bottom: 20px;
}
.meetamie p {
      font-size: 1.rem;
}
.aboutbuttoncontainer {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
      
      padding-top: 40px;
      z-index: 100;
}

.aboutbutton {
      font-size: 1.5rem;
      background-color: var(--main-border-color);
      background-color: black;
}

.aboutbutton a {

      color: white;
      text-decoration: none;
}

button.aboutbutton:hover {
      background-color: var(--main-link-color);
      cursor: pointer;
}

.contactform > button {
      font-size: 1.5rem;
      cursor: pointer;
}
.contactform {
      padding-bottom: 200px;
}

.goodfaith {
      
      padding: 20px;
      
}

.oddsection h1 {
      font-size: 3.5rem;
      text-align: center;
      margin-bottom: 1rem;
      
}

.disclaimer {
      padding-block: 20px;
      margin: 0 auto;
      
}

.disclaimer h3 {
      font-size: 2rem;
      text-align: center;
      margin-bottom: 1rem;
}

.consumers {
      padding-block: 60px;
      margin: 0 auto;
      max-width: 90%;
}

.consumers p {
      padding-block: 60px;
      font-size: 1.2rem;
      text-align: center;
      margin-bottom: 1rem;
}

.consumers h2 {
      font-size: 2rem;
      text-align: center;
      margin-bottom: 1rem;
}

.consumers h3 {
      font-size: 1.5rem;
      text-align: center;
      margin-bottom: 1rem;
}

.thanks {
      text-align: center;
      padding-block: 100px;
}

.resourcesimage {
      width: 200px;
      margin: 10px auto;
      display: block;
}

.resourcesbooks {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 2rem;
      margin-bottom: 300px;
      padding: 20px;
      /* padding-block: 200px; */

      max-width: 80%;
      margin: 0 auto;
}

.resourcesbooks a {
      color: var(--main-link-color);
      text-decoration: none;

}

.resourcesbooks a:hover {
      color: var(--main-link-hover-color);
}

.resourcesbooks h3 {
      font-size: 2rem;
      text-align: center;
      margin-bottom: 1rem;
}

hr {
      border: 1px solid var(--main-border-color);
      margin: 0 auto;
      width: 80%;
}

.therapistuncensoredimg {
      margin-block: 40px;
      padding: 1rem;
      background-color: white;
      margin: 40px auto 0;
      display: block;
}

.podcasts {
      padding: 20px;
      padding-bottom: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 2rem;
}

.podcasts a {
      color: var(--main-link-color);
      text-decoration: none;
}

.resume {
      
      padding: 20px;
      max-width: 800px;
      margin: 20px auto;
      

}

.formtop {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      gap: 1rem;
}

.form1 {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      flex-direction: column;
      gap: 1rem;

}

.formimage {
      width: 300px;
      margin: 0 auto;
      display: block;
      border-radius: 5px;;
}

.servicestop {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      gap: 2rem;
      
}

.servicestopright img {
      width: 400px;
      border-radius: 5px;
}

.servicestopleft {
      width: 800px;
      
}

.servicestopleft h2 {
      color: black;
}

.servicesection h2 {
      color:  black;
}

.servicesmall small {
      color: black;
}

.servicestop p {
      font-size: 1.2rem;
      text-align: center;
      color: black;
      font-weight: 700;
      padding: 20px;
      margin-bottom: 20px;

}


.ally {
      display: flex;
      justify-content: center;
      align-items: center;
      
      margin: 0 auto;
}

.ally img {
      width: 200px;
      
}


/* Media Queries */
@media (min-width: 1250px) {
}

@media screen and (max-width: 600px) {
      .nav {
            height: 100%;
            display: flex;    
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: row;
            
      }

      .nav a {
            
      }
      
      .topnav a:not(:first-child) {
            display: none;
      }

      .topnav a.navicon {
            float: right;
            display: block;
      }
}

/* The "responsive" class is added to the nav with JavaScript when the user clicks on the icon. This class makes the nav look good on small screens (display the links vertically instead of horizontally) */


@media screen and (max-width: 800px) {
      .faqtitle {
            width: 80vw;
      }

      .faqtitle h2 {
            font-size: 1.2rem;
      }

      .emergencyimage {
            width: 95vw;
      }

      .formtop {
            flex-direction: column;
      }

      .abouttitle h2 {
            font-size: 1.2rem;
      }
}

@media screen and (max-width: 700px) {
      .footerbutton.btn a {
            font-size: 1.2rem;
      }
      .abouttitle h2 {
            font-size: 1.0rem;
      }
      
}

@media screen and (max-width: 600px) {
      .topnav.responsive {
            position: relative;
            
           
      }

      .about {
            padding-inline: 1rem;
      }

      .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            
      }

      .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            
            
      }

      h1 {
            font-size: 2rem;
            line-height: 1.4;
      }

      .hero h2 {
            font-size: 1.1rem;
            max-width: 400px;
            padding: 1rem;
      }

      .servicestop {
            flex-direction: column;
            gap: 1rem;
      }

      .emergencybubble {
            width: 100%;
            height: 100%;
            border-radius: 0;
      }
      .emergencyimage {
            width: 90vw;
            height: 55%;
            
      }

      .footermain {
            flex-direction: column;
            gap: 1rem;
      }
      .feesection {
            flex-direction: column;
            gap: 1rem;
      
      }
      .feesection li {
            padding-block: 10px;
      }

      .playlist {
            width: 90vw;
            max-width: 500px;
            gap: 1rem;
      }

      .formtop {
            flex-direction: column;
            gap: 1rem;
      
      }

      fieldset {
            width: 90vw;
      }
      .radiobuttons {
            width: 90%;
            padding: 1rem;
      }

      textarea#message {
            min-width: 400px;
      }

      .servicestitle {
            width: 350px;
      }

      .modalitiestitle {
            width: 350px;
      }

      .meetamietitle {
            width: 75vw;
            
      }

      .meetamietitle h2 {
            font-size: 2.5rem;
      }

      .amieimg {
            width: 85vw;
      }

      .feestitle {
            width: 80vw;
            
      }

      .insurancetitle {
            width: 80vw;
      }
}

@media screen and (max-width: 550px) {
      .professionalinfotitle {
            width: 80vw;
      }
      .professionalinfotitle h2 {
            font-size: 1.5rem;
      }

      .resourcestitle {
            width: 80vw;
      }

      .resourcestitle h1 {
            font-size: 2rem;;
      }

      .noticestitle {
            width: 80vw;
      }

      .noticestitle h1 {
            font-size: 2rem;
      }
}

@media screen and (max-width: 450px) {
      .meetamietitle h2 {
            font-size: 2rem;
      }

      .form1 > div {
            display: flex;
            flex-direction: column;
      }

      textarea#message  {
            min-width: 300px;
      }
            .herologo {
                  width: 250px;
            }
}

@media screen and (max-width: 350px){
            .hero h1 {
                  font-size: 3rem;
                  line-height: 1.2;
            }

            
      
            .hero h2 {
                  font-size: 1rem;
                  max-width: 300px;
                  padding: 1rem;
            }
      
            .servicestop {
                  flex-direction: column;
                  gap: 1rem;
            }
      
            .emergencybubble {
                  width: 100%;
                  height: 100%;
                  border-radius: 0;
            }
      
            .emergencyimage {
                  width: 90vw;
                  height: 55%;
      
            }
      
            .footermain {
                  flex-direction: column;
                  gap: 1rem;
            }
      
            .feesection {
                  flex-direction: column;
                  gap: 1rem;
      
            }
      
            .feesection li {
                  padding-block: 10px;
            }
      
            .playlist {
                  width: 90vw;
                  max-width: 500px;
                  gap: 1rem;
            }
      
            .formtop {
                  flex-direction: column;
                  gap: 1rem;
      
            }
      
            fieldset {
                  width: 90vw;
            }
      
            .radiobuttons {
                  width: 90%;
                  padding: 1rem;
            }
      
            .contactform>form>textarea {
                  min-width: 280px;
            }

            .footeremergency {
                  font-size: 0.75rem;
                  width: 280px;
                  margin: 0 auto;
            }     
            .bubble {
                  width: 280px;
            
            }

            .amieimg {
                  width: 200px;
            }

            .form1 input {
                 width: 85vw;
            }

            .professionalinfotitle h2 {
                  font-size: 1.2rem;
            }
            
            textarea#message {
                  min-width: 85vw;
            }
}

@media screen and (min-width: 600px) {
      .navicon {
            display: none;
      }

      .topnav a {
            display: inline;
      }

      nav {
            justify-content: space-between;
      }
      
}