body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background-color: #fff9e6; }

/*  home-button */


.home-button {
    background-color: saddlebrown;
    color: crimson;
    padding: 5px 5px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 15px;
    gap: 10px; /* ఐకాన్ కి టెక్స్ట్ కి మధ్య దూరం */
    margin: 0px 1127px 120px -180px;
}
.home-button:hover {
    background-color: rosybrown;
}
 
.logo{
   
   margin-left: -800px;
   margin-top: -77px;
   padding: 0px 0px 0px  0px;
   margin-bottom: -80px;
   margin-top: -57px;
  

}

}

  /* Orange Header */
.main-header {
    background-color: #ffcc00; 
    color: #800000;
    text-align: center;
    padding: 22px ;
    position: relative;
    margin-bottom: 0px;
    margin-top: -11px;
    height: 65px;
    font-family: inherit !important;
     height: 120px;

        }


        /* Login/Logout Buttons top right */

        /* --- 5. లాగిన్/లాగౌట్ బటన్ స్టైల్ --- */


.auth-btn  {
    text-decoration: none;
    background-color: #8B0000;
    color: white;
    border: none;
    padding: 2px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    float: right;
    border-width: 1px;
    border-style: solid;
    border-color: crimson;
    margin-left: 5px;
        }

.auth-btn:hover {
    background-color: crimson;
    color: yellow;
    border: 1px solid #8b0000;
      }
	  
	  
	  


   /* Navigation Bar */
.navbar-container {
    background-color: #d31a38;
    border-top: 1px solid #fff;
    position: relative;
    z-index: 1000;
}

/* Using UL for the dropdown logic */
.navbar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.navbar li {
    position: relative; /* Essential for dropdown positioning */
    flex: 1;
    min-width: 100px;
}

.navbar button {
    width: 100%;
    background-color: #d31a38;
    color: white; /* Yellow text as seen in your image */
    padding: 12px 0px;
    border: 0.5px solid #ffffff66;
    cursor: pointer;
    font-size: 14px;
    font-style:oblique;
    text-align: center;
    white-space: nowrap;
          
}

.navbar button:hover {
    background-color: #b0152d;

}

 /* Dropdown Menus (Hidden by default) */
.dropdown, .submenu {
    display: none;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #d31a38;
    min-width: 180px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* Show Dropdown on Hover */
.navbar li:hover > .dropdown {
    display: block;
    top: 100%;
    left: 0;
}

.do{
   background-color: #d31a38;
   border-top: 1px solid #fff;
   color: #ddd;
   border-radius: 10px;
   font-weight: bold;

}

.do:hover {
    background-color: rosybrown;
}

.donts{
   background-color: #d31a38;
   border-top: 1px solid #fff;
   color: #ddd;
   border-radius: 10px;
   font-weight: bold;

}

.donts:hover {
    background-color: rosybrown;
}

/* Show Side-Submenu on Hover */
.has-submenu:hover > .submenu {
    display: block;
    top: 0;
    left: 100%; /* Opens to the right */

}

/* Text alignment for dropdown items */
.dropdown button {
    text-align: left;
    padding: 10px 15px;
    border-bottom: 0.5px solid #ffffff33;

}

/* Grid Layout */
.main-container {
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    gap: 15px;
    padding: 10px;
    font-style: oblique;
    color : crimson;
    align-items: start;

}

.left-grid {

    background: #fff;
    position: sticky;
    border: 1px solid #ddd;
    padding: 25px;
    text-align: center;
    color: #800000;
    
}  


.right-grid {

    background: #fff;
    position: sticky;
    border: 1px solid #ddd;
    padding: 25px;
    text-align: center;
    color: #800000;
}  


.lgimg {

    width: 125%;
    height: 500%; 
    margin-left: -16px ;
    

}

.lgsyb{

    width:35%;
    max-width: 100px;
    height:15%;


}

.rtsyb{

    width:35%;
    max-width: 100px;
    height:15%;


}



.center-grid {
    background: white;
    padding: 20px;
    border: 1px solid #ddd;
    min-height: 450px;

}

/* Footer */
.footer {
    background-color: #ffcc00;
    text-align: center;
    padding: 15px;
    font-size: 12px;
    color: #800000;
    font-weight: bold;
    margin-top: 20px;
    
}


/* footer */


.footer-container {


    text-decoration: none;
    list-style: none;
    background-color: #FFCC00; /* పసుపు రంగు బ్యాక్‌గ్రౌండ్ */
    padding: 25px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    
}




.footer-links a, .footer-social a {
    text-decoration: none;
    color: #8B0000; /* ముదురు ఎరుపు */
    margin: 0 12px;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}

/* ఐకాన్ల పరిమాణం మరియు గ్యాప్ */
.footer-social i {
    margin-right: 5px;
    font-size: 18px;
    vertical-align: middle;
}

.footer-copyright {
    color: #8B0000;
    font-size: 17px;
    
    text-align: center;
    flex: 1; /* మధ్యలో ఉండేలా చేస్తుంది */
}

/* మౌస్ పెట్టినప్పుడు ఎఫెక్ట్ */
.footer-links a:hover, .footer-social a:hover {
    color: #ffffff;
    text-shadow: 1px 1px 2px #000;
}




/* మొబైల్ వ్యూ కోసం */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .footer-links, .footer-social {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}



.elegant-img {
    /* ఇమేజ్ సైజు */
    width: auto;
    max-width: 700px;
    height: auto;

    /* బోర్డర్ - ముదురు ఎరుపు రంగు (Sanatana Parampara థీమ్ కి తగ్గట్టు) */
    border: 5px solid #8B0000;
    
    /* మూలలు కొంచెం గుండ్రంగా ఉండటానికి (Rounded Corners) */
    border-radius: 15px;

    /* షాడో (నీడ) - ఇది ఇమేజ్ కి త్రీడీ లుక్ ఇస్తుంది */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);

    /* మార్పులు మృదువుగా జరగడానికి (Smooth Transition) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    display: block;
    margin: 20px auto; /* ఇమేజ్ మధ్యలోకి రావడానికి */
}

/* మౌస్ ఇమేజ్ పైకి వెళ్ళినప్పుడు (Hover Effect) */
.elegant-img:hover {
    /* ఇమేజ్ కొంచెం పైకి లేచినట్లు కనిపిస్తుంది */
    transform: scale(1.05);
    
    /* షాడో కొంచెం పెరుగుతుంది */
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.5);
    
    /* బోర్డర్ రంగు మారుతుంది */
    border-color: #FFCC00;
}


        /* --- 4. గూగుల్ ట్రాన్స్‌లేట్ బాక్స్ స్టైల్ --- */
        .goog-te-gadget-simple {
            background-color: #ffffff !important;
            border: 1px solid #8b0000 !important;
            padding: 2px 10px !important;
            border-radius: 20px !important;
            align-items: center !important;
            height: 18px;
            margin-top: 1px;
            margin-bottom: 1px;
            margin-left: -70px;
            margin-right: 1px;
        }

        .goog-te-menu-value span {
            color: #000000 !important;
            font-weight: bold !important;
            font-size: 14px !important; /* బాక్స్‌లో సరిపోయే సైజు */
        }

        
        /* అదనపు గూగుల్ స్టైల్స్ క్లీనప్ */
        .goog-te-gadget img, .goog-te-banner-frame { display: none !important; }
        body { top: 0px !important; margin: 0; }