@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

/* Global Font & Line-Height Override: Bricolage Grotesque */
:root {
    --bs-body-font-family: 'Bricolage Grotesque', sans-serif !important;
    --bs-font-sans-serif: 'Bricolage Grotesque', sans-serif !important;
    --theme-font: 'Bricolage Grotesque', sans-serif !important;
    --font-heading: 'Bricolage Grotesque', sans-serif !important;
    --font-body: 'Bricolage Grotesque', sans-serif !important;
}

body, html,
h1, h2, h3, h4, h5, h6,
p, span, a, li, button, input, select, textarea, label, div,
td, th, option, blockquote, strong, em, b, u,
.sub-title, .theme-btn, .link-btn, .main-menu, .header-title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
}

/* Global Line Heights & Proportional Spacing */
h1, h2, h3, h4, h5, h6, .sub-title, .section-title h2, .section-title h3 {
    line-height: 1.15 !important;
}
p, span, a, li, label, .main-menu ul li a {
    line-height: 1.58 !important;
}

/* Decrease vertical spacing between headings and subsequent paragraphs */
h1 + br, h2 + br, h3 + br, h4 + br, h5 + br, h6 + br,
.section-title h2 + br, .section-title h3 + br,
.section-title-area h2 + br, h2.text_invert-2 + br,
.about-heading-sm + br {
    display: none !important;
}

/* Fluid spacing between headings/subtitles and body text */
h1, h2, h3, h4, h5, h6,
.section-title h2, .section-title h3, .section-title-area h2,
.about-content-style-1 .section-title h2 {
    margin-bottom: clamp(6px, 1vw, 10px) !important;
}

/* Dynamic Section Title Area Spacing */
.section-title,
.section-title-area {
    margin-bottom: clamp(24px, 3.5vw, 45px) !important;
}

/* Fluid Section Top & Bottom Padding across All Devices */
.section-padding,
.section-padding-2,
.about-section-1,
.choose-power-section-4,
.news-section,
.media-section,
.service-section {
    padding-top: clamp(40px, 5.5vw, 90px) !important;
    padding-bottom: clamp(40px, 5.5vw, 90px) !important;
}

/* Global Header Full-Width Safety (Zero side-padding so navbar & sticky never clip) */
header,
#header-sticky,
.header-4,
.header-5,
.header-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Global Left & Right Padding on Sections (1600px and above only) */
@media (min-width: 1920px) {
    section,
    .section-padding,
    .section-padding-2,
    .about-section,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section,
    .project-section-5,
    .contact-section,
    .counter-section-4,
    .brand-section,
    .marquee-section-2,
    .footer-section-5,
    footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1600px) and (max-width: 1919.98px) {
    section,
    .section-padding,
    .section-padding-2,
    .about-section,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section,
    .project-section-5,
    .contact-section,
    .counter-section-4,
    .brand-section,
    .marquee-section-2,
    .footer-section-5,
    footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1599.98px) {
    section,
    .section-padding,
    .section-padding-2,
    .about-section,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section,
    .project-section-5,
    .contact-section,
    .counter-section-4,
    .brand-section,
    .marquee-section-2,
    .footer-section-5,
    footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

header .mega-menu-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.loader-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Global Hero & Banner Headings (H1) */
h1,
.hero-1 .hero-content-items .hero-content h1,
.breadcrumb-title,
.page-heading h1,
.breadcrumb-wrapper h1 {
    font-size: clamp(28px, 3.5vw + 0.5rem, 64px) !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

/* Breadcrumb Navigation Text */
.breadcrumb-list,
.breadcrumb-list li,
.breadcrumb-list li a {
    font-size: clamp(12px, 0.7vw + 0.25rem, 14px) !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

/* Global Section Headings (H2) Styling */
h2,
.section-title h2,
.section-title-area h2,
.sustainability-content h2,
.museum-content h2,
.restaurant-content h2,
.contact-title h2,
h2.text_invert-2 {
    font-weight: 600 !important;
    font-size: clamp(20px, 1.7vw + 0.3rem, 36px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 0 !important;
}

/* 2-Column Content Section Headings (e.g. About Dr. Kamat side headings) */
.about-content h2,
.about-heading-sm,
.about-quote-h2,
.about-content-style-1 .section-title h2,
.col-lg-6 .section-title h2 {
    font-size: clamp(20px, 1.5vw + 0.25rem, 32px) !important;
    line-height: 1.22 !important;
    font-weight: 600 !important;
}

/* Global Sub-Section Headings (H3) */
h3,
.section-title h3,
.service-box-items h3,
.service-content h3,
.widget-title,
.footer-widget .footer-title,
.contact-middle-items h3,
.contact-middle-items h3.hero_title,
.author-content h3,
.book-title h3,
.pricing-card h3,
.museum-info h3,
.restaurant-info h3,
.choose-power-content-items-style-4 h3 {
    font-size: clamp(18px, 1.4vw + 0.3rem, 26px) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

/* Global Card Titles, News Headlines & Item Headings (H4) */
h4,
.news-box-items-style-1 h4,
.news-box-items-style-1 .news-content h4 a,
.news-content h4,
.news-content h4 a,
.power-feature-card-style-3 h4,
.icon-box-items .content h4,
.contact-info-items h4,
.counter-items h4,
.modal-title,
.choose-power-content-items-style-4 .icon-box-area .icon-box-items .content h4 {
    font-size: clamp(16px, 1.1vw + 0.25rem, 22px) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

/* Global Smaller Headings (H5, H6) */
h5, h6,
.icon-box-items .content h5,
.icon-box-items .content h5 a,
.contact-top .icon-box-items .content h5,
.contact-top .icon-box-items .content h5 a {
    font-size: clamp(14px, 0.8vw + 0.25rem, 18px) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

/* Global Body Text, Paragraphs & Lists (P, UL/LI) */
p,
.section-title p,
.news-content p,
.about-content p,
.about-content-style-1 p,
.sustainability-content p,
.museum-content p,
.restaurant-content p,
.contact-section p,
.contact-top p,
.contact-middle-items p,
.counter-items p,
.hero-1 .counter-items-area .counter-items p,
.footer-menu li a,
.widget-post p,
.author-content p,
.choose-power-content-items-style-4 p,
blockquote {
    font-size: clamp(13.5px, 0.75vw + 0.35rem, 16px) !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

/* =========================================================
   GLOBAL SUB-TITLE BADGES & TAGS
   Standardized pill-badge design matching the Moments From The Journey tag
   ========================================================= */
.sub-title,
.section-title .sub-title,
.section-title-area .sub-title,
.page-heading .sub-title,
h6.sub-title,
.hero-1 .hero-content-items .hero-content .sub-title,
.hero-content .sub-title,
.sub-title.color-1,
.sub-title.color-2,
.sub-title.color-3,
.section-title .sub-title.color-1,
.section-title .sub-title.color-2,
.section-title .sub-title.color-3,
.project-section-5 .section-title .sub-title {
    font-family: "Inter Tight", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #0b612e !important;
    margin-bottom: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 6px 18px !important;
    background: rgba(11, 97, 46, 0.06) !important;
    border: 1px solid rgba(11, 97, 46, 0.14) !important;
    border-radius: 30px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    width: fit-content !important;
}

.sub-title img,
.section-title .sub-title img,
.section-title-area .sub-title img,
.page-heading .sub-title img,
h6.sub-title img,
.hero-1 .hero-content-items .hero-content .sub-title img,
.hero-content .sub-title img,
.section-title img {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    max-height: 9px !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

.user-box .user-item,
.user-box span {
    font-size: clamp(11.5px, 0.6vw + 0.3rem, 14px) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin-bottom: clamp(6px, 1vw, 12px) !important;
}

/* Global Navigation Links & Buttons */
.theme-btn,
.ebook-btn,
button.theme-btn,
.link-btn,
input, select, textarea, label,
.form-clt input, .form-clt textarea {
    font-size: clamp(13.5px, 0.7vw + 0.3rem, 16px) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* Spacing in cards and items (e.g., icon boxes, features) */
.choose-power-content-items-style-4 .icon-box-area .icon-box-items .content h4 {
    margin-bottom: 4px !important;
}
.choose-content-style-1 .icon-box-items .content p,
.about-content-style-1 .bottom-items .icon-box-items .content p {
    margin-top: 2px !important;
}

/* Ensure footer contact details and email links are fully visible (white) on dark backgrounds */
.footer-widget-wrapper .footer-contect-2 li,
.footer-widget-wrapper .footer-contect-2 li p,
.footer-widget-wrapper .footer-contect-2 li a,
.footer-widget-wrapper .footer-contect-2 li p a {
    color: #ffffff !important;
    transition: color 0.3s ease;
}
.footer-widget-wrapper .footer-contect-2 li a:hover,
.footer-widget-wrapper .footer-contect-2 li p a:hover {
    color: #0b612e !important;
    text-decoration: underline !important;
}

/* Icon fonts safety rule */
i[class*="fa-"],
i[class*="icon-"],
[class^="icon-"],
[class*=" icon-"],
.fa, .fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-light, .fa-brands {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome", "icomoon" !important;
}

/* =========================================================
   VITHAL KAMAT WEBSITE — RESPONSIVE FULL-WIDTH LAYOUT
   Keep this file loaded AFTER assets/css/main.css.

   Normal sections always use the complete available viewport width.
   Home hero and inner-page banners retain centered Bootstrap widths.
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: auto !important;
}

/* ---------------------------------------------------------
   1. FULL-WIDTH DEFAULT FOR ALL SITE CONTAINERS
   Ensures Header, Hero Banner, Breadcrumbs, Sections, and Footer
   share identical max-width, width, and side-padding.
--------------------------------------------------------- */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-2,
.hero-section .container,
.hero-1 .container,
.breadcrumb-wrapper .container,
#header-sticky .container,
.header-4 .container,
.header-5 .container,
.header-6 .container,
header .container,
.footer-section-5 .container,
.footer-bottom3 .container {
    width: 92% !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Avoid fixed-width children causing empty space or overflow. */
#smooth-wrapper,
#smooth-content,
main,
section,
footer {
    width: 100%;
    max-width: 100%;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

/* Page-specific breadcrumb overlay for aai-museum.html (lighter gradient) */
body.aai-museum-page .breadcrumb-wrapper::before {
    background: linear-gradient(260.52deg, rgb(0 0 0 / 0%) 18.32%, rgb(0 0 0 / 26%) 72.9%);
}

/* ---------------------------------------------------------
   INNER BANNER / BREADCRUMB DISPLAY FIX
   Fixes top side clipping by centering horizontally and aligning 
   to the top/focal area so the image and subjects are fully visible
--------------------------------------------------------- */
.breadcrumb-wrapper,
.breadcrumb-wrapper.bg-cover,
section.breadcrumb-wrapper {
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

section.breadcrumb-wrapper[style*="dr-vithal-kamat-contact"] {
    background-position: right top !important;
}
section.breadcrumb-wrapper[style*="dr-vithal-kamat-en"] {
    background-position: right top !important;
}
section.breadcrumb-wrapper[style*="dr-vithal-kamat-about"] {
    background-position: center top !important;
}
section.breadcrumb-wrapper[style*="dr-vithal-kamat-media"] {
    background-position: center top !important;
}
section.breadcrumb-wrapper[style*="dr-vithal-kamat-restaurant"] {
    background-position: center top !important;
}
section.breadcrumb-wrapper[style*="book-launch"] {
    background-position: center top !important;
}
section.breadcrumb-wrapper[style*="Aai-museum"] {
    background-position: center top !important;
}

/* Contact Page Specific Headings Spacing & Matching Styles */
.contact-section .contact-top h2,
.contact-section .contact-top .hero_title,
.contact-top h2.hero_title,
.contact-top h2,
.contact-top .hero_title,
.contact-middle-items .contact-form-box h2,
.contact-middle-items .contact-form-box h3,
.contact-middle-items .hero_title,
.contact-middle-items h2.hero_title,
.contact-form-box h2,
.contact-form-box h3,
.contact-form-box h2.hero_title {
    font-size: clamp(22px, 1.7vw + 0.3rem, 36px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 35px !important;
}

/* Contact Form Status Message Styles */
.form-message {
    font-size: 15px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 15px;
    display: none;
}
.form-message.success {
    display: block;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.form-message.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ---------------------------------------------------------
   2. BANNER / HERO & HEADER RESPONSIVE GRID ALIGNMENT
--------------------------------------------------------- */
@media (min-width: 1800px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 1400px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 1600px) and (max-width: 1799.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 1360px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 1320px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 1180px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 960px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 720px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 540px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 575.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Banner artwork remains responsive. */
.hero-section .hero-image,
.hero-section .hero-image img,
.hero-1 .hero-image,
.hero-1 .hero-image img,
.breadcrumb-wrapper img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------
   3. RESPONSIVE SIDE SPACING FOR NORMAL SECTIONS
--------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2 {
        padding-left: 0 ;
        padding-right: 0 ;
    }
}

@media (max-width: 991.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2 {
        padding-left: 0 ;
        padding-right: 0 ;
    }
}

@media (max-width: 767.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2 {
        padding-left: 0 ;
        padding-right: 0 ;
    }
}

/* Utility for truly edge-to-edge content. */
.full-bleed {
    width: 100% ;
    max-width: 100% ;
    margin-left: 0 ;
    margin-right: 0 ;
    padding-left: 0 ;
    padding-right: 0 ;
}

/* =========================================================
   HERO BANNER (2-COLUMN GRID & ALIGNMENT FIX)
   ========================================================= */
.hero-section.hero-1 {
    position: relative !important;
    width: 100% !important;
    min-height: 600px !important;
    margin-top: 95px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 30px 0 40px 0 !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}

.hero-1 .row {
    min-height: 560px;
    align-items: center !important;
}

.hero-1 .row > [class*="col-"] {
    min-width: 0;
}

.hero-1 .hero-content-items {
    height: auto;
    margin-left: 0 !important;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-1 .hero-content-items .hero-content h1 {
    width: 100%;
    max-width: 680px;
    margin-top: 20px;
    font-size: clamp(38px, 3.2vw, 64px);
    line-height: 1.12;
    text-transform: none;
    overflow-wrap: normal;
    word-break: normal;
}

.hero-1 .hero-content-items > hr {
    width: 100%;
    max-width: 650px;
    margin-top: 40px;
    margin-bottom: 0;
}

.hero-1 .hero-content-items .counter-items-area {
    width: 100%;
    max-width: 720px;
    margin-top: 40px;
    margin-left: 0 !important;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch !important;
}

.hero-1 .counter-items-area .counter-items {
    min-width: 0;
    margin-right: 0;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    padding: 14px 10px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.hero-1 .counter-items-area .counter-items h2 {
    font-size: clamp(26px, 2vw, 40px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    word-break: normal !important;
    white-space: normal !important;
    color: #034833 !important;
    font-weight: 700 !important;
}

.hero-1 .counter-items-area .counter-items p {
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #4a5568 !important;
    font-weight: 500 !important;
}

.hero-1 .hero-image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 10px !important;
}

.hero-1 .hero-image picture {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

.hero-1 .hero-image img,
.hero-1 .hero-image picture img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 560px !important;
    max-width: 540px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
}

@media (min-width: 1600px) {
    .hero-section.hero-1 {
        min-height: 620px !important;
        margin-top: clamp(60px, 5vw, 95px) !important;
        padding: 30px 0 50px 0 !important;
    }
    .hero-1 .hero-content-items .hero-content h1 {
        font-size: clamp(42px, 3.2vw, 68px);
    }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .hero-section.hero-1 {
        min-height: 520px !important;
        margin-top: 85px !important;
        padding: 25px 0 35px 0 !important;
    }
    .hero-1 .hero-content-items .hero-content h1 {
        font-size: 46px !important;
        line-height: 1.14 !important;
        max-width: 640px !important;
    }
    .hero-1 .hero-content-items .counter-items-area {
        max-width: 640px !important;
        gap: 15px !important;
        margin-top: 30px !important;
    }
    .hero-1 .hero-image img,
    .hero-1 .hero-image picture img {
        max-height: 480px !important;
        max-width: 460px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hero-section.hero-1 {
        min-height: 580px !important;
        margin-top: 90px !important;
        padding: 25px 0 40px 0 !important;
    }
    .hero-1 .hero-content-items .hero-content h1 {
        font-size: clamp(38px, 3.2vw, 54px);
        max-width: 600px;
    }
    .hero-1 .hero-content-items .counter-items-area {
        max-width: 620px;
        gap: 16px;
    }
    .hero-1 .hero-image img,
    .hero-1 .hero-image picture img {
        max-height: 500px !important;
        max-width: 480px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-section.hero-1 {
        min-height: auto !important;
        margin-top: 85px !important;
        padding: 20px 0 35px 0 !important;
    }
    .hero-1 .hero-content-items .hero-content h1 {
        font-size: clamp(32px, 3.2vw, 44px);
    }
    .hero-1 .hero-content-items .counter-items-area {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }
    .hero-1 .hero-image img,
    .hero-1 .hero-image picture img {
        max-height: 440px !important;
        max-width: 420px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-section.hero-1 {
        min-height: auto !important;
        margin-top: 80px !important;
        padding: 20px 0 35px 0 !important;
    }
    .hero-1 .row {
        min-height: auto !important;
        flex-direction: column !important;
    }
    .hero-1 .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-1 .hero-content-items {
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .hero-1 .hero-content-items .hero-content h1 {
        font-size: clamp(34px, 5vw, 48px);
        max-width: 100%;
    }
    .hero-1 .hero-content-items > hr {
        max-width: 100%;
        margin-top: 30px;
    }
    .hero-1 .hero-content-items .counter-items-area {
        max-width: 100%;
        margin-top: 30px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 15px;
    }
    .hero-1 .hero-image {
        max-width: 480px !important;
        margin: 25px auto 0 !important;
    }
    .hero-1 .hero-image img,
    .hero-1 .hero-image picture img {
        max-height: 440px !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-section.hero-1 {
        min-height: auto !important;
        margin-top: 75px !important;
        padding: 15px 0 30px 0 !important;
    }
    .hero-1 .row {
        min-height: auto !important;
        flex-direction: column !important;
    }
    .hero-1 .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-1 .hero-content-items {
        padding-top: 25px;
        padding-bottom: 20px;
    }
    .hero-1 .hero-content-items .hero-content h1 {
        font-size: 24px !important;
        max-width: 100%;
    }
    .hero-1 .hero-content-items > hr {
        max-width: 100%;
        margin-top: 25px;
    }
    .hero-1 .hero-content-items .counter-items-area {
        max-width: 100%;
        margin-top: 25px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .hero-1 .hero-image {
        max-width: 400px !important;
        margin: 20px auto 0 !important;
    }
    .hero-1 .hero-image img,
    .hero-1 .hero-image picture img {
        max-height: 380px !important;
    }
}

@media (max-width: 575.98px) {
    .hero-section.hero-1 {
        min-height: auto !important;
        margin-top: 70px !important;
        padding: 15px 0 25px 0 !important;
    }
    .hero-1 .row {
        min-height: auto !important;
        flex-direction: column !important;
    }
    .hero-1 .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-1 .hero-content-items {
        padding-top: 20px;
        padding-bottom: 15px;
    }
    .hero-1 .hero-content-items .hero-content h1 {
        font-size: 21px !important;
        max-width: 100%;
        margin-top: 15px;
    }
    .hero-1 .hero-content-items > hr {
        max-width: 100%;
        margin-top: 20px;
    }
    .hero-1 .hero-content-items .counter-items-area {
        max-width: 100%;
        margin-top: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .hero-1 .counter-items-area .counter-items h2 {
        font-size: 18px !important;
    }
    .hero-1 .counter-items-area .counter-items p {
        font-size: 9.5px !important;
    }
    .hero-1 .hero-image {
        max-width: 320px !important;
        margin: 15px auto 0 !important;
    }
    .hero-1 .hero-image img,
    .hero-1 .hero-image picture img {
        max-height: 300px !important;
    }
}

.hero-1 .hero-image,
.hero-1 .hero-image picture,
.hero-1 .hero-image img,
.hero-1 .hero-image picture img {
    box-sizing: border-box !important;
}

.hero-1 .hero-image img,
.hero-1 .hero-image picture img {
    object-fit: contain !important;
}


/* Prevent theme rules from forcing cover */
.hero-1 .hero-image img[style],
.hero-1 .hero-image picture img[style] {
    object-fit: contain !important;
}

.mobile-menu {
    display: none;
}

@media (max-width: 1199px) {
    .header-main {
        min-height: 76px;
        width: 100%;
    }

    .header-main .header-logo {
        position: relative;
        z-index: 1000001;
        flex: 0 1 auto;
    }

    .header-main .header-logo img {
        width: auto;
        max-width: 220px;
        height: auto;
    }

    .mean__menu-wrapper {
        display: none ;
    }

    .mobile-menu {
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        width: 100%;
        transform: translateY(-50%);
        z-index: 1000000;
    }

    .mobile-menu.mean-container .mean-bar {
        float: none;
        width: 100%;
        min-height: 48px;
        padding: 0;
        background: transparent;
    }

    .mobile-menu.mean-container a.meanmenu-reveal {
        top: 3px;
        right: 0 ;
        width: 28px;
        height: 24px;
        padding: 9px 8px;
        color: #0b612e;
    }

    .mobile-menu.mean-container a.meanmenu-reveal span {
        height: 3px;
        margin-top: 5px;
        background: #0b612e;
        border-radius: 2px;
    }

    .mobile-menu.mean-container .mean-nav {
        position: absolute;
        top: 58px;
        left: -5%;
        width: 110%;
        max-height: calc(100vh - 76px);
        margin-top: 0;
        overflow-y: auto;
        background: #ffffff;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
    }

    .mobile-menu.mean-container .mean-nav ul li a {
        width: 100%;
        padding: 14px 5%;
        color: #263238;
        border-top: 1px solid #ececec;
        font-size: 15px;
        font-weight: 600;
        text-transform: none;
    }

    .mobile-menu.mean-container .mean-nav ul li a:hover,
    .mobile-menu.mean-container .mean-nav ul li a:focus {
        color: #0b612e;
        background: #f6faf7;
    }

    .mobile-menu.mean-container .mean-nav ul li li a {
        width: 100%;
        padding: 12px 8%;
        color: #4d575c;
        background: #f8f8f8;
    }

    .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
        width: 48px;
        height: 48px;
        padding: 0 ;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0b612e;
        background: transparent;
    }
}

@media (max-width: 575px) {
    .header-main .header-logo img {
        max-width: 185px;
    }
}

@media (max-width: 1199px) {
    /* Show hamburger button — overrides main.css display:none */
    .mobile-menu.mean-container a.meanmenu-reveal {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1000003 !important;
    }
}

/* =========================================================
   ABOUT SECTION — Descriptive Quote h2
   The long bio/intro paragraph on index.html about section
   is marked as h2 but functions as a large body-quote.
   Sized separately from page-heading h2 elements.
   ========================================================= */
.about-content-style-1 .section-title h2.about-quote-h2 {
    font-size: clamp(20px, 1.7vw, 26px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.2px !important;
    color: #1a2e1e;
}

/* =========================================================
   BORDERED CTA BUTTONS — UNIFIED SIZE & SHAPE
   Applies to all .theme-btn, .ebook-btn, and bordered form CTAs
   ========================================================= */
.theme-btn,
.ebook-btn,
button.theme-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2;
    overflow: hidden;
    vertical-align: middle;
    text-transform: capitalize;
    text-align: center;
    border-radius: 999px !important;
    font-family: 'Bricolage Grotesque', sans-serif;
    color: #0b612e;
    border: 1px #0b612e solid !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 7px 7px 7px 32px !important;
    background-color: var(--white, #ffffff);
    box-sizing: border-box;
    transition: all 0.4s ease-in-out;
}

/* Icon circle badge inside all bordered CTAs */
.theme-btn i,
.ebook-btn i,
button.theme-btn i {
    position: relative;
    overflow: hidden;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    margin-left: 20px !important;
    width: 41px !important;
    height: 41px !important;
    line-height: 41px !important;
    border-radius: 50% !important;
    background-color: #091613 !important;
    color: #ffffff !important;
    transition: background-color 0.4s ease-in-out;
}

@media (max-width: 575px) {
    .theme-btn,
    .ebook-btn,
    button.theme-btn {
        padding: 7px 7px 7px 22px !important;
        font-size: 14px !important;
    }
    .theme-btn i,
    .ebook-btn i,
    button.theme-btn i {
        margin-left: 10px !important;
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
    }
}

/* =========================================================
   THEME-BTN & EBOOK-BTN — Dual Arrow Hover Animation
   On hover: existing arrow exits top-right, new arrow enters
   from bottom-left (conveyor-belt / runway effect).
   ========================================================= */

/* The real FontAwesome icon — will slide OUT on hover */
.theme-btn i::before,
.ebook-btn i::before {
    position: relative;
    z-index: 2;
    display: inline-block;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.28s ease-in-out;
    transform: translate(0, 0);
    opacity: 1;
}

/* Incoming ghost arrow — enters from bottom-left */
.theme-btn i::after,
.ebook-btn i::after {
    content: "\e09f";                          /* fa-arrow-up-right unicode */
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;

    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Start: offset to bottom-left, invisible */
    transform: translate(-55%, 55%);
    opacity: 0;

    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.28s ease-in-out;
    z-index: 1;
}

/* On hover: outgoing arrow flies to top-right */
.theme-btn:hover i::before,
.ebook-btn:hover i::before {
    transform: translate(55%, -55%);
    opacity: 0;
}

/* On hover: incoming arrow arrives at center */
.theme-btn:hover i::after,
.ebook-btn:hover i::after {
    transform: translate(0, 0);
    opacity: 1;
}

/* =========================================================
   LINK-BTN — Dual Arrow Hover Animation (e.g. "More Details ↗")
   ========================================================= */
.link-btn i {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.125em;
    width: 1em;
    height: 1em;
    line-height: 1;
    margin-left: 6px;
}

.link-btn i::before {
    position: relative;
    z-index: 2;
    display: inline-block;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.28s ease-in-out;
    transform: translate(0, 0);
    opacity: 1;
}

.link-btn i::after {
    content: "\e09f";                          /* fa-arrow-up-right unicode */
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;

    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Start: offset to bottom-left, invisible */
    transform: translate(-60%, 60%);
    opacity: 0;

    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.28s ease-in-out;
    z-index: 1;
}

/* On hover: outgoing arrow flies to top-right */
.link-btn:hover i::before {
    transform: translate(60%, -60%);
    opacity: 0;
}

/* On hover: incoming arrow arrives at center */
.link-btn:hover i::after {
    transform: translate(0, 0);
    opacity: 1;
}

/* =========================================================
   MEDIA & NEWS CARDS — PERFECT EQUAL HEIGHT ALIGNMENT
   Ensures all card images, titles, paragraphs, and bottom CTA
   buttons align horizontally across all columns.
   ========================================================= */
.news-section .row,
.media-section .row {
    display: flex;
    flex-wrap: wrap;
}

.news-section .row > [class*="col-"],
.media-section .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.news-box-items-style-1 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    margin-top: 30px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
    cursor: pointer;
}

/* Full Card Hover Effect (Active across entire page) */
.news-box-items-style-1:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 36px rgba(11, 97, 46, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(11, 97, 46, 0.28) !important;
}

.news-box-items-style-1 .news-thumb {
    width: 100% !important;
    height: 240px !important;
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* Remove Image Zoom / Rotate Effect */
.news-box-items-style-1 .news-thumb img,
.news-box-items-style-1:hover .news-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 12px !important;
    transform: none !important;
    transition: none !important;
}

.news-box-items-style-1 .news-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 20px 14px 14px 14px !important;
}

.news-box-items-style-1 .news-content .user-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

.news-box-items-style-1 .news-content h4 {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    min-height: 2.6em;
    display: flex !important;
    align-items: flex-start !important;
}

.news-box-items-style-1 .news-content h4 a {
    color: #142217 !important;
    transition: color 0.25s ease !important;
}

.news-box-items-style-1:hover .news-content h4 a {
    color: #0b612e !important;
}

.news-box-items-style-1 .news-content p {
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important;
}

/* Make Button Left-Aligned Only For This Section */
.news-section .news-box-items-style-1 .news-content .bottom-items-area,
.news-box-items-style-1 .news-content .bottom-items-area {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid #f0f0f0 !important;
    width: 100% !important;
}

.news-section .news-box-items-style-1 .news-content .bottom-items-area .link-btn,
.news-box-items-style-1 .news-content .bottom-items-area .link-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    color: #0b612e !important;
    gap: 6px !important;
    transition: all 0.25s ease-in-out !important;
}

.news-section .news-box-items-style-1 .news-content .bottom-items-area .link-btn:hover,
.news-box-items-style-1 .news-content .bottom-items-area .link-btn:hover {
    color: #053b1a !important;
    transform: translateX(3px) !important;
}

.news-section .news-box-items-style-1 .news-content .bottom-items-area .link-btn i,
.news-box-items-style-1 .news-content .bottom-items-area .link-btn i {
    margin-left: 4px !important;
    transition: transform 0.25s ease !important;
}

.news-box-items-style-1:hover .news-content .bottom-items-area .link-btn i {
    transform: translate(2px, -2px) !important;
}

/* =========================================================
   TYPOGRAPHY & COMPONENT SCALING FOR SCREENS ABOVE 1800px (>1800px)
   Enforces elegant, balanced, and perfectly proportioned typography
   so headings never look disproportionately huge on 1920px+ and 4K displays.
   ========================================================= */
@media (min-width: 1800px) {
    /* 1. Containers & Layout Expansion */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 1400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hero-1 .hero-content-items .hero-content h1 {
        max-width: 900px !important;
    }

    .hero-1 .hero-content-items > hr {
        max-width: 900px !important;
    }

    .hero-1 .hero-content-items .counter-items-area {
        max-width: 1000px !important;
        gap: 20px !important;
    }

    /* 2. Hero & Banner Headings (H1) */
    h1,
    .hero-1 .hero-content-items .hero-content h1,
    .breadcrumb-title,
    .page-heading h1,
    .breadcrumb-wrapper h1 {
    font-size: clamp(40px, 3.7vw, 75px) !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        letter-spacing: -0.4px !important;
    }

    /* 3. Section Main Titles (H2) */
    h2,
    .section-title h2,
    .section-title-area h2,
    .about-content h2,
    .sustainability-content h2,
    .museum-content h2,
    .restaurant-content h2,
    .contact-top h2,
    .contact-title h2,
    .contact-section h2.hero_title,
    .contact-section .hero_title,
    h2.text_invert-2,
    h2.hero_title {
        font-size: clamp(28px, 1.8vw, 36px) !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        letter-spacing: -0.3px !important;
    }

    /* 4. Stat & Counter Numbers */
    .hero-1 .counter-items-area .counter-items h2,
    .counter-items h2,
    .counter-items h2 .count {
        font-size: clamp(38px, 2.2vw, 48px) !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        letter-spacing: -0.5px !important;
        white-space: nowrap !important;
    }

    /* 5. Card Titles, News Headlines & Sub-Headings (H3, H4) */
    h3,
    .section-title h3,
    .service-box-items h3,
    .service-content h3,
    .widget-title,
    .footer-widget .footer-title,
    .contact-middle-items h3,
    .author-content h3,
    .book-title h3,
    .museum-info h3,
    .restaurant-info h3 {
        font-size: clamp(20px, 1.2vw, 24px) !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
    }

    h4,
    .news-box-items-style-1 h4,
    .news-box-items-style-1 .news-content h4 a,
    .news-content h4,
    .news-content h4 a,
    .power-feature-card-style-3 h4,
    .icon-box-items .content h4,
    .contact-info-items h4,
    .counter-items h4,
    .modal-title {
        font-size: clamp(17px, 1vw, 20px) !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    /* 6. Smaller Headings (H5, H6) */
    h5, h6 {
        font-size: clamp(15px, 0.8vw, 17px) !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    /* 7. Body Text, Paragraphs & Lists (P, UL/LI) */
    p,
    .section-title p,
    .news-content p,
    .about-content p,
    .about-content-style-1 p,
    .sustainability-content p,
    .museum-content p,
    .restaurant-content p,
    .contact-section p,
    .contact-top p,
    .contact-middle-items p,
    .counter-items p,
    .hero-1 .counter-items-area .counter-items p,
    .footer-menu li a,
    .widget-post p,
    .author-content p,
    .choose-power-content-items-style-4 p,
    blockquote {
        font-size: 15.5px !important;
        line-height: 1.55 !important;
        font-weight: 400 !important;
    }

    /* 8. Metadata Labels */
    .user-box .user-item,
    .user-box span {
        font-size: 13px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    /* 9. Header Navigation Links */
    .main-menu ul li a {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .main-menu ul li {
        margin-right: 20px !important;
    }

    /* 10. Buttons Scaling */
    .theme-btn,
    .ebook-btn,
    button.theme-btn {
        font-size: 15px !important;
        padding: 8px 12px 8px 24px !important;
    }

    .theme-btn i,
    .ebook-btn i,
    button.theme-btn i {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 15px !important;
    }

    .link-btn {
        font-size: 15px !important;
    }

    /* 11. Form Inputs & Controls */
    input, select, textarea, label {
        font-size: 14.5px !important;
    }

    /* 12. Component Cards Sizing & Padding */
    .news-box-items-style-1,
    .power-feature-card-style-3,
    .service-box-items {
        padding: 22px !important;
    }

    .news-box-items-style-1 .news-thumb {
        height: 240px !important;
    }

    .counter-items {
        padding: 16px !important;
    }

    /* 13. Section Spacing & Margins */
    .section-padding,
    .section-padding-2,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .section-title,
    .section-title-area {
        margin-bottom: 28px !important;
    }

    .row {
        --bs-gutter-x: 1.5rem !important;
        --bs-gutter-y: 1.5rem !important;
    }
}

/* =========================================================
   14. LUXURY MUSEUM-GRADE DUAL-ROW SCROLL GALLERY
   ========================================================= */
.project-section-5.section-bg-4 {
    background: linear-gradient(180deg, #fcfcf9 0%, #f4f5ee 50%, #fcfcf9 100%) !important;
    position: relative;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* Subtle luxury divider lines */
.project-section-5::before,
.project-section-5::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 97, 46, 0.15), transparent);
}
.project-section-5::before { top: 0; }
.project-section-5::after { bottom: 0; }

/* Section Title Typography & Spacing Precision */
.project-section-5 .section-title {
    margin-bottom: 48px !important;
    text-align: center;
}

.project-section-5 .section-title h2 {
    font-size: clamp(26px, 2.4vw, 42px) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
    color: #142217 !important;
    margin: 0 !important;
}

.scroll-gallery-container {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 20px 0;
    position: relative;
    user-select: none;
}

/* Soft gradient edge masking so images enter & exit seamlessly */
.scroll-gallery-container::before,
.scroll-gallery-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 140px;
    z-index: 15;
    pointer-events: none;
}
.scroll-gallery-container::before {
    left: 0;
    background: linear-gradient(90deg, #fcfcf9 0%, rgba(252, 252, 249, 0) 100%);
}
.scroll-gallery-container::after {
    right: 0;
    background: linear-gradient(270deg, #fcfcf9 0%, rgba(252, 252, 249, 0) 100%);
}

.scroll-gallery-row {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.scroll-gallery-track {
    display: flex;
    gap: 28px;
    width: max-content;
    will-change: transform;
    margin-left: 0;
    transition: none;
}

/* Luxury Framed Cards */
.scroll-gallery-item {
    flex: 0 0 auto;
    width: 340px;
    padding: 12px;
    /* background: #ffffff; */
    border-radius: 20px;
    /* border: 1px solid rgba(11, 97, 46, 0.08); */
    /* box-shadow: 0 10px 30px rgba(11, 40, 20, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02); */
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.6s ease;
    position: relative;
    cursor: pointer;
}

.scroll-gallery-item:hover {
    transform: translateY(-12px) scale(1.02);
    /* box-shadow: 0 25px 50px rgba(11, 60, 28, 0.16), 0 8px 16px rgba(0, 0, 0, 0.04); */
    /* border-color: rgba(11, 97, 46, 0.25); */
    z-index: 20;
}

.scroll-gallery-item .project-box-items-style-5 {
    margin-top: 0 !important;
}

.scroll-gallery-item .project-thumb {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

.scroll-gallery-item .project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    filter: contrast(1.03) saturate(1.02) brightness(0.97);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
}

.scroll-gallery-item:hover .project-thumb img {
    transform: scale(1.08);
    filter: contrast(1.06) saturate(1.08) brightness(1.02);
}

/* Elegant Luxury Vignette Overlay on Hover */
.scroll-gallery-item .project-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 97, 46, 0) 40%, rgba(11, 45, 22, 0.45) 100%);
    opacity: 0.15;
    transition: opacity 0.5s ease;
    z-index: 2;
    border-radius: 14px;
}

.scroll-gallery-item:hover .project-thumb::before {
    opacity: 0.75;
}

@media (max-width: 991px) {
    .project-section-5.section-bg-4 {
        padding-top: 75px !important;
        padding-bottom: 75px !important;
    }
    .project-section-5 .section-title {
        margin-bottom: 35px !important;
    }
    .scroll-gallery-item {
        width: 280px;
        padding: 8px;
    }
    /* .scroll-gallery-item .project-thumb img {
        height: 200px;
    } */
}

@media (max-width: 767px) {
    .project-section-5.section-bg-4 {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .project-section-5 .section-title {
        margin-bottom: 28px !important;
    }
    .project-section-5 .section-title .sub-title,
    .sub-title,
    .section-title .sub-title,
    .section-title-area .sub-title,
    .page-heading .sub-title,
    h6.sub-title {
        font-size: 8px !important;
        letter-spacing: 1.2px !important;
        padding: 3px 10px !important;
    }
    .scroll-gallery-container {
        gap: 18px;
        padding: 10px 0;
    }
    .scroll-gallery-track {
        gap: 18px;
    }
    .scroll-gallery-item {
        width: 230px;
        padding: 6px;
    }
    /* .scroll-gallery-item .project-thumb img {
        height: 165px;
    } */
    .scroll-gallery-container::before,
    .scroll-gallery-container::after {
        width: 40px;
    }
}

/* =========================================================
   15. E-BOOK CARD & LIBRARY COMPONENT STYLING
   Enlarges 3D book covers, eliminates excess blank space,
   and adds elegant elevation & lighting effects on hover.
   ========================================================= */
.ebook-card-box {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 24px 16px 20px 16px !important;
    border: 1.5px solid #e8ede6 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
    text-align: center;
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
    cursor: pointer;
}

.ebook-card-box:hover {
    transform: translateY(-8px) !important;
    border-color: #0b612e !important;
    box-shadow: 0 20px 45px rgba(11, 97, 46, 0.14), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.ebook-thumb-wrapper {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 12px;
    padding: 0 !important;
    margin-bottom: 16px !important;
    position: relative;
}

/* Floor Shadow under 3D book cover */
.ebook-thumb-wrapper img {
    max-height: 400px !important;
    max-width: 95% !important;
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.26)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.12)) !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.4s ease !important;
}

.ebook-card-box:hover .ebook-thumb-wrapper img {
    transform: translateY(-6px) scale(1.04) !important;
    filter: drop-shadow(0 28px 28px rgba(11, 97, 46, 0.28)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16)) !important;
}

.ebook-card-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.ebook-card-content .bottom-items-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    width: 100% !important;
    text-align: center !important;
}

.ebook-card-content .bottom-items-area .link-btn {
    color: #0b612e !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    padding: 8px 20px !important;
    border-radius: 30px !important;
    background: rgba(11, 97, 46, 0.06) !important;
    border: 1px solid rgba(11, 97, 46, 0.14) !important;
    transition: all 0.3s ease !important;
}

.ebook-card-box:hover .ebook-card-content .bottom-items-area .link-btn,
.ebook-card-content .bottom-items-area .link-btn:hover {
    background: #0b612e !important;
    color: #ffffff !important;
    border-color: #0b612e !important;
    box-shadow: 0 4px 14px rgba(11, 97, 46, 0.3) !important;
}

.ebook-card-content .bottom-items-area .link-btn i {
    font-size: 13px !important;
    margin-left: 4px !important;
    transition: transform 0.3s ease !important;
}

.ebook-card-box:hover .ebook-card-content .bottom-items-area .link-btn i {
    transform: translate(2px, -2px) !important;
}

@media (max-width: 1399.98px) {
    .ebook-thumb-wrapper {
        height: 320px !important;
    }
    .ebook-thumb-wrapper img {
        max-height: 300px !important;
    }
}

@media (max-width: 991.98px) {
    .ebook-thumb-wrapper {
        height: 280px !important;
    }
    .ebook-thumb-wrapper img {
        max-height: 260px !important;
    }
}

@media (max-width: 767.98px) {
    .ebook-card-box {
        padding: 20px 14px 16px 14px !important;
    }
    .ebook-thumb-wrapper {
        height: 240px !important;
        margin-bottom: 12px !important;
    }
    .ebook-thumb-wrapper img {
        max-height: 220px !important;
    }
}

/* =========================================================
   16. FOOTER SOCIAL & CONTACT LIST ALIGNMENT POLISH
   ========================================================= */
.footer-widget-wrapper.style-3 .footer-content .social-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

.footer-widget-wrapper.style-3 .footer-content .social-icon a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    transition: all 0.3s ease-in-out !important;
}

.footer-widget-wrapper.style-3 .footer-content .social-icon a i {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-widget-wrapper.style-3 .footer-contect-2 li {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

.footer-widget-wrapper.style-3 .footer-contect-2 li:last-child {
    margin-bottom: 0 !important;
}

.footer-widget-wrapper .footer-widget-items .widget-head {
    margin-bottom: clamp(18px, 2vw, 26px) !important;
}

.footer-widget-wrapper .footer-widget-items .widget-head h3 {
    margin-bottom: 0 !important;
}

.footer-widget-wrapper.style-3 .footer-contect-2 li .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}

.footer-widget-wrapper.style-3 .footer-contect-2 li .content {
    flex-grow: 1 !important;
}

.footer-widget-wrapper.style-3 .footer-contect-2 li .content p {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Footer Logo CSS Filter (makes black logo white) */
.footer-logo-img {
    filter: brightness(0) invert(1) !important;
    transition: opacity 0.3s ease-in-out !important;
    display: inline-block;
}
.footer-logo-img:hover {
    opacity: 0.8 !important;
}

/* Override narrow max-width on footer bio paragraph so it spans the column naturally */
.footer-widget-wrapper.style-3 .footer-content p {
    max-width: 100% !important;
}

/* =========================================================
   17. AUTHOR SECTION BOOK COVER & SPACING POLISH
   ========================================================= */
/* Hide the absolute viewport-pinned green pseudo-block which gets misaligned on centered container screens */
.choose-power-section-4::before {
    display: none !important;
}

/* Remove background card formatting for the book cover image */
.choose-power-image-items-style-4 {
    margin-left: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border: none !important;
    transition: transform 0.4s ease-in-out !important;
}


/* =========================================================
   16. FOOTER SOCIAL & CONTACT LIST ALIGNMENT POLISH
   ========================================================= */
.footer-widget-wrapper.style-3 .footer-content .social-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

.footer-widget-wrapper.style-3 .footer-content .social-icon a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    transition: all 0.3s ease-in-out !important;
}

.footer-widget-wrapper.style-3 .footer-content .social-icon a i {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-widget-wrapper.style-3 .footer-contect-2 li {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.footer-widget-wrapper.style-3 .footer-contect-2 li .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}

.footer-widget-wrapper.style-3 .footer-contect-2 li .content {
    flex-grow: 1 !important;
}

.footer-widget-wrapper.style-3 .footer-contect-2 li .content p {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Footer Logo CSS Filter (makes black logo white) */
.footer-logo-img {
    filter: brightness(0) invert(1) !important;
    transition: opacity 0.3s ease-in-out !important;
    display: inline-block;
}
.footer-logo-img:hover {
    opacity: 0.8 !important;
}

/* Override narrow max-width on footer bio paragraph so it spans the column naturally */
.footer-widget-wrapper.style-3 .footer-content p {
    max-width: 100% !important;
}

/* =========================================================
   17. AUTHOR SECTION BOOK COVER & SPACING POLISH
   ========================================================= */
/* Hide the absolute viewport-pinned green pseudo-block which gets misaligned on centered container screens */
.choose-power-section-4::before {
    display: none !important;
}

/* Remove background card formatting for the book cover image */
.choose-power-image-items-style-4 {
    margin-left: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border: none !important;
    transition: transform 0.4s ease-in-out !important;
}

/* Subtle interactive scaling of the book card on hover */
.choose-power-image-items-style-4:hover {
    transform: scale(1.02) !important;
}

.choose-power-image-items-style-4 img {
    max-height: 650px !important; 
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.24)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.10)) !important;
    transition: transform 0.4s var(--portfolio-ease), filter 0.4s ease !important;
}

.choose-power-image-items-style-4:hover img {
    transform: translateY(-6px) scale(1.03) !important;
    filter: drop-shadow(0 28px 28px rgba(11, 97, 46, 0.25)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.12)) !important;
}

@media (max-width: 991px) {
    .choose-power-image-items-style-4 {
        padding: 0 !important;
    }
    .choose-power-image-items-style-4 img {
        max-height: 420px !important;
    }
}

/* =========================================================
   18. FOOTER LINKS LIST ALIGNMENT (CHEVRON BULLETS)
   ========================================================= */
.footer-widget-wrapper .footer-widget-items .list-area li {
    margin-bottom: 12px !important;
}

.footer-widget-wrapper .footer-widget-items .list-area li:last-child {
    margin-bottom: 0 !important;
}

.footer-widget-wrapper .footer-widget-items .list-area li a {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
    width: 100% !important;
}

.footer-widget-wrapper .footer-widget-items .list-area li a i {
    margin-right: 0 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: 4px !important; /* Center vertically with first line of text */
}

/* =========================================================
   19. ABOUT SECTION (INDEX.HTML) — 50/50 COLUMN AND IMAGE SCALING
   ========================================================= */
.about-image-items-style-1 {
    margin-right: 0 !important;
}

.about-image-items-style-1 .about-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
}

.about-image-items-style-1 .about-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important; /* Cap to keep proportions visually balanced */
    object-fit: contain !important;
}

/* Fix helper class for padding-top 50px */
.pt-50 {
    padding-top: 50px !important;
}

/* =========================================================
   FOOTER BOTTOM COPYRIGHT VISIBILITY & COLOR OVERRIDE
   Ensures the copyright text & privacy links are 100% visible,
   crisp white, and never hidden by WOW animation triggers.
   ========================================================= */
.footer-bottom3,
.footer-bottom-wrapper3,
.footer-bottom-wrapper3 p,
.footer-bottom-wrapper3 .footer-menu,
.footer-bottom-wrapper3 .footer-menu li,
.footer-bottom-wrapper3 .footer-menu li a {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100 !important;
}

.footer-bottom-wrapper3 p {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

.footer-bottom-wrapper3 .footer-menu li a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.footer-bottom-wrapper3 .footer-menu li a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Prevent GSAP ScrollSmoother from clipping the footer copyright bar at page bottom */
/* #smooth-content {
    padding-bottom: 50px !important;
} */

.footer-section-5 {
    padding-bottom: 24px !important;
    position: relative !important;
    overflow: hidden !important;
}

.footer-bottom3 {
    background-color: transparent !important;
    padding: 22px 0 30px 0 !important;
    margin-top: 20px !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: 100 !important;
}

/* =========================================================
   20. COMPREHENSIVE UI/UX RESPONSIVE & TYPOGRAPHY POLISH
   Ensures perfect font scaling, optimal contrast, line-heights,
   and flawless grid/flex layout adaptation on ALL screen sizes.
/* =========================================================
   20. RESPONSIVE TYPOGRAPHY & SPACING FOR SCREENS BELOW 1600px (<1600px)
   Systematically scales down font sizes and section/component spacing
   ONLY on screens below 1600px, leaving >= 1600px expansive.
   ========================================================= */

/* --- 1. GENERAL BELOW 1600px OVERRIDES (max-width: 1599.98px) --- */
@media (max-width: 1599.98px) {
    /* Section Spacing Reduction */
    .section-padding,
    .section-padding-2,
    .about-section,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section,
    .project-section-5,
    .contact-section,
    .counter-section-4,
    .brand-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    /* Section Title Margins */
    .section-title,
    .section-title-area,
    .project-section-5 .section-title {
        margin-bottom: 30px !important;
    }

    /* Breadcrumbs Height & Spacing */
    .breadcrumb-wrapper,
    section.breadcrumb-wrapper {
        padding: 50px 0 !important;
        min-height: 220px !important;
    }

    /* Hero Banner Spacing */
    .hero-section.hero-1 {
        min-height: 520px !important;
        margin-top: 85px !important;
        padding: 25px 0 35px 0 !important;
    }

    .hero-1 .hero-content-items {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    .hero-1 .hero-content-items .counter-items-area {
        margin-top: 30px !important;
        gap: 15px !important;
    }

    .hero-1 .hero-content-items > hr {
        margin-top: 30px !important;
    }
}

/* --- 2. DESKTOPS BELOW 1600px (1400px - 1599.98px) --- */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-2,
    .hero-section .container, .hero-1 .container, .breadcrumb-wrapper .container,
    #header-sticky .container, .header-4 .container, .header-5 .container, .header-6 .container, header .container,
    .footer-section-5 .container, .footer-bottom3 .container {
        width: 92% !important;
        max-width: 1320px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    h1,
    .hero-1 .hero-content-items .hero-content h1,
    .breadcrumb-title,
    .page-heading h1,
    .breadcrumb-wrapper h1 {
        font-size: 46px !important;
        line-height: 1.14 !important;
        max-width: 640px !important;
    }

    h2,
    .section-title h2,
    .section-title-area h2,
    .sustainability-content h2,
    .museum-content h2,
    .restaurant-content h2,
    .contact-top h2,
    .contact-title h2,
    .contact-section .hero_title,
    h2.hero_title,
    h2.text_invert-2 {
        font-size: 28px !important;
        line-height: 1.22 !important;
    }

    .about-content h2,
    .about-heading-sm,
    .about-quote-h2,
    .col-lg-6 .section-title h2 {
        font-size: 26px !important;
        line-height: 1.24 !important;
    }

    h3,
    .section-title h3,
    .service-box-items h3,
    .contact-middle-items h3,
    .author-content h3,
    .book-title h3,
    .museum-info h3,
    .restaurant-info h3 {
        font-size: 19px !important;
        line-height: 1.28 !important;
    }

    h4,
    .news-box-items-style-1 h4,
    .power-feature-card-style-3 h4,
    .icon-box-items .content h4,
    .contact-info-items h4 {
        font-size: 16.5px !important;
        line-height: 1.3 !important;
    }

    p,
    .news-content p,
    .about-content p,
    .about-content-style-1 p,
    .section-title p,
    .sustainability-content p,
    .museum-content p,
    .restaurant-content p,
    .contact-section p,
    .contact-top p,
    .contact-middle-items p,
    .author-content p,
    .choose-power-content-items-style-4 p,
    blockquote {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
    }

    .counter-items h2,
    .hero-1 .counter-items-area .counter-items h2,
    .counter-items-4 h2 {
        font-size: 32px !important;
    }

    .counter-items p,
    .hero-1 .counter-items-area .counter-items p {
        font-size: 12.5px !important;
    }

    .sub-title,
    .section-title .sub-title,
    .section-title-area .sub-title,
    .page-heading .sub-title,
    h6.sub-title {
        font-size: 13px !important;
        letter-spacing: 2.5px !important;
        padding: 6px 18px !important;
        margin-bottom: 12px !important;
    }

    .theme-btn,
    .ebook-btn,
    button.theme-btn {
        font-size: 14px !important;
        padding: 7px 18px !important;
    }

    .main-menu ul li a {
        font-size: 14.5px !important;
    }
}

/* --- 3. LAPTOPS / MEDIUM DESKTOPS (1200px - 1399.98px) --- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-2,
    .hero-section .container, .hero-1 .container, .breadcrumb-wrapper .container,
    #header-sticky .container, .header-4 .container, .header-5 .container, .header-6 .container, header .container,
    .footer-section-5 .container, .footer-bottom3 .container {
        max-width: 1180px !important;
        width: 92% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .section-padding,
    .section-padding-2,
    .about-section,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section,
    .project-section-5,
    .contact-section,
    .counter-section-4,
    .brand-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .hero-section.hero-1 {
        min-height: 480px !important;
        margin-top: 80px !important;
        padding: 20px 0 30px 0 !important;
    }

    h1,
    .hero-1 .hero-content-items .hero-content h1,
    .breadcrumb-title,
    .page-heading h1,
    .breadcrumb-wrapper h1 {
        font-size: 38px !important;
        line-height: 1.15 !important;
        max-width: 580px !important;
    }

    h2,
    .section-title h2,
    .section-title-area h2,
    .sustainability-content h2,
    .museum-content h2,
    .restaurant-content h2,
    .contact-top h2,
    .contact-title h2,
    .contact-section .hero_title,
    h2.hero_title,
    h2.text_invert-2 {
        font-size: 25px !important;
        line-height: 1.22 !important;
    }

    .about-content h2,
    .about-heading-sm,
    .about-quote-h2,
    .col-lg-6 .section-title h2 {
        font-size: 24px !important;
        line-height: 1.24 !important;
    }

    h3,
    .section-title h3,
    .service-box-items h3,
    .contact-middle-items h3,
    .author-content h3,
    .book-title h3,
    .museum-info h3,
    .restaurant-info h3 {
        font-size: 18px !important;
        line-height: 1.28 !important;
    }

    h4,
    .news-box-items-style-1 h4,
    .power-feature-card-style-3 h4,
    .icon-box-items .content h4,
    .contact-info-items h4 {
        font-size: 15.5px !important;
        line-height: 1.3 !important;
    }

    p,
    .news-content p,
    .about-content p,
    .about-content-style-1 p,
    .section-title p,
    .sustainability-content p,
    .museum-content p,
    .restaurant-content p,
    .contact-section p,
    .contact-top p,
    .contact-middle-items p,
    .author-content p,
    .choose-power-content-items-style-4 p,
    blockquote {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .counter-items h2,
    .hero-1 .counter-items-area .counter-items h2,
    .counter-items-4 h2 {
        font-size: 28px !important;
    }

    .counter-items p,
    .hero-1 .counter-items-area .counter-items p {
        font-size: 12px !important;
    }

    .sub-title,
    .section-title .sub-title,
    .section-title-area .sub-title,
    .page-heading .sub-title,
    h6.sub-title {
        font-size: 13px !important;
        letter-spacing: 2.5px !important;
        padding: 6px 18px !important;
        margin-bottom: 12px !important;
    }

    .theme-btn,
    .ebook-btn,
    button.theme-btn {
        font-size: 13.5px !important;
        padding: 6px 16px !important;
    }

    .main-menu ul li a {
        font-size: 14px !important;
    }
}

/* --- 4. SMALL LAPTOPS / TABLETS LANDSCAPE (992px - 1199.98px) --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-2,
    .hero-section .container, .hero-1 .container, .breadcrumb-wrapper .container,
    #header-sticky .container, .header-4 .container, .header-5 .container, .header-6 .container, header .container,
    .footer-section-5 .container, .footer-bottom3 .container {
        width: 92% !important;
        max-width: 960px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .section-padding,
    .section-padding-2,
    .about-section,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section,
    .project-section-5,
    .contact-section,
    .counter-section-4,
    .brand-section {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .hero-section.hero-1 {
        min-height: auto !important;
        margin-top: 75px !important;
        padding: 20px 0 25px 0 !important;
    }

    h1,
    .hero-1 .hero-content-items .hero-content h1,
    .breadcrumb-title,
    .page-heading h1,
    .breadcrumb-wrapper h1 {
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    h2,
    .section-title h2,
    .section-title-area h2,
    .sustainability-content h2,
    .museum-content h2,
    .restaurant-content h2,
    .contact-top h2,
    .contact-title h2,
    .contact-section .hero_title,
    h2.hero_title,
    h2.text_invert-2 {
        font-size: 23px !important;
        line-height: 1.22 !important;
    }

    .about-content h2,
    .about-heading-sm,
    .about-quote-h2,
    .col-lg-6 .section-title h2 {
        font-size: 22px !important;
        line-height: 1.24 !important;
    }

    h3,
    .section-title h3,
    .service-box-items h3,
    .contact-middle-items h3,
    .author-content h3,
    .book-title h3,
    .museum-info h3,
    .restaurant-info h3 {
        font-size: 17px !important;
        line-height: 1.28 !important;
    }

    h4,
    .news-box-items-style-1 h4,
    .power-feature-card-style-3 h4,
    .icon-box-items .content h4,
    .contact-info-items h4 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    p,
    .news-content p,
    .about-content p,
    .about-content-style-1 p,
    .section-title p,
    .sustainability-content p,
    .museum-content p,
    .restaurant-content p,
    .contact-section p,
    .contact-top p,
    .contact-middle-items p,
    .author-content p,
    .choose-power-content-items-style-4 p,
    blockquote {
        font-size: 13.5px !important;
        line-height: 1.48 !important;
    }

    .counter-items h2,
    .hero-1 .counter-items-area .counter-items h2,
    .counter-items-4 h2 {
        font-size: 26px !important;
    }

    .sub-title,
    .section-title .sub-title,
    .section-title-area .sub-title,
    .page-heading .sub-title,
    h6.sub-title {
        font-size: 13px !important;
        letter-spacing: 2.5px !important;
        padding: 6px 18px !important;
        margin-bottom: 10px !important;
    }

    .theme-btn,
    .ebook-btn,
    button.theme-btn {
        font-size: 13px !important;
        padding: 6px 15px !important;
    }
}

/* --- 5. TABLETS PORTRAIT (768px - 991.98px) --- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-2,
    .hero-section .container, .hero-1 .container, .breadcrumb-wrapper .container,
    #header-sticky .container, .header-4 .container, .header-5 .container, .header-6 .container, header .container,
    .footer-section-5 .container, .footer-bottom3 .container {
        width: 92% !important;
        max-width: 720px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .section-padding,
    .section-padding-2,
    .about-section,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section,
    .project-section-5,
    .contact-section,
    .counter-section-4,
    .brand-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .hero-section.hero-1 {
        min-height: auto !important;
        margin-top: 70px !important;
        padding: 15px 0 25px 0 !important;
    }

    h1,
    .hero-1 .hero-content-items .hero-content h1,
    .breadcrumb-title,
    .page-heading h1,
    .breadcrumb-wrapper h1 {
        font-size: 30px !important;
        line-height: 1.18 !important;
    }

    h2,
    .section-title h2,
    .section-title-area h2,
    .sustainability-content h2,
    .museum-content h2,
    .restaurant-content h2,
    .contact-top h2,
    .contact-title h2,
    .contact-section .hero_title,
    h2.hero_title,
    h2.text_invert-2 {
        font-size: 21px !important;
        line-height: 1.22 !important;
    }

    .about-content h2,
    .about-heading-sm,
    .about-quote-h2,
    .col-lg-6 .section-title h2 {
        font-size: 20px !important;
        line-height: 1.24 !important;
    }

    h3,
    .section-title h3,
    .service-box-items h3,
    .contact-middle-items h3,
    .author-content h3,
    .book-title h3,
    .museum-info h3,
    .restaurant-info h3 {
        font-size: 16.5px !important;
        line-height: 1.28 !important;
    }

    h4,
    .news-box-items-style-1 h4,
    .power-feature-card-style-3 h4,
    .icon-box-items .content h4,
    .contact-info-items h4 {
        font-size: 14.5px !important;
        line-height: 1.3 !important;
    }

    p,
    .news-content p,
    .about-content p,
    .about-content-style-1 p,
    .section-title p,
    .sustainability-content p,
    .museum-content p,
    .restaurant-content p,
    .contact-section p,
    .contact-top p,
    .contact-middle-items p,
    .author-content p,
    .choose-power-content-items-style-4 p,
    blockquote {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
    }

    .counter-items h2,
    .hero-1 .counter-items-area .counter-items h2,
    .counter-items-4 h2 {
        font-size: 24px !important;
    }

    .sub-title,
    .section-title .sub-title,
    .section-title-area .sub-title,
    .page-heading .sub-title,
    h6.sub-title {
        font-size: 13px !important;
        letter-spacing: 2.5px !important;
        padding: 6px 18px !important;
        margin-bottom: 10px !important;
    }

    .theme-btn,
    .ebook-btn,
    button.theme-btn {
        font-size: 13px !important;
        padding: 6px 14px !important;
    }
}

/* --- 6. MOBILE LANDSCAPE & SMALL TABLETS (481px - 767.98px) --- */
@media (min-width: 481px) and (max-width: 767.98px) {

  
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-2,
    .hero-section .container, .hero-1 .container, .breadcrumb-wrapper .container,
    #header-sticky .container, .header-4 .container, .header-5 .container, .header-6 .container, header .container,
    .footer-section-5 .container, .footer-bottom3 .container {
        width: 92% !important;
        max-width: 540px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .section-padding,
    .section-padding-2,
    .about-section,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section,
    .project-section-5,
    .contact-section,
    .counter-section-4,
    .brand-section {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    .hero-section.hero-1 {
        min-height: auto !important;
        margin-top: 65px !important;
        padding: 15px 0 20px 0 !important;
    }

    h1,
    .hero-1 .hero-content-items .hero-content h1,
    .breadcrumb-title,
    .page-heading h1,
    .breadcrumb-wrapper h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    h2,
    .section-title h2,
    .section-title-area h2,
    .sustainability-content h2,
    .museum-content h2,
    .restaurant-content h2,
    .contact-top h2,
    .contact-title h2,
    .contact-section .hero_title,
    h2.hero_title,
    h2.text_invert-2 {
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    .about-content h2,
    .about-heading-sm,
    .about-quote-h2,
    .col-lg-6 .section-title h2 {
        font-size: 16.5px !important;
        line-height: 1.25 !important;
    }

    h3,
    .section-title h3,
    .service-box-items h3,
    .contact-middle-items h3,
    .author-content h3,
    .book-title h3,
    .museum-info h3,
    .restaurant-info h3 {
        font-size: 13.5px !important;
        line-height: 1.3 !important;
    }

    h4,
    .news-box-items-style-1 h4,
    .power-feature-card-style-3 h4,
    .icon-box-items .content h4,
    .contact-info-items h4 {
        font-size: 12px !important;
    }

    p,
    .news-content p,
    .about-content p,
    .about-content-style-1 p,
    .section-title p,
    .sustainability-content p,
    .museum-content p,
    .restaurant-content p,
    .contact-section p,
    .contact-top p,
    .contact-middle-items p,
    .author-content p,
    .choose-power-content-items-style-4 p,
    blockquote {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    .counter-items h2,
    .hero-1 .counter-items-area .counter-items h2,
    .counter-items-4 h2 {
        font-size: 20px !important;
    }

    .counter-items p,
    .hero-1 .counter-items-area .counter-items p {
        font-size: 9.5px !important;
    }

    .sub-title,
    .section-title .sub-title,
    .section-title-area .sub-title,
    .page-heading .sub-title,
    h6.sub-title {
        font-size: 8px !important;
        letter-spacing: 1.2px !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
    }

    .sub-title img,
    .section-title .sub-title img,
    .section-title-area .sub-title img,
    .page-heading .sub-title img,
    h6.sub-title img {
        max-height: 6.5px !important;
    }

    .theme-btn,
    .ebook-btn,
    button.theme-btn {
        font-size: 10.5px !important;
        padding: 5px 13px !important;
    }
}

/* --- 7. EXTRA SMALL MOBILE (<= 480px) --- */
@media (max-width: 480px) {
.sub-title, .section-title .sub-title, .section-title-area .sub-title, .page-heading .sub-title, h6.sub-title, .hero-1 .hero-content-items .hero-content .sub-title, .hero-content .sub-title, .sub-title.color-1, .sub-title.color-2, .sub-title.color-3, .section-title .sub-title.color-1, .section-title .sub-title.color-2, .section-title .sub-title.color-3, .project-section-5 .section-title .sub-title {
    font-size: 8px !important;
}
    html, body {
        overflow-x: hidden !important;
    }

    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-2,
    .hero-section .container, .hero-1 .container, .breadcrumb-wrapper .container,
    #header-sticky .container, .header-4 .container, .header-5 .container, .header-6 .container, header .container,
    .footer-section-5 .container, .footer-bottom3 .container {
        width: 92% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .section-padding,
    .section-padding-2,
    .about-section,
    .about-section-1,
    .choose-power-section-4,
    .news-section,
    .media-section,
    .service-section,
    .project-section-5,
    .contact-section,
    .counter-section-4,
    .brand-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .hero-section.hero-1 {
        min-height: auto !important;
        margin-top: 60px !important;
        padding: 10px 0 15px 0 !important;
    }

    h1,
    .hero-1 .hero-content-items .hero-content h1,
    .breadcrumb-title,
    .page-heading h1,
    .breadcrumb-wrapper h1 {
        font-size: 21px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.3px !important;
    }

    h2,
    .section-title h2,
    .section-title-area h2,
    .sustainability-content h2,
    .museum-content h2,
    .restaurant-content h2,
    .contact-top h2,
    .contact-title h2,
    .contact-section .hero_title,
    h2.hero_title,
    h2.text_invert-2 {
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

    .about-content h2,
    .about-heading-sm,
    .about-quote-h2,
    .col-lg-6 .section-title h2 {
        font-size: 15.5px !important;
        line-height: 1.25 !important;
    }

    h3,
    .section-title h3,
    .service-box-items h3,
    .contact-middle-items h3,
    .author-content h3,
    .book-title h3,
    .museum-info h3,
    .restaurant-info h3 {
        font-size: 13px !important;
        line-height: 1.28 !important;
    }

    h4,
    .news-box-items-style-1 h4,
    .power-feature-card-style-3 h4,
    .icon-box-items .content h4,
    .contact-info-items h4 {
        font-size: 11.5px !important;
        line-height: 1.32 !important;
    }

    p,
    .news-content p,
    .about-content p,
    .about-content-style-1 p,
    .section-title p,
    .sustainability-content p,
    .museum-content p,
    .restaurant-content p,
    .contact-section p,
    .contact-top p,
    .contact-middle-items p,
    .author-content p,
    .choose-power-content-items-style-4 p,
    blockquote {
        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }

    .sub-title,
    .section-title .sub-title,
    .section-title-area .sub-title,
    .page-heading .sub-title,
    h6.sub-title {
        font-size: 8px !important;
        letter-spacing: 1.2px !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
    }

    .sub-title img,
    .section-title .sub-title img,
    .section-title-area .sub-title img,
    .page-heading .sub-title img,
    h6.sub-title img {
        max-height: 6px !important;
    }

    .counter-items h2,
    .hero-1 .counter-items-area .counter-items h2,
    .counter-items-4 h2 {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    .counter-items p,
    .hero-1 .counter-items-area .counter-items p {
        font-size: 9px !important;
        line-height: 1.3 !important;
    }

    .theme-btn,
    .ebook-btn,
    button.theme-btn {
        padding: 5px 12px !important;
        font-size: 10px !important;
    }

    .theme-btn i,
    .ebook-btn i,
    button.theme-btn i {
        width: 26px !important;
        height: 26px !important;
        line-height: 26px !important;
        margin-left: 6px !important;
    }

    .modal-dialog {
        max-width: 94% !important;
        margin: 12px auto !important;
    }

    .ebook-modal .modal-header {
        padding: 15px 12px 8px !important;
    }

    .ebook-modal .modal-body {
        padding: 15px 12px !important;
    }
}

/* --- 8. ULTRA-WIDE SCREENS (1600px - 1799px) --- */
@media (min-width: 1600px) and (max-width: 1799.98px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-2,
    .hero-section .container, .hero-1 .container, .breadcrumb-wrapper .container,
    #header-sticky .container, .header-4 .container, .header-5 .container, .header-6 .container, header .container,
    .footer-section-5 .container, .footer-bottom3 .container {
        width: 92% !important;
        max-width: 1360px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .section-padding, .section-padding-2 {
        padding-top: 75px !important;
        padding-bottom: 75px !important;
    }
}

/* --- 9. ULTRA-WIDE & 4K DISPLAY SCREENS (1800px+) --- */
@media (min-width: 1800px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-2,
    .hero-section .container,
    .hero-1 .container,
    .breadcrumb-wrapper .container,
    #header-sticky .container,
    .header-4 .container,
    .header-5 .container,
    .header-6 .container,
    header .container,
    .footer-section-5 .container,
    .footer-bottom3 .container {
        width: 92% !important;
        max-width: 1400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .section-padding, .section-padding-2 {
        padding-top: 75px !important;
        padding-bottom: 75px !important;
    }
}

/* --- G. GLOBAL RESPONSIVE FLEXBOX & OVERFLOW GUARDS --- */
img, svg, iframe, video {
    max-width: 100% !important;
    height: auto;
}

.row {
    margin-left: -12px;
    margin-right: -12px;
}

.row > [class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
}

/* Form input control responsiveness */
input, textarea, select {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================================
   21. FOOTER EQUAL SPACING & EVEN COLUMN DISTRIBUTION
   Matches exact layout with compact bio block & space-between columns.
   ========================================================= */
.footer-widget-wrapper.style-3 .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

/* Green contact icons */
.footer-widget-wrapper.style-3 .footer-contect-2 li .icon i {
    color: #fff !important;
    font-size: 16px !important;
}

/* Desktop & Laptop Screens (>= 992px) */
@media (min-width: 992px) {
    /* Column 1: Bio paragraph + Logo */
    .footer-widget-wrapper.style-3 .row > [class*="col-"]:nth-child(1) {
        flex: 0 0 28% !important;
        width: 28% !important;
        max-width: 320px !important;
        padding-right: 20px !important;
        padding-left: 0 !important;
    }

    .footer-widget-wrapper.style-3 .row > [class*="col-"]:nth-child(1) p {
        max-width: 300px !important;
        line-height: 1.55 !important;
        font-size: clamp(14px, 1.25vw, 18px) !important;
        margin-bottom: 22px !important;
    }

    /* Column 2: Quick Links */
    .footer-widget-wrapper.style-3 .row > [class*="col-"]:nth-child(2) {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 170px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Column 3: Resources */
    .footer-widget-wrapper.style-3 .row > [class*="col-"]:nth-child(3) {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 200px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Column 4: Get In Touch */
    .footer-widget-wrapper.style-3 .row > [class*="col-"]:nth-child(4) {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 250px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Tablet Screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .footer-widget-wrapper.style-3 .row > [class*="col-"]:first-child {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 35px !important;
    }

    .footer-widget-wrapper.style-3 .row > [class*="col-"]:not(:first-child) {
        flex: 1 1 0% !important;
        width: auto !important;
    }
}

/* Mobile Screens (< 768px) */
@media (max-width: 767.98px) {
    .footer-widget-wrapper.style-3 .row > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .footer-widget-wrapper.style-3 .row > [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   22. E-BOOK BUY MODAL & FORM BUTTON DESIGN
   Matches exact reference form with centered title, clean inputs,
   and solid full-width green "Buy Now" button.
   ========================================================= */
.modal-dialog {
    max-width: 580px !important;
    margin: 1.75rem auto !important;
}

.ebook-modal {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.18) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.ebook-modal .modal-header {
    padding: 24px 28px 10px 28px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.ebook-modal .modal-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-align: center !important;
    width: 100% !important;
}

.ebook-modal .btn-close {
    position: absolute !important;
    right: 24px !important;
    top: 24px !important;
    margin: 0 !important;
    opacity: 0.6 !important;
}

.ebook-modal .btn-close:hover {
    opacity: 1 !important;
}

.ebook-modal .modal-body {
    padding: 10px 28px 28px 28px !important;
}

/* Form Controls */
.ebook-modal label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #444444 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.ebook-modal .form-control,
.ebook-modal .form-select {
    height: 46px !important;
    font-size: 14.5px !important;
    border-radius: 12px !important;
    border: 1px solid #dcdcdc !important;
    padding: 8px 16px !important;
    color: #222222 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    margin-bottom: 16px !important;
}

.ebook-modal .form-control:focus,
.ebook-modal .form-select:focus {
    border-color: #0e6634 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(14, 102, 52, 0.1) !important;
    outline: none !important;
}

.ebook-modal textarea.form-control {
    height: 75px !important;
    resize: none !important;
    padding-top: 10px !important;
}

/* Full Width Solid Green Submit Button */
.ebook-modal button[type="submit"].ebook-btn,
.ebook-modal .ebook-btn,
button.theme-btn.ebook-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 20px !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    background-color: #0e6634 !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    cursor: pointer !important;
    text-align: center !important;
}

.ebook-modal button[type="submit"].ebook-btn:hover,
.ebook-modal .ebook-btn:hover,
button.theme-btn.ebook-btn:hover {
    background-color: #0a4f28 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

/* Hide arrow badge inside button to match reference image */
.ebook-modal button[type="submit"].ebook-btn i,
.ebook-modal .ebook-btn i,
button.theme-btn.ebook-btn i {
    display: none !important;
}

@media (max-width: 575px) {
    .ebook-modal .modal-header {
        padding: 20px 20px 8px 20px !important;
    }
    .ebook-modal .modal-body {
        padding: 10px 20px 20px 20px !important;
    }
    .ebook-modal button[type="submit"].ebook-btn,
    .ebook-modal .ebook-btn {
        height: 46px !important;
        font-size: 15px !important;
    }
}

/* =========================================================
   23. STICKY HEADER SCROLL FIX & INNER PAGE HEADER STABILIZATION
   Fixes header getting cut off, cropped, misaligned, or cramped on scroll.
   ========================================================= */
header,
#header-sticky,
.header-4,
.header-5,
.header-6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease-in-out;
}

#header-sticky .container,
.header-4 .container,
.header-5 .container,
.header-6 .container,
header .container {
    width: 92% !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

#header-sticky .mega-menu-wrapper {
    background-color: #ffffff !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#header-sticky .header-main {
    padding: 10px 0 !important;
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

#header-sticky .header-main .header-logo {
    flex: 0 0 auto !important;
}

#header-sticky .header-main .header-logo img {
    max-height: 52px !important;
    max-width: 220px !important;
    width: auto !important;
    margin-top: 0 !important;
    display: block !important;
}

#header-sticky .header-main .mean__menu-wrapper {
    flex: 1 1 auto !important;
    text-align: right !important;
}

#header-sticky .header-main .main-menu {
    display: inline-block !important;
}

/* Horizontal Main Nav Menu */
#header-sticky .header-main .main-menu > nav > ul,
#header-sticky .header-main .main-menu > ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#header-sticky .header-main .main-menu > nav > ul > li,
#header-sticky .header-main .main-menu > ul > li {
    display: inline-block !important;
    margin-inline-end: 14px !important;
    margin-right: 14px !important;
    white-space: nowrap !important;
    position: relative !important;
}

#header-sticky .header-main .main-menu > nav > ul > li:last-child,
#header-sticky .header-main .main-menu > ul > li:last-child {
    margin-inline-end: 0 !important;
    margin-right: 0 !important;
}

/* Nav Item Links - Font Weight 400 */
#header-sticky .header-main .main-menu ul li a,
#header-sticky .header-main .main-menu > nav > ul > li > a {
    padding: 16px 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #142217 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    letter-spacing: -0.1px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: color 0.25s ease !important;
}

#header-sticky .header-main .main-menu ul li.active > a {
    color: #0b612e !important;
    font-weight: 500 !important;
}

#header-sticky .header-main .main-menu ul li a:hover,
#header-sticky .header-main .main-menu ul li:hover > a {
    color: #0b612e !important;
}

/* Dropdown Arrow Rotation on Hover */
#header-sticky .header-main .main-menu ul li a i,
#header-sticky .header-main .main-menu ul li a .fa-chevron-down,
.header-main .main-menu ul li a i {
    font-size: 11px !important;
    margin-left: 4px !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important;
    transform-origin: center center !important;
}

#header-sticky .header-main .main-menu ul li:hover > a i,
#header-sticky .header-main .main-menu ul li:hover > a .fa-chevron-down,
#header-sticky .header-main .main-menu ul li.has-dropdown:hover > a i,
.header-main .main-menu ul li:hover > a i {
    transform: rotate(180deg) !important;
    color: #0b612e !important;
}

/* Vertical Submenu Dropdown Container */
#header-sticky .header-main .main-menu ul li .submenu,
#header-sticky .header-main .main-menu .submenu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 250px !important;
    width: max-content !important;
    background: #ffffff !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    z-index: 999999 !important;
    text-align: left !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none;
}

#header-sticky .header-main .main-menu ul li:hover > .submenu,
#header-sticky .header-main .main-menu ul li.has-dropdown:hover > .submenu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Submenu Items (Stacked Vertically) */
#header-sticky .header-main .main-menu ul li .submenu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

#header-sticky .header-main .main-menu ul li .submenu li:last-child {
    border-bottom: none !important;
}

/* Submenu Links - Clean Padding & Hover */
#header-sticky .header-main .main-menu ul li .submenu li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 22px !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: #263238 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    text-align: left !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

#header-sticky .header-main .main-menu ul li .submenu li a:hover {
    color: #0b612e !important;
    background-color: #f4f9f5 !important;
    padding-left: 26px !important;
}

@media (min-width: 1440px) {
    #header-sticky .header-main .header-logo img {
        max-width: 240px !important;
        max-height: 56px !important;
    }

    #header-sticky .header-main .main-menu > nav > ul > li,
    #header-sticky .header-main .main-menu > ul > li {
        margin-inline-end: 20px !important;
        margin-right: 20px !important;
    }

    #header-sticky .header-main .main-menu ul li a {
        font-size: clamp(14px, 1.25vw, 18px);
        font-weight: 400 !important;
    }
}

/* STICKY STATE ON SCROLL */
#header-sticky.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 68px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    z-index: 99999 !important;
    -webkit-animation: 350ms ease-in-out 0s normal none 1 running fadeInDown !important;
    animation: 350ms ease-in-out 0s normal none 1 running fadeInDown !important;
    padding: 0 !important;
    margin: 0 !important;
}

#header-sticky.sticky .mega-menu-wrapper {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#header-sticky.sticky .header-main {
    padding: 6px 0 !important;
    min-height: 62px !important;
}

#header-sticky.sticky .header-main .header-logo img {
    max-height: 46px !important;
    max-width: 200px !important;
    width: auto !important;
    margin-top: 0 !important;
}

#header-sticky.sticky .header-main .main-menu ul li a {
    padding: 12px 0 !important;
    color: #142217 !important;
    font-weight: 400 !important;
}

#header-sticky.sticky .header-main .main-menu ul li.active > a {
    color: #0b612e !important;
    font-weight: 500 !important;
}

#header-sticky.sticky .header-main .main-menu ul li a:hover,
#header-sticky.sticky .header-main .main-menu ul li:hover > a {
    color: #0b612e !important;
}

#header-sticky.sticky .header-main .main-menu ul li .submenu {
    top: 100% !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    background-color: #ffffff !important;
}

#header-sticky.sticky .header-main .main-menu ul li .submenu li a {
    padding: 10px 22px !important;
    font-weight: 400 !important;
    color: #263238 !important;
}

#header-sticky.sticky .header-main .main-menu ul li .submenu li a:hover {
    color: #0b612e !important;
    background-color: #f4f9f5 !important;
}

/* RESPONSIVE STICKY HEADER (TABLET & MOBILE) */
@media (max-width: 1199.98px) {
    #header-sticky,
    #header-sticky.sticky {
        min-height: 64px !important;
        height: auto !important;
    }

    #header-sticky .header-main,
    #header-sticky.sticky .header-main {
        min-height: 64px !important;
        padding: 6px 0 !important;
    }

    #header-sticky .header-main .header-logo img,
    #header-sticky.sticky .header-main .header-logo img {
        max-height: 42px !important;
        max-width: 200px !important;
        margin-top: 0 !important;
    }

    #header-sticky .mobile-menu,
    #header-sticky.sticky .mobile-menu {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    #header-sticky .mobile-menu.mean-container .mean-bar,
    #header-sticky.sticky .mobile-menu.mean-container .mean-bar {
        min-height: 44px !important;
    }

    #header-sticky .mobile-menu.mean-container a.meanmenu-reveal,
    #header-sticky.sticky .mobile-menu.mean-container a.meanmenu-reveal {
        top: 0 !important;
        margin-top: 0 !important;
    }

    #header-sticky .mobile-menu.mean-container .mean-nav,
    #header-sticky.sticky .mobile-menu.mean-container .mean-nav {
        top: 100% !important;
        max-height: calc(100vh - 65px) !important;
    }
}

@media (max-width: 575.98px) {
    #header-sticky .header-main .header-logo img,
    #header-sticky.sticky .header-main .header-logo img {
        max-height: 38px !important;
        max-width: 170px !important;
    }
}

/* =========================================================
   24. HOME & INNER PAGE FOOTER RESPONSIVE STABILITY
   ========================================================= */
.footer-section-5 {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.footer-section-5 .container {
    width: 92% !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.footer-bottom3 .container {
    width: 92% !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* =========================================================
   25. UNIFIED PROFESSIONAL ANIMATION DESIGN SYSTEM
   Standardizes all transitions, entrance timings, hover states,
   and micro-interactions for a cohesive luxury portfolio experience.
   ========================================================= */

/* --- 1. Global Luxury Easing & Performance Optimizations --- */
:root {
    --portfolio-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --portfolio-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --portfolio-duration-fast: 0.25s;
    --portfolio-duration-normal: 0.35s;
    --portfolio-duration-smooth: 0.5s;
    --portfolio-hover-lift: translateY(-6px);
    --portfolio-shadow-rest: 0 4px 20px rgba(0, 0, 0, 0.04);
    --portfolio-shadow-hover: 0 16px 36px rgba(11, 97, 46, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
    --portfolio-border-hover: rgba(11, 97, 46, 0.25);
}

/* Hardware-acceleration helper */
.news-box-items-style-1,
.ebook-card-box,
.service-box-items,
.service-box-items-style-2,
.power-feature-card-style-3,
.project-box-items-style-5,
.theme-btn,
.ebook-btn,
.link-btn,
.brand-items img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* --- 2. Consistent Card Lift & Border Transitions --- */
.service-box-items,
.service-box-items-style-2,
.power-feature-card-style-3,
.feature-card,
.project-box-items-style-5 {
    transition: transform var(--portfolio-duration-normal) var(--portfolio-ease),
                box-shadow var(--portfolio-duration-normal) ease,
                border-color var(--portfolio-duration-normal) ease !important;
}

.service-box-items:hover,
.service-box-items-style-2:hover,
.power-feature-card-style-3:hover,
.feature-card:hover {
    transform: var(--portfolio-hover-lift) !important;
    box-shadow: var(--portfolio-shadow-hover) !important;
    border-color: var(--portfolio-border-hover) !important;
}

/* Remove hover effect from choose-power icon-box-items / author section paragraphs */
.choose-power-content-items-style-4 .icon-box-items,
.choose-power-content-items-style-4 .icon-box-items:hover,
.choose-power-section-4 .icon-box-items,
.choose-power-section-4 .icon-box-items:hover,
.icon-box-items,
.icon-box-items:hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* --- 3. Cohesive Button & Micro-Interactions --- */
.theme-btn,
.ebook-btn {
    transition: all var(--portfolio-duration-normal) var(--portfolio-ease) !important;
}

.theme-btn:hover,
.ebook-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(11, 97, 46, 0.28) !important;
}

.link-btn {
    transition: color var(--portfolio-duration-fast) ease,
                transform var(--portfolio-duration-fast) var(--portfolio-ease) !important;
}

.link-btn:hover {
    transform: translateX(3px) !important;
}

/* --- 4. Brand Logos Uniform Smooth Hover --- */
.brand-items img {
    transition: transform var(--portfolio-duration-normal) var(--portfolio-ease),
                opacity var(--portfolio-duration-normal) ease,
                filter var(--portfolio-duration-normal) ease !important;
}

.brand-items img:hover {
    transform: translateY(-3px) scale(1.05) !important;
    opacity: 1 !important;
}

/* --- 5. Social Icons Uniform Hover --- */
.footer-widget-wrapper.style-3 .footer-content .social-icon a,
.social-icon a {
    transition: all var(--portfolio-duration-fast) var(--portfolio-ease) !important;
}

.footer-widget-wrapper.style-3 .footer-content .social-icon a:hover,
.social-icon a:hover {
    transform: translateY(-3px) scale(1.08) !important;
    background-color: #0b612e !important;
    border-color: #0b612e !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(11, 97, 46, 0.3) !important;
}

/* --- 6. Smooth Hardware-Accelerated FadeUp Entrance Optimization --- */
.wow {
    will-change: transform, opacity;
}

.wow.animated,
.fadeInUp,
.fadeInLeft,
.fadeInRight,
.fadeInDown:not(#header-sticky.sticky),
.zoomIn,
.bounceIn {
    animation-duration: 0.85s !important;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation-fill-mode: both !important;
}

/* --- 7. Disable Distracting Non-Text Continuous Animations --- */
.shape-1, .shape-2, .shape-3, .shape-4, .shape-5, .shape-6,
.choose-shape, .about-shape, .circle-shape, .star-shape,
[class*="cir36"], [class*="bounce-x"], [class*="pulse4"],
[class*="img-anim-"], [class*="left-animation"], [class*="right-animation"] {
    animation: none !important;
    -webkit-animation: none !important;
}

/* =========================================================
   26. AOS (ANIMATE ON SCROLL) COMPONENT SYSTEM
   ========================================================= */
[data-aos] {
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 0.85s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

[data-aos="fade-up"] {
    transform: translate3d(0, 36px, 0);
}

[data-aos="fade-down"] {
    transform: translate3d(0, -36px, 0);
}

[data-aos="fade-left"] {
    transform: translate3d(36px, 0, 0);
}

[data-aos="fade-right"] {
    transform: translate3d(-36px, 0, 0);
}

[data-aos].aos-animate {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Stagger Delay Support */
[data-aos][data-aos-delay="50"]  { transition-delay: 50ms; }
[data-aos][data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos][data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos][data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos][data-aos-delay="250"] { transition-delay: 250ms; }
[data-aos][data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos][data-aos-delay="350"] { transition-delay: 350ms; }
[data-aos][data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos][data-aos-delay="500"] { transition-delay: 500ms; }

/* Custom Duration Support */
[data-aos][data-aos-duration="600"] { transition-duration: 600ms; }
[data-aos][data-aos-duration="800"] { transition-duration: 800ms; }
[data-aos][data-aos-duration="1000"] { transition-duration: 1000ms; }
[data-aos][data-aos-duration="1200"] { transition-duration: 1200ms; }