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

/*  home-button */


.home-button {
    background-color: yellow;
    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: -26px;
  

}

  /* Orange Header */
.main-header {
    
    background-color: #ffcc00; 
    color: #800000;
    text-align: center;
    padding: 15px ;
    position: relative;
   
 }
.main-header h1 { margin: 0; font-size: 32px; font-weight: bold; }

        /* Login/Logout Buttons top right */

.loginbutten {  

	background-color: none;
	float: right;
    display: block;
    color: darkred;
    text-align: center;
    margin: -15px 1px 1px 1px;
    margin-top: auto;
}
.logoutbutton{
	background-color: none;
	float: right;
    display: block;
    color: darkred;
    text-align: center;
    margin: -15px 15px 5px 20px ;
    margin-top: auto;

}

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

/* 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: 10px 5px;
    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;ma

}

.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%;

}

.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-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;
}