body {
  font-family: Arial,Latha, sans-serif;
  font-size:12pt;
  margin: 0;
    padding: 0;
   }
 

.main-content {
    margin-top:0;
    margin-bottom:0;
    margin-left: 60px;
    margin-right:60px;
    padding: 16px;
}


.topnav {
  min-height: 48px; 
  overflow: hidden;
  background-color: white;

}

.topnav a {
  float: left;
  display: block;
  color: navy; 
   padding: 5px 3px;
   text-decoration: none;
    line-height:100%;
}
.topnav a:hover {
  background-color: #04AA6D;
  color: white;
}
.topnav a.active {
background-color:orange; }

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;
}
  .topnav a.icon {
    float: right;
    display: block;
  
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;
}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
.bar
{
display:none;
}
div.flexdivs{
  flex-direction: column;
}

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
padding: 5px 3px; 
  }
}
a
{
text-decoration:none;
}
 a:hover {
  background-color: #04AA6D;
  color: white;
}

a.active {
 color: purple;
}

/* Mobile */
.Section1{
    padding-left: 14px;
    padding-right: 14px;
}
.main-content{
    padding-left: 14px;
    padding-right: 14px;
}
/* Tablet */
@media (min-width:600px) {
    .Section1{
        padding-left: 20px;
        padding-right: 20px;
    }
    .main-content{
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Desktop */
@media (min-width:900px) {
    .Section1{
        margin-left: 60px;
        margin-right: 60px;
    }
    .main-content{
        margin-left: 60px;
        margin-right: 60px;
    }
}

@page Section1
	{
	margin-left:1.0in;
	margin-right:1.0in;
	}
div.Section1
	{page:Section1;}
	
.bar
{
color:red;
}
.bar1
{
color:red;
}
/*headings*/
h1 {	font-size: 16pt;  }
h2 {	font-size: 14pt; }
h3{ 	font-size: 12pt;color:darkred;margin-bottom: 3px;margin-top: 3px;text-align:left;}
h4 { 	font-size: 12pt;color:steelblue;margin-bottom: 3px;margin-top: 3px;text-align:left; }

h1, h2 {
    text-align:center;
    color:darkred;
  	font-family:  Arial, sans-serif,Latha;
 	margin-bottom: 6px;
 	margin-top: 6px;
	font-weight:bold;
	line-height:150%;}

.h1tamilsize
	{
	font-size:16pt;
	font-family:"Latha";
	}
.h2tamilsize
	{
	font-size:16pt;
	font-family:"Latha";
	}

.h3tamilsize
	{
	font-size:12pt;
	font-family:"Latha";
	}
.h4tamilsize
	{
	font-size:12pt;
	font-family:"Latha";
	}

/* Paragraphs */
p {
	margin-bottom: 10pt;
	margin-top: 10pt;
	text-align: justify;
	font-size: 12pt;
	line-height:1.15;
}
p:lang(ta) 
{
  font-family: "Latha";
font-size:12pt;
line-height:1.15;
}
.tablepara
{
	text-align: justify;
	font-size: 10pt;
	line-height:1.15;
}
.tablepara p
{
	margin-bottom: 0pt;
	margin-top: 0pt;
}
.tablepara td
{
vertical-align:top;
}

/* font colors */
.color1
{
color:red;
}
.color2
{
/*color:green;*/
color:rgb(0,112,66);
}
.color3
{
color:blue;
}
.color4
{
color:darkred;
}
.color5
{
color:rgb(0,32,96);
}
.color6
{
color:orange;
font-weight:bold;
}
.color7
{
color:purple;
}
.color8
{
color:white;
}
.lightgreen{ color:rgb(171,255,171);}
/* table */
    table {
   background-color: #F0F8FF; /* AliceBlue */
  
	margin-top:12pt; 
	margin-bottom:12pt;  
	margin-left:auto;
	margin-right:auto;
	border:2px solid purple;
}
caption {
       /* font-style: italic;*/
        font-weight: bold;
        font-size: 14pt;
        color: steelblue;
        text-align: left; 
    }
th {
        background-color: #4682B4; /* SteelBlue */
        
	color: white; /* White text for contrast */
   
	padding-left:5pt; 
	padding-right:5pt; 
	vertical-align: middle;
	padding:10pt; 
	margin-top:3pt; 
	margin-bottom:3pt;  

 }
tr:nth-child(even) {
        background-color: #E6E6FA; /* Lavender */
    }
    
tr:nth-child(odd) {
        background-color: #FFFFFF; /* White */
    }
td {
        color: #333333; /* Dark gray text */
  
	padding:5pt; 
	/*padding-right:5pt; */
	vertical-align: middle;
	margin-top:3pt; 
	margin-bottom:3pt;  

 }
 
/*ordered list*/
ol
{
margin-top:12pt;
padding-left:10pt;
margin-bottom:12pt;
}
ul
{
margin-top:12pt;
padding-left:10pt;
margin-bottom:12pt;
}
/* list items */
li {
  margin-left: 15pt; /* Adds further indentation to each list item */
  margin-bottom:5pt;
  line-height:1.35;
  /*margin-top:5pt;*/
}
/* nav, breadcrumbs */
nav
{
margin-top:0;
margin-bottom:0;
}
.breadcrumb {
    font-size: 10pt;
    color: #555;
    min-height:22px;
margin-top:0;
margin-bottom:0;
}

.breadcrumb a {
    color: #0073e6;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}
/* language settings */
span:lang(ta) 
{
font-family: "Latha";
font-size:10.25pt;
line-height:1.3;
}

span:lang(en) 
{
 
font-family: Arial, sans-serif;
font-size:12pt;

}
/*Borders- horizontal line*/
.bigborder
{
margin:0;
padding:0;
border: 8px solid rgb(171,255,171);
border-radius: 4px ; 
}
.greyborder
{
margin:0;
padding:0;
border: 1px solid darkgray;
border-radius: 0.5px/0.5px; 
}
.smallborder
{
margin-top:0;
margin-bottom:0;
padding:0;
border: 2px solid rgb(171,255,171);
border-radius: 1px; 
}
.submit-buttons {
  text-align: center;
  align:right;
  margin-top: 20px;
   margin: 0 5px;
  padding: 8px 15px;
  background: rgb(146,208,80);
  color: darkgreen;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease-in-out;

}

.question-container {
  max-width: 700px;
  margin: 20px auto;
  padding: 20px;
  background: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

/* audio controls*/
.divaudio {
  text-align: center;
  margin: 3px auto;
  width: 100%;
}
.divaudio p {
  color: blue;
  text-align: center;
  width: 100%;
  margin:0px;
}
.headphone{
    color:darkred;
    margin:0;
}
.subtitle-display {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
  width: 100%;
  background: #f9f9f9;
  /*padding: 10px;*/
  border-radius: 6px;
  min-height: 24px;
  color: #222;
  transition: opacity 0.4s ease;
  line-height: 1.6;
}

/* spoken words (so far) in red */
.spoken-word {
  color: red; /*#222;red;*/
}

/* replay message and animation */
.part-message {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin-top: 2px;
  color: darkgray;
  transition: opacity 0.8s ease-in-out, color 0.8s ease-in-out;
}
.fade-in {
  opacity: 0;
  animation: fadeIn 1s forwards ease-in-out;
}
.fade-out {
  opacity: 1;
  animation: fadeOut 0.8s forwards ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-5px); }
}

/* responsive */
@media (max-width: 768px) {
  .divaudio {
    width: 90%;
    max-width: 400px;
    margin: 6px auto;
    flex-direction: column;
    padding: 1px;
  }
  .subtitle-display {
    font-size: 14px;
  }
}
/*horizontal line to separate audio controls */
.hraudio{
    background:green;
    color:green;
}
.hrline{
    background:green;
    color:green;
}

/* Menu Icon */
.icon svg {
    vertical-align: middle;
    color: #333; /* change if you want white menu icon for mobile */
}

.icon {
    padding: 8px;
    cursor: pointer;
}


/*-- Footer styles */

.adsbygoogle {
    display: block;
    min-height: 100px; /* adjust if needed */
}

.footer-title {
    text-align: center;
    color: rgb(128,128,128);
}

.footer-links {
    padding-left: 3px;
    text-align: center;
}

.footer-quiz {
    text-align: right;
}

.footer-links a {
    text-decoration: none;
    color: navy;
}

.footer-links a:hover {
    color: white;
    background: #04AA6D;
}

.bar1 {
    color: red;
}