@font-face {
    font-family: 'blueberry';
    src: url('/static/font/Blueberry\ Regular.otf') format('opentype');
}

.navbar{
    width: 100%;
    /* height: 3.5vw; */
    /* background-color: #3a3a3a; */
    justify-content: right;
    display: flex;
    font-size: 18px;
}
.bwrap{
    color: #333;
    background-color: #f9f9f9;
    flex-direction: column;
    align-items: center;
    font-family: Open Sans, sans-serif;
    font-size: 18px;
    line-height: 1.4em;
    display: flex;
}
.navbar a{
    padding: 0 1em;
    color: rgba(0,0,0);
    font-family: Poppins, Sans-serif;
    font-weight: 400;
}
.site-logo{
    height: 5em;
    display: flex;
    padding: 0.5em 0 1em 1em;
    position: absolute;
    left: 0;
    top: 0;
}
    .site-logo img{
        width: auto;
    }
.navbar-links {
    display: flex;
    align-items: center;
}
.navbar-list{
    color: rgba(0,0,0);
    padding: 1em 4em 1em 0;
    /* font-family: Open Sans, sans-serif; */
    font-size: 18px;
    display: inline-flex;
    list-style-type: none;
    margin: 0;
}

@media screen and (min-width: 769px) {
    .w-nav-overlay{
      display: none;
    }
  }

@media screen and (min-width: 1025px){
    .menu-icon{
        display: none;
      }
    .navbar-list-mobile{
        display: none !important;
    }
}
  
@media screen and (min-width: 1025px) {
    .second-banner-inner img{
        display: none;
    }
}
.imagine-tamil-banner-container-v1{
    display: flex; /* Use flexbox */
    flex-direction: column; /* Arrange children in a column */
    /* height: 100vh; Adjust this to the desired height of the parent */
}

.imagine-tamil-logo-v1 img,.bannerText img{
    width: 100%;
    max-width: 410px;
    float: left;
}
.container-element {
    /* flex: 1; Make each child take an equal amount of space */
    /* display: flex; Optional: centers content inside each child div */
    justify-content: center; /* Optional: centers content horizontally */
    align-items: center; /* Optional: centers content vertically */
    /* border: 1px solid #000;  */
}
/* .banner{ */
    /* background-image: url("/static/images/landing_cover_page.png"); */
    /* width: 100%;
    display: flex; */
    /* max-height: 360px;
    height: 25vw; */
    /* background-size: contain; */
    /* justify-content: space-evenly;
    position: relative;
    padding: 2em 0; */
/* } */
/* .banner { */
    /* flex-wrap: initial; */
    /* justify-content: center;
    align-items: center; */
    /* align-content: initial;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    align-self: auto; */
/* } */
@media screen and (max-width:1038px) {
    .banner-sec-2 {
        flex-direction: column !important;
    }
}
@media screen and (max-width: 1024px) {
    .banner{
        position: relative;
        margin-bottom: 2em;
    }
    .banner-image-container:nth-of-type(1){
        width: 100%;
        opacity: 0.2;
        /* margin-right: 5rem; */
        position: absolute;
    }
    .banner-image-container:nth-of-type(2){
        margin: auto;
        width: 60%;
    }
    .imagine-tamil-boy-logo{
        width: 100%;
        height: auto; 
    }
    .imagine-tamil-boy-logo img{
        width: 60%;
        height: auto;
        margin: auto;
        display: flex;
    }
}

/* .banner-image-container{
    width: 30%;
} */

.imagine-tamil-boy-logo img{
  /* width: 100%;
  height: 100%; */
  max-width: 480px;
  /* float: right; */
}

@media screen and (min-width: 1025px) {
    /* .banner-image-container:nth-of-type(1){
        img{
            float: right;
            max-width: 611px;
        }
    }
    .banner-image-container:nth-of-type(2){
        max-width: 611px;
    } */
    .banner {
        width: 100%;
        display: flex; /* Use flexbox to align items */
        margin-bottom: 3em;
    }
    .imagine-tamil-boy-logo {
      width: 100%; /* Ensure the inner divs use the full width of their containers */
      height: 100%; /* Ensure the inner divs use the full height of their containers */
    }
    /* .banner-image-container{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    } */

    .banner-image-container:nth-of-type(1){
        margin: auto 2em auto auto;
        float: right;
    }
    .banner-image-container:nth-of-type(2){
        margin: auto auto auto 2em;
        float: left;
    }
}

.bannerText {
    
    font-family: Averia Serif Libre, sans-serif;
    text-align: center;
    margin: 2em 0;
}
[type=submit]{
    display: inline-block;
    font-weight: 400;
    color: #c36;
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid #c36;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: 3px;
    transition: all .3s;
}
.field-submit {
    color: #ffffff;
    background-color: #ff3e4a;
    background-image: none;
}
.submit-button{
    width: 100%;
    text-align: center;
}
.second-banner{
    background-color: #ffe666;
    /* gap: var(--gap); */
    width: 100%;
    /* max-width: var(--content-width); */
    margin: 0 auto;
    height: auto;
    display: flex;
    margin-bottom: 4em;
}

@media screen and (max-width: 640px) {
    .second-banner{
    margin-bottom: 1em;
}
    
}

.second-banner-text{
    margin: auto;
}
.third-banner{
    width: 100%;
    margin: 0 auto;
    padding-inline-start: 0;
    padding-inline-end: 0;
    height: auto;
    /* display: flex; */
}
.third-banner-inner{
    display: flex;
}
.third-banner-inner-heading{
    text-align: center;
    h2{
        margin-bottom: 0;
    }
}

.third-banner-inner-heading-span{
    text-align: center;
    color: #000000;
    font-family: "Poppins", Sans-serif;
    font-size: 55px;
    font-weight: 700;
    line-height: 74px;
}
@media screen and (max-width: 1024px) {
    .third-banner-inner-heading-span {
        font-size: 40px;
    }
}
@media screen and (max-width: 640px) {
    .third-banner-inner-heading-span {
        font-size: 30px;
    }
    
}

@media screen and (max-width: 479px) {
    .third-banner-inner-heading-span {
        font-size: 23px;
    }
    
}

.third-banner-inner-image{
    width: 50%;
    align-content: center;
    img {
        width: 80%;
        float: right;
        max-width: 400px;
    }
}
.third-banner-inner-text{
    line-height: 32px;
    padding: 2em 0;
    width: 50%;
}
.third-banner-inner-text p{
     font-family: Poppins, sans-serif;
     font-size: 18px;   
     max-width: 400px;
     width: 80%;
    }
    .third-banner-inner-text span{
     background-color: white;
     box-sizing: border-box;
    }   

.second-banner-inner{
    width: 50%;
    /* p {
        margin: 0px 100px 0px 20px;
    } */
}
.second-banner-inner:nth-of-type(1){
    padding-right: 3em;
    /* max-height: 550px;  */
    /* overflow: hidden; */
    /* background-image: url(img_parallax.jpg); */
    /* min-height: 500px; */
    background-image: url("../images/Banner\ \ Section\ 2\ V1.jpg");
    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.second-banner-inner:nth-of-type(2){
    line-height: 42px;
    padding: 1em 1em 1em 2em;
}
.second-banner-inner:nth-of-type(2) p{
     font-family: Poppins, sans-serif;
     font-size: 28px;   
     font-weight: 500;
    }

    @media screen and (max-width: 640px) {
        .second-banner-inner:nth-of-type(2) p{
            font-size: 18px;
        }
        
    }
    .second-banner-inner:nth-of-type(2) span{
     background-color: white;
     box-sizing: border-box;
    }   
    .second-banner-inner:nth-of-type(2) .second-banner-inner-heading-span{
        background-color: black;
        color: white;
        font-size: 40px;
    }

.second-banner-inner-heading{
    /* margin: 20px 100px 0 20px; */
    padding-bottom: 2em;
}
.second-banner-text{
    margin: auto;
}
.lesson-list{
    /* background-color: bisque; */
    /* display: flex; */
    /* padding: 2em 14em; */
    flex-wrap: wrap;
    max-width: 1020px;
    margin-bottom: 30px;
    display: flex;
}
.list-top{
    margin-top: 30px;
}
.lesson-row{
    display: flex;
    width: 100%;
    padding: 1em 2em;
}
.lesson-item{
    /* font-family: Averia Serif Libre,sans-serif;
    width: 60%;
    height: 20vw;
    border-radius: 10px;
    padding: 0em;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    margin: 10px; */
    flex: none;
    width: 100%;
    max-width: 340px;
    display: flex;
}
.lesson-index-item{
    text-align: left;
    background-color: #fff;
    border-radius: 10px;
    flex-direction: column;
    justify-content: flex-start;
    margin: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .15);
}
.lesson-item.half{
    max-width: 510px;
}
.lesson-item-image{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    display: block;
    position: relative;
    overflow: hidden;
}
.index-img{
    width: 100%;
    position: relative;
}
.index-item-desc {
    margin: 10px 20px;
    font-family: Georgia, Times, Times New Roman, serif;
    font-size: 15px;
    word-spacing: 2px;
    line-height: 140%;
    position: relative;
    color: #333;
}
.index-item-desc p {
    @media screen and (max-width: 479px) {
        font-size: 14px;
        
    }
}
.lesson-item-text{
    padding: 0 1em;
    font-family: Georgia, Times, Times New Roman, serif;
    font-size: 16px;
    line-height: 140%;
}
.tag-video-audio-indication{
    color: var(--light-slate-grey);
    letter-spacing: .025em;
    align-items: center;
    margin-top: 3px;
    margin-bottom: 10px;
    font-family: Open Sans, sans-serif;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    position: static;
}
.tag {
    z-index: 99;
    text-transform: uppercase;
    background-color: transparent;
    background-image: url(https://cdn.prod.website-files.com/5a77a1d…/604599a…_headphones-white.png);
    background-position: 0%;
    background-repeat: no-repeat;
    background-size: auto 14px;
    height: 20px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 15px;
    padding: 0 0 0 21px;
    display: inline-block;
}
.tag.text{
    background-image: url(https://cdn.prod.website-files.com/5a77a1d44323220001d792d2/6046cc4a3962014fd15d8bab_text-document.png);
}
.tag.audio{
    background-image: url(https://cdn.prod.website-files.com/5a77a1d44323220001d792d2/6046ca9adc05ca0c4c426fd2_headphones-blue.png);
}
.newswrap {
    background-color: #fff;
    background-image: url(/static/images/banner.jpg);
    background-position: 50% 100%;
    background-size: cover;
    flex: 1;
    width: 100%;
    /* padding: 50px 20px 51px; */
    position: relative;
}
.newsarrowcont {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.hscreen.radius {
    background-image: radial-gradient(circle closest-corner, rgba(138, 159, 168, .2), rgba(40, 47, 55, .8));
    display: block;
}
.hscreen {
    background-color: rgba(0, 0, 0, .2);
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.newscont {
    z-index: 99;
    text-align: center;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
}
.newsheading {
    z-index: 10;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    font-family: Averia Serif Libre, sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 110%;
    display: block;
    position: relative;
}

@media screen and (max-width: 1024px) {
    .newsheading {
        font-size: 30px;
    }
    .newscont p {
        font-size: 20px;
    }
    
}
@media screen and (max-width: 640px) {
    .newsheading {
        font-size: 24px;
    }
    .newscont p {
        font-size: 16px;
    }
    
}
@media screen and (max-width: 479px) {
    .newsheading {
        font-size: 20px;
    }
    .newscont p {
        font-size: 14px;
    }
    
}
.news-p {
    color: #fff;
    font-size: 1em;
}
.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.link-white {
    color: #dcebf1;
    text-decoration: underline;
}
.memberships-login-link {
    color: var(--silver);
    margin-top: 20px;
    font-family: Open Sans, sans-serif;
    font-size: .8em;
}
.membership-buy-button.unrelative {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    position: static;
}
@media screen and (max-width: 479px) {
    .membership-buy-button.unrelative{
      max-width: 270px;  
    } 
}
.w-button {
    color: #fff;
    line-height: inherit;
    cursor: pointer;
    background-color: #3898ec;
    border: 0;
    border-radius: 0;
    padding: 9px 15px;
    text-decoration: none;
    display: inline-block;
}
.membership-buy-button {
    background-color: #d2534c;
    color: var(--white);
    text-align: center;
    border-radius: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-family: Averia Serif Libre, sans-serif;
    font-size: 22px;
    display: block;
    position: static;
    top: auto;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

@media screen and (max-width: 479px) {
    .lesson-index-item {
        min-height: 30px;
        margin-left: 0;
        margin-right: 0;
    }
}
@media screen and (max-width: 767px) {
    .lesson-index-item {
        flex: 1;
    }
}
@media screen and (max-width: 991px) {
    .lesson-index-item {
        margin: 8px;
    }
}
@media screen and (max-width: 1024px){
    .navbar-links{
        display: block;
    }
    .navbar-list-mobile{
        padding: 0;
        font-size: 14px;
        display: none;
        margin: 0;
        list-style: none;
        li{
            padding: 0.4em;
        }
    }
    .menu-icon img{
        width: 24px;
        padding: 1em;
        cursor: pointer;
        float: right;
    }
    .navbar-list{
        display: none;
    }
    .third-banner-inner{
        display: block;
    }
    .third-banner-inner-image {
        width: 100%;
        display: flex;
        align-items: center;
        margin: auto;
    }
    .third-banner-inner-image img{
            width: 50%;
            margin: auto;
        }
    
    .third-banner-inner-text{
        width: 100%;
    }
    .third-banner-inner-text p{
            font-size: 16px;
            margin: auto;
            max-width: max-content;
        }
    .third-banner-inner-heading{
        text-align: center;
    }
    .third-banner-inner-heading h2{
            margin-bottom: 1em;
        }
    
};


@media screen and (max-width: 479px) {

    .lesson-item {
        width: 98%;
        max-width: 500px;
    }
}
@media screen and (max-width: 1024px) {
    .lesson-item {
        max-width: 80%;
    }
    .second-banner-inner-heading-span{
        font-size: 30px;
        line-height: 1.1em;
    }
}
@media screen and (max-width: 991px) {
    .lesson-item.half, .lesson-item.quarter {
        max-width: 340px;
    }
}

@media screen and (max-width: 479px) {
    .site-logo{
        width: 15%;
        height: auto;
        padding: 1em 0 1em 1em;
    }
    .lesson-item {
        width: 98%;
        max-width: 500px;
    }
    .second-banner-inner:nth-of-type(2){
        .second-banner-inner-heading-span{
            font-size: 26px;
            line-height: 1.5em;
        }
        p {
            font-size: 18px;
            line-height: normal;
        }
        .second-banner-inner-heading{
            padding-bottom: 0;
        }
    }
    
        
}
@media screen and (max-width: 767px) {
    .lesson-item {
        max-width: 80%;
    }
}
@media screen and (max-width: 1024px) {
    .lesson-item.half {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .second-banner{
        display: block;
    }
    .second-banner-inner:nth-of-type(1){
        width: 100%;
        margin: auto;
        padding: 0;
    }
    .second-banner-inner:nth-of-type(2){
        width: 100%;
        margin: auto;
        text-align: center;
    }
}
/* @media screen and (max-width: 600px) {
    .second-banner-inner:nth-of-type(2) .second-banner-inner-heading-span{
        font-size: 36px;
    }
    .second-banner-inner:nth-of-type(2) p{
        font-size: 24px;
    }
} */
/* .menu-icon{

} */
@media screen and (max-width: 991px) {
    .lesson-item.half, .lesson-item.quarter {
        max-width: 340px;
    }
}
@media screen and (max-width: 1050px) {
    .lesson-list{
        display: flow;
    }
}
.lessons-heading{
    padding: 4em 1em 1em;
}
@media screen and (max-width: 640px) {
    .lessons-heading{
        padding: 1em 1em 1em;
    }
    
}
.lesson-item.half {
    max-width: 510px;
}
.cwrap {
    /* width: 100%; */
    padding-left: 40px;
    padding-right: 40px;
    font-size: 20px;
    line-height: 1.4em;
}
.ccontent {
    max-width: 960px;
    margin: 2em auto;
    font-family: Georgia, Times, Times New Roman, serif;
    font-weight: 300;
    display: block;
}
.tamil-text{
    border-left: 1px solid #9c9c9c;
    font-weight: bold;
}
.transliterated-text{
    border-left: 1px solid #bdbdbd;
}
.english-text{
    border-left: 1px solid #dfdfdf;
}
.text p{
    margin:0
}
.img-lesson{
    /* padding-top: 20px; */
    margin-bottom: -8px;
}
.error-banner{
    background-color: #ffd948;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 3% 0;
    font-size: 20px;
    line-height: 1.4em;
    display: flex;
    position: relative;
}
.payment-banner{
    background-color: #ffd948;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 3% 0;
    font-size: 20px;
    line-height: 1.4em;
    /* display: flex; */
    position: relative;
}
.error-container{
    max-width: 960px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}
.error-column img{
    flex: 0 45%;
    margin-right: 40px;
}
.error-column{
    text-align: left;
    align-self: center;
}
.error-heading{
    margin-top: .5em;
    margin-bottom: .5em;
    font-family: Averia Serif Libre, sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 110%;
}

.error-subhead {
    margin-top: 0;
    margin-bottom: .5em;
    font-family: Averia Serif Libre, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.3em;
}

.see-membership-plans{
    padding: 2em;
}
.tamil-footer{
    color: #fff;
    font-weight: 400;
}
.button-default{
    color: #fff;
    cursor: pointer;
    background-color: #d2534c;
    border-radius: 5px;
    flex: 1;
    align-self: stretch;
    margin-top: 1.5em;
    padding: .6em 1.5em;
    font-family: Open Sans, sans-serif;
    font-size: 1em;
    font-weight: 400;
    display: inline-block;
    padding: 1em 1.7em;
    border-radius: 50px;
}
.membership-details-wrap{
    display: flex;
    align-items: center;
    margin: auto;
    justify-content: center;
    padding-top: 2em;
}
:root {
    --white: white;
    --darker-body: #ebeef0;
    --khaki: #ffea8a;
    --navigation-bar-bg: #464646;
    --honeydew: #bad4c2;
    --form-field: #dfe7f0;
    --black-3: #333;
    --white-smoke: #f9f9f9;
    --tfe-link-colour: #d2534c;
    --gold: #fecd13;
    --gainsboro-2: #dde5e0;
    --light-slate-grey: #8a9fa8;
    --gainsboro: #dbdbdb;
    --silver: #bac7cd;
    --black-4: #282f37;
    --frenchexp-header-bg: #f6f6f5;
    --beige: #e7e7ce;
    --dim-grey: #59676d;
    --light-blue: rgba(187,213,228,.3);
    --paypal-yellow: #f6c455;
    --activity-background: #2b617c;
    --ivory: #eff1e6;
    --honeydew-2: #d4ebdb;
    --black: black;
    --black-2: #111;
    --blue--black: #1f252c;
    --blue--black-darker: #171b20;
    --quarter-inside-back: rgba(156,167,162,.49);
    --gainsboro-3: #d5dfd9;
}

.close-menu,
.open-menu {
  position: absolute;
  cursor: pointer;
  display: none;
}

.open-menu {
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

.close-menu {
  top: 20px;
  right: 20px;
}

#check {
  display: none;
}

@media (max-width: 800px) {
  .menu {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 100;
    background-color: #000;
    color: #fff;
    transition: all 0.5s ease-in-out;
    text-transform: uppercase;
    font-size: 24px;
    padding: 1.3rem 2rem;
    border-radius: 0 0 0 20px;
  }

  .menu li {
    margin-top: 40px;
  }

  .menu li a {
    padding: 10px;
  }

  .close-menu,
  .open-menu {
    display: block;
  }

  #check:checked ~ .menu {
    right: 0;
  }
}


.menu-link {
    position: relative;
    transition: all 0.2s ease-in-out;
    font-weight: medium;
    font-size: 19px;
  }
  
  /* Active state for the menu link */

  
  /* Optional: Custom underline style */
  .menu-link.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000; /* Underline color */
  }

  .elementor-motion-effects-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform-origin: center center;
  }

  .elementor-motion-effects-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55rem;
    /* background-image: url('https://keshart.in/wp-content/uploads/2024/05/Dudu-final-project-1.jpg'); */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: translateY(var(--translateY, 0)); /* Initial position */
    transition: transform 1s cubic-bezier(0, .33, .07, 1.03);
  }

  @media screen and (max-width: 1024px) {
    .elementor-motion-effects-layer {
      height: 48rem;
    }
    
  }

  @media screen and (max-width: 767px) {
    .elementor-motion-effects-layer {
      height: 40rem;
    }
    
  }
  @media screen and (max-width: 640px) {
    .elementor-motion-effects-layer {
      height: 30rem;
    }
    
  }
  @media screen and (max-width: 479px) {
    .elementor-motion-effects-layer {
      height: 25rem;
    }
    
  }

  @keyframes slide-down {
    0% {
      transform: translateY(-10px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slide-up {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-10px);
      opacity: 0;
    }
  }

  .animate-slide-down {
    animation: slide-down 0.3s ease-out forwards;
  }

  .animate-slide-up {
    animation: slide-up 0.3s ease-in forwards;
  }


.cwrap {
    /* width: 100%; */
    padding-left: 40px;
    padding-right: 40px;
    font-size: 20px;
    line-height: 1.4em;
  }
  
  .chapter-text{
    padding: 20px 0px;
  }
  /*
   * Container
   */
  .content-container {
    max-width: 700px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5em;
    display: block;
  }
  
  .phrase-section{
    position: relative;
    .audio-button{
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
      width: 1.8rem;
      height: 1.8rem;
      transition: transform 0.5s ease;
      background-repeat: round;
    }
    /* .audio-button img{
      width: 2.1rem;
      height: 2.1rem;
    } */
  }
  
  .phrase-section{
  
  }
  
  .vertical-phrase{
    .text.hidden {
      opacity: 0;
      visibility: hidden;
      height: 0;
      /* display: none; */
    }
  }
  
  .horizontal-text-phrase{
    .text.hidden {
      opacity: 0;
      visibility: hidden;
      /* width: 0; */
      /* display: none; */
    }
  }
  
  .segmented-controls::after::before {
    outline: 0;
    outline: none;
  }
  
  .segmented-controls {
    display: flex;
    margin: 0;
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
    width: 100px;
    border-radius: 0.5rem 0.5rem 0.5rem 0;
    background: #e2e2e9;
    height: 1.5rem;
    padding: 0.125rem;
  }
  
  .segmented-controls:focus {
    outline: none;
  }
  
  .text-division {
    padding: 25px 0px;
  }
  
  .horizontal-text-phrase{
    .text {
      padding: 20px 20px 0 20px;
      opacity: 1;
      visibility: visible;
      /* transition: opacity 0.8s, visibility 0.8s; */
      /* transition: opacity 0.7s; */
       width: auto;
      /* height: auto;  */
    }
  }
  
  .vertical-phrase{
    .text {
      padding: 20px 20px 0 20px;
      opacity: 1;
      visibility: visible;
      /* transition: opacity 0.8s, visibility 0.8s; */
      /* transition: opacity 0.7s; */
      /* width: auto; */
      height: auto; 
    }
  }
  /*
   * Vissualy hidden radiobuttons
   */
  .segmented-controls input {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    /* added line */
  }
  
  /* 
   * Labels need to be the same size
   */
  .segmented-controls label {
    font-size: 0.8125rem;
    font-family: Georgia, Times, Times New Roman, serif;
    /* font-family: -apple-system, BlinkMacSystemFont, sans-serif; */
    font-weight: 300;
    line-height: 1;
  }
  
  .segmented-controls label {
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    flex: 1 1 0px;
    position: relative;
    z-index: 2;
    transition: inherit;
    color: rgb(180,180,180);
  }
  
  /* 
   * Adjust z-index of last label since that contains 
   * the paddle that needs to go beneath all other labels 
   */
  .segmented-controls label:last-of-type {
    z-index: 1;
  }
  
  /*
   * Paddle 
   */
  .segmented-controls label:last-of-type::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    background-color: black;
    transition: inherit;
  }
  
  /*
   * Move paddle depending on which option is selected
   */
  .segmented-controls input:nth-last-of-type(2):checked~label:last-of-type::after {
    transform: translateX(-100%);
  }
  
  .segmented-controls input:nth-last-of-type(3):checked~label:last-of-type::after {
    transform: translateX(-200%);
  }
  
  .segmented-controls input:nth-last-of-type(4):checked~label:last-of-type::after {
    transform: translateX(-300%);
  }
  
  .segmented-controls input:nth-last-of-type(5):checked~label:last-of-type::after {
    transform: translateX(-400%);
  }
  
  .segmented-controls input:nth-last-of-type(6):checked~label:last-of-type::after {
    transform: translateX(-500%);
  }
  
  .segmented-controls input:nth-last-of-type(7):checked~label:last-of-type::after {
    transform: translateX(-600%);
  }
  
  .segmented-controls input:nth-last-of-type(8):checked~label:last-of-type::after {
    transform: translateX(-700%);
  }
  
  .segmented-controls input:nth-last-of-type(9):checked~label:last-of-type::after {
    transform: translateX(-800%);
  }
  
  .segmented-controls input:nth-last-of-type(10):checked~label:last-of-type::after {
    transform: translateX(-900%);
  }
  
  
  /*
   * IOS 13 Theme
   * Special thanks to https://www.figma.com/community/file/768365747273056340
   */
  /*
   * Container
   */
  
  /*
   * Labels 
   */
  .segmented-controls label {
    font-size: 0.8125rem;
  }
  
  /*
   * Dividers
   */
  .segmented-controls label:not(:first-of-type)::before {
    /* content: ""; */
    position: absolute;
    z-index: -3;
    top: 0.5rem;
    left: 0;
    bottom: 0.5rem;
    width: 1px;
    background: rgba(0, 0, 0, 0.15);
    transition: inherit;
  }
  
  
  /*
   * Selected option 
   */
  .segmented-controls input:checked+label {
    /* font-weight: 500; */
    /* font-size: 0.875rem; */
    color: rgb(150,150,150,0.8);
  }
  
  /*
   * Hide dividers before and after the selected option
   */
  .segmented-controls input:checked+label::before,
  .segmented-controls input:checked+label+input+label::before {
    opacity: 0;
  }
  
  /*
   * Focus style for keyboard navigation
   */
  /* .segmented-controls:focus-within {
      box-shadow: 0 0 0 .2rem rgba(0,122,255,0.75);
  } */
  
  
  /*
   * Paddle
   */
  .segmented-controls label:last-of-type::after {
    background: white;
    border-radius: 0.4275rem;
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.04), 0px 3px 8px rgba(0, 0, 0, 0.12);
  }
  
  .index-img {
    max-width: 700px;
    position: relative;
  }
  
  .horizontal-text-phrase {
    display: flex;
    font-size: 35px;
  
    .tamil-text {
      background-color: #111111;
      color: #ffffff;
      padding: 20px;
      font-weight: bold;
    }
  
    .transliterated-text {
      color: #d5d7db;
      background-color: #656566;
      padding: 20px;
      border-left: 0px;
    }
  
    .english-text {
      background-color: #e2e0e0;
      color: #88929b;
      padding: 20px;
      font-weight: 400;
    }
  }
  
  .english-text p {
    font-weight: 300;
    font-family: Open Sans, sans-serif;
  }
  
  
  *:focus {
    outline: none;
  }
  
  .pd {
    width: 100%;
    margin: 40px 0px 0 0px;
    border-bottom: 2px solid #F2F2F2;
    height: 0;
  }
  
  @media screen and (max-width: 767px) {
      .horizontal-text-phrase .text {
          font-size: 17px;
          padding: 11px;
      }
  }
  
  @media screen and (min-width: 768px) and (max-width: 991px) {
      .horizontal-text-phrase .text {
          font-size: 17px;
          padding: 11px;
      }
  }
  
  .segmented-controls-master{
    display: flex;
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    .segmented-controls{
      background: black;
      border-radius: 0.5rem;
    }
  }
  
  /* .segmented-controls p{
    margin: 0;
  } */
  
  .label-master p{
    margin: 0 0 0 20px;
  }
  
  /* .transliterated-option-label{
    font-size: 0.99rem;
    margin: 0 0 4.2px 0;
  }
  .tamil-option-label{
    font-size: 0.99rem;
    margin: 2px 3px 6px 0;
  }
  .small-letter-option-label{
    font-size: 0.99rem;
    margin: 0 0 2.3px 0;
  } */
  
  .tamil-option-label {
    font-size: 0.99rem;
    margin: 5px 5.5px 8.5px 5.5px;
  }
  
  .transliterated-option-label {
    font-size: 0.99rem;
    margin: 0 0 3.9px 0;
  }
  
  .small-letter-option-label {
    font-size: 0.99rem;
    margin: 0 0 1.9px 0;
  } 
  
  @media screen and (max-width: 479px) {
    .cwrap {
      padding-left: 0;
      padding-right: 0;
    }
    .text-division{
        font-size: 15px;
    }
    .chapter-text{
      font-size: 15px;
    }
  }
  
  @media screen and (max-width: 767px) {
    .cwrap {
      padding-left: 0;
      padding-right: 0;
    }
  
    .text-division{
      font-size: 16px;
    }
    
    .chapter-text{
      font-size: 16px;
    }
  
    .label-master p{
      margin: 0 0 0 20px;
      font-size: 14px;
    }
  
    .text p{
      font-size: 16px;
    }
  
  }
  
  @media screen and (min-width: 769px) {
    .w-nav-overlay{
      display: none;
    }
  }
  
  @media screen and (max-width: 768px) {
    
    .w-nav-overlay ul {
      font-size: 12px;
      font-family: Open Sans, sans-serif;
      display: none;
    }
    .w-nav-overlay{
      .show{
        
      }
    }
    .w-nav-overlay nav{
      height: 50px;
    }
  }
  .play-button {
    width: 26px;
    height: 26px;
    background-color: #bbb;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .play-button.rotate {
    transform: rotate(90deg);
    background-color: #ff5722;
    color: #fff;
  }
  .play-button.rotate-left {
    transform: rotate(-90deg); /* Rotate to the left */
    background-color: #ff5722; /* Optional: Different color for left rotation */
    color: #fff;
  }