@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
/* Sets the background color of the body to blue. Sets font to Rubik */

body {
  background-color: #eff3f8;
  /* background-image: url('India-Maps-Background.png'); */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: 'Rajdhani', sans-serif;
}
/* .overlay{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background: rgba(0,0,0,0.7);

} */
/* Aligns the heading text to the center. */
 
h1 {
  text-align: left;
}

p {
    margin: 0!important;
}

/* Sets the width for the accordion. Sets the margin to 90px on the top and bottom and auto to the left and right */
.container h1, .zone h4{ 
    font-weight: 700;
    color:#fbb71c;
}
.accordion {
  /* width: 800px; */
  /* margin: 90px auto; */
  color: black;
  /* background-color: #eff3f8; */
  padding: 5px;
  text-align: left;
}

.accordion .state {
    position: relative;
    margin: 5px 5px;
    border-left: 5px solid #fbb71c;
    border-right: 5px solid #fbb71c;
    border-bottom: 0.5px solid #f6faff47;
    border-radius: 9px;
    background-color: white;
    margin-bottom: 14px;
    box-shadow: 0px 24px 27px -20px #cbc6b9;
}
  
  /* 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: 12px 21px;
    font-size: 18px;
    font-weight: 600;
    color: black;
    cursor: pointer;
    border-radius: 18px;
}

  /* 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: 14px;
    font-size: 25px;
    transform: translateY(-50%);
  }
  
  .city{
      font-size: 14px;
      font-weight: 700;
  }
  /* Hides the content (height: 0), decreases font size, justifies text and adds transition */
  
  .accordion .content {
    position: relative;
    background: #eff3f8;
    height: 0;
    font-size: 14px;
    font-weight: 500;
    /* text-align: justify; */
    /* width: 780px; */
    overflow: scroll;
    transition: 0.5s;
    padding: 0 5px;
}

  /* Adds a horizontal line between the contents */
  
  .accordion hr {
    width: 100;
    margin-left: 0;
    border: 1px solid #fbb71c;
  }

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

.accordion .state.active .content {
    /* height: 150px; */
    display: contents;
  }
  
  /* Changes from plus sign to negative sign once active */
  
  .accordion .state.active .label::before {
    content: '-';
    font-size: 30px;
  }

  .card {
      margin: 21px;
      border: 1px solid #fbb71c;
  }

  .card-header {
    background-color:#fbb71c;
  }

  .card-body {
      /* border: 1px solid #fbb71c; */
  }

.columns {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: flex-start;
}