/* ============================================
   GLOBAL RESET + BODY
   ============================================ */
body {
    margin: 0;
    padding-top: 80px;
    /* prevent content hiding under fixed header */
    font-family: 'Inter', sans-serif;
    background-color: #f5f5f5;
}

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

/* ===========================
   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;
    /* 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;
}

.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 {
        padding-top: 70px;
        /* header shorter on mobile */
    }

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

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

    /* hide desktop nav until toggled */
    .main-nav {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #2b160b;
        display: none;
        flex-direction: column;
        padding: 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;
    }

    .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: 30px;
    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-color: white;
    color: rgba(191, 44, 55, 1);
    padding: 0.9rem 2.4rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    margin-bottom: 20px !important;
    border: 3px solid rgba(255, 136, 77, 1);
    text-decoration: none;
    cursor: pointer;
}


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

/* About Section */
.about-section {
    width: 100%;
    margin: 50px auto;

    border-radius: 0;
    /* Full width background gradient */
    padding: 0;
}

.about-section .container-inner {
    display: flex;
    padding: 0 20px;
    /* Standard 1200 - 40 = 1160 grid */
}

.about-card {
    display: flex;
    width: 100% !important;
    max-width: 1160px !important;
    /* Force to content grid */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    min-height: 549px;
    background: linear-gradient(90deg, rgba(255, 136, 77, 0.8) 0%, rgba(191, 44, 55, 0.8) 100%);
    border-radius: 20px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Left side image */
.about-image {
    flex: 0 0 40%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: none;
    padding: 0;
}

.about-image img {
    width: 95%;
    height: auto;
    object-fit: contain;
    margin-bottom: -10px;
    /* subtle overlap like screenshot */
}

/* Right content area */
.about-content {
    flex: 1;
    padding: 3rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    /* softer text color */
}

.about-content h2 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: #ffffff;
    /* same coral/red tone as reference */
    font-family: "Montserrat";
}

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

.about-text {
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-family: "Roboto";
}

/* Learn More 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;
    font-family: "Roboto";
}

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

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



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

/* Logo */
.change-logo img {
    max-width: 170px;
    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: 1160px !important;
    /* Force to content grid */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #fde8df;
    border-radius: 20px;
    padding: 50px 40px;
    overflow: hidden;
}

/* Mobile fix for width */
@media (max-width: 900px) {
    .change-section .container-inner {
        margin-left: 20px !important;
        margin-right: 20px !important;
        width: auto !important;
    }
}



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

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

/* 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;
}

/* 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: 20px;

    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: 0 4px 10px rgba(0, 0, 0, 0.15);
    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 ========== */
.footer-column h3 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    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;
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: opacity 0.2s ease;
}

.back-top ion-icon {
    color: #ff884d;
    /* Orange Arrow */
    font-size: 1.2rem;
    --ionicon-stroke-width: 45px;
}


.back-top:hover {
    opacity: 0.7;
}

/* ========== 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: flex-end;
    }
}

@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 {
    width: 90%;
    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;
}

.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 {
    width: 100%;
    max-width: 1160px;
    margin: 60px auto;
    background: rgba(255, 136, 77, 0.1);
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    /* Contain shadows */
}

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

.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-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: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

.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: 30px;
    font-weight: 100;
    color: #111;
    margin-bottom: 12px;
    border-bottom: 2px solid #111;
    padding-bottom: 12px;
}

.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;
}

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

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

.share-tag {
    display: inline-block;
    border: 1px solid #BF2C37;
    color: #BF2C37;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    background: transparent;
    font-family: "Roboto";
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

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

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

.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;
    }

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

.sidebar-related-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 24px;
    border-bottom: 3px solid #e0e0e0;
    padding-bottom: 12px;
    display: block;
    text-transform: capitalize;
    text-align: center;
}

.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: 16px;
    font-weight: 700;
    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: 32px !important;
    font-weight: 800 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.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: 0 4px 15px rgba(255, 129, 73, 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.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: 126% !important;
    max-width: 126% !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: #ff975e !important;
    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: 0 10px 20px rgba(255, 151, 94, 0.2) !important;
    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 {
    width: 100%;
    max-width: 1250px;
    height: auto;
    min-height: 350px;
    background: linear-gradient(90deg, #ff9966, #cc5566);
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 30px 40px;
    box-sizing: border-box;
    margin: 90px auto;
    gap: 20px;
    flex-wrap: wrap;
}

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

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

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

/* --- 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;
    /* 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: 700;
    font-family: 'Montserrat';
}

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

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

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

/* White rounded box */
.logo-img {
    width: 110px;
    height: 110px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto 12px;
}

.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: 25px;
    width: 100%;
}

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

\  .section-header h2 {
    font-size: 60px;
    font-weight: 700;
}

/* 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;
}

/* ============================================
   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) {
    .options-list {
        /* Padding handled by container-inner now */
    }

    .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%);
    letter-spacing: 6px;
}

.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: 1083px;
    margin: 28px auto;
    /* max-width removed */
    /* auto margin removed */
    padding: 32px;
    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)
   ============================================ */

/* ============================================
   BLOG SECTION (Listing + Detail) - REFINED
   ============================================ */

/* Ensure container exists and is centered */
.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: #2b160b !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    margin: 0px 15px 10px !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: 20px 20px 15px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #444 !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: 0 6px 15px rgba(255, 138, 76, 0.45) !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: 40px;
}

.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;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
}

.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 {
    max-width: 1200px !important;
    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 FIX */
.podcast-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 40px;
}

.podcast-inner-layout {
    width: 100%;
}

.podcast-card {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #BF2C37;
    /* Match blog card border */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(191, 44, 55, 0.1);
}

.podcast-img-box {
    width: 100%;
    height: 300px;
    /* Fixed height for consistency */
    overflow: hidden;
}

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

.podcast-lower {
    padding: 30px;
    text-align: center;
    background: #FFF5F1;
    /* Light red/orange tint */
}

/* Ensure title is centered and styled */
.podcast-lower h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #2b160b;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

/* Explore Button */
.podcast-lower .explore-btn {
    display: inline-block;
    background: #FF8a4c;
    color: #fff;
    padding: 12px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 20px;
}

/* 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;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin-top: 15px;
}

.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;
    }
}

.back-top {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
}

.back-top ion-icon {
    color: #FF8a4c !important;
    /* Orange arrow */
    font-size: 1.5rem !important;
    margin-bottom: -5px !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;
    background-color: #2b160b;
    /* Dark Brown like reference */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.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 */
}

/* 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;
}

#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;
    width: 100%;
    margin: 0 auto;
}

.blogs-wrapper {
    display: flex;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* Smooth Slide */
    padding: 20px 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: -10px;
}

.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: 20px;
    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;
}

.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: 12px;
    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: 5px;
    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: 3.5rem;
    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: 19px;
    margin: 0;
    line-height: 1.5;
    color: #fff;
    font-weight: 500;
    font-family: "Montserrat";
    margin-top: -15px;
}

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

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

    .about-image {
        flex: 0 0 auto !important;
        width: 100% !important;
        order: 1;
        /* Image first */
        margin-bottom: 0 !important;
        justify-content: center;
        padding-top: 2rem;
    }

    .about-image img {
        width: 90% !important;
        max-width: 350px !important;
        margin-bottom: 0 !important;
    }

    .about-content {
        order: 2;
        /* Content second */
        padding: 2rem 1.5rem !important;
        text-align: center !important;
    }

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

    .about-text {
        max-width: 100% !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: 650px !important;
    /* Decrease width to match visual */
    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;
}

/* Ensure Textarea Matches input style */
.contact-form-wrapper textarea {
    min-height: 180px;
}

/* Handle Form Item Layout (Grid like screenshot) */
.contact-form-wrapper .js-form-item,
.contact-form-wrapper .form-item {
    display: flex;
    align-items: center;
    /* Align label and input */
    justify-content: center;
    /* Center the form item in the container */
    gap: 20px;
    margin-bottom: 25px;
}

.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%;
    max-width: 1200px;
    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: 0.7em;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    /* Match menu text color */
    /* Ensure it doesn't break layout */
    position: relative;
    top: -1px;
}

/* 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 */
    }
}
/* Custom Hero Front Fix */
.hero-front {
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}
.hero-front::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
}
.hero-front .region-hero {
    z-index: 2;
    position: relative;
    width: 100%;
}