/* =========================================================
   TAMIL PHONICS HEADER
   DEDICATED HEADER CSS
========================================================= */


/* =========================================================
   TOP CONTACT BAR
========================================================= */

.tp-top-contact{
    width:100%;

    background:#073f87;
    color:#ffffff;

    font-family:"Hind Madurai",sans-serif;
}


.tp-top-contact-inner{
    min-height:38px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}


.tp-top-message{
    font-size:12px;
    line-height:1.4;

    font-weight:700;
}


.tp-top-contact-links{
    display:flex;
    align-items:center;

    gap:20px;
}


.tp-top-link{
    display:inline-flex;
    align-items:center;

    gap:6px;

    color:#ffffff !important;

    text-decoration:none !important;

    font-size:12px;
    line-height:1.3;

    font-weight:700;
}


.tp-top-link:hover{
    opacity:.85;
}


.tp-whatsapp .tp-top-icon{
    color:#78e29c;
}



/* =========================================================
   HEADER
========================================================= */

.tp-site-header{
    position:relative;

    width:100%;

    background:#ffffff;

    z-index:500;
}



/* =========================================================
   BRAND ROW
========================================================= */

.tp-brand-row{
    min-height:128px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:28px;
}


.tp-main-brand{
    display:inline-flex;
    align-items:center;

    gap:20px;

    text-decoration:none !important;
}


.tp-main-brand > img{
    display:block;

    width:118px !important;
    height:118px !important;

    flex:0 0 118px;

    object-fit:contain;

    background:transparent;

    border:0;

    box-shadow:none;
}


.tp-brand-copy{
    display:flex;
    flex-direction:column;

    min-width:0;
}


.tp-brand-copy strong{
    display:block;

    margin:0;

    color:#0a4b9d;

    font-family:"Hind Madurai",sans-serif;

    font-size:27px;
    line-height:1.25;

    font-weight:700;

    white-space:nowrap;
}


.tp-brand-copy small{
    display:block;

    margin-top:5px;

    color:#008d98;

    font-family:"Hind Madurai",sans-serif;

    font-size:15px;
    line-height:1.35;

    font-weight:700;
}



/* =========================================================
   NAVIGATION BAR
========================================================= */

.tp-nav-bar{
    position:relative;

    width:100%;

    border-top:1px solid #edf1f4;
    border-bottom:1px solid #e4ebef;

    background:#ffffff;
}


.tp-nav-container{
    position:relative;
}


.tp-main-nav{
    min-height:62px;

    display:flex !important;

    align-items:center;
    justify-content:center;

    gap:34px;

    margin:0;
    padding:0;
}



/* =========================================================
   NORMAL LINKS
========================================================= */

.tp-nav-link{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:62px;

    color:#15233a !important;

    font-family:"Hind Madurai",sans-serif;

    font-size:16px;
    line-height:1.2;

    font-weight:700;

    text-decoration:none !important;

    white-space:nowrap;
}


.tp-nav-link:hover{
    color:#0754a3 !important;
}



/* =========================================================
   COURSE BUTTON
========================================================= */

.tp-course-nav{
    position:relative;

    display:flex;
    align-items:center;

    min-height:62px;
}


.tp-course-button{
    min-height:62px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    padding:0;

    border:0;

    background:transparent;

    color:#15233a;

    font-family:"Hind Madurai",sans-serif;

    font-size:16px;
    line-height:1.2;

    font-weight:700;

    cursor:pointer;

    white-space:nowrap;
}


.tp-course-button:hover{
    color:#0754a3;
}


.tp-nav-arrow{
    font-size:10px;

    color:#55717e;
}



/* =========================================================
   COURSE DROPDOWN
========================================================= */

.courses-dropdown-menu{
    position:absolute !important;

    top:calc(100% - 1px) !important;

    left:50% !important;

    width:760px !important;
    max-width:calc(100vw - 40px) !important;

    max-height:500px;

    padding:20px !important;

    margin:0 !important;

    transform:
        translateX(-50%)
        translateY(8px);

    overflow:auto;

    border:1px solid #dce6eb !important;

    border-radius:16px !important;

    background:#ffffff !important;

    box-shadow:
        0 22px 52px
        rgba(15,47,77,.16) !important;

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

    z-index:9999 !important;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}


/* SHOW COURSE MENU */

.tp-course-nav:hover
.courses-dropdown-menu,

.tp-course-nav:focus-within
.courses-dropdown-menu{

    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;

    transform:
        translateX(-50%)
        translateY(0);
}



/* =========================================================
   COURSE DROPDOWN HEADER
========================================================= */

.courses-dropdown-head{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:20px !important;

    margin:0 0 15px !important;

    padding:0 0 13px !important;

    border-bottom:1px solid #e9eff2 !important;
}


.courses-dropdown-head div{
    display:block;
}


.courses-dropdown-head span{
    display:block;

    margin:0;

    color:#008d98;

    font-family:"Hind Madurai",sans-serif;

    font-size:10px;
    line-height:1.3;

    font-weight:700;
}


.courses-dropdown-head strong{
    display:block;

    margin:3px 0 0;

    color:#123e73;

    font-family:"Hind Madurai",sans-serif;

    font-size:17px;
    line-height:1.35;

    font-weight:700;
}


.courses-dropdown-head > a{
    color:#14599c !important;

    font-family:"Hind Madurai",sans-serif;

    font-size:11px;

    font-weight:700;

    text-decoration:none !important;

    white-space:nowrap;
}



/* =========================================================
   COURSE GRID
========================================================= */

.courses-dropdown-grid{
    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:7px !important;
}



/* =========================================================
   COURSE MENU ITEM
========================================================= */

.course-dropdown-item{
    display:grid !important;

    grid-template-columns:
        34px
        minmax(0,1fr)
        18px !important;

    align-items:center !important;

    gap:10px !important;

    min-width:0;

    padding:9px 10px !important;

    border:0 !important;

    border-radius:10px !important;

    background:transparent !important;

    color:#173d69 !important;

    text-decoration:none !important;
}


.course-dropdown-item:hover{
    background:#f0f8fa !important;
}


.course-dropdown-icon{
    width:32px !important;
    height:32px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:8px !important;

    background:#e6f6f8 !important;

    color:#078c97 !important;

    font-size:13px !important;

    font-weight:700 !important;
}


.course-dropdown-text{
    display:block !important;

    min-width:0;
}


.course-dropdown-text strong{
    display:block !important;

    overflow:hidden;

    color:#173d69 !important;

    font-family:"Hind Madurai",sans-serif;

    font-size:12px !important;
    line-height:1.4 !important;

    font-weight:700 !important;

    white-space:nowrap;

    text-overflow:ellipsis;
}


.course-dropdown-text small{
    display:block !important;

    margin-top:2px !important;

    color:#667b87 !important;

    font-size:9px !important;

    font-weight:600 !important;
}


.course-dropdown-arrow{
    color:#078c97 !important;

    font-size:12px !important;
}



/* =========================================================
   ALL COURSES BUTTON
========================================================= */

.courses-dropdown-footer{
    margin-top:14px !important;

    padding-top:14px !important;

    border-top:1px solid #e9eff2 !important;
}


.course-all-button{
    min-height:40px;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:7px;

    border-radius:9px;

    background:#164d8c !important;

    color:#ffffff !important;

    text-decoration:none !important;

    font-size:11px !important;

    font-weight:700 !important;
}



/* =========================================================
   ACCOUNT BUTTON
========================================================= */

.tp-main-nav .account-menu{
    position:relative;

    display:flex;

    align-items:center;
}


.tp-main-nav .account-button{
    min-height:46px;

    display:flex;
    align-items:center;

    gap:8px;

    padding:0 18px;

    border:0;

    border-radius:11px;

    background:#104b9a;

    color:#ffffff;

    font-family:"Hind Madurai",sans-serif;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 7px 17px
        rgba(16,75,154,.15);
}


.tp-main-nav .account-icon{
    width:19px;
    height:19px;
}


.tp-main-nav .account-icon svg{
    width:100%;
    height:100%;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;
}



/* =========================================================
   MOBILE BUTTON
========================================================= */

.tp-menu-toggle{
    display:none;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .tp-brand-copy strong{
        font-size:22px;

        white-space:normal;
    }


    .tp-main-nav{
        gap:20px;
    }


    .tp-nav-link,
    .tp-course-button{
        font-size:14px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

    .tp-top-contact-inner{
        padding-top:7px;
        padding-bottom:7px;

        flex-direction:column;

        gap:5px;
    }


    .tp-top-contact-links{
        flex-wrap:wrap;

        justify-content:center;

        gap:8px 14px;
    }


    .tp-brand-row{
        min-height:92px;
    }


    .tp-main-brand{
        gap:10px;
    }


    .tp-main-brand > img{
        width:74px !important;
        height:74px !important;

        flex-basis:74px;
    }


    .tp-brand-copy strong{
        max-width:230px;

        font-size:17px;

        white-space:normal;
    }


    .tp-brand-copy small{
        font-size:11px;
    }


    .tp-menu-toggle{
        display:inline-flex !important;

        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        border:1px solid #dce5ea;

        border-radius:9px;

        background:#ffffff;

        color:#104b9a;

        font-size:20px;
    }


    .tp-main-nav{
        display:none !important;

        min-height:0;

        padding:8px 0 15px;

        flex-direction:column;

        align-items:stretch;

        gap:0;
    }


    .tp-main-nav.is-open{
        display:flex !important;
    }


    .tp-nav-link{
        min-height:45px;

        justify-content:flex-start;

        padding:0 14px;

        border-bottom:1px solid #edf1f4;
    }


    .tp-course-nav{
        display:block;

        min-height:0;

        width:100%;
    }


    .tp-course-button{
        width:100%;

        min-height:45px;

        justify-content:space-between;

        padding:0 14px;

        border-bottom:1px solid #edf1f4;
    }


    .courses-dropdown-menu{
        position:static !important;

        width:100% !important;
        max-width:none !important;

        max-height:none !important;

        padding:10px !important;

        transform:none !important;

        overflow:visible !important;

        border:0 !important;

        border-radius:0 !important;

        box-shadow:none !important;

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;
    }


    .courses-dropdown-grid{
        grid-template-columns:1fr !important;
    }


    .tp-main-nav .account-menu{
        padding:12px 14px 0;
    }


    .tp-main-nav .account-button{
        width:100%;

        justify-content:center;
    }

}