/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@400;500;700;800;900&family=Roboto:wght@400;500;700&display=swap");

body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.2px;
  word-spacing: 0px;
  word-wrap: break-word;
  background: var(--color-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Arima Madurai", cursive;
  color: var(--color-black);
}

h1 {
  font-size: 54px;
  line-height: 66px;
}

h2 {
  font-size: 48px;
  line-height: 60px;
}

h3 {
  font-size: 32px;
  line-height: 44px;
}

h4 {
  font-size: 24px;
  line-height: 36px;
}

h5 {
  font-size: 20px;
  line-height: 30px;
}

h6 {
  font-size: 18px;
  line-height: 28px;
}

    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0; 
      border-radius: 0; 
    } 
    
.navbar-nav>li>a {
  padding-top: 30px !important;
}

.navbar-brand>img {
  margin-top: -9px !important;
}
        
    h1 {
      font-family: "Arima Madurai", cursive;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
h1 {
  font-size: 32px;
  line-height: 44px;
}

h2 {
  font-size: 24px;
  line-height: 36px;
}

h3 {
  font-size: 20px;
  line-height: 30px;
}

h4 {
  font-size: 18px;
  line-height: 28px;
}
      
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .sidenav.hide-mobile {
        visibility: hidden;
        display: none;
      }
      .row.content {height:auto;} 
    }