body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.headline-content img{
  height: 100% ;
}


.headline-content{  
    height: 100px ;
    display: flex ;
    background-color: black;
    color: white ; 
}
.logo{
  justify-self: left;
  height:100% ;
  width: auto ;
}

.headline{
  padding-left: 100px ;
  justify-content: center;
  align-items: center;
  margin: 0 ;
  
}


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


.container-head{
  display: flex ;
  justify-content: space-around ;
  flex-direction: row ;
  
}

.prev, .next{
  background-color: #a02121;
  font-weight: #34269f;
  align-items: center;
  border: 0px ;
}

.middle-heading{

  font-weight: 500;

}

.index-container{
    height: auto  ;

}

.index-container img{
  height: auto  ;
  
}

.footer{
    height: 50px ;
    background: linear-gradient( rgb(130, 3, 3),rgb(0, 0, 0));
    color: #E8D8C4
}

.nav-bar{
    background-color:rgb(228, 146, 22);
}
.raga-box{
    text-align: center;
    margin: 1% ;
    display: grid ;
}


.body-container {
    display: flex;
    flex-direction: column;
    height: 200vh;
    background-color:#f2f2f2;
}

.nav-bar {
    background-color: #f2f2f2;
    padding: 10px;
    border-bottom: 1px solid #a02121;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

.row {
    display: flex;
    justify-content: space-between;
}

.col {
    flex: 1;
    text-align: center;
}

.col a {
    text-decoration: none;
    color: #34269f;
    padding: 2px;
    display: block;
}

.display-body {
    display: flex;
    overflow:hidden ;
}

iframe {
    width: 100%;
    height: 600vh;
    border: none;
    display: none ;
    
}

iframe.active {
    display: block;
}

li{
    list-style-type: none;
}


table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-color: white ;

  }

  th, td {
    border: 1px solid #17c9433d;
    padding: 8px;
    text-align: center;
    }

    .bold-text {
      font-weight: bold;
      color: rgb(16, 3, 132)
    }

    th {
      background-color: #f2f2f2;
    }

    .laghu1{
      background-color: #64ed69;
    }

    .laghu2{
      background-color: #9af29d;
    }

    .laghu3{
      background-color: #bcf6be;
    }

    .laghu4{
      background-color: #defbdf;
    }

    .drutha1_1{
      background-color: #efa61ff4;
    }

    .drutha1_2{
      background-color: #efd29cf4;
    }

    .drutha2_1{
      background-color: #7ec4f9;
    }

    .drutha2_2{
      background-color: #bee1fc;
    } 

    .composition-container{
      display: grid ;
      gap: 1fr 1fr 1fr 1fr ; 
     
    }

    

    .composition-container>.composition-intro{

      grid-column-start: 1 ;
      grid-column-end: 3 ;
      grid-row-start: 1 ;
      grid-row-end : 2 ;
      background-color: red ;
      
      
    }


    .composition-container>.composition-telugu{

      grid-column-start: 1 ;
      grid-column-end: 2 ;
      grid-row-start: 2 ;
      grid-row-end : 3 ;
      
    }

    .composition-container>.composition-english{

      grid-column-start: 2 ;
      grid-column-end: 3 ;
      grid-row-start: 2 ;
      grid-row-end : 3 ;
      
    }
   

    .composition-learning {
      margin-left: 1%;
      width: 50% ;
      align-items: center;
      font-weight: bold;
      text-align: center;

    }
    
    .composition-learning table,
    .composition-learning th,
    .composition-learning td {
      border: 2px solid #a0212110;
      
    }
    
    .composition-learning img {
      height: 40px;
    }

    .composition-learning .swara-row{
      color:black
    }

    .composition-learning .sahithya-row{
      color: rgb(29, 141, 130) ;
    }