*{
    margin:0;
    padding:0;
    scroll-behavior: smooth;
}
html{
    font-size: 62.5%;
    overflow-x:hidden;
    /* 1rem=10px;*/
}
body{
    overflow-x:hidden;
}
/* This part for the first header with logo */
.header{
    font-family: 'Anek Kannada', sans-serif;
    padding:0 1.8rem 0 1.2rem; 
    height: 13rem;
    display:flex;
    justify-content:space-between;
    align-items: center;
    background-color: white;
    margin: 0;
}
.header .logo
{
    width:250px;
    display: block;
}
/* No problem  in navbar only if i add more elemnts it will be problem */
.navbar{
    display: flex;
    justify-content: space-between;
    gap:0.7rem;
}
.navbar-list
{
    display:flex;
    gap:5rem;
    list-style: none;
}
/* this is the image logo of janamitra and jinamitra */
.navbarlink_img
{
    width:180px;
    display: block;
}
.navbar-link:link,
.navbar-link:visited{
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    font-size:1.4rem;
    font-weight:500;
    /* color:black; */
    padding:0.3rem;
    margin-top: 2rem;
    border-radius: 0.5rem;
}
/* for janamitra and jinamitra logos */
.navbar-link {
    transition: transform 0.7s, box-shadow 0.7s, background-color 0.7s;
  }
.navbar-link:hover
{
    /* background-color: black; */
    transform: scale(1.2); /* Zoom in by 10% */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a shadow effect */
}
/* .navbar-link:active{
    background-color:#595959;
    color: white;
} */
/* This is to denote the active page or page that is been currently being viewed 
check for  id activepg in each page it varies*/
#activepg{
    background-color:#595959;
    color: white;
}
#dateContainer
{
    font-family: 'Anek Kannada', sans-serif;
    /* padding-left:7.8rem; */
    font-size: 1.4rem;
    text-align: center;
    /* padding-bottom: 1.3rem; */
}
#dateContainerm
{
    display: none;
}
/* ##################################################################################################### */
/* This is the second header or Category */
.header2{
    /* position:relative; */
    font-family: 'Anek Kannada', sans-serif;
    padding:0 4.8rem 0 1.6rem; 
    min-height: 2rem;
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    background-color: #f6c547;
    transition:all 0.8s;
}
    
/* this for the header to stay on top when scrolling */
.header2-fixed {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    width:100%;
    z-index: 1000;
    padding:0px;
  }
.navbar2-list
{
    display:flex;
    flex-direction: row;
    gap:0.8rem;
    list-style: none;
}
.navbar2-link
{
    display: inline-block;
    color: black;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.5s;
    padding:0.8rem 3.2rem 0.8rem 3.2rem;
}
.navbar2-link:hover
{
  background-color: #a93637;
  color: white;
  transition:0.5s;
}
.navbar2-link:active{
    background-color:#a93637;
    color: white;
}
#activepg2{
    background-color:#a93637;
    color: white;
}
/* Dropdown Menu under nav bar */
.navbar2-list li:hover .submenu
{   
    visibility: visible;
}
.submenu
{
    position:absolute;
    border-top:2px solid black;
    list-style: none;
    min-width: 12.5rem;
    background-color: #f6c547;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 500;
    visibility: hidden;
       
}
.submenu-link
{
    display:block;
    text-decoration: none;
    color: black;
    gap: 0.5rem;
    padding: 0.8rem 3.6rem;
}    
.submenu-link:hover
{
    background-color: #a93637;
    color: white;
    transition: 0.5s;
}
/* This is the down arrow used in desktop version */
#downarrowdesk
{
    visibility: visible;
}
/* ############################# */
/* This is for the downarrow  used for mobile version*/
#downarrow
{
    position: absolute;
    right: 20px;
    top:10px;
    font-size: 11px;
    display: inline-block;
    visibility: hidden;
    cursor: pointer;
}
/* #################################### */
/* Icons for socialmedia links */
.links a
{
    padding: 0.5rem;
}
/* ########################################################################################### */
/* This is for the mobile view start not exactly under stand*/
/* The down arrow is for submenu */
.mobile-navbar-btn
{
    display: none;
    background: transparent;
    cursor: pointer;
}
.mobile-icon[name="close"]
{
    display: none;
}
/* This the menu for the category section */
.category-btn
{
    display: none;
    background: transparent;
    cursor: pointer;
}
#cclose
{
    display: none;
}
#scrolltop
{
    position: fixed; 
    bottom: 2rem; 
    right: 3rem; 
    z-index: 59; 
    border: none;
    outline: none; 
    background-color: #f6c547;
    color: black; 
    cursor: pointer; 
    padding: 1rem; 
    border-radius: 4rem; /* Rounded corners */
    font-size: 1.8rem; /* Increase font size */
    
}
#scrolltop:hover{
    background-color: #a93637;
    color: white;
}
/* this is to show the copied link text */
#copylinktxt
{
    display: none;
    font-size: 14px;
}
/* ##################################### */
/* 70em means 1121px */
@media (max-width:70em)
{
    .mobile-navbar-btn
    {
        display: block;
        z-index: 130;
    }
    .header{
        position: relative;
        height: 9rem;
    }
    .header .logo
    {
        width:135px
    }
    .navbar{
        /* display:none; */
        /* This part is to get the nav bar hamburger*/
        width: 100%;
        height: 100vh;
        background-color: white;
        position: fixed;
        top:0; 
        left:0;
        /* get contents to center*/
        display: flex;
        justify-content: center;
        align-items: center;
        /* TO get transition */
        transform: translateX(100%);
        /* transition: all 0.9s linear; */
        opacity: 0;
        visibility:hidden;
        pointer-events: none;
        z-index: 130;
    } 
    .navbar-list{
        flex-direction: column;
        align-items: center;
        gap:0.5rem;     
    }
    .active .navbar{
        transform: translateX(0);
        transition: all 0.5s linear;
        opacity: 1;
        visibility: visible;
        pointer-events:auto;
    }
    .active .mobile-navbar-btn .mobile-icon[name="close"]{
        display: block;
    }
    .active .mobile-navbar-btn .mobile-icon[name="menu"]{
        display: none;
    }
    #dateContainer
    {
        display: none;
    }
    #dateContainerm
    {
        display: block;
        font-family: 'Anek Kannada', sans-serif;
        font-size: 1rem;
        text-align: center;
    }
    /* ####### Category Buttons ############ */
    .category-btn
    {
        position: relative;
        display:block;
        z-index: 102;
    }
    .header2
    {
        /* position: relative; */
        padding:0 1rem 0 1.6rem; 
        padding-top: 0.5rem;
        height:35px;
        z-index: 100;
        justify-content:space-between;
        /* background-color: transparent; */
    }
    .header2-fixed 
    {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        height:40px;
        width:100%;
        z-index: 1000;
        padding:0 1rem 0 2rem; 
    }
    .navbar2
    {
        /* display:none; */
        /* This part is to get the nav bar ham*/
        width: 100%;
        height: 100vh;
        background-color:#f6c547;
        position:fixed;
        top:0; 
        left:0;
        /* get contents to center*/
        display: flex;
        justify-content:left;
        align-items:center; 
        /* TO get transition */
        transform:translateX(-100%);
        /* transition:0.5s ease-in-out; */
        opacity: 0;
        visibility:hidden;
        pointer-events: none;
        z-index: 100;
        overflow-x: hidden;
        overflow-y: scroll;
    } 
    .navbar2-list
    {
        position:absolute;
        left:0;
        right: 0;
        top:18rem;
        flex-direction: column;
        width: 100%;
        margin:auto;
    }
    .navbar2-link{
        width: 100%;
        padding-left:60px;
    }
    /* .navbar2-list li
    {
        border-top: 1px solid black;
    } */
    /* This is for the submenu */
    .submenu
    {
        position: relative;
        background-color: #f6c547;
        width: 100%;
        text-transform: uppercase;
        text-decoration: none;
        visibility:hidden;
        display: none;
        transform: translateY(-100%); 
        transition:all 0.5s; 
    }
    .submenu-link
    {
        font-size:13px;
        padding-left: 90px;
    }
    /* This is for the down arrow mobile */
    #downarrow
    {
        visibility: visible;
    }
    .mobile-downarrow {
        display: block;
        transform: translateY(0);
    }
    /* ###################### */
    /* downarrow desktop not visible in mobile version */
    #downarrowdesk
    {
        visibility: hidden;
    }
    .active2 .navbar2{
        transform: translateX(0);
        transition: all 0.5s linear;
        opacity: 1;
        visibility: visible;
        pointer-events:auto;
    }
    .active2 .category-btn #cclose{
        display: block;
    }
    .active2 .category-btn #copen{
        display: none;
    }
    #scrolltop
    {
        bottom: 5.5rem; 
    }
    #scrolltop:hover{
        background-color: #f6c547;
        color: black;
    }
    
}