/* Aligns the heading text to the center. */

h1 {
    text-align: center;
  } 
  
  /* Sets the width for the accordion. Sets the margin to 90px on the top and bottom and auto to the left and right */
.accordion-body{
    margin-top: 100px;
}  


.navigate_section{
    margin: 90px auto;
}

#navigateHeader{
  display: none;
}
#navigateBtn{
  padding: 20px;
  background-color:#27548A ;
  color: #fff;
  margin-left: 350px;
  margin-top: 170px;
  margin-bottom: 170px;
  border-radius: 5px;
  width: max-content;
}
.blink_me{
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#coming_soon_header{
  padding: 20px;
  color: #213448;
  margin-left: 350px;
  margin-top: 170px;
  margin-bottom: 170px;
  border-radius: 5px;
  width: max-content;
}

#navigateBtn:hover {
   background-color: #213448 ;
}

  .accordion {
    width: 800px;
    margin: 90px auto;
    color: black;
    background-color: white;
    padding: 45px 45px;
  }

  .accordion .container {
    position: relative;
    margin: 10px 10px;
  }
  
  /* Positions the labels relative to the .container. Adds padding to the top and bottom and increases font size. Also makes its cursor a pointer */
  
  .accordion .label {
    position: relative;
    padding: 10px 0;
    font-size: 24px;
    color: black;
    cursor: pointer;
  }

  /* Positions the plus sign 5px from the right. Centers it using the transform property. */

.accordion .label::before {
    content: '+';
    color: black;
    position: absolute;
    top: 50%;
    right: -5px;
    font-size: 24px;
    transform: translateY(-50%);
  }
  
  /* Hides the content (height: 0), decreases font size, justifies text and adds transition */
  
  .accordion .content {
    position: relative;
    background: white;
    height: 0;
    font-size: 16px;
    text-align: justify;
    width: 780px;
    overflow: hidden;
    transition: 0.5s;
  }
  
  /* Adds a horizontal line between the contents */
  
  .accordion hr {
    width: 100;
    margin-left: 0;
    border: 1px solid grey;
  }

  /* Unhides the content part when active. Sets the height */

.accordion .container.active .content {
    height: 90px;
  }
  
  

  
  /* Changes from plus sign to negative sign once active */
  
  .accordion .container.active .label::before {
    content: '-';
    font-size: 30px;
  }
  
  
 @media (max-width: 1200px) {
    #navigateBtn{
      margin-left: 180px;
     }
  }
  
 @media only screen and (max-width: 1024px) {
    #coming_soon_header{
      margin-left: 180px;
    }
}  

 @media only screen and (max-width: 1180px) {
    #coming_soon_header{
      margin-left: 180px;
    }
  }


  @media (max-width: 992px) {


    .accordion .container.active .content{
      width: auto;
      height: 240px;
    }

    #navigateBtn{
    margin-left: 55px;
   }
  }
  
   @media only screen and (max-width: 932px) and (min-width: 740px){
  #navigateBtn{
    margin-left: 135px;
   }

   #navigateHeader{
    display: block;
    margin-left: 110px;
  }
  #coming_soon_header{
    margin-left: 110px;
  }
 }
  
  

  @media (max-width: 767px){

    .accordion{
        width: auto;
    }
    .accordion .label {
        font-size: 16px;
      }

      .accordion .content {
        font-size: 14px;
        text-align: justify;
        width: 200px;
        overflow: hidden;
      }  

      #navigateHeader{
        display: block;
        margin-left: 20px;
      }

      #coming_soon_header{
        margin-left: 20px;
      } 
  }
  
    @media only screen and (max-width: 360px){
      #navigateHeader{
        display: block;
        margin-left: 60px;
      }
  }