/* ============================================
   GLOBAL RESET + BODY
   ============================================ */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    /* prevent content hiding under fixed header */
    font-family: "Roboto";
    background-color: #f5f5f5;
    padding-top: 70px;
}

/* Unified Layout Container */
.container-inner {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* ===========================
   HEADER BASE
   =========================== */

.site-header {
    background: linear-gradient(to bottom, #3b1e10, #2b160b);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9990;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.site-header .container-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px !important;
    /* Reduced side padding since container handles it */
}


/* LOGO */
.header-logo img {
    height: 48px;
    width: auto;
}

/* ===========================
   DESKTOP NAV
   =========================== */

.main-nav {
    display: flex;
}

.main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav ul li {
    margin: 0;
    padding: 0;
}

.main-nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    padding: 0 16px;
    line-height: 1;
    transition: color 0.2s ease;
    font-family: "Montserrat" !important;
    font-weight: 400;
}

.main-nav ul li a.active,
.main-nav ul li a:hover {
    color: #ff8a4c;
}

/* Map Drupal menu expanded items to dropdown */
.menu-item--expanded {
    position: relative;
}

.menu-item--expanded>ul {
    display: none;
}

/* Desktop hover */
@media (min-width: 901px) {
    .menu-item--expanded:hover>ul {
        display: block;
    }
}

/* Mobile open */
.menu-item--expanded.open>ul {
    display: block;
}


/* ===========================
   DROPDOWN (DESKTOP)
   =========================== */

.has-submenu {
    position: relative;
}

/* CLOSED BY DEFAULT */
.has-submenu .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 195px;
    background: #2b160b;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 9999;
}

.has-submenu .dropdown-menu li {
    margin: 0;
    padding: 0;
}

.has-submenu .dropdown-menu li a {
    display: block;
    padding: 7px 14px;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.has-submenu .dropdown-menu li:last-child a {
    border-bottom: none;
}

.has-submenu .dropdown-menu li:hover a {
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid #3fa9f5;
    padding-left: 11px;
    /* compensate for border */
}

/* DESKTOP HOVER — ONLY HERE IT OPENS */
@media (min-width: 901px) {
    .has-submenu:hover>.dropdown-menu {
        display: block;
    }
}

/* ===========================
   HAMBURGER (MOBILE)
   =========================== */

.menu-toggle {
    display: none;
    width: 32px;
    height: 26px;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10002;
}

.menu-toggle span {
    height: 3px;
    width: 32px;
    background: #ffffff;
    border-radius: 3px;
    transition: 0.35s ease;
}

/* X animation */
.menu-toggle.open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* ===========================
   MOBILE MENU
   =========================== */

@media (max-width: 900px) {

    body {
        font-family: "Roboto";
        /* header shorter on mobile */
        padding-top: 70px;
    }

    .header-inner {
        padding: 12px 16px;
    }

    .menu-toggle {
        display: flex !important;
    }

    /* hide desktop nav until toggled */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #2b160b;
        display: none;
        flex-direction: column;
        padding: 15px 25px 20px 25px;
        z-index: 9000;
    }

    .main-nav.active {
        display: block !important;
        animation: fadeDown 0.35s ease;
    }

    @keyframes fadeDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .main-nav ul {
        flex-direction: column;
        gap: 12px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-nav ul li a {
        padding: 4px 0;
        font-size: 1.1rem;
    }

    /* MOBILE DROPDOWN: closed by default */
    .has-submenu .dropdown-menu {
        position: static;
        width: 100%;
        border: none;
        background: #2b160b;
        display: none !important;
    }

    .has-submenu.open>.dropdown-menu {
        display: block !important;
    }

    .has-submenu .dropdown-menu li a {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .has-submenu .dropdown-menu li:hover a {
        border-left: none;
        padding-left: 12px;
    }
}


.hero {
    position: relative;
    width: 100%;
    min-height: 430px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    overflow: hidden;
}

/* hero image behaves exactly like background-image */
.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    /* same as background-size: cover */
    object-position: center 50%;
    /* same as background-position */
    z-index: -1;
    /* send behind content */

    filter: brightness(70%);
    /* similar to rgba gradient overlay */
}

/* optional: gradient overlay if you want exact match */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 0, 0, 0.123), rgba(0, 0, 0, 0.3));
    z-index: -1;
}


.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
}


.hero-content {
    position: relative;
    z-index: 1;
}

.content-hub-hero .hero-content {
    margin-top: 0 !important;
}


.hero h1 {
    font-size: 34px;
    margin-bottom: 125px;
    /* space below H1 */
    font-weight: 700;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-family: "Montserrat";
    margin-top: 170px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(38, 18, 5, 0.6);
}

.hero-breadcrumb {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 40px;
    letter-spacing: 0.5px;
}

.hero-breadcrumb strong {
    font-weight: 700;
}

.hero-title-underlined {
    font-size: 3.8rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 10px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.hero-description {
    font-size: 1.25rem;
    max-width: 900px;
    margin: 5px auto 0;
    line-height: 1.4;
    color: #fff;
}


.btn-primary {
    background: #ffffff;
    padding: 7px 33px;
    border-radius: 50px;
    border: 3px solid #FF884D;
    font-size: 18px;
    font-weight: 700;
    color: #FF884D;
    /* solid orange text */
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #FF884D;
    color: #ffffff;
}




.btn-primary:hover {
    background-color: #FF6B35;
    color: white;
    border-color: #FF6B35;
}

/* Whole Section */
.about-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 50px 0;
    padding: 0;
}

/* Main Wrapper */
.about-wrapper {
    width: 100%;
    max-width: 1400px;
    height: 430px;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(90deg,
            rgba(255, 136, 77, 0.8) 0%,
            rgba(191, 44, 55, 0.8) 100%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* LEFT SIDE (IMAGE) */
.about-left {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    /* move image up */
    justify-content: flex-start;
    padding-top: 40px;
    padding-left: 15px;
    /* adjust this to match your red line */
}

/* Control image height */
.about-left img {
    height: 85%;
    /* increase/decrease until it touches red line */
    width: auto;
    object-fit: contain;
    margin: auto;
}

/* RIGHT SIDE (CONTENT) */
.about-right {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* center whole text block */
    color: #fff;
    padding: 0 2rem;
}

/* Title */
.about-right h2 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-family: "Montserrat";
    margin-top: 0px;
}

/* Subtitle */
.about-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 1.5rem;
    font-family: "Roboto";
}

/* Text */
.about-text {
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: "Roboto";

    max-width: 700px;
    /* fixed width for straight edges */
    margin-left: auto;
    margin-right: auto;

    text-align: justify;
    /* start and end of every line same */
    text-justify: inter-word;
}

/* Button */
.btn-secondary {
    background-color: #ffffff;
    color: rgba(255, 136, 77, 1);
    padding: 0.8rem 2rem;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    align-self: center;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}

.btn-secondary:hover {
    background-color: #e45a25;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* =========================================
   MOBILE RESPONSIVENESS FIXES
   Dimensions: < 768px
   ========================================= */
@media (max-width: 768px) {

    /* --- ABOUT SECTION --- */
    .about-wrapper {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-left {
        width: 100% !important;
        height: auto !important;
        padding-top: 2rem !important;
        padding-left: 0 !important;
    }

    .about-left img {
        height: auto !important;
        width: 90% !important;
        max-width: 350px !important;
    }

    .about-right {
        width: 100% !important;
        padding: 2rem 1.5rem !important;
        text-align: center !important;
    }

    .about-right h2 {
        font-size: 2rem !important;
    }

    .about-text {
        max-width: 100% !important;
        text-align: center !important;
    }
}

/* Outer wrapper */
.change-section {
    width: 100%;
    margin: 50px auto;
    /* Removed flex to match About section centering */
}




.options-list {
    margin: 0 auto;
    width: 100%;
}

.change-card {
    width: 100% !important;
    max-width: 1400px !important;
    /* Force to content grid */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    /* Include padding in width */
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    /* Standardized internal padding */
    display: flex;
    gap: 1.5rem;
    box-shadow: 4px 4px 50px 0px rgba(255, 136, 77, 0.25);
    /* Centered shadow */
}

.change-text p,
.change-text h1,
.change-text h2,
.change-text h3,
.change-text span {
    line-height: 20px;
}

/* Logo */
.change-logo img {
    max-width: 180px;
    height: auto;
    display: block;
}

/* Text */
.change-text {
    flex: 1;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
    font-weight: 400;
    font-family: "Roboto";
    width: 860px;
}

/* MOBILE RESPONSIVE FIX */
@media (max-width: 768px) {
    .change-card {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
        gap: 1.5rem;
    }

    .change-logo img {
        max-width: 140px;
    }

    .change-text {
        font-size: 0.95rem;
        line-height: 1.5;
    }
}



/* Section Wrapper */
.provide-section {
    width: 100%;
    margin: 50px auto;
    padding: 0;
    /* Removed flex to match About section centering */
}




/* Main section box — matches About Section */
.provide-container {
    width: 100% !important;
    max-width: 1400px !important;
    /* Force to content grid */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #FF884D1A;
    border-radius: 20px;
    padding: 5px 40px;
    overflow: hidden;
}




/* Title */
.provide-title {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: -15px;
    color: #2c2c2c;
    font-family: "Montserrat";
}

.provide-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 40px;
    font-weight: 400;
}

/* ROWS */
.provide-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
    gap: 40px;
}

.provide-row.reverse {
    flex-direction: row-reverse;
}

/* IMAGES */
.provide-img img {
    width: 330px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.provide-img.small-img img {
    width: 310px;
}

/* CONTENT AREA */
.provide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

/* LOGO inside headings */
.inline-logo {
    height: 28px;
    vertical-align: middle;
    margin-right: 10px;
}

/* HEADINGS */
.provide-heading {
    font-size: 1.5rem;
    font-weight: 800;
    color: #c33333;
    margin-bottom: 18px;
    font-family: "Montserrat";
}

/* TEXT LIST */
.provide-content ul {
    margin: 0 0 25px 0;
    padding-left: 20px;
}

.provide-content li {
    margin-bottom: 10px;
    color: #333;
    line-height: 1.6;
}

/* CENTERED BUTTON – EXACT REFERENCE STYLE */
.provide-btn {
    display: inline-block;
    align-self: center;
    /* center inside flex container */
    margin-top: -5px;

    background: #ff6b35;
    color: #fff;
    padding: 14px 40px;
    /* correct pill button sizing */
    border-radius: 40px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px 4px 10px 0px #00000040;
    transition: 0.25s ease;
}

.provide-btn:hover {
    background: #e45a25;
    transform: translateY(-2px);
}


/* MOBILE RESPONSIVE (under 768px) */
@media (max-width: 768px) {

    /* Stack elements vertically */
    .provide-row,
    .provide-row.reverse {
        flex-direction: column !important;
        text-align: center;
        gap: 25px;
    }

    /* Images full width */
    .provide-img img {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }

    /* Center text */
    .provide-content {
        align-items: center !important;
        text-align: center !important;
    }

    /* Center logos inside headings */
    .inline-logo {
        display: block;
        margin: 0 auto 8px auto;
    }

    /* Resize heading */
    .provide-heading {
        font-size: 1.3rem;
    }

    /* Text spacing */
    .provide-content ul {
        padding-left: 0;
        margin-bottom: 15px;
    }

    .provide-content li {
        text-align: left;
        max-width: 90%;
        margin: 0 auto 10px auto;
    }

    /* Perfect centered responsive button */
    .provide-btn {
        align-self: center !important;
        margin: 10px auto 0 auto;
        width: auto;
        padding: 12px 35px;
        font-size: 15px;
    }

    /* Reduce padding on container */
    .provide-container {
        padding: 25px;
    }
}

/* --- Section Wrapper --- */
/* --- Section Wrapper --- */
.blogs-section {
    width: 90%;
    margin: 50px auto;
    text-align: center;
}

/* --- Title --- */
.blogs-header h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #2c2c2c;
    margin-bottom: 5px;
}

.blogs-header p {
    font-size: 1.05rem;
    color: #777;
    margin-bottom: 40px;
}

/* --- Blog Layout (STATIC, NO SLIDER MOVEMENT) --- */
.blogs-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* base card */
.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    opacity: 0.55;
    /* default dim */
}

/* ACTIVE card from dots */
.blog-card.active {
    opacity: 1;
    transform: translateY(-10px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

/* SIDE CARDS */
.blog-card.dark-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.blog-card .blog-img-wrapper {
    position: relative;
}

.blog-card.dark-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}

/* Remove dark overlay from ACTIVE blog card */
.blog-card.active .blog-img-wrapper {
    background: none !important;
    opacity: 1 !important;
}

/* If dark overlay is via ::before / ::after */
.blog-card.active::before,
.blog-card.active::after,
.blog-card.active .blog-img-wrapper::before,
.blog-card.active .blog-img-wrapper::after {
    display: none !important;
}

/* Disable overlay on ACTIVE blog card */
.blog-card.active .overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}



/* CENTER CARD IMAGE */
.center-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

/* TEXT */
.blog-info {
    padding: 15px 20px;
}

.blog-info h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #b33a26;
    margin-bottom: 5px;
}

.blog-info p {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.4;
}

/* DOTS */
.blog-dots {
    margin-top: 25px;
}

.blog-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.blog-dots .dot.active {
    background: #ff6b35;
}

/* MOBILE */
@media (max-width: 768px) {
    .blogs-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .blog-card {
        width: 100%;
        opacity: 1;
        transform: none;
    }

    .blog-card.active {
        transform: none;
    }
}



/* =========================================================
   FOOTER — FULL & FINAL VERSION
   ========================================================= */

/* Outer wrapper (makes dark bar full width) */
.site-footer {
    width: 100%;
    background: #2b160b;
    /* full width dark background */
    font-family: "Poppins", sans-serif;
}

/* Inner content area centered */
.footer-content {
    padding: 35px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    color: #fff;
}

/* ========== LEFT LOGO ========== */
.footer-logo img {
    height: 60px;
    width: auto;
    display: block;
    margin-left: 0;
}

/* ========== NAV COLUMN ========== */
/* Target both static h3 and dynamic block h2 titles */
.footer-column h3,
.footer-column h2,
.footer-column .block-title {
    margin: 0 0 15px 0;
    font-size: 19px;
    /* Force 10px for titles */
    text-transform: uppercase;
    /* Optional: standard design matching */
    font-weight: 700;
    color: #ffffff;
}

.footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-column li {
    margin-bottom: 10px;
}

.footer-column a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.2s ease;
}

.footer-column a:hover {
    opacity: 0.7;
}

/* ========== BACK TO TOP (RIGHT SIDE) ========== */
.footer-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.back-top {
    color: #ffffff !important;
    font-size: 0.9rem;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    font-weight: 700 !important;
    gap: 5px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
}

.back-top ion-icon {
    color: #ff8a4c !important;
    /* Orange Arrow */
    font-size: 1.5rem !important;
    --ionicon-stroke-width: 45px;
    margin-bottom: -5px !important;
}


.back-top:hover {
    opacity: 0.8;
    transform: translateY(-3px);
}

/* ========== BOTTOM WHITE STRIP ========== */
.footer-bottom {
    background: #ffffff;
    width: 100%;
    color: #333;
    text-align: center;
    padding: 12px 0;
    font-size: 0.85rem;
    border-top: 1px solid #e5e5e5;
}

.footer-bottom a {
    color: #ff8a4c;
    text-decoration: none;
}

/* =========================================================
   RESPONSIVE FOOTER
   ========================================================= */
@media (max-width: 900px) {
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding: 25px 20px;
    }

    .footer-top {
        align-self: center;
    }
}

@media (max-width: 500px) {
    .footer-logo img {
        height: 50px;
    }

    .footer-column a {
        font-size: 0.9rem;
    }

    .back-top {
        font-size: 0.85rem;
    }
}


/* Accessibility Button */
.accessibility-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    background: rgba(255, 136, 77, 1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 1.6rem;
    cursor: pointer;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    z-index: 999;
    border: none;
}


/* work section css */


.card {
    background: rgba(255, 136, 77, 0.1);
    border-radius: 14px;
    padding-top: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 50px 50px 0px 41px;
}

.header {
    display: flex;
    align-items: center;
    /* vertically center image + text */
    justify-content: center;
    /* center them as a group */
    gap: 10px;
    /* space between logo and title */
    margin-bottom: 20px;
}

.header img {
    height: 40px;
}

.title {
    color: rgba(191, 44, 55, 1);
    text-decoration: underline;
    font-size: 20px;
    font-weight: bold;
}

.sections {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(255, 136, 77, 0.8) 0%, rgba(191, 44, 55, 0.8) 100%);
    border-radius: 10px;
    padding: 20px 20px 0px 20px;
    color: white;
}

.section {
    width: 30%;
}

.section {
    font-size: 16px;
}

.section ul {
    padding: 0px 18px 18px 18px;
    font-family: Roboto;
    font-weight: 200;
    font-style: Bold;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;

}


/* ============================
   TESTIMONIAL SECTION
============================= */

.testimonial-section {
    margin: 60px auto;
    text-align: center;
}

.testimonial-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #2b160b;
    margin-bottom: 40px;
}

/* Wrapper = 3 cards */
.testimonial-wrapper {
    display: flex;
    justify-content: center;
    gap: 45px;
}

/* Individual Card */
.testimonial-card {
    width: 30%;
    border-radius: 18px;
    padding: 0px;

    /* Required trick for gradient border */
    border: 5px solid transparent;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(180deg, #FF884D 0%, #BF2C37 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}


/* User Icon */
.t-icon img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
}

/* Name */
.t-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Text */
.t-text {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.4;
    padding: 0px 19px 19px 19px;
}

/* Dots */
.testimonial-dots {
    margin-top: 25px;
    margin-bottom: 30px;
}

.testimonial-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
}

.testimonial-dots .dot.active {
    background: #ff6b35;
}

/* Responsive */
@media (max-width: 768px) {
    .testimonial-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .testimonial-card {
        width: 100%;
    }
}


/* ===========================
   BLOG EXPLORE SECTION
=========================== */

.blog-explore-section {
    background: rgba(255, 136, 77, 0.1);
    border-radius: 16px;
    padding: 32px !important;
    margin-top: 50px !important;
}

.blog-explore-section .container-inner {
    padding: 40px 20px;
}

.blog-explore-section.container-inner,
.timeline-box.container-inner,
.testimonial-section.container-inner {
    width: 97% !important;
    max-width: 1400px !important;
}

.blog-explore-section h2 {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #9c2e20;
    margin-bottom: 55px;
}

/* Each blog row */
.blog-row {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 70px;
    width: 100%;
}

.blog-row.reverse {
    flex-direction: row-reverse;
}

/* LEFT image block */
.blog-img-box {
    /* Use calc to account for the 30px gap: (100% - gap) * percentage */
    width: calc((100% - 30px) * 0.45);
    position: relative;
    /* Room for shifts if needed, but we'll use internal logic */
    padding-top: 30px;
}

/* BACK gradient box - Align TOP-LEFT for normal, TOP-RIGHT for reverse */
.blog-row:not(.reverse) .blog-img-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border-radius: 18px;
    background: linear-gradient(180deg, #FFB27B 0%, #D84C4F 100%);
    z-index: 1;
}

.blog-row.reverse .blog-img-box::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border-radius: 18px;
    background: linear-gradient(180deg, #FFB27B 0%, #D84C4F 100%);
    z-index: 1;
}

/* FRONT image - Shifted opposite to shadow */
.blog-img-box img {
    position: relative;
    z-index: 2;
    width: calc(100% - 30px);
    height: 240px;
    background: #ffffff;
    border-radius: 18px;
    display: block;
    object-fit: cover;
}

.blog-row:not(.reverse) .blog-img-box img {
    margin-left: 30px;
}

.blog-row.reverse .blog-img-box img {
    margin-right: 30px;
}

/* Right text block */
.blog-text {
    width: calc((100% - 30px) * 0.55);
}

.blog-text h3 {
    color: #b13122;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
}

.blog-text p {
    color: #444;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
    font-family: Roboto;
}

.blog-btn {
    display: inline-block;
    background: #ff884d;
    padding: 10px 22px;
    border-radius: 25px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s;
}

.blog-btn {
    display: block;
    margin: 15px auto 0 auto;
    /* centers the button */
    width: fit-content;
    /* keeps button tight */
}


.blog-btn:hover {
    opacity: 0.85;
}

/* RESPONSIVE */
@media (max-width: 900px) {

    .blog-explore-section.container-inner,
    .timeline-box.container-inner {
        margin-left: 20px !important;
        margin-right: 20px !important;
        width: auto !important;
    }

    .change-section .container-inner,
    .testimonial-section.container-inner {
        width: 90% !important;
        margin: 0 auto !important;
    }

    .blog-row,
    .blog-row.reverse {
        flex-direction: column;
        gap: 40px;
        /* Increase gap for stacked layout */
    }

    .blog-img-box {
        width: 100%;
        padding-top: 0;
        /* Remove top padding needed for desktop shift */
        max-width: 500px;
        /* Prevent it from getting too huge */
        margin: 0 auto;
        /* Center it */
    }

    .blog-text {
        width: 100%;
        text-align: center;
    }

    .blog-text h3 {
        text-align: center;
    }

    /* Reset Shadows for Mobile - Centered */
    .blog-row:not(.reverse) .blog-img-box::before,
    .blog-row.reverse .blog-img-box::before {
        width: 100%;
        height: 100%;
        top: 15px;
        left: 0;
        /* Center horizontally relative to parent? No, let's just create a bottom shadow */
        right: 0;
        bottom: -15px;
        /* Push down */
        top: auto;
    }

    /* Reset Images for Mobile */
    .blog-img-box img {
        width: 100%;
        height: auto;
        max-height: 300px;
    }

    .blog-row:not(.reverse) .blog-img-box img,
    .blog-row.reverse .blog-img-box img {
        margin-left: 0;
        margin-right: 0;
    }

    .blog-explore-section {
        border-radius: 16px;
        /* Restore rounded corners */
        margin: 30px auto;
        width: 92%;
        /* Side spacing */
        max-width: 500px;
        /* Limit width */
    }
}


/* =========================================================
   BASE STYLES (your original styles)
   ========================================================= */

.blog-listing-with-sidebar {
    display: flex;
    gap: 108px;
    max-width: 1440px;
    /* lock your design width */
    margin: 0 auto 60px;
    /* center on large screens */
}

.blog-listing-main {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 360px);
}

.content-with-sidebar-layout {
    display: flex;
    gap: 40px;
    max-width: 1486px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Sidebar Styling */
/* Sidebar Styling */
.content-hub-sidebar {
    width: 30%;
    flex: 0 0 30%;
    display: block !important;
    padding-left: 20px;
    /* Add some breathing room */
    box-sizing: border-box;
}

.content-hub-main,
.main-content-area {
    width: 70%;
    flex: 0 0 70%;
    min-width: 0;
}

/* Mobile Stack for Blog Layout */
@media (max-width: 991px) {

    .blog-listing-with-sidebar,
    .content-with-sidebar-layout {
        flex-direction: column;
        padding: 0 0px 40px;
    }

    .main-content-area,
    .content-hub-main,
    .blog-listing-main {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .blog-sidebar,
    .content-hub-sidebar {
        width: 100%;
        flex: 0 0 100%;
        padding-left: 0;
        margin-top: 40px;
    }
}

/* FORCE BLOG CARD BORDERS - USER REQUEST */
.blog-grid-view .views-row,
.blog-grid-item {
    border: 2px solid #BF2C37 !important;
    /* Red/Orange */
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
}


/* Sidebar Related Content Fallback */
/* Sidebar Widgets */
.sidebar-widget {
    background: transparent;
    padding: 20px 0;
    margin-bottom: 20px;
    text-align: center;
}

.sidebar-widget h3 {
    font-size: 29px;
    font-weight: 600;
    color: #111;
    margin-bottom: 12px;
    padding-bottom: 12px;
    font-family: "Montserrat";
    position: relative;
}

.sidebar-widget h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 88%;
    /* decrease or increase this */
    height: 2px;
    background: #261205;
    transform: translateX(-50%);
}

.widget-divider {
    width: 40px;
    height: 2px;
    background-color: #333;
    margin: 0 auto 20px;
    border: none;
}

/* Newsletter Specific */
.newsletter-description {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #111;
}

.custom-icons-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* SVG Icon Coloring and Sizing */
.social-icon-custom svg {
    width: 40px;
    height: 40px;
    transition: transform 0.2s ease;
}

.social-icon-custom:hover svg {
    transform: translateY(-2px);
}


.newsletter-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.newsletter-input {
    width: 75%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    /* Rounded input */
    font-size: 14px;
    outline: none;
    color: #666;
}

.newsletter-submit {
    background-color: #FF7F50;
    color: white;
    font-weight: 400;
    border: none;
    padding: 10px 24px;
    border-radius: 30px;
    /* Pill shape */
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    width: auto;
    /* Width auto to match pill shape design */
    min-width: 120px;
    font-family: "Roboto";
    margin-bottom: 10px;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.newsletter-submit:hover {
    background-color: #e56b3e;
}

/* Share Tag */
.share-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.share-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 2px solid #BF2C37;
    color: #261205;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 400;
    font-size: 20px;
    background: transparent;
    font-family: "Roboto", sans-serif;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    background: #ff884d0f;
}

.share-tags .tag-icon {
    width: 20px;
    /* matches your Figma: 20px */
    height: 20px;
    /* matches your Figma: ~20.44px */
    object-fit: contain;
    display: block;
}

/* Sidebar Related Content Fallback */
.sidebar-related-content {
    margin-top: 25px;
}

/* Content Hub Layout Logic */
/* Content Hub Layout Logic */
.content-with-sidebar-layout {
    display: block;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 26px 0px 26px 25px;
}

.main-content-area {
    flex: 1;
    /* Takes up remaining space */
    width: auto;
    max-width: 100%;
}

.blog-sidebar {
    width: 360px;
    /* Fixed width for perfect widget sizing */
    flex: 0 0 360px;
}

@media (max-width: 1024px) {
    .blog-sidebar {
        width: 300px;
        flex: 0 0 300px;
    }
}

@media (max-width: 900px) {
    .content-with-sidebar-layout {
        flex-direction: column;
        padding: 20px;
    }

    .main-content-area,
    .blog-sidebar {
        width: 100%;
        flex: 0 0 100%;
    }
}

.sidebar-related-content h3 {
    font-size: 26px;
    font-weight: 700;
    color: #111;
    margin-bottom: 24px;
    padding-bottom: 12px;
    display: block;
    text-transform: capitalize;
    text-align: center;
    position: relative;
    font-family: "Montserrat";
}

.sidebar-related-content h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 88%;
    /* decrease or increase this */
    height: 2px;
    background: #261205;
    transform: translateX(-50%);
}

.related-items-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sidebar Related Content Fallback */
.sidebar-related-content .related-item {
    display: flex;
    flex-direction: column;
    /* Vertical stack */
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    margin-bottom: 25px;
}

.sidebar-related-content .related-image {
    width: 100%;
    /* Full width */
    height: 180px;
    /* Fixed height for card feel */
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
    flex: none;
    /* Reset prior flex basis */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sidebar-related-content .related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.sidebar-related-content .related-item:hover .related-image img {
    transform: scale(1.05);
}

.sidebar-related-content .related-title {
    width: 100%;
    flex: none;
    /* Reset prior flex: 1 */
    margin-top: 4px;
}

.sidebar-related-content .related-title a {
    font-size: 18px;
    font-weight: 400;
    color: #111;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
    text-align: center;
}

.sidebar-related-content .related-title a:hover {
    color: #BF2C37;
}

/* Center Read More Button */
.blog-read-more-wrapper {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

.blog-read-more,
.views-field-view-node a {
    display: inline-block !important;
    /* Respected by text-align: center */
    margin: 20px auto !important;
    float: none !important;
}


.main-content-area {
    flex: 1;
    min-width: 0;
}

/* Podcast/Content Hub Layout */
.content-hub-layout {
    display: flex !important;
    max-width: 1486px !important;
    margin: 60px auto 40px !important;
    gap: 40px !important;
    padding: 0 80px !important;
    align-items: flex-start !important;
}



.content-hub-main {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    /* Full width now */
}


/* Sidebar debug style removed */



@media (max-width: 1200px) {
    .content-hub-layout {
        gap: 30px;
        padding: 0 20px;
    }
}

@media (max-width: 991px) {
    .content-hub-layout {
        flex-direction: column;
    }

    .content-hub-sidebar {
        width: 100%;
    }
}

/* Podcast Wrapper Adjustments */
.podcast-wrapper {
    width: 100%;
    max-width: 1486px !important;
    margin: 0 auto !important;
    position: relative;
    margin-bottom: 60px;
    box-sizing: border-box;
}


/* Title */
.podcast-title {
    text-align: center !important;
    margin: 40px 0 30px !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #bf2c37 !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: 2px !important;
    display: block !important;
    width: 100% !important;
    max-width: 932px !important;
    visibility: visible !important;

    opacity: 1 !important;
}

@media (max-width: 991px) {
    .podcast-title {
        text-align: center;
        padding-left: 0;
    }
}

/* Main Container */
/* Clean up old container class if still referenced */
.podcast-container {
    width: 100%;
}

/* LEFT CARD */
.podcast-card {
    width: 100% !important;
    max-width: 932px !important;
    height: 511px !important;

    border: 2px solid #BF2C37 !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    background: #FFF5F1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
    /* Align to left to match logo */
    display: flex;
    flex-direction: column;
}


/* White Image Box */
.podcast-img-box {
    width: 100%;
    height: 280px !important;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}




.podcast-img-box img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* If it's a placeholder icon, make it reasonable */
.podcast-img-box img[src*="placeholder"],
.podcast-img-box img[src*="icon"] {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    opacity: 0.3;
}

/* Peach Bottom */
.podcast-lower {
    padding: 0px 0px 46px 0px !important;
    height: 231px !important;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}




.podcast-lower h3 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    margin-top: 44px;
}

.podcast-divider-dotted {
    width: 80%;
    border-bottom: 2px dotted #BF2C37;
    margin: 10px 0;
}

.podcast-meta-placeholder {
    margin: 15px 0 25px;
    color: #777;
    font-size: 0.95rem;
    display: flex;
    gap: 15px;
    align-items: center;
}

.podcast-meta-placeholder .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.podcast-meta-placeholder iconify-icon {
    font-size: 1.2rem;
    color: #BF2C37;
}

/* Explore btn */
.explore-btn {
    background: #FF8149 !important;
    color: #fff !important;
    padding: 12px 50px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: capitalize !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    margin-top: 10px;
}

.explore-btn:hover {
    background: #e06b2e;
    transform: translateY(-2px);
}


.sidebar-block {
    margin-bottom: 40px;
    text-align: center;
}

.sidebar-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    font-family: 'Montserrat', sans-serif;
    color: #2b160b;
    position: relative;
    padding-bottom: 15px;
}

.sidebar-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: #bfbfbf;
}

/* Newsletter Input */
.newsletter-input {
    width: 50%;
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    font-size: 0.95rem;
    background: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.subscribe-btn {
    background: #ff8a4c;
    padding: 12px 40px;
    border-radius: 50px;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(255, 138, 76, 0.3);
    transition: all 0.3s ease;
}

.subscribe-btn:hover {
    background: #e06b2e;
    transform: translateY(-2px);
}

/* Social Icons */
.social-icons-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 25px 0 40px;
}

.social-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon.linkedin {
    background: #0077b5;
}

.social-icon.twitter {
    background: #1da1f2;
}

.social-icon.facebook {
    background: #1877f2;
}

/* Hashtag Pill */
.hashtag-pill {
    border: 2px solid #BF2C37;
    border-radius: 30px;
    padding: 8px 25px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    margin-top: 15px;
    text-decoration: none;
}

.hashtag-pill iconify-icon {
    font-size: 20px;
    color: #BF2C37;
}




/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

/* Podcast Inner Layout */
.podcast-inner-layout {
    display: flex;
    gap: 40px;
    justify-content: flex-start;
    width: 71%;
}


@media (min-width: 992px) {
    .podcast-inner-layout {
        /* Remove negative margin to stop horizontal scroll */
        margin-right: 0;
    }
}

/* Sidebar styles removed as per user request */


/* ========== Very Small Devices (360px and below) ========== */
@media (max-width: 360px) {

    .podcast-title {
        font-size: 16px;
    }

    .right-title {
        font-size: 18px;
        line-height: 26px;
    }
}


.js3-blog-section {
    padding: 40px 0;
    font-family: "Montserrat", sans-serif;
}

.js3-title {
    position: relative;
    text-align: center;
    color: #bf2c37;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
    top: 0;
    left: 12% !important;
    width: 50%;
}

/* MAIN WRAPPER */
.js3-blog-wrapper {
    width: 85%;
    margin: 0 auto;
    display: flex;
    gap: 60px;
}

/* LEFT GRID */
.js3-grid {
    width: 70%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

/* CARD */
.js3-card {
    border: 3px solid rgba(191, 44, 55, 1);
    border-radius: 12px;
    background: rgba(255, 136, 77, 0.1);
    text-align: center;
    height: 420px;
}

.js3-card-img {
    width: 100%;
    height: 233px;
    border-radius: 10px;
    object-fit: cover;
}

.js3-card-title {
    font-size: 17px;
    font-weight: 600;
    margin: 12px 0 5px;
}

.js3-card-desc {
    font-size: 12px;
    color: #444;
    margin-bottom: 8px;
}

.js3-meta {
    font-size: 10px;
    margin-bottom: 15px;
}

.read-more-btn {
    display: inline-block;
    background: #ff884d;
    color: #fff;
    padding: 7px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12px;
}

/* RIGHT SIDEBAR */
.js3-sidebar {
    width: 28%;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
    margin-top: -25px;
}

/* SIDE ITEM (Image top + title bottom) */
.side-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 25px;
}

.side-item img {
    width: 100%;
    max-width: 180px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.side-item p {
    font-size: 13px;
    line-height: 16px;
    width: 100%;
    margin: 0;
}

/* ============================================
   RESPONSIVE MEDIA QUERIES
   ============================================ */

/* TABLET (1024px and below) */
@media (max-width: 1024px) {

    .js3-blog-wrapper {
        gap: 40px;
    }

    .js3-grid {
        width: 65%;
        grid-template-columns: 1fr 1fr;
    }

    .js3-sidebar {
        width: 35%;
    }

    .side-item img {
        max-width: 160px;
    }
}

/* BIG MOBILE / SMALL TABLET (768px and below) */
@media (max-width: 768px) {

    .js3-blog-wrapper {
        flex-direction: column;
        width: 95%;
    }

    .js3-grid {
        width: 100%;
        grid-template-columns: 1fr;
        /* Single column */
    }

    .js3-sidebar {
        width: 100%;
    }

    .js3-title {
        left: 0 !important;
        width: 100%;
        font-size: 22px;
    }

    .side-item img {
        max-width: 220px;
    }
}

/* MOBILE (550px and below) */
@media (max-width: 550px) {

    .js3-card {
        height: auto;
        padding-bottom: 20px;
    }

    .js3-card-img {
        height: 200px;
    }

    .js3-title {
        font-size: 20px;
    }

    .side-item img {
        max-width: 180px;
    }
}

/* SMALL MOBILE (400px and below) */
@media (max-width: 400px) {

    .js3-title {
        font-size: 18px;
    }

    .read-more-btn {
        padding: 6px 14px;
        font-size: 11px;
    }
}


/* MAIN WRAPPER */
.js3-blog-container {
    width: 80%;
    margin: 0 auto;
    font-family: "Roboto Montserrat", sans-serif;
    padding: 20px 0 60px;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 13px;
    color: #333;
    margin-bottom: 15px;
}

.breadcrumb a {
    color: #bf2c37;
    text-decoration: none;
}

/* LAYOUT */
.js3-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* LEFT CONTENT WIDTH EXACT SAME */
.js3-left {
    width: 64%;
}

/* Title */
.blog-title {
    font-size: 26px;
    font-weight: 700;
    color: #d84a3d;
    text-align: center;
    margin-bottom: 10px;
}

/* Date row */
.meta-row {
    text-align: center;
    color: #666;
    font-size: 13px;
    margin-bottom: 25px;
}

/* Paragraph & Text */
.js3-left p,
.js3-left li {
    font-size: 15px;
    line-height: 23px;
    color: #333;
    margin-bottom: 12px;
}

/* Ordered list */
.js3-left ol {
    padding-left: 18px;
    margin-bottom: 10px;
}

/* Bullets */
.js3-left ul {
    padding-left: 18px;
    margin-top: 0;
}

/* Interaction section */
.interaction-row {
    justify-content: center;
    display: flex;
    gap: 35px;
    margin: 35px 0 25px;
}

.interaction-row a {
    text-decoration: none;
    color: #d84a3d;
    font-size: 17px;
}

/* Comments */
.comments-box {
    margin-top: 20px;
    margin-left: 50px;
}

.comment {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.comment p {
    margin: 3px 0 0;
    font-size: 14px;
}




/* RESPONSIVE */
@media(max-width: 900px) {
    .js3-layout {
        flex-direction: column;
    }

    .js3-left,
    .js3-right {
        width: 100%;
    }
}


/* ======== CONTACT SECTION ======== */

.contact-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.form-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #000;
}

.contact-form {
    width: 985px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: row;
    font-size: 15px;
    color: #000;
    align-items: center;
}

.form-group label {
    margin-bottom: 6px;
    width: 20%;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #ffcebb;
    background: #ffece6;
    border-radius: 10px;
    outline: none;
    font-size: 15px;
}

.contact-form select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23b35c48" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.contact-form textarea {
    resize: none;
}

/* ==== CAPTCHA ==== */
.captcha-box {
    display: flex;
    justify-content: center;
    margin-bottom: -70px;
    margin-top: -60px;
}

/* ===== SUBMIT BUTTON ===== */
.submit-btn {
    width: 120px;
    padding: 12px;
    background: #ff975e;
    border: none;
    border-radius: 25px;
    margin: auto;
    margin-top: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.submit-btn:hover {
    background: #ff7d36;
}

/* =====================================
   RESPONSIVE BREAKPOINTS
   ===================================== */

/* For screens below 1024px */
@media (max-width: 1024px) {
    .contact-form {
        width: 90%;
    }
}

/* For screens below 768px — stack labels on top */
@media (max-width: 768px) {

    .contact-form {
        width: 92%;
    }

    .form-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-group label {
        width: 100%;
        margin-bottom: 8px;
    }

    .captcha-box img {
        width: 100%;
        height: auto;
    }
}

/* For small mobile screens below 480px */
@media (max-width: 480px) {

    .form-title {
        font-size: 22px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 14px;
        padding: 12px;
    }

    .submit-btn {
        width: 100%;
    }
}

/* SECTION WRAPPER */
.map-contact-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

/* BOX CONTAINER */
.map-contact-box {
    width: 900px;
    background: linear-gradient(90deg, #ffb08a, #d6547d);
    padding: 30px;
    border-radius: 20px;
    display: flex;
    gap: 30px;
    align-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    margin-top: 50px;
    margin-bottom: 29px;
}

/* LEFT MAP AREA */
.map-area {
    flex: 1;
}

.map-placeholder {
    width: 100%;
    max-width: 617px;
    height: 293px;
    border-radius: 25px;
    overflow: hidden;
    background: #ffffff;
}

.map-placeholder img,
.map-placeholder iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

/* RIGHT LINKS AREA */
.contact-links {
    width: 270px;
    display: flex;
    flex-direction: column;
    margin-top: 20px !important;
}

/* BUTTON STYLE */
.link-btn {
    display: flex;
    align-items: center;
    /* Vertical Center */
    gap: 15px;
    padding: 12px 20px 12px 45px;
    /* Large left padding to visually center the group */
    background: #ffffff;
    color: #000;
    font-size: 16px;
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: 0.3s;
    font-weight: 400;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    /* Keep items clustered together */
    font-family: "Roboto";
}

/* Force Icon Width for Vertical Alignment */
.link-btn iconify-icon,
.link-btn i,
.link-btn svg,
.link-btn img {
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.link-btn:hover {
    transform: translateY(-3px);
}

/* ICON COLORS */
.email-icon {
    background: #0ea5e9;
}

.web-icon {
    background: #4f46e5;
}

.twitter-icon {
    background: #1da1f2;
}

.linkedin-icon {
    background: #0a66c2;
}

/* TEXT */
.thanks-text {
    margin-top: 15px !important;
    font-size: 20px !important;
    color: #fff;
    text-align: center;
}

/* ============================
      RESPONSIVE DESIGN
   ============================ */

/* Tablets (≤ 1024px) */
@media (max-width: 1024px) {

    .map-contact-box {
        width: 95%;
        gap: 20px;
    }

    .contact-links {
        width: 220px;
    }
}

/* Mobile – stack layout (≤ 768px) */
@media (max-width: 768px) {

    .map-contact-box {
        flex-direction: column;
        width: 94%;
        padding: 25px;
        text-align: center;
    }

    .map-placeholder {
        width: 100%;
        height: 260px;
    }

    .contact-links {
        width: 100%;
        align-items: center;
        margin-top: 20px;
    }

    .link-btn {
        width: 90%;
        justify-content: center;
    }
}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {

    .map-placeholder {
        height: 220px;
    }

    .link-btn {
        width: 100%;
        padding: 12px;
        font-size: 15px;
    }

    .thanks-text {
        font-size: 14px;
    }
}


/* SECTION WRAPPER */
.work-gallery {
    width: 92%;
    text-align: center;
    margin: 50px auto;
}

.gallery-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
}

/* GRID */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    justify-items: center;
}

/* CARD */
.gallery-item {
    width: 190px;
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    padding-bottom: 0;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.gallery-item:hover {
    transform: translateY(-4px);
}

/* IMAGE */
.gallery-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}

/* BOTTOM BAR */
.gallery-item p {
    background: #ffb79d;
    color: #c23803;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    border-radius: 0 0 15px 15px;
    margin: 8px -10px 0 -10px;
    /* pulls width edge-to-edge */
}


.info-link {
    text-decoration: none;
    display: inline-block;
}

.info-card {
    width: 230px;
    background: #f8d7ce;
    border-radius: 18px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    /* Make it feel clickable */
}

.info-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}


/* Bottom Title Section */
.info-title {
    background: #f8d7ce;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: #c44a42;
    /* Red text like sample */
}


/* MODAL OVERLAY */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
}

/* MODAL BOX */
.modal-content {
    background: white;
    border-radius: 15px;
    padding-bottom: 15px;
    width: 350px;
    text-align: center;
    position: relative;
    animation: popupFade 0.3s ease;
}

@keyframes popupFade {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-content img {
    width: 100%;
    height: 280px;
    border-radius: 15px 15px 0 0;
    object-fit: cover;
}

.modal-info {
    background: #ff9763;
    color: #fff;
    padding: 10px 0;
    border-radius: 0 0 15px 15px;
    margin: 0;
}

/* CLOSE BUTTON */
.close-btn {
    position: absolute;
    top: 25px;
    right: 50px;
    font-size: 45px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

/* Modal background */
.image-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    padding: 20px;
}

/* Modal image */
.image-modal img {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 12px;
}

/* Close button */
.close-btn {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}

/* Navigation buttons */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 45px;
    color: white;
    cursor: pointer;
    padding: 10px 330px;
    border-radius: 50%;
    user-select: none;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.contact-section {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f9f9f9;
}

.contact-form-wrapper {
    padding: 50px;
    border-radius: 20px;
}

.form-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #000;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.contact-form,
.contact-message-contact-page-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.contact-message-contact-page-form .form-item,
.contact-message-contact-page-form .field,
.contact-message-contact-page-form .js-form-item,
.contact-message-contact-page-form .form-type-textfield,
.contact-message-contact-page-form .form-type-email,
.contact-message-contact-page-form .form-type-select,
.contact-message-contact-page-form .form-type-textarea {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    gap: 30px !important;
}

/* For textarea, align label at the top */
.contact-message-contact-page-form .form-type-textarea,
.contact-message-contact-page-form .field--type-string-long {
    align-items: flex-start !important;
}

.contact-message-contact-page-form label,
.contact-message-contact-page-form .field__label,
.contact-message-contact-page-form .form-item__label {
    width: 200px !important;
    flex: 0 0 200px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
    font-family: 'Montserrat', sans-serif !important;
    margin-bottom: 0 !important;
}

.contact-message-contact-page-form .field__item,
.contact-message-contact-page-form .form-item__content,
.contact-message-contact-page-form .form-group {
    flex: 1 !important;
    display: flex !important;
    width: 100% !important;
}

.contact-message-contact-page-form input:not([type="submit"]),
.contact-message-contact-page-form select,
.contact-message-contact-page-form textarea,
.contact-message-contact-page-form .form-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* Allow flex to shrink if needed */
    padding: 18px 22px !important;
    border: 1.5px solid #ffcebb !important;
    background: #ffece6 !important;
    border-radius: 12px !important;
    outline: none !important;
    font-size: 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    margin: 0 !important;
}

.contact-message-contact-page-form textarea {
    resize: none !important;
    min-height: 180px !important;
}

.contact-message-contact-page-form .form-actions {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.submit-btn,
.contact-message-contact-page-form .button--primary {
    width: 20% !important;
    min-width: 150px !important;
    padding: 18px !important;
    background: rgba(255, 136, 77, 1);
    border: none !important;
    border-radius: 40px !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    flex: none !important;
    /* Extremely important to prevent stretching */
}

.submit-btn:hover,
.contact-message-contact-page-form .button--primary:hover {
    background: #ff7d36 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 151, 94, 0.4) !important;
}

/* Hide Unwanted Elements */
.contact-message-contact-page-form .description,
.contact-message-contact-page-form #edit-preview,
.contact-message-contact-page-form .form-type-checkbox {
    display: none !important;
}

/* =====================================
   RESPONSIVE BREAKPOINTS
   ===================================== */

/* For screens below 1024px */
@media (max-width: 1024px) {

    .contact-form,
    .contact-message-contact-page-form,
    .contact-message-feedback-form {
        width: 90%;
    }
}

/* For screens below 768px — stack labels on top */
@media (max-width: 768px) {

    .contact-form,
    .contact-message-contact-page-form,
    .contact-message-feedback-form {
        width: 92%;
    }

    .form-group,
    .contact-message-contact-page-form .form-item,
    .contact-message-feedback-form .form-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-group label,
    .contact-message-contact-page-form label,
    .contact-message-feedback-form label {
        width: 100%;
        margin-bottom: 8px;
        flex: 0 0 100%;
    }
}

/* For small mobile screens below 480px */
@media (max-width: 480px) {

    .form-title {
        font-size: 22px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .contact-message-contact-page-form input,
    .contact-message-contact-page-form select,
    .contact-message-contact-page-form textarea {
        font-size: 14px;
        padding: 12px;
    }

    .submit-btn,
    .contact-message-contact-page-form .button--primary {
        width: 100% !important;
    }
}

/* Caption */
.caption {
    margin-top: 12px;
    color: #fff;
    font-size: 20px;
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .gallery-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* MAIN BANNER */
.profile-banner {
    position: relative;
    width: 100%;

    /* reduce minimum height */
    min-height: 220px;
    /* was 280px */

    background: linear-gradient(135deg, #ff9966 0%, #cc5566 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;

    /* reduce vertical padding */
    padding: 0px 50px 21px 16px;
    /* was 40px 50px 40px 220px */

    box-sizing: border-box;
    margin: 60px auto 90px;
}


/* LEFT SECTION */
.profile-left {
    flex: 1 1 45%;
    display: flex;
    justify-content: center;
}

.photo-frame {
    max-width: 420px;
    height: auto;
    background: #f5f5f5;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-frame img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 15px;
}

/* --- Drop the whole photo-frame lower inside the left column --- */
/* Put this after your existing .photo-frame rules so it overrides prior margins/padding */

:root {
    --photo-drop: 100px;
    /* increase to drop more, decrease to lift up */
}

/* make left column a positioned container */
.profile-left {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: -90px;
    /* keep content starting at top, frame will be moved by transform */
}

/* shift the whole frame downward (affects the whole white box + its image) */
.photo-frame {
    /* keep existing visual styles, only change transform + z-index so it overlaps nicely */
    transform: translateY(var(--photo-drop));
    /* if you previously used margin-top, remove or override it */
    margin-top: 0 !important;
    /* ensure it sits above background but below anything that should float above it */
    z-index: 3;
    transition: transform 180ms ease;
    /* smooth visual */
}

/* smaller screens: reduce drop amount so it doesn't push too far */
@media (max-width: 768px) {
    :root {
        --photo-drop: 18px;
    }
}

@media (max-width: 480px) {
    :root {
        --photo-drop: 10px;
    }
}


/* RIGHT SECTION */
.profile-right {
    flex: 1 1 45%;
    color: #fff;
    text-align: center;
    padding-left: 20px;
}

.name {
    font-size: 40px;
    margin: 0;
    font-weight: 800;
    font-family: 'Montserrat';
    transform: translateY(24px);
}

.about-title {
    font-size: 20px;
    margin: 10px 0 25px;
    font-family: 'Montserrat';
}

.profile-right>div:nth-child(3) {
    transform: translateY(9px);
}

/* LOGO GRID */
.logo-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.logo-card {
    text-align: center;
}

/* White rounded box */
.logo-img {
    width: 110px;
    height: 100px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto 12px;
    transform: translateY(7px);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.logo-img img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}

/* Text below */
.logo-card p {
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin: 0;
}


/* ===========================
   RESPONSIVE BREAKPOINTS
=========================== */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .name {
        font-size: 34px;
    }

    .about-title {
        font-size: 18px;
    }

    .logo-grid {
        gap: 30px;
    }
}

/* Mobile Landscape / Small Tablets (≤ 768px) */
@media (max-width: 768px) {
    .profile-banner {
        padding: 25px;
        text-align: center;
    }

    .profile-left,
    .profile-right {
        flex: 1 1 100%;
        padding-left: 0;
    }

    .photo-frame {
        max-width: 350px;
    }

    .name {
        font-size: 32px;
    }
}

/* Mobile Portrait (≤ 480px) */
@media (max-width: 480px) {
    .profile-banner {
        padding: 20px;
    }

    .name {
        font-size: 26px;
    }

    .about-title {
        font-size: 16px;
    }

    .logo-img {
        width: 90px;
        height: 90px;
    }

    .logo-card p {
        font-size: 14px;
    }
}


/* MAIN CONTAINER */
/* Legacy change-section removed to fix artifacts */


/* HEADER */
.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    /* centers logo + text together */
    gap: 15px;
    /* spacing between logo and text */
    text-align: center;
    margin-bottom: 0px;
    width: 100%;
}

.change-logo {
    width: 170px;
    /* control size of logo */
    height: auto;
    display: block;
}

.section-header h2 {
    font-size: 35px;
    font-weight: 700;
    font-family: "Montserrat";
}

/* LIST */
.options-list {
    margin-top: 20px;
    width: 100%;
    max-width: 1200px;
    /* increase containe */
}

.option-card {
    background: #fff;
    padding: 18px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
    border: 2px solid #fbd1c5;
    transition: 0.2s ease;
    position: relative;
    width: 90%;
    max-width: 1069px;
    margin: 10px auto;
}

.option-card:hover {
    transform: translateY(-2px);
}

.left-icon {
    font-size: 22px;
    margin-right: 15px;
}

.option-content h3 {
    color: #cf4b4f;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.option-content p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #666;
}

.open-icon {
    position: absolute;
    right: 18px;
    font-size: 18px;
    color: #d95f63;
}

/* MODAL OVERLAY */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* MODAL BOX */
.modal-box {
    width: 420px;
    background: #fff7f4;
    padding: 25px 30px;
    border-radius: 14px;
    position: relative;
    text-align: left;
}

/* CLOSE BUTTON */
.close-modal {
    position: absolute;
    right: 14px;
    top: 10px;
    font-size: 22px;
    cursor: pointer;
}

/* ARROWS */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    cursor: pointer;
    color: #ffffff;
}

.left-arrow {
    left: -40px;
}

.right-arrow {
    right: -40px;
}

.modal-box h3 {
    margin-top: 10px;
    font-size: 20px;
    color: #cf4b4f;
}

.modal-box p {
    font-size: 14px;
    line-height: 20px;
    margin-top: 8px;
}

.hashtag {
    text-align: center;
    font-weight: 700;
    margin-top: 18px;
    font-size: 18px;
    color: #d75458;
}

/* Modal Footer Styles */
#modal-footer {
    margin-top: 20px;
    text-align: center;
}

#modal-footer.modal-image-footer {
    display: flex;
    flex-wrap: nowrap;
    /* Force single row */
    justify-content: center;
    gap: 20px;
    padding: 10px;
    overflow-x: auto;
    /* Allow horizontal scroll if really tight */
    align-items: flex-start;
    /* Align to top */
}

/* Card item styling */
.footer-card {
    display: flex;
    flex-direction: column;
    width: 250px;
    /* Fixed width for cards */
    flex: 0 0 auto;
    /* Prevent shrinking too much */
    text-align: left;
}

/* Image inside card */
.footer-card img,
.footer-img img {
    width: 100%;
    /* Uniform height */
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.footer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #2b160b;
    line-height: 1.2;
    margin-top: 0px;
}

.footer-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #4a4a4a;
    margin: 0;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* ----------- Tablets (max-width: 992px) ----------- */
@media (max-width: 992px) {

    .section-header h2 {
        font-size: 42px;
    }

    .change-logo {
        width: 130px;
    }

    .option-card {
        width: 95%;
        padding: 16px;
    }
}

/* ----------- Small Tablets / Large Phones (max-width: 768px) ----------- */
@media (max-width: 768px) {

    .change-section {
        width: 95%;
        padding: 20px;
    }

    .section-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .section-header h2 {
        font-size: 34px;
        line-height: 1.2;
    }

    .change-logo {
        width: 120px;
    }

    .option-card {
        flex-direction: row;
        padding: 15px;
    }

    .left-icon {
        font-size: 20px;
        margin-right: 12px;
    }

    .open-icon {
        right: 14px;
    }

    /* Modal */
    .modal-box {
        width: 85%;
        padding: 20px;
    }
}

/* Tablet / Mobile Fix for About Change Section */
@media (max-width: 900px) {
    .option-card {
        margin-bottom: 15px;
        /* Spacing between items */
    }
}

/* ----------- Phones (max-width: 576px) ----------- */
@media (max-width: 576px) {

    .section-header h2 {
        font-size: 28px;
    }

    .change-logo {
        width: 100px;
    }

    .option-card {
        padding: 14px;
        border-radius: 10px;
    }

    .option-content h3 {
        font-size: 16px;
    }

    .option-content p {
        font-size: 13px;
    }

    .open-icon {
        font-size: 16px;
    }

    /* Modal text */
    .modal-box h3 {
        font-size: 18px;
    }

    .modal-box p {
        font-size: 13px;
        line-height: 18px;
    }

    /* Arrows hidden on mobile */
    .left-arrow,
    .right-arrow {
        display: none;
    }
}

/* ----------- Very Small Phones (max-width: 400px) ----------- */
@media (max-width: 400px) {

    .section-header h2 {
        font-size: 22px;
    }

    .change-logo {
        width: 85px;
    }

    .option-content h3 {
        font-size: 15px;
    }

    .option-content p {
        font-size: 12px;
    }
}

/* Section container */
.stats-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 150px;
    padding: 10px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    flex-wrap: wrap;
}

/* Each item */
.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Gradient circle */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFB07A 0%, #D94D5C 100%);
    position: relative;
    margin-bottom: 12px;
}

/* Dash and Plus */
.circle .dash {
    position: absolute;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    top: 58%;
    transform: translate(-50%, -50%);
    font-family: "Montserrat";
}

.circle .plus {
    position: absolute;
    font-size: 35px;
    font-weight: 700;
    color: #fff;
    top: 45%;
    transform: translate(50%, -50%);
}

/* Label text */
.stat-box p {
    font-size: 15px;
    color: #4a3e3d;
    font-weight: 500;
}

/* RESPONSIVE (Stats Section) */
@media (max-width: 900px) {
    .stats-section {
        gap: 60px;
    }

    .circle {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 600px) {
    .stats-section {
        gap: 35px;
    }

    .circle {
        width: 80px;
        height: 80px;
    }

    .stat-box p {
        font-size: 14px;
    }
}


/* container */
/* container */
.timeline-box {
    width: 100%;
    max-width: 1400px;
    margin: 28px auto;
    /* max-width removed */
    /* auto margin removed */
    padding: 32px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16px;
    border: 3px solid #d74e47;
    font-family: "Inter", system-ui, Arial, sans-serif;
}

/* heading */
.timeline-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 26px;
    padding-bottom: 8px;
    border-bottom: 2px dashed #000;
}

/* inner */
.timeline-inner {
    position: relative;
    padding: 80px 16px;
}

/* horizontal rail */
.rail {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 8px;
    background: #d74e47;
    border-radius: 8px;
    transform: translateY(-50%);
    z-index: 1;
}

/* row */
.timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 3;
    padding: 0 10px;
}

/* timeline item */
.timeline-item {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* number box */
.num-box {
    width: 48px;
    height: 32px;
    background: #ff8752;
    color: #fff;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
}

/* TOP title */
.timeline-item.top .title {
    margin-bottom: 145px;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    text-align: center;
    line-height: 1.25;
    width: 170px;
    text-decoration: none;
}

/* TOP connector */
.timeline-item.top .connector {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 60px;
    background: #d74e47;
    z-index: 2;
}

/* BOTTOM title */
.timeline-item.bottom .title {
    margin-top: 145px;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    text-align: center;
    line-height: 1.25;
    width: 170px;
    text-decoration: none;
}

/* BOTTOM connector */
.timeline-item.bottom .connector {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 60px;
    background: #d74e47;
    z-index: 2;
}

/* -------------------------
   RESPONSIVE FIXES
--------------------------*/

/* Tablet & Mobile - Vertical Timeline */
@media (max-width: 900px) {

    .timeline-box {
        padding: 40px 20px;
        margin: 28px 20px;
        width: auto;
    }

    .timeline-inner {
        padding: 20px 0;
        overflow: visible;
    }

    .timeline-row {
        flex-direction: column;
        gap: 0;
        padding: 0;
        width: auto;
    }

    /* Vertical Rail */
    .rail {
        display: block;
        width: 8px;
        height: 100%;
        left: 50%;
        top: 0;
        right: auto;
        transform: translateX(-50%);
        border-radius: 4px;
    }

    /* Grid Layout for Snake Pattern */
    .timeline-item {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 50px 1fr;
        align-items: center;
        margin-bottom: 40px;
        position: relative;
    }

    /* Number centered on rail */
    .num-box {
        position: relative;
        top: auto;
        transform: none;
        margin: 0 auto;
        grid-column: 2;
        z-index: 5;
    }

    /* Hide original vertical connectors */
    .timeline-item .connector {
        display: none !important;
    }

    /* New Horizontal Connectors via Pseudo-elements */
    .timeline-item.top .title::after,
    .timeline-item.bottom .title::before {
        content: '';
        position: absolute;
        top: 50%;
        height: 5px;
        width: 30px;
        /* Connects title to rail */
        background: #d74e47;
        transform: translateY(-50%);
        z-index: 2;
    }

    /* LEFT SIDE ITEMS (Top) */
    .timeline-item.top .title {
        grid-column: 1;
        text-align: right;
        margin: 0;
        padding-right: 25px;
        /* Increased from 10px */
        width: auto;
        font-size: 15px;
        position: relative;
    }

    .timeline-item.top .title::after {
        right: -30px;
        /* Extend to rail */
        width: 40px;
    }

    /* RIGHT SIDE ITEMS (Bottom) */
    .timeline-item.bottom .title {
        grid-column: 3;
        text-align: left;
        margin: 0;
        padding-left: 25px;
        /* Increased from 10px */
        width: auto;
        font-size: 15px;
        position: relative;
    }

    .timeline-item.bottom .title::before {
        left: -30px;
        /* Extend to rail */
        width: 40px;
    }
}

/* Mobile */
/* Mobile - Timeline handled by <900px rule above */
@media (max-width: 600px) {
    /* Additional mobile tweaks if needed */
}

/* Extra small */
@media (max-width: 400px) {

    .timeline-heading {
        font-size: 22px;
    }

    .timeline-item.top .title,
    .timeline-item.bottom .title {
        font-size: 14px;
    }

    .num-box {
        width: 38px;
        height: 26px;
        font-size: 14px;
    }
}


.profile-tabs {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    padding: 0;
    /* Responsive side padding handled by container-inner */
    font-family: "Inter", Arial, sans-serif;
}

/* TAB BUTTONS */
.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 136, 77, 0.8);
    padding: 14px;
    border-radius: 14px 14px 0 0;
    border: 1px solid #ccc;
}

.tab-btn {
    padding: 10px 22px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #f3f3f3;
    cursor: pointer;
    font-weight: 600;
    transition: 0.25s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    /* Prevent text breaking */
}

.tab-btn.active {
    background: rgba(191, 44, 55, 0.8);
    color: #fff;
}

/* CONTENT BOX */
.content-box {
    background: #fff5f1;
    border: 1px solid #ff8752;
    padding: 22px;
    border-radius: 0 0 14px 14px;
    margin-top: -2px;
}

.content-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

/* ICON */
.icon {
    margin-right: 6px;
}

/* TAB PANES */
.tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tab-pane.active {
    display: block;
}

/* LIST */
.content-box ul {
    padding-left: 18px;
    margin: -12px 0 16px 10px;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ================================
   FULL RESPONSIVE BEHAVIOR
   ================================ */

/* Medium screens (tablets) */
@media (max-width: 900px) {
    .tab-buttons {
        justify-content: center;
    }

    .tab-btn {
        flex: 1 1 calc(50% - 10px);
        text-align: center;
    }
}

/* Smaller tablets */
@media (max-width: 650px) {
    .tab-btn {
        flex: 1 1 100%;
        text-align: center;
        font-size: 15px;
        padding: 10px 15px;
    }
}

/* Mobile phones */
@media (max-width: 450px) {
    .content-box {
        padding: 16px;
    }

    .content-box h3 {
        font-size: 16px;
    }

    ul li {
        font-size: 14px;
    }

    .tab-buttons {
        padding: 10px;
    }
}

/* HERO AREA */
.about-hero {
    position: relative;
    height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.about-hero .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DARK OVERLAY TO MAKE TEXT VISIBLE */
.about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* CONTENT ON HERO (TITLE + BUTTON) */
.hero-overlay-content {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 5;
    /* IMPORTANT FIX */
}

.hero-tab-title {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
    min-width: 260px;
    text-align: center;
}

/* ===============================
   FIXED & VISIBLE HERO ARROWS
================================== */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-75%) !important;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.25s ease;
    z-index: 8;
    /* MUST BE ABOVE IMAGE + OVERLAY */
}

/* left arrow */
.hero-arrow.left {
    left: 25px;
}

/* right arrow */
.hero-arrow.right {
    right: 25px;
}

/* arrow icons */
.hero-arrow i {
    font-size: 100px !important;
    color: #fff;
}


/* === EXPLORE NOW BUTTON === */



/* RESPONSIVE */
@media (max-width: 700px) {
    .hero-tab-title {
        font-size: 22px;
        min-width: 170px;
    }

    .hero-arrow {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}

/* Hero Arrows - Base Styles */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: white;
    z-index: 10;
    transition: opacity 0.3s;
}

.hero-arrow:hover {
    opacity: 0.8;
}

.hero-arrow.left {
    left: 20px;
}

.hero-arrow.right {
    right: 20px;
}

/* ============================================
   CONTENT HUB HERO (Specific Overrides)
   ============================================ */

.content-hub-hero {
    height: 350px !important;
}

.content-hub-hero .hero-content {
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Breadcrumb: Move it up slightly to separate from title */
.content-hub-hero .hero-breadcrumb {
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 25px;
    /* Increased gap */
    letter-spacing: 0.5px;
    text-transform: capitalize;
    line-height: 1.2;
}

.content-hub-hero .hero-breadcrumb strong {
    font-weight: 700;
}

/* Title: Centered and bold */
.content-hub-hero .hero-title-underlined {
    font-size: 3rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
    font-family: 'Montserrat', sans-serif;
}

/* Description: Below title */
.content-hub-hero .hero-description {
    font-size: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.5;
    color: #fff;
    font-weight: 400;
}

/* ============================================
   BLOG SECTION (Listing + Detail)
   ============================================ */
.container {
    margin: 0 auto;
}

/* Layout Columns */
.blog-layout-container {
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    /* Force side-by-side */
    flex-wrap: nowrap;
    /* Prevent unrequested wrapping */
    gap: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    align-items: flex-start;
}

.blog-main-content {
    flex: 1;
    min-width: 0;
}

.blog-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
}

@media (max-width: 991px) {
    .blog-layout-container {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .blog-sidebar {
        width: 100%;
        margin-top: 40px;
        position: static;
    }
}

/* Blog Listing Grid */
.blog-listing-main-title {
    color: #BF2C37;
    font-size: 2.2rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    margin: 40px auto 30px;
    font-family: 'Montserrat', sans-serif;
    display: block;
}

.blog-grid-view,
.view-id-blog_listing .view-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 446px));
    gap: 40px;
    justify-content: flex-start !important;
}



@media (max-width: 800px) {

    .blog-grid-view,
    .view-id-blog_listing .view-content {
        grid-template-columns: 1fr;
    }
}

/* Catch-all for the "Plain List" look in user screenshot */
.view-id-blog_listing ul,
.view-id-blog_listing .item-list ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    list-style: none;
    padding: 0;
}

.main-content-area .views-row,
.blog-grid-view .views-row,
.blog-main-content .views-row,
.blog-listing-wrapper .views-row,
.view-id-blog_listing .views-row {
    background-color: rgba(255, 136, 77, 0.1) !important;
    border: 1.5px solid #BF2C37 !important;
    border-radius: 20px !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    /* Fixed: Removed 20px padding to eliminate bottom gap */
    display: flex !important;
    overflow: visible !important;
    position: relative;
}


.blog-main-content .views-row:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
}

/* Featured Image - TOP */
.main-content-area .blog-img-wrapper,
.blog-grid-view .blog-img-wrapper,
.view-id-blog_listing .blog-img-wrapper,
.main-content-area .views-row {
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    position: relative;
    z-index: 10;
}

.main-content-area .views-row img,
.main-content-area .blog-img-wrapper img,
.blog-grid-view img,
.view-id-blog_listing .views-row img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    display: block !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top-left-radius: 19px !important;
    border-top-right-radius: 19px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
    margin: 0 !important;
}

/* Title Styling */
.blog-info h3,
.blog-info h3 a {
    color: #BF2C37 !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    margin: 0px 0px 1px !important;
    text-decoration: none !important;
    display: block !important;
    line-height: 1.2 !important;
    text-align: center !important;
    font-family: 'Montserrat', sans-serif;
}

/* Description Styling */
.blog-body-teaser {
    margin: 10px 10px 10px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #261205 !important;
    text-align: center !important;
    flex-grow: 1;
}

/* Meta Data Styling */
.blog-meta-listing {
    font-size: 0.85rem !important;
    color: #777 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
}

.meta-separator {
    color: #ccc;
}

/* Read More Button Styling */
.blog-read-more {
    display: inline-block !important;
    background: #ff8a4c !important;
    color: #fff !important;
    padding: 12px 45px !important;
    border-radius: 50px !important;
    margin: 10px auto 5px !important;
    font-weight: 800 !important;
    text-transform: capitalize !important;
    font-size: 1.1rem !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

.blog-read-more:hover {
    background: #e06b2e !important;
    transform: translateY(-2px) !important;
}

/* Sidebar Styling - Matches Design */
/* Sidebar Styling - Matches Design */
.blog-sidebar .sidebar-widget,
.content-hub-sidebar .block {
    margin-bottom: 50px;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    margin-top: 50px;
}

.blog-sidebar h2,
.content-hub-sidebar h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #2b160b;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.blog-sidebar h2::before,
.blog-sidebar h2::after,
.content-hub-sidebar h2::before,
.content-hub-sidebar h2::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid #2b160b;
}

.blog-sidebar h2::before,
.content-hub-sidebar h2::before {
    margin-right: 15px;
}

.blog-sidebar h2::after,
.content-hub-sidebar h2::after {
    margin-left: 15px;
}


/* Removal of previous specific overrides since they are now default */



/* Newsletter Styles */
.sidebar-newsletter-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.sidebar-widget h2,
.content-hub-sidebar h2 {
    text-align: center;
    line-height: 1.3;
}

.newsletter-input {
    width: 75% !important;
    max-width: 100% !important;
    padding: 12px 20px;
    border: 1px solid #707070;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #666;
    background: #fff;
    text-align: center;
}

.subscribe-btn {
    background: #FF8a4c !important;
    color: #fff !important;
    padding: 10px 50px !important;
    border-radius: 50px !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(255, 138, 76, 0.45) !important;
    transition: all 0.3s ease !important;
}


/* Social Icons Row */
.social-icons-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.social-icon {
    font-size: 1.8rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff !important;
    transition: opacity 0.3s ease;
}

.social-icon.linkedin {
    background: #0077B5;
}

.social-icon.twitter {
    background: #1DA1F2;
}

.social-icon.facebook {
    background: #3B5998;
}

.social-icon:hover {
    opacity: 0.9;
    transform: scale(1.05);
}


/* Hashtag Pill */
.hashtag-pill {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    gap: 8px;
    padding: 8px 25px;
    background: #FFF5F1;
    border: 1.5px solid #BF2C37;
    border-radius: 50px;
    color: #2b160b;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
}


.hashtag-pill:hover {
    background: #BF2C37;
    color: #fff;
}

.hashtag-pill iconify-icon {
    font-size: 1.1rem;
}


.related-content-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 35px;
    align-items: center;
    text-align: center;
}

.related-content-img {
    width: 100% !important;
    max-width: 240px !important;
    height: 140px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.related-content-title a {
    font-size: 1rem !important;
    font-weight: 650 !important;
    color: #2b160b !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
}


/* ============================================
   BLOG DETAIL PAGE (Article) - DESIGN MATCH
   ============================================ */

.blog-header-detail {
    width: 100%;
}

.blog-hero-banner {
    background: linear-gradient(135deg, #ffab91 0%, #ff8a65 100%) !important;
    width: 100%;
    height: 350px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Align container to bottom */
    position: relative;
    padding: 0;
    overflow: visible;
}

.blog-hero-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Push breadcrumbs up, image down */
    align-items: center;
    width: 100%;
    padding-top: 30px;
    /* Space for breadcrumbs at top */
}

.blog-breadcrumbs-detail {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 0;
    /* Managed by flex spacing */
    letter-spacing: 0.5px;
    opacity: 0.95;
    text-align: center;
    font-weight: 500;
}

.hero-image-wrapper-detail {
    display: inline-block;
    max-width: 900px;
    width: 90%;
}

.hero-image-wrapper-detail img {
    width: auto !important;
    max-width: 90% !important;
    height: 280px !important;
    display: block;
    object-fit: contain;
    margin: 0 auto;
}

.article-title-section {
    text-align: center;
    max-width: 1000px;
    margin: 30px auto 40px;
    padding: 0 20px;
}

.article-title-section h1 {
    background: linear-gradient(180deg, #FF884D 23.5%, #BF2C37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    font-size: 52px !important;
    margin-bottom: 10px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    font-family: 'Montserrat', sans-serif;
}

.article-title-section .blog-meta {
    justify-content: center;
    color: #333;
    font-weight: 500;
    font-size: 1.25rem;
    display: flex;
    gap: 15px;
    align-items: center;
}

.meta-separator {
    color: #333;
    font-weight: 400;
}

.blog-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-title-section .blog-meta iconify-icon {
    color: #333;
    /* Darker icons in meta as per design */
    font-size: 1.4rem;
}


/* Social Interaction Bar - Matches Design */
.blog-social-interaction {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin: 40px 0;
    padding: 20px 0;
    position: relative;
}

.interaction-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FF8149;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.interaction-item:hover {
    opacity: 0.8;
}

.interaction-item iconify-icon {
    font-size: 2rem;
}


/* Comments Section */
.comments-container {
    margin-top: 50px;
}

.comment-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.comment-avatar {
    width: 50px;
    height: 50px;
    overflow: hidden;
    flex-shrink: 0;
}

.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-content {
    background: #fff;
    padding: 0;
    flex: 1;
}

.comment-author {
    font-weight: 800;
    color: #333;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.comment-text {
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
}

/* Clean up blog layout for detail */
.node--type-article .blog-layout-container {
    padding: 0 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}




.node--type-article .blog-main-content {
    flex: 1;
    /* Allow shrinking to prevent scrollbar */
    max-width: 100%;
    min-width: 0;
    /* Important for flex child to be able to shrink below content width */
}



.node--type-article .blog-body {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 60px;
    text-align: justify;
}


.node--type-article .blog-body p {
    margin-bottom: 30px;
}

.node--type-article .blog-body ol,
.node--type-article .blog-body ul {
    margin-bottom: 30px;
    padding-left: 20px;
}

.node--type-article .blog-body li {
    margin-bottom: 15px;
    line-height: 1.5;
}

.node--type-article .blog-body a {
    color: #FF8149;
    text-decoration: underline;
}


@media (max-width: 991px) {
    .article-title-section h1 {
        font-size: 2.5rem !important;
    }

    .blog-hero-banner {
        min-height: 400px;
    }
}

/* PODCAST SECTION */
.podcast-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 60px 0;
}

/* Inner layout = same grid width as About + Blog */
.podcast-inner-layout {
    width: 1160px;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

/* Main Podcast Card */
.podcast-card {
    width: 100%;
    /* takes full 1160px */
    height: 408px !important;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 3px solid rgba(191, 44, 55, 1);
    box-shadow: 0 12px 30px rgba(191, 44, 55, 0.15);
}

/* IMAGE PART */
.podcast-img-box {
    width: 100%;
    height: 190px !important;
    overflow: hidden;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.podcast-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* LOWER CONTENT */
.podcast-lower {
    width: 100%;
    height: 171px !important;
    padding: 10px 30px;
    text-align: center;
    background: rgba(255, 136, 77, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Title */
.podcast-lower h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2b160b;
    margin-bottom: 4px;
    font-family: "Montserrat", sans-serif;
}

/* Dotted Divider */
.podcast-divider-dotted {
    width: 80%;
    height: 1px;
    border-bottom: 1px dashed rgba(191, 44, 55, 0.5);
    margin: 10px auto;
}

/* Meta placeholder */
.podcast-meta-placeholder {
    font-size: 0.85rem;
    color: #999;
    margin: 4px 0 8px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Explore Button */
.explore-btn {
    display: inline-block;
    background: #FF8a4c;
    color: #fff;
    padding: 10px 40px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    align-self: center;
    transition: 0.3s ease;
}

.explore-btn:hover {
    background: #e45a25;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}


/* RELATED CONTENT MOVED TO BOTTOM */
.related-content-bottom-section {
    width: 100%;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid #eee;
}

.related-content-bottom-section .related-items-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.related-content-bottom-section .related-item {
    flex: 1 1 300px;
    /* 3 columns */
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.related-content-bottom-section h3 {
    width: 100%;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
    border-bottom: none;
}

/* --- BLOG DETAIL PAGE DESIGN MATCH 2025 --- */

/* Sidebar Newsletter */
.sidebar-widget h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #2b160b !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
    border: none !important;
    padding: 0 !important;
}

.newsletter-input {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    color: #666 !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    margin-top: 15px;
    font-weight: 100;
}

.subscribe-btn {
    display: block !important;
    width: auto !important;
    margin: 0 auto 20px !important;
    background: #FF8a4c !important;
    /* Orange */
    color: #fff !important;
    padding: 10px 40px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
}

/* Social Icons (Blue Squares) */
.social-icons-row {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 30px !important;
}

.social-icon iconify-icon {
    font-size: 2rem !important;
    border-radius: 4px !important;
}

.social-icon.linkedin iconify-icon {
    color: #0077b5 !important;
}

.social-icon.twitter iconify-icon {
    color: #1da1f2 !important;
}

.social-icon.facebook iconify-icon {
    color: #3b5998 !important;
}

/* Share Pill */
.hashtag-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f0e4e4 !important;
    /* Light pinkish */
    color: #333 !important;
    padding: 8px 20px !important;
    border-radius: 50px !important;
    border: 1px solid #cea0a0 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    margin: 0 auto !important;
    display: table !important;
    /* Centering trick */
}

/* Article Typography */
.blog-header-detail h1 {
    font-family: 'Montserrat', sans-serif !important;
    color: #FF6B35 !important;
    /* Orange Title */
    font-weight: 800 !important;
    font-size: 2.5rem !important;
    text-align: center !important;
    margin-top: 30px !important;
}

.blog-meta a,
.blog-meta {
    color: #555 !important;
    font-size: 0.95rem !important;
    justify-content: center !important;
    margin-bottom: 40px !important;
}

.blog-body p {
    font-family: 'Open Sans', sans-serif;
    /* Assuming body font */
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 25px;
}

/* Interaction Bar Like/Comment/Share */
.blog-social-interaction {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    margin: 50px 0 !important;
    border-top: none !important;
    border-bottom: none !important;
}

.interaction-item {
    font-size: 1.2rem !important;
    color: #FF8a4c !important;
    /* Orange text */
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
}

.interaction-item iconify-icon {
    font-size: 1.4rem !important;
}

/* Comments Section Clean Up */
.comments-container {
    max-width: 800px !important;
    margin: 0 auto !important;
}


/* --- FOOTER DESIGN MATCH 2025 --- */
.site-footer {
    background-color: #2b160b !important;
    /* Dark Brown */
    color: #fff !important;
    padding-top: 60px !important;
}

.footer-content {
    max-width: 1300px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 0 0px 60px !important;
    flex-wrap: wrap !important;
}

.footer-logo img {
    height: 50px !important;
    width: auto !important;
}

.footer-column h3 {
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
}

.footer-column ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-column li {
    margin-bottom: 12px !important;
}

.footer-column a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
}

.footer-column a:hover {
    color: #FF8a4c !important;
    /* Orange hover */
}

.footer-top {
    align-self: flex-start !important;
    margin-top: 10px !important;
}

@media (min-width: 992px) {

    .footer-logo,
    .footer-top {
        align-self: center !important;
        margin-top: 0 !important;
    }
}


.footer-bottom {
    background-color: #fff !important;
    color: #333 !important;
    text-align: center !important;
    padding: 15px 0 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.footer-bottom a {
    color: #333 !important;
    text-decoration: underline !important;
}


/* --- COMMENT SECTION DESIGN MATCH 2025 --- */
.comment-item {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    /* Subtle separator */
    padding-bottom: 20px;
}

/* Flex wrapper for Avatar + Content */
.comment-flex-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Avatar - Silhouette style */
.comment-avatar {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
}

/* If user has picture */
.comment-avatar img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder Circle */
.avatar-placeholder {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    padding-left: 8px;
}

.comment-main-content {
    flex-grow: 1;
}

.comment-meta {
    margin-bottom: 5px;
    /* Tighter against content */
    display: flex;
    align-items: center;
    /* Align text baselines or center */
    gap: 10px;
}

.comment-author-name {
    font-weight: 700;
    color: #2b160b;
    /* Dark Brown */
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.comment-author-name a {
    text-decoration: none;
    color: inherit;
}

.comment-date {
    font-size: 0.8rem;
    color: #999;
    /* Light gray date */
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    /* Regular weight */
}

.comment-text-body {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.5;
    margin-bottom: 5px;
}

.comment-text-body p {
    margin-bottom: 0.5em;
    /* Tighter paragraphs */
    margin-top: 0px;
}

/* Links (Reply) - subtle */
.comment-actions ul.links {
    margin: 5px 0 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 15px;
}

.comment-actions li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Style Reply as a nice link/button */
.comment-actions a {
    color: #FF8a4c;
    /* Orange */
    font-weight: 700;
    text-decoration: none;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.comment-actions a::before {
    content: '↩';
    /* Fallback simple arrow */
    font-size: 1.1em;
}

.comment-actions a:hover {
    text-decoration: underline;
    color: #e06d2e;
}

/* Hide unwanted default titles if they leak through */
.comment-text-body h3 {
    display: none;
}

/* Hide Main Comments Title if requested */
#comments>h2 {
    display: none;
}

/* --- COMMENT FORM STYLING --- */
#comment-form,
.comment-form {
    display: none;
    /* User Request: Hidden by default, toggle via JS */
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    margin-top: 30px;
    border: 1px solid #eee;
    margin-bottom: 30px;
}

#comment-form h2,
.comment-form h2 {
    margin-top: 0;
    font-family: 'Montserrat', sans-serif;
    color: #2b160b;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* Labels */
#comment-form label,
.comment-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
    font-family: 'Open Sans', sans-serif;
}

/* Inputs & Textarea */
#comment-form input[type="text"],
#comment-form input[type="email"],
#comment-form input[type="url"],
#comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}

#comment-form input:focus,
#comment-form textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
    border-color: #FF8a4c;
    outline: none;
}

/* Hide clutter */
#comment-form .description,
#comment-form .filter-wrapper,
.comment-form .description,
.comment-form .filter-wrapper {
    font-size: 0.85rem;
    color: #888;
    margin-top: -10px;
    margin-bottom: 15px;
}

/* Hide Text Formats/Tips completely for cleaner look */
/* Hide Text Formats/Tips completely for cleaner look */
/* Target ONLY the help text and format selector, NOT the text area wrapper */
.filter-wrapper,
.filter-help,
.filter-guidelines,
#comment-form .filter-wrapper,
#comment-form .filter-help,
#comment-form .filter-guidelines,
.js-filter-wrapper,
/* .js-text-format-wrapper,  <-- This might be wrapping the textarea in some configs, disable to be safe */
#edit-comment-body-0-format-help,
#edit-comment-body-0-format .filter-wrapper {
    display: none !important;
}

/* Ensure Textarea Wrapper is VISIBLE */
#edit-comment-body-wrapper,
.form-item-comment-body-0-value {
    display: block !important;
}

/* Hide Homepage field (Common spam trap, cleaner UI) */
/* Target specific ID wrapper or class if present */
.form-item-homepage,
.js-form-item-homepage,
#edit-homepage-wrapper,
div:has(> #edit-homepage) {
    display: none !important;
}

/* Fallback */
#edit-homepage,
label[for="edit-homepage"] {
    display: none !important;
}

/* Buttons */
#comment-form .form-actions,
.comment-form .form-actions {
    margin-top: 10px;
    display: flex;
    gap: 15px;
}

#comment-form .form-submit,
#comment-form #edit-submit,
.comment-form .form-submit,
.comment-form #edit-submit {
    background-color: #FF8a4c;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s;
}

#comment-form .form-submit:hover,
#comment-form #edit-submit:hover,
.comment-form .form-submit:hover,
.comment-form #edit-submit:hover {
    background-color: #e06d2e;
}

#comment-form #edit-preview,
.comment-form #edit-preview {
    background-color: transparent;
    color: #666;
    border: 1px solid #ddd;
}

#comment-form #edit-preview:hover,
.comment-form #edit-preview:hover {
    background-color: #eee;
    color: #333;
}

/* ============================================
   DYNAMIC EXPLORE BLOGS SLIDER STYLES
   ============================================ */
.blogs-section {
    position: relative;
    padding: 0px 0px 50px 0px;
    overflow: hidden;
    margin: 0 auto;
}

.blogs-wrapper {
    display: flex;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* Smooth Slide */
    padding: 0px 0;
    width: 100%;
    /* Alignment managed by Transform in JS */
}

.blog-card {
    flex: 0 0 32%;
    /* Default to 3 items visible */
    min-width: 300px;
    background: rgba(255, 136, 77, 0.1) !important;
    /* Fixed: Specific requested tint */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    opacity: 0.7;
    /* Non-active items dimmed */
    transform: scale(0.95);
    box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.2);
}

.blog-card.active {
    opacity: 1;
    transform: scale(1.05);
    /* Active item pops */
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-color: #BF2C37;
    /* Highlight border */
}

.blogs-header {
    text-align: center;
    margin-bottom: 40px;
}

.blogs-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #333;
    margin-bottom: -15px;
    margin-top: 0px;
}

.blogs-header p {
    font-size: 1.1rem;
    color: #777;
}

.blog-img-wrapper {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-info {
    padding: 15px;
    text-align: center;
    background: transparent !important;
    /* Removed to avoid double-layering tint on certain card types */
}

.blog-info h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-info p {
    font-size: 0.95rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0px;
}

.blog-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.dot {
    width: 12px;
    height: 12px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: #FF5C39;
    transform: scale(1.2);
}

@media (max-width: 991px) {
    .blog-card {
        flex: 0 0 60%;
        /* 1-2 items on tablet */
    }
}

@media (max-width: 600px) {
    .blog-card {
        flex: 0 0 85%;
        /* 1 item on mobile */
    }
}

/* ============================================
   SERVICE LIST STYLES (DNG/KP)
   ============================================ */
.service-list {
    list-style-type: disc;
    padding-left: 25px;
    margin: 15px 0 25px 0;
    color: #333;
}

.service-list li {
    margin-bottom: 0px;
    line-height: 1.5;
    font-size: 1.05rem;
    font-family: 'Roboto', sans-serif;
    color: #4a4a4a;
    font-weight: 400;
}

.service-list li strong {
    color: #000;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    /* text-decoration-color: #BF2C37;  Optional: red underline like logo? Ref image seems black */
}

/* -------------------------------------------------------------
   BLOG CARD SHADOW FIX
   ------------------------------------------------------------- */
.blog-card {
    box-shadow: none !important;
    transition: box-shadow 0.3s ease;
}

.blog-card.active {
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15) !important;
}

/* -------------------------------------------------------------
   CONTACT PAGE CAPTCHA FIX
   ------------------------------------------------------------- */
.path-contact fieldset.captcha,
fieldset.captcha {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    /* Center the captcha */
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.captcha>div {
    margin: 0 auto;
}

/* Hide Captcha Title */
fieldset.captcha legend,
.captcha__title {
    display: none !important;
}

/* -------------------------------------------------------------
   BLOG CONTENT HUB LAYOUT FIX
   ------------------------------------------------------------- */
.section-title-alt {
    font-size: 32px;
    font-weight: 800;
    color: #BF2C37;
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.podcast-section-wrapper {
    width: 100%;
    margin-bottom: 40px;
    display: block;
}

.newsletter-input {
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
}

.newsletter-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   CONTENT HUB HERO (Specific Overrides)
   ============================================ */
.content-hub-hero {
    height: 430px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.content-hub-hero .hero-content {
    margin-top: 0 !important;
}

.hero-area-breadcrumb {
    position: absolute !important;
    top: 17px;
    width: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.hero-area-title,
.hero-area-description {
    width: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    /* Align centered */
}

/* 1. Breadcrumb Pill */
.hero-area-breadcrumb .hero-content {
    padding: 8px 0;
    /* Remove side padding */
}

.content-hub-hero .hero-breadcrumb {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

.content-hub-hero .hero-breadcrumb strong {
    font-weight: 700;
}

/* 2. Title Box */
.hero-area-title .hero-content {
    padding: 10px 0;
    /* Remove side padding */
    border-radius: 12px;
}

.content-hub-hero .hero-title-underlined {
    font-size: 40px;
    font-weight: 800;
    margin: 0;
    color: rgba(251, 251, 251, 1);
    line-height: 1.1;
    font-family: 'Montserrat', sans-serif;
    text-shadow: none;
}

/* 3. Description Strip */
.hero-area-description .hero-content {
    border-radius: 12px;
    max-width: 100%;
    /* Fill available space */
    top: -10px;
    /* Bring it closer */
}

.content-hub-hero .hero-description {
    text-align: center;
    font-size: 20px;
    margin: 0;
    line-height: 1.5;
    color: #fff;
    font-weight: 500;
    font-family: "Montserrat";
    margin-top: -20px;
}

/* =========================================
   MOBILE RESPONSIVENESS FIXES (Added by Agent)
   Dimensions: < 768px
   ========================================= */
@media (max-width: 768px) {

    /* --- ABOUT SECTION --- */

    .about-wrapper {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 30px !important;
    }

    .about-left {
        width: 100% !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-left: 0 !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: -20px !important;
        /* Pull content up */
    }

    .about-left img {
        height: auto !important;
        width: 90% !important;
        max-width: 350px !important;
    }

    .about-right {
        width: 85% !important;
        padding: 1.5rem 1.5rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .about-right h2 {
        font-size: 2.2rem !important;
        margin-top: 0 !important;
    }

    .about-subtitle {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        text-align: center !important;
    }

    .about-text {
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 30px !important;
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
        text-justify: none !important;
    }

    .about-right .btn-secondary {
        padding: 10px 30px !important;
        font-size: 0.9rem !important;
    }

    /* --- CHANGE SECTION --- */
    .change-section {
        margin: 20px 0 !important;
        padding: 0 !important;
        /* Remove parent padding to avoid conflict */
        width: 100% !important;
    }

    .change-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1.5rem !important;
        padding: 2rem 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        /* Force center alignment */
    }

    .change-logo {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .change-logo img {
        margin: 0 auto !important;
        display: block !important;
        max-width: 180px;
    }

    .change-text {
        width: 100% !important;
        font-size: 1rem !important;
    }

    /* --- EXPLORE BLOGS SECTION --- */
    /* Single card slider mode */
    /* --- EXPLORE BLOGS SECTION --- */
    /* FADE ANIMATION MODE (Requested by User) */
    .blogs-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* Single column */
        transform: none !important;
        /* Disable slide */
        transition: none !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .blog-card {
        grid-row: 1;
        /* Stack all in row 1 */
        grid-column: 1;
        /* Stack all in col 1 */

        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;

        opacity: 0 !important;
        /* Hidden by default */
        transition: opacity 0.5s ease-in-out !important;
        pointer-events: none;
        /* Prevent clicking hidden items */
        z-index: 1;
    }

    .blog-card.active {
        opacity: 1 !important;
        /* Show active */
        z-index: 10;
        pointer-events: auto;
    }


    .blogs-header h2 {
        font-size: 1.8rem !important;
    }

    /* --- PODCAST SECTION (Mobile Fix) --- */
    .podcast-card {
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 40px !important;
        margin-bottom: 40px !important;
    }

    .podcast-img-box {
        height: auto !important;
        min-height: 200px !important;
    }

    .podcast-lower {
        height: auto !important;
        padding-bottom: 30px !important;
    }

    .podcast-title {
        font-size: 24px !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;
    }

    .podcast-card .explore-btn {
        margin-top: 15px !important;
        margin-bottom: 10px !important;
    }

    .podcast-meta-placeholder {
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .podcast-meta-placeholder .meta-item {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        max-width: 48% !important;
        justify-content: flex-start !important;
    }
}

/* =========================================================
   MOBILE FIXES FOR WORK PAGE (Refining User Edits)
   ========================================================= */
@media (max-width: 900px) {

    /* 1. Reset massive margins on Work Card */
    .card {
        margin: 20px auto !important;
        width: 90% !important;
        /* Ensure it fits screen */
    }

    /* 2. Stack the 3 columns in Work Card */
    .sections {
        flex-direction: column;
        gap: 30px;
    }

    .section {
        width: 100% !important;
    }

    /* 3. Tame the Testimonial Gap */
    .testimonial-wrapper {
        gap: 20px !important;
        flex-wrap: wrap;
        /* Ensure wrapping */
    }
}


/* =========================================================
   CONTACT FORM ALIGNMENT FIX
   ========================================================= */
.contact-form-wrapper form {
    max-width: 1000px;
    margin: 0 auto;
}

/* Force consistent sizing for all inputs and textareas */
.contact-form-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23bf2c37' d='m12 15l-5-5h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 24px !important;
    padding-right: 40px !important;
}

.contact-form-wrapper input[type='text'],
.contact-form-wrapper input[type='email'],
.contact-form-wrapper input[type='tel'],
.contact-form-wrapper select,
.contact-form-wrapper textarea {
    width: 100% !important;
    max-width: 100% !important;
    /* Decrease width to match visual */
    flex: 1 !important;
    background-color: #FFF5F1 !important;
    /* Pink Background */
    border: 1px solid #FFCDD2 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 1rem !important;
    color: #555 !important;
    box-sizing: border-box !important;
    /* Fix width calculation */
}

/* Ensure Textarea Matches input style */
.contact-form-wrapper textarea {
    min-height: 180px;
    resize: none !important;
    /* Fix size */
}

/* Handle Form Item Layout (Grid like screenshot) */
.contact-form-wrapper .js-form-item,
.contact-form-wrapper .form-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    width: 100%;
}

/* FIX: Target potential wrapper divs around inputs/textareas to ensure they grow */
.contact-form-wrapper .js-form-item>div,
.contact-form-wrapper .form-item>div,
.contact-form-wrapper .form-textarea-wrapper {
    flex: 1;
    width: 100%;
    max-width: 100%;
}

.contact-form-wrapper label {
    width: 180px;
    /* Fixed label width for alignment */
    flex-shrink: 0;
    font-weight: 700;
    color: #2b160b;
    text-align: left;
    /* MATCH USER REQUEST: Left align labels */
    margin-right: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
}

.contact-form-wrapper label::after {
    content: " *";
    color: #bf2c37;
    font-size: 1.2rem;
}

/* Mobile Stack */
@media (max-width: 768px) {

    .contact-form-wrapper .js-form-item,
    .contact-form-wrapper .form-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-form-wrapper label {
        width: 100%;
        text-align: left;
        margin-bottom: 5px;
    }

    .contact-form-wrapper input,
    .contact-form-wrapper textarea {
        max-width: 100% !important;
    }
}

/* HIDE LEGACY BLACK ICONS in Contact Links */
.link-btn i,
.link-btn .fa,
.link-btn .fab,
.link-btn .fas {
    display: none !important;
}

/* Ensure Iconify Icons are visible and colored */
.link-btn iconify-icon {
    display: flex !important;
}


/* HIDE ION ICONS (Ghost icons) in Contact Links */
.link-btn ion-icon {
    display: none !important;
}

/* =========================================================
   CONTACT PAGE MOBILE RESPONSIVENESS FIXES
   ========================================================= */

@media (max-width: 992px) {

    /* 1. Contact Map Section Stack */
    .contact-map-wide-wrapper {
        width: 100% !important;
        padding: 0 0px !important;
        box-sizing: border-box !important;
    }

    .map-contact-box {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
        margin-top: 20px !important;
        box-sizing: border-box !important;
        /* Prevent padding from increasing width */
    }

    .map-area,
    .contact-links {
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact-links {
        align-items: center !important;
        padding-left: 0 !important;
        /* Reset desktop padding */
    }

    /* Reset Link Button Padding for Mobile */
    .link-btn {
        justify-content: flex-start !important;
        padding: 12px 60px !important;
        width: 100% !important;
        /* Force Full Width */
        max-width: none !important;
        /* Remove constraints */
        margin: 5px 0 !important;
        /* Remove auto margins to maximize width */
        display: flex !important;
    }

    /* 2. Contact Form Stack and Reset */
    .contact-form-wrapper,
    .contact-form-wrapper form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0px !important;
        box-sizing: border-box !important;
    }

    .contact-form-wrapper .js-form-item,
    .contact-form-wrapper .form-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        /* Stretch to fill width */
        justify-content: flex-start !important;
        width: 100% !important;
        height: auto !important;
        /* Reset any fixed height */
        min-height: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
        /* Space between form items */
        gap: 5px !important;
        /* Tiny gap between label and input */
    }

    .contact-form-wrapper label {
        width: 100% !important;
        text-align: left !important;
        margin: 0 0 5px 0 !important;
        display: block !important;
        flex: 0 0 auto !important;
        /* CRITICAL FIX: Reset flex-basis so it doesn't force height */
        height: auto !important;
    }

    .contact-form-wrapper input,
    .contact-form-wrapper textarea,
    .contact-form-wrapper select {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* Remove any centering margins */
        box-sizing: border-box !important;
    }
}

/* =========================================================
   GALLERY PAGE STYLES (Restored & Fixed Width)
   ========================================================= */

.work-gallery {
    width: 100%;
    margin: 50px auto;
    padding: 0;
    text-align: center;
}

.gallery-title {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 40px;
    font-family: 'Montserrat', sans-serif;
    font-style: bold;
}

/* MATCH .container-inner WIDTH EXACTLY */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Columns Desktop */
    gap: 30px;

    /* Container Width Specs */
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.info-link {
    text-decoration: none;
    display: block;
}

.info-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.gallery-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.info-title {
    background-color: #FBD3C5;
    padding: 15px;
    text-align: center;
    color: #C0392B;
    font-weight: 500;
    font-size: 1.1rem;
    font-family: 'Roboto';
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
        /* Tablets can take full width if needed, or keep 1200 constraint */
        padding: 0 30px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .gallery-img {
        height: auto;
        aspect-ratio: 4/3;
    }
}


/* =========================================================
   GALLERY PAGE STYLES (Restored)
   ========================================================= */

.work-gallery {
    width: 100%;
    margin: 50px auto;
    padding: 0;
    text-align: center;
}

.gallery-title {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 40px;
    font-family: 'Montserrat', sans-serif;
    font-style: bold;
}

/* MATCH .container-inner WIDTH EXACTLY */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Columns Desktop */
    gap: 30px;

    /* Container Width Specs - RESET as we are now inside .container-inner */
    width: 100%;
    /* max-width and margins handled by container-inner now */
    padding: 0;
    /* Padding handled by container-inner */
}

.info-link {
    text-decoration: none;
    display: block;
}

.info-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.gallery-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.info-title {
    background-color: #FBD3C5;
    padding: 15px;
    text-align: center;
    color: #C0392B;
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'Montserrat', sans-serif;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
        padding: 0 30px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .gallery-img {
        height: auto;
        aspect-ratio: 4/3;
    }
}

/* =========================================================
   LIGHTBOX ARROWS ONLY (Minimal Fix)
   ========================================================= */
.nav-btn {
    position: fixed;
    /* Fixed to viewport to match modal */
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 99999;
    /* Ensure on top of everything */
    padding: 20px;
    border-radius: 5px;
    display: block !important;
    /* Force visible */
}

.prev {
    left: 320px !important;
}

.next {
    right: 320px !important;
}

/* Ensure they show on mobile */
@media (max-width: 768px) {
    .nav-btn {
        display: block !important;
    }

    .prev {
        left: 10px !important;
    }

    .next {
        right: 10px !important;
    }
}

/* =========================================================
   MENU DROPDOWN ARROWS
   ========================================================= */
/* Target items with submenu */
.menu-item.has-submenu>a::after {
    content: "▽";
    /* Down Arrow */
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    /* Match menu text color */
    /* Ensure it doesn't break layout */
    position: relative;
}

/* Rotate on hover if needed (optional polish) */
.menu-item.has-submenu:hover>a::after {
    color: rgb(255, 138, 76);
}

/* Ensure mobile menu handles it gracefully */
@media (max-width: 900px) {

    /* Ensure link creates context for absolute arrow */
    .menu-item.has-submenu>a {
        position: relative;
        padding-right: 40px;
        /* Space for arrow */
        display: block;
        width: 91%;
        box-sizing: border-box;
    }

    .menu-item.has-submenu>a::after {
        float: none;
        position: absolute;
        right: 15px;
        /* Fixed to right edge as requested */
        top: 50%;
        transform: translateY(-50%);
        margin-right: 0;
        font-size: 1rem;
        /* Slightly larger on mobile */
    }
}

/* =========================================================
   LIGHTBOX CAPTION
   ========================================================= */
.modal-caption {
    background-color: #FF8A4C;
    /* Vibrant Orange */
    color: #ffffff;
    /* White Text */
    padding: 15px 30px;
    border-radius: 0 0 15px 15px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin-top: -1px;
    /* Seamless connection */
    width: auto;
    max-width: 90%;
    z-index: 10003;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .modal-caption {
        font-size: 1rem;
        padding: 10px 20px;
        width: 100%;
        max-width: 95%;
        border-radius: 0 0 10px 10px;
    }

    /* Ensure modal flex column handles caption */
    .image-modal {
        flex-direction: column !important;
    }
}


/* =========================================================
   LIGHTBOX WRAPPER & WIDTH FIX
   ========================================================= */
.modal-inner-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: auto;
    width: fit-content;
    /* Shrink to fit image width */
    max-width: 90vw;
    /* But don't exceed screen */
    max-height: 90vh;
    /* consistent rounding */
    align-items: center;
}

/* Image */
.modal-content {
    display: block;
    width: auto !important;
    /* Snap to actual image pixels */
    max-width: 100%;
    /* Constrained by wrapper */
    height: auto !important;
    max-height: 75vh;
    /* Leave height for caption */
    object-fit: contain;
    /* Ensure full image visible */
    border-radius: 8px 8px 0 0;
    /* Top rounded */
    margin: 0 !important;
    /* Reset auto margins */
    background: transparent !important;
}

/* Caption matches width exactly */
.modal-caption {
    width: 100% !important;
    /* Override previous max-width */
    margin-top: -15px !important;
    /* Force overlap to remove transparent gap */
    border-radius: 0 0 12px 12px !important;
    /* Bottom rounded */
    box-sizing: border-box;
    position: relative;
    display: block;
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .modal-inner-wrapper {
        max-width: 95vw;
    }

    .modal-content {
        max-height: 70vh;
        width: auto !important;
    }
}

/* =========================================================
   GALLERY TITLE MOBILE FIX
   ========================================================= */
@media (max-width: 768px) {
    .gallery-title {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        /* Align with global container padding */
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 1.8rem;
        /* Slightly smaller to prevent overflow if word is long */
    }
}

/* OPTION CARD (Revised Layout) */
.option-card {
    background: #ffffff;
    border: 1px solid #E4713A;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

.option-card:hover {
    box-shadow: 0px 6px 15px 0px rgba(228, 113, 58, 0.2);
    transform: translateY(-2px);
}

.card-top-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    margin-left: -50px;
}

/* Icon */
.left-icon {
    font-size: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    /* color: #4a90e2; */
}

/* Title */
.card-top-row h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #DA5220;
    font-family: 'Montserrat';
}

/* Arrow */
.open-icon {
    font-size: 30px;
    color: #DA5220;
    font-weight: bold;
    margin-right: -5px;
    margin-top: -5px;
}

/* Content Full Width */
.option-content-full p {
    margin: 0;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    width: 100%;
    display: block;
    font-family: 'Roboto';
}


/* OPTION CARD (Revised Layout V2) */
.option-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Fix: stop centering content */
    padding: 15px 70px;
}

.card-top-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.left-icon {
    font-size: 24px;
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.card-top-row h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #DA5220;
    font-family: 'Montserrat';
    flex: 1;
    /* Pushes arrow to the right */
}

/* Ensure Arrow stays right */
.open-icon {
    font-size: 30px;
    color: #DA5220;
    font-weight: bold;
    margin-left: 10px;
}

.option-intro {
    padding-left: 0;
    /* Aligned with icon as per user's latest request */
}

.option-intro p {
    margin: 0;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    font-family: 'Roboto';
    margin-left: -50px;
}

@media (max-width: 768px) {
    .option-intro {
        padding-left: 0;
        margin-top: 10px;
    }

    /* Fix Change Game Cards on Mobile */
    .options-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        /* Contain children */
        padding: 0 10px;
        /* Safety padding */
    }

    .option-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: none !important;
        /* Disable flex sizing logic if present */
    }
}

/* ===========================
   USER LOGIN PAGE WRAPPER 
   =========================== */

/* Override main element */
body.path-user main[role="main"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.path-user .container-inner {
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

body.path-user .content-with-sidebar-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

body.path-user .main-content-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 20px !important;
    background-color: #f9f9f9 !important;
    min-height: 80vh !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

body.path-user .blog-sidebar {
    display: none !important;
}

/* Specific styling for login form card */
.user-login-form {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    width: 100%;
    max-width: 440px;
    border: 1px solid rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
    /* Prevent padding form causing overflow */
}

@media (max-width: 600px) {
    .user-login-form {
        padding: 1.5rem;
        /* Reduce padding on mobile */
    }

    body.path-user .main-content-area {
        padding: 40px 15px;
        /* Reduce outer padding on mobile */
    }
}

/* Form items styling */
.user-login-form .form-item {
    margin-bottom: 1.5rem;
}

.user-login-form label {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2b160b;
    /* Dark brown from header */
    font-size: 0.95rem;
}

.user-login-form input.form-text,
.user-login-form input.form-tel,
.user-login-form input.form-email,
.user-login-form input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid #eee;
    border-radius: 8px;
    background-color: #fff;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

.user-login-form input:focus {
    border-color: #ff6b35;
    /* Brand Orange */
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
}

/* Submit button */
.user-login-form .form-actions {
    margin-top: 2rem;
    margin-bottom: 0;
}

.user-login-form input#edit-submit,
.user-login-form button {
    width: 100%;
    background: #FF884D;
    /* Lighter orange from theme */
    color: white;
    font-weight: 700;
    padding: 14px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: "Montserrat", sans-serif;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.user-login-form input#edit-submit:hover,
.user-login-form button:hover {
    background: #d45d2d;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 136, 77, 0.4);
}

/* Links (Reset password etc) */
.user-login-form a {
    color: #666;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: 15px;
    display: inline-block;
}

.user-login-form a:hover {
    color: #FF884D;
    text-decoration: underline;
}

/* Access Denied / Messages */
.role-anonymous div[role="contentinfo"] {
    /* Standard Drupal messages wrapper */
    max-width: 440px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}



/* Hide breadcrumbs on login page for cleaner look if desired, or style them */
body.path-user .breadcrumb {
    display: none;
}

/* ===========================
   CONTACT PAGE SUCCESS MESSAGE ENHANCEMENT
   =========================== */

/* Position messages container above the form */
.path-contact .region-content>.messages {
    max-width: 900px;
    margin: 0 auto 30px auto;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.4s ease-out;
}

/* Success message specific styling */
.path-contact .messages--status {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-left: 5px solid #047857;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Add checkmark icon before success message */
.path-contact .messages--status::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* Error message styling */
.path-contact .messages--error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-left: 5px solid #b91c1c;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Warning message styling */
.path-contact .messages--warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    border-left: 5px solid #b45309;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Slide down animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .path-contact .region-content>.messages {
        margin: 0 15px 20px 15px;
        padding: 15px 20px;
        font-size: 0.95rem;
    }

    .path-contact .messages--status::before {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }
}



/* ===========================
   SYSTEM MESSAGES (High Specificity Fix)
   =========================== */
body .messages {
    padding: 0px 10px 20px 30px !important;
    margin: 5px auto !important;
    max-width: 1160px !important;
    /* Match container */
    width: 95% !important;
    color: #444 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}

/* LOGIN PAGE SPECIFIC MESSAGE POSITIONING */
body.path-user .messages {
    max-width: 440px !important;
    width: 100% !important;
    margin: 0 auto 25px auto !important;
    border-radius: 16px !important;
    /* Match form radius */
}

/* STATUS / SUCCESS */
body .messages--status {
    border-left-color: #FF884D !important;
    /* Brand Orange */
    background: #fff4eebf !important;
    color: #2b160b !important;
}

/* ERROR (Access Denied) */
body .messages--error {
    color: #b71c1c !important;
}

/* WARNING */
body .messages--warning {
    border-left-color: #ffa000 !important;
    /* Amber */
    background: #fff8e1 !important;
    color: #5d4037 !important;
}

/* Links inside messages */
body .messages a {
    text-decoration: underline !important;
    font-weight: 700 !important;
    color: inherit !important;
}

/* Headings inside messages */
body .messages h2 {
    margin-top: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    margin-bottom: 8px !important;
}

/* Force messages to sit exactly above the login form */
body.path-user .main-content-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Messages box same width as login form */
body.path-user .messages {
    max-width: 440px !important;
    width: 100% !important;
    margin: 0 auto 15px auto !important;
    /* small gap before form */
}

/* Login form should follow message */
body.path-user .user-login-form {
    margin-top: 0 !important;
}

/* =========================================================
   CONTACT FORM SUCCESS MESSAGE STYLING
   ========================================================= */
.custom-success-msg {
    color: green !important;
    display: flex !important;
    margin-bottom: 30px !important;
    padding-left: 364px !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    .custom-success-msg {
        padding-left: 0px !important;
    }
}

/* ============================================
   MODAL FIXES (For Multiple Images)
   ============================================ */
.modal-box {
    width: 90% !important;
    max-width: 400px !important;
    /* Standard width for text/single image */
    max-height: 90vh !important;
    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex;
    flex-direction: column;
    /* Ensure content isn't tight against edges */
    position: fixed !important;
    transition: max-width 0.3s ease;
    /* Smooth transition */
}

/* Wider modal ONLY when multiple images are present */
.modal-box.modal-wide {
    max-width: 900px !important;
}

/* Ensure footer scrolls horizontally inside the modal if needed, 
   but try to show all content */
#modal-footer.modal-image-footer {
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: hidden;
    padding: 0;
    /* Remove padding to prevent offset */
    padding-bottom: 20px;
    width: 100%;
    margin: 0 auto;
    /* Ensure container itself is centered */
}

/* Allow scrolling only when specifically needed (e.g. wide content) */
.modal-box.modal-wide #modal-footer.modal-image-footer {
    overflow-x: auto;
}

/* ============================================
   SINGLE IMAGE MODE (Large Display)
   ============================================ */
#modal-footer.single-image-mode .footer-card {
    width: 100%;
    max-width: 100%;
    /* Use full available width */
    text-align: center;
    /* Center title/desc */
    margin: 0 auto;
    /* Force center alignment */
}

#modal-footer.single-image-mode {
    padding: 0;
    /* Remove padding that might shift centering */
    width: 100%;
    justify-content: center;
}

#modal-footer.single-image-mode .footer-card img,
#modal-footer.single-image-mode .footer-img img {
    height: auto;
    /* Allow natural height */
    max-height: 350px;
    /* Cap height but allow it to be big */
    width: 100%;
    object-fit: contain;
    /* Ensure whole image is visible and centered */
    margin: 0 auto 15px auto;
    display: block;
    /* Remove inline spacing */
    border-radius: 8px;
    /* Maintain rounded corners */
}

#modal-footer.single-image-mode .footer-title {
    font-size: 1.3rem;
    /* Slightly larger title */
    margin-bottom: 10px;
    font-size: 1.3rem;
    /* Slightly larger title */
    margin-bottom: 10px;
    margin-top: 10px;
}

/* MOBILE FIX: Stack images vertically on small screens */
@media (max-width: 768px) {
    #modal-footer.modal-image-footer {
        flex-wrap: wrap !important;
        /* Allow wrapping */
        flex-direction: column;
        align-items: center;
        overflow-x: visible;
        /* No scroll needed if stacked */
    }

    .footer-card {
        width: 100% !important;
        margin-bottom: 30px;
        margin-right: 0;
        margin-left: 0;
    }

    .modal-box.modal-wide,
    .modal-box {
        max-width: 95% !important;
        /* Use almost full screen width */
        max-height: 80vh !important;
        /* Shorter to clearly show it's scrollable */
        overflow-y: scroll !important;
        /* FORCE scrollbar visibility */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on mobile */
        display: block;
    }
}

/* MAIN WRAPPER */
.map-contact-box {
    width: 100%;
    max-width: 1400px;
    margin: 50px auto;
    padding: 30px;
    background: linear-gradient(90deg, rgba(255, 136, 77, .8) 0%, rgba(191, 44, 55, .8) 100%);
    border-radius: 20px;
    display: flex;
    gap: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
    box-sizing: border-box;
}

/* MAP CONTAINER – TAKES ALL FREE WIDTH */
.map-area {
    flex: 1 1 0;
    width: 100%;
    height: 457px;
    min-height: 350px;
    background: #ffffff;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
}

/* DRUPAL BLOCK WRAPPERS FIX */
.map-area .block,
.map-area .block-content,
.map-area .content,
.map-area .field,
.map-area .clearfix,
.map-area .map-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* AGGRESSIVE FIX: Force everything inside map-placeholder to fill space */
.map-placeholder,
.map-placeholder>*,
.map-placeholder iframe,
.map-placeholder div {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* FORCE IFRAME FULL SIZE */
.map-area iframe {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    display: block !important;
}

/* SIDEBAR */
.contact-links {
    flex: 0 0 220px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* BUTTONS */
.map-contact-box .link-btn {
    width: 100% !important;
    margin-bottom: 12px;
}

/* MOBILE */
@media (max-width: 900px) {
    .map-contact-box {
        flex-direction: column;
    }

    .map-area {
        height: 320px;
        min-height: 320px;
    }

    .contact-links {
        width: 100%;
        max-width: 100%;
    }
}