
<style>

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    background:#fff;
}


/* ============================
   HEADER
============================ */

.ganesh-header{
    width:100%;
    background:#fff;
}

.ganesh-header a{
    display:block;
}

.ganesh-header img{
    width:100%;
    height:auto;
    display:block;
}


/* ============================
   MENUBAR
============================ */

.main-menubar{

    width:100%;
    min-height:95px;

    display:flex;
    align-items:center;
    gap:12px;
  
    background:linear-gradient(
        90deg,
        #720000,
        #b50000,
        #ff6a00
    );

    color:#fff;

    position:sticky;
    top:20;

    z-index:9998;

    box-shadow:0 3px 8px rgba(0,0,0,.25);
}


.menu-toggle{

    width:42px;
    height:42px;

    flex-shrink:0;
margin-top:20px;

    border:1px solid rgba(255,255,255,.5);

    border-radius:8px;

    background:rgba(255,255,255,.15);

    color:#fff;

    font-size:22px;

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;
}


.menu-title{

margin-top:20px;
    font-size:34px;

    font-weight:800;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    flex:1;
}


.menu-title i{

    color:#ffd700;

    margin-right:7px;
}


/* ============================
   SIDE MENU
============================ */

.side-menu{

    position:fixed;

    top:0;

    left:-330px;

    width:310px;

    max-width:85%;

    height:100vh;

    background:#fff;

    z-index:10001;

    overflow-y:auto;

    transition:left .35s ease;

    box-shadow:5px 0 20px rgba(0,0,0,.3);
}


.side-menu.active{

    left:0;
}


.side-menu-header{

    min-height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 18px;

    background:linear-gradient(
        135deg,
        #720000,
        #c50000,
        #ff7600
    );

    color:#fff;

    font-size:20px;

    font-weight:700;
}


.side-menu-header i{

    color:#ffd700;

    margin-right:7px;
}


.side-menu-header button{

    width:38px;
    height:38px;

    border:0;

    border-radius:50%;

    background:rgba(255,255,255,.2);

    color:#fff;

    font-size:21px;
}


.side-menu > a{

    min-height:55px;

    display:flex;

    align-items:center;

    padding:10px 18px;

    border-bottom:1px solid #eee;

    color:#333;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.2s;
}


.side-menu > a i{

    width:35px;

    margin-right:12px;

    color:#a50000;

    text-align:center;

    font-size:18px;
}


.side-menu > a:hover{

    background:#fff4df;

    color:#a50000;

    padding-left:23px;
}


/* ============================
   OVERLAY
============================ */

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    z-index:10000;

    visibility:hidden;

    opacity:0;

    transition:.3s;
}


.menu-overlay.active{

    visibility:visible;

    opacity:1;
}


body.menu-open{

    overflow:hidden;
}


/* ============================
   SLIDER
============================ */

.home-slider{

    width:100%;

    overflow:hidden;
}


#homeSlider{

    width:100%;
}


.slider-image{

    width:100%;

    height:350px;

    object-fit:cover;

    object-position:center;
}


@media(max-width:768px){

    .slider-image{

        height:240px;

    }

}


@media(max-width:480px){

    .slider-image{

        height:200px;

    }

}


/* ============================
   NOTICE
============================ */

.notice-box{

    background:pink;
}


.notice-marquee{

    font-size:16px;

    font-weight:700;

    color:#fff;

    padding:7px 0;

    background-image:url('online-bg.gif');
}

.company-section {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Image Container */
.year-image-box {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Background Image */
.year-image-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text exactly in center */
.year-text {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background: rgba(255, 255, 255, 0.90);

    color: #8b0000;

    font-size: 32px;
    font-weight: 900;

    padding: 12px 35px;

    border: 3px solid #d18b00;
    border-radius: 30px;

    text-align: center;

    white-space: nowrap;

    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}


/* Mobile */
@media(max-width: 600px) {

    .year-text {
        font-size: 22px;
        padding: 8px 22px;
        border-width: 2px;
    }

}

/* ============================
   SOCIAL
============================ */

.social-links{

    display:flex;

    gap:15px;

    justify-content:center;

    align-items:center;

    margin:20px 0;
}


.social-links a{

    width:45px;

    height:45px;

    border-radius:50%;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:22px;

    transition:.3s;
}


.facebook{
    background:#1877F2;
}

.instagram{
    background:#E4405F;
}

.youtube{
    background:#FF0000;
}


.social-links a:hover{

    transform:scale(1.15);

    opacity:.9;
}


/* ============================
   SECTION OFFSET
============================ */

#committee,
#murti,
#payment,
#contact{

    scroll-margin-top:70px;
}


/* ============================
   MOBILE
============================ */

@media(max-width:600px){

    .main-menubar{

        min-height:72px;

        padding:15px 10px;

    }


    .menu-toggle{

        width:40px;

        height:40px;

    }


    .menu-title{

        font-size:14px;

    }


    .side-menu{

        width:285px;

    }

}

</style>
