/* ========================================================= ROOT VARIABLES ========================================================= */ :root { --primary: rgb(8, 61, 119); --primary-dark: rgb(5, 43, 84); --secondary: #f5f8fc; --text: #263238; --muted: #6c757d; --white: #ffffff; } /* ========================================================= RESET ========================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================= HTML ========================================================= */ html { scroll-behavior: smooth; } /* ========================================================= BODY ========================================================= */ body { font-family: "Noto Sans Devanagari", sans-serif; color: var(--text); background: #fff; padding-bottom: 0; overflow-x: hidden; } /* ========================================================= LINKS ========================================================= */ a { text-decoration: none; } /* ========================================================= TOP BAR ========================================================= */ .top-bar { background: var(--primary-dark); color: #fff; font-size: 14px; padding: 8px 0; } .top-bar a { color: #fff; } .top-bar i { margin-right: 5px; } /* ========================================================= MAIN NAVBAR ========================================================= */ .main-navbar { background: var(--primary); padding: 14px 0; } .navbar-brand { display: flex; align-items: center; gap: 12px; color: #fff !important; } .brand-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); font-size: 23px; } .navbar-brand span { display: block; font-size: 20px; font-weight: 700; } .navbar-brand small { display: block; font-size: 11px; opacity: .85; } .nav-link { color: #fff !important; font-weight: 500; margin: 0 5px; transition: .3s; } .nav-link:hover, .nav-link.active { color: #d9ebff !important; } .booking-btn { color: var(--primary); font-weight: 700; } /* ========================================================= HERO ========================================================= */ .hero-section { min-height: 650px; display: flex; align-items: center; position: relative; background: linear-gradient( rgba(8,61,119,.72), rgba(5,43,84,.78) ), url("../images/hero.jpg") center/cover no-repeat; } .hero-overlay { position: absolute; inset: 0; } .min-vh-75 { min-height: 650px; } .hero-content { position: relative; z-index: 2; padding-top: 40px; } .hero-badge { display: inline-block; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); padding: 8px 18px; border-radius: 50px; margin-bottom: 20px; } .hero-content h1 { font-size: clamp(38px, 6vw, 72px); line-height: 1.15; font-weight: 800; } .hero-content h1 span { display: block; color: #d9ebff; } .hero-content p { max-width: 650px; font-size: 19px; line-height: 1.8; opacity: .95; } .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .btn-primary-custom { background: var(--primary); color: #fff; border: 2px solid var(--primary); padding: 11px 24px; border-radius: 8px; font-weight: 700; transition: .3s; } .btn-primary-custom:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; transform: translateY(-2px); } /* ========================================================= QUICK INFORMATION ========================================================= */ .quick-info { position: relative; margin-top: -55px; z-index: 5; } .quick-card { background: #fff; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 10px 35px rgba(0,0,0,.1); height: 100%; } .quick-card > i { color: var(--primary); font-size: 28px; } .quick-card strong { display: block; } .quick-card small { color: var(--muted); } /* ========================================================= SECTION ========================================================= */ .section-padding { padding: 90px 0; } .section-heading { max-width: 750px; margin: auto; } .section-label { color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; } .section-title { font-size: clamp(30px, 4vw, 46px); font-weight: 800; margin-top: 10px; } .section-title span { color: var(--primary); } .section-heading p { color: var(--muted); margin-top: 15px; } /* ========================================================= ABOUT ========================================================= */ .about-image { position: relative; } .about-image img { width: 100%; height: 500px; object-fit: cover; border-radius: 20px; } .about-badge { position: absolute; bottom: 25px; left: 25px; background: var(--primary); color: #fff; padding: 14px 20px; border-radius: 10px; } .about-badge i { margin-right: 8px; } .about-image + div p { color: var(--muted); line-height: 1.9; } .feature-mini { display: flex; align-items: center; gap: 12px; font-weight: 600; } .feature-mini i { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #eaf3ff; color: var(--primary); } /* ========================================================= ROOM CARDS ========================================================= */ .room-card { background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.08); height: 100%; transition: .35s; } .room-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,.13); } .room-image { height: 240px; position: relative; overflow: hidden; } .room-image img { width: 100%; height: 100%; object-fit: cover; transition: .5s; } .room-card:hover .room-image img { transform: scale(1.07); } .room-tag { position: absolute; top: 15px; left: 15px; background: var(--primary); color: #fff; padding: 6px 12px; border-radius: 5px; font-size: 12px; } .room-content { padding: 25px; } .room-content h3 { font-weight: 700; } .room-content p { color: var(--muted); } .room-content ul { padding: 0; list-style: none; } .room-content li { margin-bottom: 8px; font-size: 14px; } .room-content li i { color: var(--primary); margin-right: 7px; } /* ========================================================= FACILITIES ========================================================= */ .facility-card { height: 100%; padding: 30px 20px; text-align: center; border: 1px solid #e8edf3; border-radius: 14px; transition: .3s; } .facility-card:hover { border-color: var(--primary); transform: translateY(-6px); box-shadow: 0 10px 30px rgba(8,61,119,.1); } .facility-icon { width: 65px; height: 65px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: #eaf3ff; color: var(--primary); border-radius: 50%; font-size: 25px; } .facility-card h5 { font-weight: 700; } .facility-card p { color: var(--muted); font-size: 14px; } /* ========================================================= MAHAKAL SECTION ========================================================= */ .mahakal-section { padding: 90px 0; background: linear-gradient( 135deg, var(--primary), var(--primary-dark) ); color: #fff; } .mahakal-section h2 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; } .mahakal-section p { font-size: 17px; line-height: 1.8; opacity: .9; } .mahakal-card { min-height: 300px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.08); } .mahakal-card i { font-size: 80px; margin-bottom: 15px; } /* ========================================================= GALLERY ========================================================= */ .gallery-item { height: 280px; position: relative; overflow: hidden; border-radius: 12px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: .5s; } .gallery-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,61,119,.7); color: #fff; font-size: 30px; opacity: 0; transition: .3s; } .gallery-item:hover img { transform: scale(1.08); } .gallery-item:hover .gallery-overlay { opacity: 1; } /* ========================================================= CONTACT ========================================================= */ .contact-card { padding: 25px; border: 1px solid #e8edf3; border-radius: 12px; margin-bottom: 15px; } .contact-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #eaf3ff; color: var(--primary); border-radius: 50%; margin-bottom: 15px; } .contact-card h5 { font-weight: 700; } .contact-card p { color: var(--muted); margin-bottom: 0; } .contact-card a { color: var(--primary); font-weight: 600; } .contact-box { padding: 40px; background: #f7f9fc; border-radius: 18px; } .contact-box h3 { font-weight: 800; } .form-control { min-height: 50px; border-radius: 8px; border: 1px solid #dce3eb; } textarea.form-control { min-height: 130px; } /* ========================================================= FOOTER ========================================================= */ .footer { background: var(--primary-dark); color: #fff; padding: 70px 0 30px; } .footer h4, .footer h5 { font-weight: 700; } .footer p { color: rgba(255,255,255,.75); line-height: 1.8; } .footer ul { list-style: none; padding: 0; } .footer li { margin-bottom: 10px; } .footer a { color: rgba(255,255,255,.8); } .footer a:hover { color: #fff; } .footer hr { border-color: rgba(255,255,255,.15); } /* ========================================================= SECTION SCROLL ANIMATIONS DO NOT ADD TRANSFORM TO MOBILE NAVBAR ========================================================= */ .slide-left, .slide-right, .slide-up { opacity: 0; transition: opacity .8s ease, transform .8s ease; } .slide-left { transform: translateX(-60px); } .slide-right { transform: translateX(60px); } .slide-up { transform: translateY(60px); } .show-animation { opacity: 1; transform: translate(0); } /* ========================================================= MOBILE BOTTOM NAV DEFAULT HIDDEN ON DESKTOP ========================================================= */ .mobile-bottom-nav { display: none; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .navbar-nav { padding-top: 15px; } .booking-btn { margin-top: 10px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- BODY ----------------------------------------------------- */ body { padding-bottom: 68px !important; overflow-x: hidden; } /* ----------------------------------------------------- TOP BAR ----------------------------------------------------- */ .top-bar { display: none; } /* ----------------------------------------------------- HERO ----------------------------------------------------- */ .hero-section, .min-vh-75 { min-height: 580px; } .hero-content h1 { font-size: 42px; } .hero-content p { font-size: 16px; } /* ----------------------------------------------------- QUICK INFO ----------------------------------------------------- */ .quick-info { margin-top: 0; padding: 20px 0; background: #f5f8fc; } .quick-card { padding: 14px; } .quick-card > i { font-size: 22px; } .quick-card strong { font-size: 13px; } .quick-card small { font-size: 11px; } /* ----------------------------------------------------- SECTIONS ----------------------------------------------------- */ .section-padding { padding: 65px 0; } /* ----------------------------------------------------- ABOUT IMAGE ----------------------------------------------------- */ .about-image img { height: 350px; } /* ----------------------------------------------------- CONTACT ----------------------------------------------------- */ .contact-box { padding: 25px; } /* ===================================================== MOBILE BOTTOM NAVIGATION IMPORTANT: No transform is used here because your website sections already use transform animations. ===================================================== */ .mobile-bottom-nav { display: flex !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; background: #fff; z-index: 999999 !important; justify-content: space-around; align-items: stretch; box-shadow: 0 -5px 25px rgba(0,0,0,.12); margin: 0 !important; padding: 0 !important; border: 0; box-sizing: border-box; isolation: isolate; } /* ----------------------------------------------------- NAV LINKS ----------------------------------------------------- */ .mobile-bottom-nav a { flex: 1 1 25%; width: 25%; min-width: 25%; max-width: 25%; height: 68px; min-height: 68px; max-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #68737d; font-size: 11px; line-height: 1.2; text-decoration: none; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } /* ----------------------------------------------------- ICON ----------------------------------------------------- */ .mobile-bottom-nav i { display: block; font-size: 19px; line-height: 1; margin: 0; padding: 0; flex-shrink: 0; } /* ----------------------------------------------------- TEXT ----------------------------------------------------- */ .mobile-bottom-nav span { display: block; font-size: 11px; line-height: 1.2; white-space: nowrap; margin: 0; padding: 0; } /* ----------------------------------------------------- ACTIVE / HOVER ----------------------------------------------------- */ .mobile-bottom-nav a:hover, .mobile-bottom-nav a.active { color: var(--primary); } } /* ========================================================= VERY SMALL MOBILE DEVICES ========================================================= */ @media (max-width: 380px) { .mobile-bottom-nav { height: 64px !important; min-height: 64px !important; max-height: 64px !important; } body { padding-bottom: 64px !important; } .mobile-bottom-nav a { height: 64px; min-height: 64px; max-height: 64px; font-size: 10px; } .mobile-bottom-nav i { font-size: 18px; } .mobile-bottom-nav span { font-size: 10px; } }