/* Banner Styles */
        body{font-family: 'HankenGrotesk';}
        .banner {
            position: relative;
            background-image: url('https://periyarworld.org/assets/img/timeline/timeline-banner.jpg');  
            background-size: cover;
            background-position: center;
            height: 400px;  
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(20deg, rgba(0, 0, 0, 0.00) 29.09%, rgba(0, 0, 0, 0.71) 92.09%), linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0.16%, rgba(0, 0, 0, 0.72) 79.33%);
            /*display: flex;
            align-items: center;
            justify-content: center;*/
        }
        .overlay h1 {   
          position: absolute;
          top: 57%;transform: translateY(-50%);
          left: 95px; 
color: #FFF;
font-family: 'Poppins Medium';
font-size: 38px;
font-style: normal;
font-weight: normal;
line-height: 150%; 
        }
 .bg-banner-sec{ background-image: url('https://periyarworld.org/assets/img/timeline/bg-banner.jpg');  
            background-size: cover;
            background-position: center;background-repeat: no-repeat;}
.txt-p{color: #111;
  font-family: 'Sen Regular';
font-size: 15px;
font-style: normal; 
line-height: 170%;}
.bg-banner-sec .nav-pills .nav-link.active,.bg-banner-sec .nav-pills .show>.nav-link { 
    background-color: transparent;
    color: #191919;
    font-family: 'Poppins SemiBold';
    font-size: 20px;
    font-style: normal; position: relative;
    line-height: 180%; 
    text-transform: uppercase;
    transform: translateY();
}

 @keyframes slideDown {
  from {
    opacity: 0; 
    transform: translateY(20px);  
  }
  to {
    opacity: 1;  
    transform: translateY(0);  
  }
}

/* General styles for tab panes */
.bg-banner-sec .tab-pane {
  opacity: 0;  
  transform: translateY(20px); 
}

/* Active state with animation */
.bg-banner-sec .tab-pane.active {
  animation: slideDown 0.5s ease forwards;  
  opacity: 1;  
  transform: translateY(0);  
}
.bg-banner-sec .nav-pills .nav-link {
    border-radius:0px;
    color: #595959;
    font-family: 'Poppins Medium';
    font-size: 20px;    padding: 0px;
    font-style: normal; 
    line-height: 180%; 
    text-transform: uppercase; 
}

.bg-banner-sec .nav { justify-content: space-between;z-index: 2; position: relative;}
.bg-banner-sec .AB-v-line{position: relative;}
.bg-banner-sec .AB-v-line::before, .bg-banner-sec .AB-v-line::after{
  content: '';position: absolute;top: 50%;left: 0px;width: 1px;height: 15px;transform: translateY(-50%);
 background: linear-gradient( to bottom, #E4DDCB 0%, #1D1D1D 47.3%, #E7E1D3 100% );
}
/*.bg-banner-sec .AB-v-line::after{content: '';position: absolute;top: 50%;right: -30px;width: 1px;height: 15px;transform: translateY(-50%);
 background: linear-gradient( to bottom, #E4DDCB 0%, #1D1D1D 47.3%, #E7E1D3 100% );
}*/
.bg-banner-sec h5{color: #141414;
  font-family: 'Sen SemiBold';
font-size: 18px;
font-style: normal; 
line-height: 150%; 
text-transform: uppercase;}

.periyar-img{z-index: 1;position: relative;    height: 1070px;
    width: auto !important;
    object-fit: cover;
    position: relative;
    left: -100px;
    top: -40px;
}
 

.bg-banner-sec .nav-pills .nav-link.active::before, .bg-banner-sec .nav-pills .show>.nav-link::before{
content: '';position: absolute;bottom: 0px;left:50%;width: 27px;height: 2px;transform: translateX(-50%);
 background:#191919;border-radius: 50%;
}
.bg-banner-sec .statue-img {
            max-width: 100%;
            height: auto;
        }
.bg-banner-sec .timeline-table {
            margin-top: 20px;text-align: center;
        }
.bg-banner-sec .table-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;    width: 91%;
    margin-left: auto;
    position: absolute;top:50px;right: 0px;
        }
.bg-banner-sec .table-container th{color: #141414;
  font-family: 'Sen SemiBold';background:#FFFBED; 
font-size: 20px;
font-style: normal; 
line-height: 170%; border:1px solid rgb(20 20 20 / 50%);
text-transform: uppercase;}
.bg-banner-sec .table-container tbody {
        /*background: #E2DCCC; */
        background: linear-gradient(90deg, #FED67C 0%, #FAD2B4 100%);
    }
.bg-banner-sec .table-container td{color: #111;
  font-family: 'Sen Regular';
font-size: 16px; background:transparent;
font-style: normal; 
line-height: 270%;  border-left:1px solid rgb(20 20 20 / 50%);border-right:1px solid rgb(20 20 20 / 50%);}
.bg-banner-sec .table-container tr:first-child td{border-top:1px solid rgb(20 20 20 / 50%);}
.bg-banner-sec .table-container tr:last-child td{border-bottom:1px solid rgb(20 20 20 / 50%);}
/*.tr-border-add tr{position: relative;}*/
/*.tr-border-add tr::before{ content: '';position: absolute;bottom: 0px;right: 30px;width: 90%;height: 2px; 
border-color: rgb(20 20 20 / 50%);border-style: dashed;}*/
.tr-border-add tr{ border-color: rgb(20 20 20 / 50%);border-style: dashed;}
/*.tr-border-add tr:last-child{border-bottom: none;}*/
th{ border:1px solid rgb(20 20 20 / 50%);}
.bg-trans{background:transparent !important;}
.b-l-t-0{border-left: 0px solid transparent !important;border-top: 0px solid transparent !important;}
tr, thead,tbody{border-color:transparent;}
.bg-banner-sec .table-container th:first-child{width: 44%;}
.bg-banner-sec .table-container th:nth-child(2){width: 28%;}
.bg-banner-sec .table-container th:last-child{width: 28%;}
.bg-banner-sec .table-container td:first-child { padding-left: 2%;}
sup{text-transform: lowercase;}
.bg-banner-sec .table-container .statue-element td:first-child{padding-left: 4%; text-align: left;}
.tr-border-add tr td:first-child::before {
  content: "";
  display: inline-block;
  width: 34px; /* Adjust the width as needed */
  height: 11px; /* Adjust the height as needed */
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"%3E%3Crect x="2.61426" y="2.3313" width="3.29697" height="3.29697" transform="rotate(-45 2.61426 2.3313)" fill="%23343434"/%3E%3Crect x="5.23633" y="4.95349" width="3.29697" height="3.29697" transform="rotate(-45 5.23633 4.95349)" fill="%23343434"/%3E%3Crect y="4.95349" width="3.29697" height="3.29697" transform="rotate(-45 0 4.95349)" fill="%23343434"/%3E%3Crect x="2.52148" y="7.66864" width="3.29697" height="3.29697" transform="rotate(-45 2.52148 7.66864)" fill="%23343434"/%3E%3C/svg%3E') no-repeat center center;
  background-size: contain;
}
.nav-link:focus-visible { box-shadow: none;}
/*.tr-border-add::before {
  content: "";position: absolute;
  right: 1px;
  width: 34px;  
  height: 86%; background:#E2DCCC;
  background-size: contain;
}*/
.tr-border-add tr td:last-child{position: relative;}
.tr-border-add tr td:last-child::after {
  content: "";
  position: absolute;bottom: -1px;right:0px;
  width: 25px; 
  height:1px;  
  background:#E2DCCC61 ;
}
.tr-border-add tr td:first-child{position: relative;}
.tr-border-add tr td:first-child::after {
  content: "";
  position: absolute;bottom: -1px;left:0px;
  width: 8%; 
  height:1px;  
  background:#fdd582 ;
}
.tr-border-add tr:last-child td:last-child::after,.tr-border-add tr:last-child td:first-child::after {
  content: "";
  position: inherit; 
}

.table-responsive.table-container.po-t-10{top:30px;}

 


@media only screen and (min-width: 601px) and (max-width: 991px){ 
 .bg-banner-sec .table-container { top: 45px;display: inherit;width: 97%;}
  .bg-banner-sec .table-container td { font-size: 13px;}
  .bg-banner-sec .table-container .statue-element td:first-child {
   min-width: 342px;}
  .bg-banner-sec .table-container th:nth-child(2), .bg-banner-sec .table-container th:last-child { min-width:150px; }
  .bg-banner-sec .table-container th:first-child { min-width: 289px;}
.bg-banner-sec .table-container th { font-size: 17px;}
.tr-border-add tr td:last-child::after { background:#fdd582;} 
.tr-border-add tr td:first-child::after { background:#fdd582;}
/*.bg-banner-sec .table-container td{ background:#E2DCCC;}*/
.periyar-img { height: 925px; left: -145px;}
 

} 
 

  
@media only screen and (max-width: 600px){
.banner{ height: 350px;}
.overlay h1 {font-size: 32px;
        left: 50%;
        transform: translateX(-50%) !important;
        width: 100%;
        text-align: center;
    }
 .bg-banner-sec .nav-pills .nav-link.active, .bg-banner-sec .nav-pills .show > .nav-link { font-size: 16px;}
.bg-banner-sec .nav-pills .nav-link { font-size: 16px;}
.periyar-img{
  /* opacity: 0.2; z-index: 0px; 
  height: 700px; 
  left: -45px;
  top: -15px; */
display: none;
}
.table-responsive.table-container.po-t-10 {
  top: 30px;
  padding-bottom: 40px;
}
.bg-banner-sec .table-container {width: 100%;
  top: inherit;
  display: inherit;
  position: inherit;
  margin-bottom: 60px;}
.bg-banner-sec .table-container td:first-child { padding-left: 0.5rem;}
.bg-banner-sec .table-container th { min-width:140px;font-size: 16px; 
  line-height: 130%;}
.bg-banner-sec .table-container td { font-size: 12px; line-height: 180%;}
.bg-banner-sec h5 { font-size: 14px;} 
.bg-banner-sec .table-container th { font-size: 16px;}
.bg-banner-sec .table-container .statue-element td:first-child {
  padding-left: 0.5rem;min-width: 248px;}
.tr-border-add tr td:first-child::after { width: 5px;}
.tr-border-add tr td:last-child::after { width: 5px;}
.tr-border-add tr td:first-child::before { height: 9px;}

/*.bg-banner-sec .table-container td { background: #E2DCCC61;}*/









}  
@media only screen and (max-width:380px){ 
 .bg-banner-sec .nav-pills .nav-link.active, .bg-banner-sec .nav-pills .show > .nav-link { font-size: 14px;}
.bg-banner-sec .nav-pills .nav-link { font-size: 14px;}  
 

}
@media only screen and (max-width:333px){ 
 .bg-banner-sec .nav-pills .nav-link.active, .bg-banner-sec .nav-pills .show > .nav-link { font-size: 12px;}
.bg-banner-sec .nav-pills .nav-link { font-size: 12px;}  

}

@media (max-width:450px) {
    .overlay h1 {
        font-size: 26px;
    }
}

 

@media only screen and (min-width: 1800px) {
  body{max-width: 100%;margin-left: auto;margin-right: auto;}
}

@media only screen and (min-width: 992px) and (max-width: 1299px){ 
 .bg-banner-sec .table-container { top: 45px;}
  .bg-banner-sec .table-container td { font-size: 15px;}
} 
@media only screen and (min-width: 992px){ 
.tr-border-add tr td:last-child::after { background:#fdd582;} 
.tr-border-add tr td:first-child::after { background:#fdd582;}
/*.bg-banner-sec .table-container td{ background:#E2DCCC;}*/
}

@media (min-width:1900px){
  .overlay h1{
     font-size: 43px;
  }
  .txt-p{line-height: 180%;
    font-size: 18px;
  }
  .bg-banner-sec .nav-pills .nav-link,.bg-banner-sec .nav-pills .nav-link.active, .bg-banner-sec .nav-pills .show>.nav-link{
    font-size: 24px;
  }
  .bg-banner-sec h5{
    font-size: 22px;
  }
  .bg-banner-sec .table-container th{
    font-size: 24px;
  }
  .bg-banner-sec .table-container td {

 font-size: 20px;
  }
}