/********** Template CSS **********/

:root {

    --primary: #B78D65;

    --light: #F8F8F8;

    --dark: #252525;

}



h1,

h2,

.h1,

.h2,

.fw-bold {

    font-weight: 600 !important;

}



h3,

h4,

.h3,

.h4,

.fw-medium {

    font-weight: 500 !important;

}



h5,

h6,

.h5,

.h6,

.fw-normal {

    font-weight: 400 !important;

}



.back-to-top {

    position: fixed;

    display: none;

    right: 30px;

    bottom: 30px;

    z-index: 99;

}





/*** Spinner ***/

#spinner {

    opacity: 0;

    visibility: hidden;

    transition: opacity .5s ease-out, visibility 0s linear .5s;

    z-index: 99999;

}



#spinner.show {

    transition: opacity .5s ease-out, visibility 0s linear 0s;

    visibility: visible;

    opacity: 1;

}





/*** Button ***/

.btn {

    font-weight: 500;

    transition: .5s;

}



.btn.btn-primary,

.btn.btn-secondary {

    color: #FFFFFF;

}



.btn-square {

    width: 38px;

    height: 38px;

}



.btn-sm-square {

    width: 32px;

    height: 32px;

}



.btn-lg-square {

    width: 48px;

    height: 48px;

}



.btn-square,

.btn-sm-square,

.btn-lg-square {

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: normal;

}



.btn-outline-body {

    color: var(--primary);

    border-color: #777777;

}



.btn-outline-body:hover {

    color: #FFFFFF;

    background: var(--primary);

    border-color: var(--primary);

}





/*** Navbar ***/

.navbar .dropdown-toggle::after {

    border: none;

    content: "\f107";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    vertical-align: middle;

    margin-left: 8px;

}



.navbar .navbar-nav .nav-link {

    margin-right: 30px;

    padding: 30px 0;

    color: var(--dark);

    font-weight: 500;

    text-transform: uppercase;

    outline: none;

}



.navbar .navbar-nav .nav-link:hover,

.navbar .navbar-nav .nav-link.active {

    color: var(--primary);

}



.navbar.sticky-top {

    top: -100px;

    transition: .5s;

}



@media (max-width: 991.98px) {

    .navbar .navbar-nav .nav-link {

        margin-right: 0;

        padding: 10px 0;

    }



    .navbar .navbar-nav {

        border-top: 1px solid #EEEEEE;

    }

}



@media (min-width: 992px) {

    .navbar .nav-item .dropdown-menu {

        display: block;

        visibility: hidden;

        top: 100%;

        transform: rotateX(-75deg);

        transform-origin: 0% 0%;

        transition: .5s;

        opacity: 0;

    }



    .navbar .nav-item:hover .dropdown-menu {

        transform: rotateX(0deg);

        visibility: visible;

        transition: .5s;

        opacity: 1;

    }

}





/*** Header ***/

.owl-carousel-inner {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    display: flex;

    align-items: center;

    background: rgba(0, 0, 0, .5);

}



@media (max-width: 768px) {

    .header-carousel .owl-carousel-item {

        position: relative;

        min-height: 500px;

    }



    .header-carousel .owl-carousel-item img {

        position: absolute;

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    .header-carousel .owl-carousel-item p {

        font-size: 16px !important;

    }

}



.header-carousel .owl-dots {

    position: absolute;

    width: 60px;

    height: 100%;

    top: 0;

    right: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.header-carousel .owl-dots .owl-dot {

    position: relative;

    width: 45px;

    height: 45px;

    margin: 5px 0;

    background: var(--dark);

    transition: .5s;

}



.header-carousel .owl-dots .owl-dot.active {

    width: 60px;

    height: 60px;

}



.header-carousel .owl-dots .owl-dot img {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    padding: 2px;

    transition: .5s;

    opacity: .3;

}



.header-carousel .owl-dots .owl-dot.active img {

    opacity: 1;

}



.page-header {

    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/banner-1.png) center center no-repeat;

    background-size: cover;

}



.breadcrumb-item+.breadcrumb-item::before {

    color: var(--light);

}





/*** Section Title ***/

.section-title {

    color: var(--primary);

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;

}





/*** Facts ***/

.fact-item .fact-icon {

    width: 120px;

    height: 120px;

    margin-top: -60px;

    margin-bottom: 1.5rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #FFFFFF;

    border-radius: 120px;

    transition: .5s;

}



.fact-item:hover .fact-icon {

    background: var(--dark);

}



.fact-item .fact-icon i {

    color: var(--primary);

    transition: .5;

}



.fact-item:hover .fact-icon i {

    color: #FFFFFF;

}





/*** About & Feature ***/

.about-img,

.feature-img {

    position: relative;

    height: 100%;

    min-height: 400px;

}



.about-img img,

.feature-img img {

    position: absolute;

    width: 60%;

    height: 80%;

    object-fit: cover;

}



.about-img img:last-child,

.feature-img img:last-child {

    margin: 20% 0 0 40%;

}



.about-img::before,

.feature-img::before {

    position: absolute;

    content: "";

    width: 60%;

    height: 80%;

    top: 10%;

    left: 20%;

    border: 5px solid var(--primary);

    z-index: -1;

}





/*** Service ***/

.service-item .bg-img {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -1;

}



.service-item .service-text {

    background: var(--light);

    transition: .5s;

}



.service-item:hover .service-text {

    background: rgba(0, 0, 0, .7);

}



.service-item * {

    transition: .5;

}



.service-item:hover * {

    color: #FFFFFF;

}



.service-item .btn {

    width: 40px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    color: var(--dark);

    background: #FFFFFF;

    white-space: nowrap;

    overflow: hidden;

    transition: .5s;

}



.service-item:hover .btn {

    width: 140px;

}





/*** Project ***/

.project .nav .nav-link {

    background: var(--light);

    transition: .5s;

}



.project .nav .nav-link.active {

    background: var(--primary);

}



.project .nav .nav-link.active h3 {

    color: #FFFFFF !important;

}





/*** Team ***/

.team-items {

    margin: -.75rem;

}



.team-item {

    padding: .75rem;

}



.team-item::after {

    position: absolute;

    content: "";

    width: 100%;

    height: 0;

    top: 0;

    left: 0;

    background: #FFFFFF;

    transition: .5s;

    z-index: -1;

}



.team-item:hover::after {

    height: 100%;

    background: var(--primary);

}



.team-item .team-social {

    position: absolute;

    width: 100%;

    bottom: -20px;

    left: 0;

}



.team-item .team-social .btn {

    display: inline-flex;

    margin: 0 2px;

    color: var(--primary);

    background: var(--light);

}



.team-item .team-social .btn:hover {

    color: #FFFFFF;

    background: var(--primary);

}





/*** Appointment ***/

.bootstrap-datetimepicker-widget.bottom {

    top: auto !important;

}



.bootstrap-datetimepicker-widget .table * {

    border-bottom-width: 0px;

}



.bootstrap-datetimepicker-widget .table th {

    font-weight: 500;

}



.bootstrap-datetimepicker-widget.dropdown-menu {

    padding: 10px;

    border-radius: 2px;

}



.bootstrap-datetimepicker-widget table td.active,

.bootstrap-datetimepicker-widget table td.active:hover {

    background: var(--primary);

}



.bootstrap-datetimepicker-widget table td.today::before {

    border-bottom-color: var(--primary);

}





/*** Testimonial ***/

.testimonial-carousel {

    display: flex !important;

    flex-direction: column-reverse;

    max-width: 700px;

    margin: 0 auto;

}



.testimonial-carousel .owl-dots {

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

}



.testimonial-carousel .owl-dots .owl-dot {

    position: relative;

    width: 60px;

    height: 60px;

    margin: 0 5px;

    transition: .5s;

}



.testimonial-carousel .owl-dots .owl-dot.active {

    width: 100px;

    height: 100px;

}



.testimonial-carousel .owl-dots .owl-dot::after {

    position: absolute;

    width: 40px;

    height: 40px;

    bottom: -20px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    content: "\f10d";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    color: var(--primary);

    background: #FFFFFF;

    border-radius: 40px;

    transition: .5s;

    opacity: 0;

}



.testimonial-carousel .owl-dots .owl-dot.active::after {

    opacity: 1;

}



.testimonial-carousel .owl-dots .owl-dot img {

    opacity: .4;

    transition: .5s;

}



.testimonial-carousel .owl-dots .owl-dot.active img {

    opacity: 1;

}





/*** Footer ***/

.footer .btn.btn-link {

    display: block;

    margin-bottom: 5px;

    padding: 0;

    text-align: left;

    color: #777777;

    font-weight: normal;

    text-transform: capitalize;

    transition: .3s;

}



.footer .btn.btn-link::before {

    position: relative;

    content: "\f105";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    color: var(--primary);

    margin-right: 10px;

}



.footer .btn.btn-link:hover {

    color: var(--primary);

    letter-spacing: 1px;

    box-shadow: none;

}



.footer .form-control {

    border-color: #777777;

}



.footer .copyright {

    padding: 25px 0;

    font-size: 15px;

    border-top: 1px solid rgba(256, 256, 256, .1);

}



.footer .copyright a {

    color: var(--light);

}



.footer .copyright a:hover {

    color: var(--primary);

}





/* new css */

/* ===============================

   GRAMPANCHAYAT COLOR THEME

================================= */



/* Primary Colors */

:root {

    --primary: #5C1A1B;   /* Maroon */

    --secondary: #C9A13B; /* Gold */

    --green: #138808;     /* Accent Green */

}



/* Topbar */

.container-fluid.bg-dark {

    background-color: var(--primary) !important;

    color: #fff;

}



.container-fluid.bg-dark a {

    /* color: #fff !important; */
    color: #fff;

}

.gp-ls-pill.gp-ls-active {
    color: #000000 !important;
}



/* Navbar Logo */

.navbar h1 {

    color: var(--primary) !important;

    font-weight: 500;

}



/* Menu Links */

.navbar .nav-link {

    color: #333 !important;

    font-weight: 500;

}



.navbar .nav-link:hover,

.navbar .nav-link.active {

    color: var(--secondary) !important;

}



/* Dropdown */

.dropdown-menu .dropdown-item:hover {

    background-color: var(--secondary);

    color: #fff;

}



/* Buttons */

.btn-primary {

    background-color: var(--secondary) !important;

    border: none !important;

    color: #fff !important;

}



.btn-primary:hover {

    background-color: #a8842f !important;

}



/* Section Titles */

.section-title {

    color: var(--primary);

    font-weight: 600;

}



/* Icons Color */

.text-primary {

    color: var(--secondary) !important;

}



/* Facts / Cards */

.fact-item {

    border-top: 3px solid var(--secondary);

}



/* Service Hover */

.service-item:hover {

    border-color: var(--secondary);

}



/* Footer */

.footer {

    background-color: var(--primary) !important;

    color: #fff;

}



.footer a {

    color: #ddd;

}



.footer a:hover {

    color: var(--secondary);

}



/* Back to top button */

.back-to-top {

    background-color: var(--secondary) !important;

    color: #fff !important;

}



/* Remove dark look from bg-light sections */

.bg-light {

    background-color: #FFF8E1 !important; /* light cream */

}



/* Optional Green Accent (use for highlights) */

.green-text {

    color: var(--green);

}



/* Mobile Navbar Fix */

.gp-title {

    font-size: 22px;

    color: #5C1A1B;

}



/* Mobile Responsive */

@media (max-width: 768px) {



    .gp-title {

        font-size: 16px;

    }



    .navbar-brand img {

        /* width: 45px !important; */

        width: 65px !important;

    }



    .navbar {

        padding: 10px !important;

    }



    .navbar-toggler {

        border: none;

    }



    .navbar-collapse {

        background: #fff;

        margin-top: 10px;

        border-radius: 8px;

        padding: 10px;

    }



    .nav-link {

        padding: 10px 0;

        border-bottom: 1px solid #eee;

    }



    .btn-primary {

        width: 100%;

        margin-top: 10px;

    }

}
    
/* ============================================================
   MOBILE RESPONSIVE FIXES — All pages & themes
   ============================================================ */

/* ── Language Switcher ── */
.gp-lang-switcher { display:flex; align-items:center; gap:3px; flex-wrap:wrap; }
.gp-lang-pill { font-size:11px; padding:3px 8px; border-radius:10px; white-space:nowrap; }

/* ── Facts Cards — full width on phones ── */
@media(max-width:575px) {
    .col-md-6 { width:100% !important; }
    .gp-fc { padding:20px 16px; }
    .gp-fc h3 { font-size:14px; }
    .gp-fc p { font-size:13px; }
    .gp-fc-icon { width:50px; height:50px; font-size:22px; }
}

/* ── Homepage Notice Bar on mobile ── */
@media(max-width:576px) {
    #notices .container { padding-left:12px; padding-right:12px; }
    #notices a[href*="notice-detail"] { padding:10px 14px; gap:8px; }
    #notices a[href*="notice-detail"] span:nth-child(3) { display:none; } /* hide date on very small */
}

/* ── Work Cards on mobile ── */
@media(max-width:576px) {
    .work-card { flex-direction:column; }
    .work-card .wimg { width:100%; height:160px; }
    .work-card .wbody { padding:14px; }
    .filter-tab { padding:6px 14px; font-size:12px; }
}

/* ── Gallery grid on mobile ── */
@media(max-width:480px) {
    .gal-grid { grid-template-columns:repeat(2,1fr) !important; gap:6px; }
}

/* ── Notices listing on mobile ── */
@media(max-width:576px) {
    .notice-card { padding:14px 16px; gap:10px; }
    .notice-card h4 { font-size:14px; }
    .notice-icon { width:36px; height:36px; font-size:16px; }
    .notice-arrow { display:none; }
    .filter-pill { font-size:12px; padding:5px 12px; }
}

/* ── Work Detail on mobile ── */
@media(max-width:768px) {
    .nd-wrap { grid-template-columns:1fr !important; padding:20px 12px 40px; gap:16px; }
    .nd-main-header { padding:18px 16px 14px; }
    .nd-title { font-size:18px; }
    .nd-content { padding:18px 16px; }
    .nd-attachment { margin:14px 16px; padding:12px 14px; gap:10px; }
    .nd-footer { padding:14px 16px; }
    .nd-body { font-size:14px; }
}

/* ── Contact page on mobile ── */
@media(max-width:576px) {
    .bg-light.d-flex.align-items-center { padding:14px !important; }
    .bg-light.d-flex.align-items-center .ms-4 { margin-left:12px !important; }
    .bg-light.d-flex.align-items-center div[style*="55px"] { width:42px !important; height:42px !important; }
}

/* ── About General Info table ── */
@media(max-width:576px) {
    .gen-info-label { width:45% !important; font-size:12px !important; padding:9px 12px !important; }
    .gen-info-value { font-size:12px !important; padding:9px 12px !important; }
    .gen-info-header h3 { font-size:14px; }
}

/* ── Schemes page ── */
@media(max-width:576px) {
    .service-item { min-height:220px; }
}

/* ── Carousel text on mobile ── */
@media(max-width:576px) {
    .owl-carousel-item h1 { font-size:1.6rem !important; line-height:1.3; }
    .owl-carousel-item p { font-size:13px !important; }
    .owl-carousel-item .btn { padding:8px 20px !important; font-size:13px !important; }
    .header-carousel .owl-carousel-item { min-height:260px !important; }
    .owl-carousel-inner { padding:20px 0 !important; }
}

/* ── Green/Saffron/Blue hero on mobile ── */
@media(max-width:576px) {
    .sf-hero-title, .bl-slide h1 { font-size:22px !important; }
    .sf-hero-slide, .bl-slide { min-height:300px !important; }
    .sf-hero-content, .bl-slide-content { padding:30px 0 !important; }
    .gp-section-label, .sf-label, .bl-label-tag { font-size:11px; }
}

/* ── Navbar brand text truncation ── */
@media(max-width:380px) {
    .gp-title, .brand-name { font-size:13px !important; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ── Footer on mobile ── */
@media(max-width:768px) {
    .nd-sidebar { display:none !important; }
    .footer .col-lg-3, .bl-footer .col-lg-3, .sf-footer .col-lg-3, .gp-footer .col-lg-3 { margin-bottom:8px; }
}

/* ── Green theme mobile ── */
@media(max-width:768px) {
    .gp-navbar .nav-link { padding:10px 16px !important; border-bottom:none !important; border-left:3px solid transparent; }
    .gp-navbar .nav-link.active { border-left-color:var(--gp-accent,#f5a623); }
    .gp-work-card .work-img { width:100px; }
    .gp-gallery-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; }
}

/* ── Saffron mobile ── */
@media(max-width:768px) {
    .sf-navbar .nav-link { padding:10px 16px !important; }
    .sf-work-card { flex-direction:column; }
    .sf-work-card .sf-work-img { width:100%; height:160px; }
    .sf-gallery-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px; }
}

/* ── Blue mobile ── */
@media(max-width:768px) {
    .bl-nav .nav-link { padding:10px 16px !important; }
    .bl-work { flex-direction:column; }
    .bl-work .wimg { width:100%; height:160px; }
    .bl-gal-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px; }
}

/* ── General container padding on small phones ── */
@media(max-width:380px) {
    .container, .container-xxl { padding-left:12px !important; padding-right:12px !important; }
    .container-fluid { padding-left:0 !important; padding-right:0 !important; }
}

/* ── Prevent horizontal scroll ── */
body { overflow-x:hidden; }
.row { margin-left:0 !important; margin-right:0 !important; }
@media(max-width:768px) {
    .row { overflow:hidden; }
}

/* ── Table scroll on mobile (About info) ── */
@media(max-width:576px) {
    .lang-row3 { grid-template-columns:1fr !important; }
    .form-row { grid-template-columns:1fr !important; }
}

/* ── Work detail gallery mobile ── */
@media(max-width:640px) {
    .wd-gallery-main { grid-template-columns:1fr !important; height:auto !important; }
    .wd-gallery-main .side { flex-direction:row; height:130px; }
    .wd-grid-img { aspect-ratio:1; }
}

/* ── Notices sidebar hide on mobile ── */
@media(max-width:768px) {
    .nd-sidebar.d-none.d-md-block { display:none !important; }
}


/* Lang switcher inside mobile navbar (white background) */
.navbar-collapse .gp-lang-sw .gp-ls-pill,
#navbarCollapse .gp-lang-sw .gp-ls-pill,
#greenNav .gp-lang-sw .gp-ls-pill,
#sfNav .gp-lang-sw .gp-ls-pill,
#blNav .gp-lang-sw .gp-ls-pill {
    border-color: rgba(0,0,0,0.2) !important;
    color: #444 !important;
    background: rgba(0,0,0,0.05) !important;
}
.navbar-collapse .gp-lang-sw .gp-ls-pill:hover,
#navbarCollapse .gp-lang-sw .gp-ls-pill:hover,
#greenNav .gp-lang-sw .gp-ls-pill:hover,
#sfNav .gp-lang-sw .gp-ls-pill:hover,
#blNav .gp-lang-sw .gp-ls-pill:hover {
    background: rgba(0,0,0,0.12) !important;
    color: #111 !important;
}
.navbar-collapse .gp-lang-sw .gp-ls-pill.gp-ls-active,
#navbarCollapse .gp-lang-sw .gp-ls-pill.gp-ls-active,
#greenNav .gp-lang-sw .gp-ls-pill.gp-ls-active,
#sfNav .gp-lang-sw .gp-ls-pill.gp-ls-active,
#blNav .gp-lang-sw .gp-ls-pill.gp-ls-active {
    background: #B78D65 !important;
    color: #fff !important;
    border-color: #B78D65 !important;
}

/* Saffron contact bar lang switcher (light background) */
.sf-contact-bar .gp-lang-sw .gp-ls-pill {
    border-color: rgba(0,0,0,0.2) !important;
    color: #555 !important;
    background: rgba(0,0,0,0.04) !important;
}
.sf-contact-bar .gp-lang-sw .gp-ls-pill:hover {
    background: rgba(0,0,0,0.1) !important; color:#111 !important;
}
.sf-contact-bar .gp-lang-sw .gp-ls-pill.gp-ls-active {
    background: var(--sf-saffron, #FF6B00) !important;
    color: #fff !important;
    border-color: var(--sf-saffron, #FF6B00) !important;
}

/* Blue topbar (white background) */
.bl-topbar .gp-lang-sw .gp-ls-pill {
    border-color: rgba(0,0,0,0.2) !important;
    color: #444 !important;
    background: rgba(0,0,0,0.04) !important;
}
.bl-topbar .gp-lang-sw .gp-ls-pill:hover {
    background: rgba(0,0,0,0.1) !important; color:#111 !important;
}
.bl-topbar .gp-lang-sw .gp-ls-pill.gp-ls-active {
    background: var(--bl-primary, #1a56db) !important;
    color: #fff !important;
    border-color: var(--bl-primary, #1a56db) !important;
}


.text-primary-icon {
    color: #FFF !important;
}