.page-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
            padding-top: 3.5rem; /* 56px / 16px */
        }

        .page-header {
            width: 100%;
            max-width: 1279px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(239, 243, 244, 1);
            font-weight: 600;
            padding: 2.375rem 5rem 0 2.1875rem; /* 38px, 80px, 35px */
            box-sizing: border-box;
            text-align: center;
        }

        @media (max-width: 991px) {
            .page-header {
                padding: 0 1.25rem; /* 20px */
            }
        }

        .header-content {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 125px;
        }

        .header-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 608px;
        }

        .press-release-title {
            font-size: clamp(1.5rem, 4vw, 2.1875rem); /* 24px to 35px */
            margin: 0;
            color: var(--text-dark);
        }

        .header-divider {
            width: 136px;
            height: auto;
            margin-top: 0.8125rem; /* 13px */
        }

        .main-title {
            font-size: clamp(1.5rem, 4vw, 1.875rem); /* 24px to 30px */
            margin: 0.875rem 0 0 0; /* 14px */
            color: var(--text-dark);
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 0.3125rem; /* 5px */
            margin-top: 0.9375rem; /* 15px */
            font-size: 1.125rem; /* 18px */
            font-weight: 400;
            color: var(--text-dark);
        }

        .breadcrumb-arrow {
            width: 0.375rem; /* 6px */
            height: auto;
        }

        .profile-image {
            /* width: clamp(7.5rem, 15vw, 121px); */
            aspect-ratio: 0.98;
            border-radius: 50%;
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            z-index: 10;
            margin-top: 1.9375rem; /* 31px */
            margin-bottom: -1.6875rem; /* -27px */
            width : 190px;
        }

        .main-content {
            width: 100%;
            max-width: 1247px;
            /* padding: 0 1.25rem; Let Bootstrap container handle padding */
            box-sizing: border-box;
            z-index: 0;
            margin-top: -4.4375rem; /* Pulls content up */
        }

        .article-content {
            /* REMOVED: flex: 1 1 56%; Bootstrap handles the width now */
            display: flex;
            flex-direction: column;
        }

        .article-content > div {
            margin-top: 5.5rem; /* 88px */
        }

        @media (max-width: 991px) {
            .article-content > div {
                margin-top: 2.5rem; /* 40px */
            }
        }

        /* .article-header {
            display: flex;
            width: 112px;
            justify-content: flex-end;
            align-items: center;
            border: 1px solid rgba(40, 29, 82, 0.47);
            border-radius: 5px;
            padding-left: 0.8125rem;
            font-size: 0.9375rem;
            font-weight: 700;
        } */
        .article-header{
            position: relative;
            right: -670px;
            width: 112px;
            justify-content: flex-end;
            /* border: 1px solid rgba(40, 29, 82, 0.47); */
            border-radius: 5px;
            padding-left: 0.8125rem;
            font-size: 0.9375rem;
            font-weight: 700;
        }

        .refresh-button {
            display: flex;
            align-items: center;
            gap: 1rem; /* 16px */
            background: none;
            border: 1px solid rgba(40, 29, 82, 0.47);
            color: var(--primary-color);
            cursor: pointer;
            padding: 0;
            font-size: 0.9375rem; /* 15px */
            font-weight: 700;
        }

        .refresh-button img {
            width: 2.1875rem; /* 35px */
            height: auto;
        }

        .article-title-section {
            background-color: var(--bg-medium);
            border-radius: 10px;
            padding: 0.8125rem 1.4375rem; /* 13px, 23px */
            margin-top: 0.9375rem; /* 15px */
            text-align: justify;
            font-size: 20px;
        }

        .article-title {
            font-size: clamp(1.5rem, 3vw, 1.75rem); /* 24px to 28px */
            font-weight: 600;
            margin: 0;
            color: var(--text-dark);
        }

        .summary-heading {
            color: var(--secondary-color);
            font-size: clamp(1.25rem, 3vw, 1.5625rem); /* 20px to 25px */
            font-weight: 400;
            margin: 1.5rem 0 0 0; /* 24px */
        }

        .article-paragraph {
            font-size: 1.125rem; /* 18px */
            font-weight: 300;
            margin: 0.9375rem 0 0 0; /* 15px */
            color: var(--text-dark);
        }

        .sidebar {
            /* REMOVED: flex: 1 1 44%; Bootstrap handles the width now */
            display: flex;
            flex-direction: column;
        }

        .sidebar-content,
        .interaction-section,
        .company-info,
        .photos-section {
            border-radius: 10px;
            box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
            padding: 1.125rem 1.1875rem; /* 18px, 19px */
            background-color: var(--bg-light);
            border: 1px solid var(--bg-page);
        }

        .sidebar .sidebar-content {
            margin-top: 5.5rem; /* 88px */
        }

        @media (max-width: 991px) {
            .sidebar .sidebar-content {
                margin-top: 2.25rem; /* 36px */
            }
        }

        .sidebar-title {
            color: var(--primary-color);
            font-size: 1.875rem; /* 30px */
            font-weight: 600;
            margin: 0;
        }

        .interaction-section {
            margin-top: 1.0625rem; /* 17px */
            padding: 0.625rem 0.9375rem; /* 10px, 15px */
        }

        .rating-share,
        .views-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .rate-text,
        .share-text {
            font-size: 1.0625rem; /* 17px */
            font-weight: 600;
            color: var(--text-dark);
        }

        .share-section {
            display: flex;
            align-items: center;
            gap: 0.8125rem; /* 13px */
            font-size: 1rem; /* 16px */
            font-weight: 300;
        }

        .share-icon,
        .views-icon {
            width: 1.625rem; /* 26px */
            height: auto;
        }

        .views-section {
            margin-top: 0.625rem; /* 10px */
        }

        .rating-stars {
            width: 8.875rem; /* 142px */
            height: auto;
        }

        .views-info {
            display: flex;
            align-items: center;
            gap: 1.1875rem; /* 19px */
            font-size: 1rem; /* 16px */
            font-weight: 300;
            color: var(--text-dark);
        }

        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 0.875rem; /* 14px */
            margin-top: 0.875rem; /* 14px */
        }

        .watch-video-btn,
        .download-btn,
        .quick-chat-btn {
            border-radius: 5px;
            border: 1px solid rgba(40, 29, 82, 0.47);
            background: #fff;
            color: #070b43;
            font-weight: 700;
            cursor: pointer;
            padding: 1.0625rem 2.6875rem; /* 17px, 43px */
            font-size: 0.6875rem; /* 11px */
            white-space: nowrap;
        }
        .watch-video-btn,
        .download-btn,
        .quick-chat-btn span{
            font-size: 18px;
            font-weight: 700;
        }
        .watch-video-btn,
        .download-btn,
        .quick-chat-btn i{
            font-size: 18px;
        }
        .download-btn {
            display: flex;
            align-items: center;
            gap: 0.3125rem; /* 5px */
            padding: 0.75rem 0.8125rem; /* 12px, 13px */
        }

        /* .download-btn img {
            width: 1.375rem;
            height: auto;
        } */

        .quick-chat-btn {
            display: flex;
            align-items: center;
            gap: 0.4375rem; /* 7px */
            margin-top: 0.6875rem; /* 11px */
            padding: 0.8125rem 1.0625rem; /* 13px, 17px */
        }

        .quick-chat-btn img {
            width: 1.25rem; /* 20px */
            height: auto;
        }

        .company-info {
            margin-top: 0.75rem; /* 12px */
            padding: 1.3125rem 1.4375rem; /* 21px, 23px */
        }

        .info-row,
        .contact-row {
            display: flex;
            align-items: center;
            margin-top:10px;
            gap: 2.125rem; /* 34px */
        }

        .contact-row {
            align-items: flex-start;
            gap: 2.375rem; /* 38px */
            margin-top: 0.8125rem; /* 13px */
        }

        .info-label {
            font-size: 1rem; /* 16px */
            font-weight: 600;
            color: var(--text-dark);
            flex-shrink: 0;
        }

        .contact-labels {
            display: flex;
            flex-direction: column;
            gap: 1.625rem; /* 26px */
        }

        .info-value {
            flex-grow: 1;
            padding: 0.5rem 0.625rem; /* 8px, 10px */
            border-radius: 5px;
            background-color: rgba(77, 34, 85, 0.11);
            color: var(--primary-color);
            font-size: 0.6875rem; /* 11px */
            font-weight: 600;
            border: 1px solid rgba(232, 232, 232, 1);
        }

        .contact-values .info-value {
            margin-top: 0;
        }

        .contact-values .info-value:first-child {
            margin-bottom: 0.5rem;
        }

        .contact-values .info-value:last-child {
            margin-top: 1.0625rem; /* 17px */
        }

        .map-image {
            width: 100%;
            height: auto;
            margin-top: 1.1875rem; /* 19px */
        }

        .location-image {
            width: 9.3125rem; /* 149px */
            height: auto;
            margin-top: 1.125rem; /* 18px */
        }

        .final-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.875rem; /* 14px */
            margin-top: 1.25rem; /* 20px */
        }

        .primary-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.75rem 3rem 0.375rem; /* 12px, 48px, 6px */
            border-radius: 5px;
            background-color: var(--primary-color);
            border: 1px solid rgba(40, 29, 82, 0.47);
        }

        .send-enquiry-btn {
            color: var(--text-light);
            font-size: 1rem; /* 16px */
            font-weight: 600;
            background: none;
            border: none;
            cursor: pointer;
            margin: 0;
            padding: 0;
        }

        .watch-video-text {
            color: var(--primary-color);
            font-size: 0.6875rem; /* 11px */
            font-weight: 700;
            margin-top: -0.375rem; /* -6px */
        }

        .review-btn {
            padding: 0.8125rem 3.375rem; /* 13px, 54px */
            border-radius: 5px;
            border: 1px solid rgba(40, 29, 82, 0.47);
            background: none;
            color: var(--primary-color);
            font-size: 1rem; /* 16px */
            font-weight: 600;
            cursor: pointer;
        }

        .media-section {
            width: 100%;
            max-width: 1279px;
            background-color: var(--bg-medium);
            border-radius: 10px;
            margin-top: 5.1875rem; /* 83px */
            padding: 1.5625rem 2.5rem; /* 25px, 40px */
            box-sizing: border-box;
        }

        @media (max-width: 991px) {
            .media-section {
                margin-top: 2.5rem; /* 40px */
                padding: 1.25rem; /* 20px */
            }
        }

        .media-header,
        .photos-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.25rem; /* 20px */
        }

        .media-title {
            font-size: 1.8125rem; /* 29px */
            font-weight: 600;
            margin: 0.6875rem 0 0 0; /* 11px */
            color: var(--text-dark);
        }

        .new-post-btn {
            padding: 10px; /* 16px, 44px */
            border-radius: 5px;
            background-color: var(--secondary-color);
            font-size: 1rem; /* 16px */
            font-weight: 600;
            border: none;
            cursor: pointer;
            width: 130px;
            text-align: center;
            color: #fff !important;
            border-radius: 5px;
        }

        .photos-section {
            margin-top: 1.5625rem; /* 25px */
            padding: 1.4375rem 1.5625rem 2.4375rem; /* 23px, 25px, 39px */
        }

        @media (max-width: 991px) {
            .photos-section {
                padding: 1.25rem; /* 20px */
            }
        }

        .photos-title {
            font-size: 1.25rem; /* 20px */
            font-weight: 600;
            margin: 0;
            color: var(--text-dark);
        }

        .see-all-btn {
            padding: 0.8125rem 1.25rem; /* 13px, 20px */
            border-radius: 4px;
            border: 1px solid rgba(40, 29, 82, 0.47);
            background: #f6f6f6;
            color: #000;
            font-size: 0.875rem; /* 14px */
            font-weight: 600;
            cursor: pointer;
            text-decoration : none;
        }

        /* .photo-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.25rem;
            margin-top: 1.4375rem;
        } */
         .photo-gallery {
            margin-top: 1.4375rem; /* keep spacing */
        }

        /* .photo-card {
            border-radius: 10px;
            background-color: var(--bg-page);
            padding: 1.0625rem 1.375rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        } */
         .photo-card {
            border-radius: 10px;
            background-color: var(--bg-page);
            padding: 1.0625rem 1.375rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            height: 100%; /* make cards equal height */
        }

        .photo-container {
            position: relative;
            aspect-ratio: 1.914;
            overflow: hidden;
            border-radius: 5px;
        }

        .photo-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .photo-main {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .photo-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.5625rem; /* 9px */
            font-size: 0.75rem; /* 12px */
            font-weight: 700;
            color: var(--text-dark);
        }

        .photo-avatar {
            width: 1.375rem; /* 22px */
            height: 1.375rem; /* 22px */
            border-radius: 50%;
            box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.25);
        }

        .photo-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1.0625rem; /* 17px */
            padding: 0.25rem 0.9375rem; /* 4px, 15px */
            border-radius: 37px;
            background-color: var(--primary-color);
        }

        .action-icons {
            display: flex;
            gap: 0.6875rem; /* 11px */
        }

        .action-icons img {
            width: 1.375rem; /* 22px */
            height: auto;
        }

        .page-footer {
            background-color: var(--primary-color);
            width: 100%;
            margin-top: 2.5rem; /* 40px */
            padding-top: 1.625rem; /* 26px */
            overflow: hidden;
        }

        .footer-content {
            width: 100%;
            max-width: 1072px;
            margin: 0 auto;
            padding: 0 1.25rem; /* 20px */
            box-sizing: border-box;
        }

        .footer-main {
            display: flex;
            flex-wrap: wrap;
            gap: 1.25rem; /* 20px */
        }

        @media (max-width: 991px) {
            .footer-main {
                flex-direction: column;
                gap: 2.5rem; /* 40px */
            }
        }

        .company-section {
            flex: 1 1 25%;
        }

        .company-logo {
            width: 14.4375rem; /* 231px */
            height: auto;
        }

        .company-description {
            color: var(--text-light);
            font-size: 0.875rem; /* 14px */
            font-weight: 400;
            line-height: 1.6;
            margin-top: 0.8125rem; /* 13px */
        }

        .learn-more {
            color: var(--secondary-color);
            cursor: pointer;
        }

        .footer-links {
            flex: 1 1 75%;
        }

        .footer-columns {
            width: 100%;
            color: var(--text-light);
        }

        .footer-headings {
            display: flex;
            flex-wrap: wrap;
            gap: 2.5rem 3.4375rem; /* 40px, 55px */
            font-size: 1.1875rem; /* 19px */
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .footer-headings {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 1.5rem;
            }
        }

        .footer-headings h4 {
            margin: 0;
            font-size: clamp(1rem, 2vw, 1.1875rem);
        }

        .footer-lists {
            display: flex;
            flex-wrap: wrap;
            gap: 1.25rem 2.5rem; /* 20px, 40px */
            margin-top: 1.5625rem; /* 25px */
            font-size: 0.8125rem; /* 13px */
            font-weight: 400;
        }

        .services-list,
        .outsource-list,
        .sectors-list {
            flex-basis: 200px;
        }

        .services-list p,
        .outsource-list p,
        .sectors-list p {
            margin: 0;
        }

        .services-list p:not(:first-child),
        .outsource-list p:not(:first-child) {
            margin-top: 0.4375rem; /* 7px */
        }

        .sectors-list {
            font-size: 0.875rem; /* 14px */
        }

        .sectors-list p:not(:first-child) {
            margin-top: 0.5rem; /* 8px */
        }

        .social-icons {
            display: flex;
            flex-direction: column;
            gap: 0.125rem; /* 2px */
        }

        .social-icons img {
            width: 1.5rem; /* 24px */
            height: auto;
            margin-top: 0.5rem;
        }

        .footer-bottom {
            background-color: rgba(0, 0, 0, 1);
            width: 100%;
            margin-top: 3.1875rem; /* 51px */
            padding: 1.875rem 4.375rem; /* 30px, 70px */
            box-sizing: border-box;
            color: var(--text-light);
            text-align: center;
            font-size: 1.125rem; /* 18px */
        }

        @media (max-width: 991px) {
            .footer-bottom {
                margin-top: 2.5rem; /* 40px */
                padding: 1.25rem; /* 20px */
            }
        }
.action-buttons button {
            /* Flex properties for equal width */
            flex: 1; /* Allows each button to grow equally */

            /* Prevent text wrapping */
            white-space: nowrap;

            /* Center content within the button */
            justify-content: center;

            /* Core minimal style */
            background-color: #fff;
            color: #070b43;
            border: 1px solid #070b43;

            /* Layout and Spacing */
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1rem; /* Adjusted padding for better vertical space */

            /* Typography and Feel */
            font-size: 1rem;
            font-weight: 500;
            border-radius: 6px;
            cursor: pointer;

            /* Smooth transition for hover effect */
            transition: all 0.2s ease-in-out;
        }

        .action-buttons button i {
            font-size: 1.1rem;
        }

        .action-buttons button:hover {
            background-color: #070b43;
            color: #fff;
        }
.company-info {
    margin-top: 0.75rem; /* 12px */
    padding: 1.3125rem 1.4375rem; /* 21px, 23px */
}

.info-row {
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 1rem; /* Reduce gap, alignment handled by fixed width */
}

.info-label {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: var(--text-dark);
    flex-shrink: 0;
    width: 120px; /* ✅ Fixed width ensures alignment */
    text-transform: uppercase;
}

.info-value {
    flex-grow: 1;
    padding: 0.5rem 0.625rem; /* 8px, 10px */
    border-radius: 5px;
    background-color: rgba(77, 34, 85, 0.11);
    color: var(--primary-color);
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    border: 1px solid rgba(232, 232, 232, 1);
}
.final-actions {
            display: flex;
            flex-wrap: wrap; /* Allows buttons to stack on small screens */
            gap: 1rem; /* Space between buttons */
        }

        /* Base styles for ALL buttons */
        .btn {
            /* padding: 0.75rem 2rem; Vertical and horizontal space */
            font-size: 1rem;
            font-weight: 600;
            border-radius: 8px; /* Rounded corners */
            border: 2px solid transparent; /* Prevents size jump on hover */
            cursor: pointer;
            text-align: center;
            transition: all 0.2s ease-in-out; /* Smooth hover effect */
        }

        /* Style for the PRIMARY button (yellow) */
        .btn-primary {
            background-color: #fcd900; /* A vibrant yellow */
            color: #111;
            border-color: #fcd900;
        }

        .btn-primary:hover {
            background-color: #e3c400; /* Slightly darker on hover */
            border-color: #e3c400;
        }

        /* Style for the SECONDARY button (outline) */
        .btn-secondary {
            background-color: #ffffff;
            color: #070b43; /* Dark navy text */
            border-color: #d1d5db; /* Light grey border */
        }

        .btn-secondary:hover {
            background-color: #070b43;
            color: #ffffff;
            border-color: #070b43;
        }
.media-section {
        width: 100%;
        max-width: 1279px;
        background-color: var(--bg-medium);
        border-radius: 10px;
        margin-top: 5.1875rem; /* 83px */
        padding: 1.5625rem 2.5rem; /* 25px, 40px */
        box-sizing: border-box;
    }

    @media (max-width: 991px) {
        .media-section {
            margin-top: 2.5rem; /* 40px */
            padding: 1.25rem; /* 20px */
        }
    }

    .media-header,
    .photos-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.25rem; /* 20px */
    }

    .media-title {
        font-size: 1.8125rem; /* 29px */
        font-weight: 600;
        margin: 0.6875rem 0 0 0; /* 11px */
        color: var(--text-dark);
    }

    .new-post-btn {
        padding: 10px; /* 16px, 44px */
        border-radius: 5px;
        background-color: var(--secondary-color);
        font-size: 1rem; /* 16px */
        font-weight: 600;
        border: none;
        cursor: pointer;
        width: 130px;
        text-align: center;
        color: #fff !important;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        transition: background-color 0.3s ease;
    }

    .new-post-btn:hover {
        background-color: #c01a4a; /* Darker shade of secondary color */
        color: #fff;
        text-decoration: none;
    }

    .photos-section {
        margin-top: 1.5625rem; /* 25px */
        padding: 1.4375rem 1.5625rem 2.4375rem; /* 23px, 25px, 39px */
    }

    @media (max-width: 991px) {
        .photos-section {
            padding: 1.25rem; /* 20px */
        }
    }

    .photos-title {
        font-size: 1.25rem; /* 20px */
        font-weight: 600;
        margin: 0;
        color: var(--text-dark);
    }

    .see-all-btn {
        padding: 0.8125rem 1.25rem; /* 13px, 20px */
        border-radius: 4px;
        border: 1px solid rgba(40, 29, 82, 0.47);
        background: none;
        color: var(--primary-color);
        font-size: 0.875rem; /* 14px */
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .see-all-btn:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    .photo-gallery {
        margin-top: 1.4375rem; /* 23px */
    }

    .photo-card {
        border-radius: 10px;
        background-color: var(--bg-page);
        padding: 1.0625rem 1.375rem; /* 17px, 22px */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .photo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .photo-container {
        position: relative;
        aspect-ratio: 1.914;
        overflow: hidden;
        border-radius: 5px;
    }

    .photo-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .photo-main {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .photo-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5625rem; /* 9px */
        font-size: 0.75rem; /* 12px */
        font-weight: 700;
        color: var(--text-dark);
    }

    .photo-avatar {
        width: 1.375rem; /* 22px */
        height: 1.375rem; /* 22px */
        border-radius: 50%;
        box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.25);
    }

    .photo-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.0625rem; /* 17px */
        padding: 0.25rem 0.9375rem; /* 4px, 15px */
        border-radius: 37px;
        background-color: var(--primary-color);
    }

    .action-icons {
        display: flex;
        gap: 0.6875rem; /* 11px */
    }

    .action-icons img {
        width: 1.375rem; /* 22px */
        height: auto;
        transition: transform 0.3s ease;
    }

    .action-icons img:hover {
        transform: scale(1.1);
    }

    /* Bootstrap grid adjustments */
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    .col-12, .col-sm-6, .col-md-3 {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .media-header, .photos-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .new-post-btn, .see-all-btn {
            width: 100%;
            margin-top: 10px;
        }

        .photo-card {
            margin-bottom: 20px;
        }
    }

    @media (max-width: 576px) {
        .media-section {
            padding: 1rem;
        }

        .photos-section {
            padding: 1rem;
        }

        .photo-gallery .row {
            margin-left: -5px;
            margin-right: -5px;
        }

        .col-12, .col-sm-6, .col-md-3 {
            padding-left: 5px;
            padding-right: 5px;
        }
    }
 .activity-section {
            margin-top: 100px;
            padding: 20px 15px;
        }

        @media (min-width: 768px) {
            .activity-section {
                margin-top: 158px;
                padding: 9px 31px 33px;
            }
        }

        .activity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .filter-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .tab-btn {
            color: #000;
            padding: 8px 16px;
            border: 1px solid #dee2e6;
            background: #f6f6f6;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tab-btn:hover, .tab-btn.tab-active {
            color: #000 !important;
            background-color: #ffffffff;
            border-color: #000000ff;
        }

        .new-post-btn {
            padding: 8px 16px;
            background-color: #eb1b57;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .new-post-btn:hover {
            background-color: #eb1b57;
        }

        .activity-divider {
            width: 100%;
            margin: 20px 0;
            display: block;
        }

        .activity-title-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .activity-title {
            font-size: 22px;
            margin: 0;
        }

        .see-all-btn {
            background: #f6f6f6;
            border: 1 solid #000;
            color: #000;
            cursor: pointer;
            text-decoration: underline;
        }

        .business-journey-gallery {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 15px;
            scrollbar-width: thin;
        }

        .business-journey-gallery::-webkit-scrollbar {
            height: 6px;
        }

        .business-journey-gallery::-webkit-scrollbar-thumb {
            background-color: #c1c1c1;
            border-radius: 10px;
        }

        .gallery-item {
            min-width: 250px;
            flex: 0 0 auto;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        .gallery-image-wrapper {
            width: 100%;
            height: 180px;
            overflow: hidden;
        }

        .gallery-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .gallery-item:hover .gallery-image {
            transform: scale(1.05);
        }

        .gallery-caption {
            padding: 10px;
            margin: 0;
            font-size: 14px;
            text-align: center;
            background-color: white;
        }

        .activity-description {
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        @media (min-width: 768px) {
            .activity-description {
                flex-direction: row;
                gap: 59px;
                margin-top: 40px;
            }
        }

        .description-main {
            font-size: 16px;
            font-weight: 600;
            margin: 0;
        }

        .description-details {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        @media (min-width: 768px) {
            .description-details {
                flex-direction: row;
                gap: 18px;
            }
        }

        .description-details p {
            margin: 0;
            font-size: 14px;
        }

        /* Carousel Styles */
        .carousel-item {
            padding: 10px;
        }

        .carousel-control-prev, .carousel-control-next {
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .carousel:hover .carousel-control-prev,
        .carousel:hover .carousel-control-next {
            opacity: 1;
        }

        /* Tab Content */
        .tab-content {
            margin-top: 20px;
        }

        .tab-pane {
            display: none;
        }

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

        /* Activity Posts Grid */
        .activity-posts {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 20px;
        }

        @media (min-width: 768px) {
            .activity-posts {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .post-card {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .post-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        .post-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .post-content {
            padding: 15px;
        }

        .post-title {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .post-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #6c757d;
        }
/* --- Main Container for the buttons --- */
.pagination-nav {
    display: flex;
    justify-content: center; /* Aligns buttons in the center */
    gap: 16px; /* Creates space between the two buttons */
    margin: 49px 0 0;
}

/* --- General styling for BOTH buttons --- */
.nav-btn {
    /* Flexbox for aligning icon and text perfectly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */

    /* Sizing and Spacing to match the image */
    min-width: 160px;
    padding: 14px 28px;

    /* Appearance & Font */
    font-size: 1rem; /* 16px */
    font-weight: 500;
    text-align: center;
    border-radius: 6px; /* Slightly rounded corners */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* --- Specific styling for the 'Back' button --- */
.prev-btn {
    background-color: #ffffff; /* White background */
    color: #080e4a; /* Dark purple text */
    border: 1px solid #080e4a; /* Light greyish-purple border */
}

/* --- Specific styling for the 'Next' button --- */
.next-btn {
    background-color: rgba(255, 255, 255, 1) !important;
    color: #080e4a; /* White text */
    border: 1px solid #080e4a;
}

/* --- Simple Hover Effects --- */
.prev-btn:hover {
    background-color: #e1e1e1ff; /* Very light purple tint on hover */
    border-color: #080e4a; /* Darken border on hover for emphasis */
    color: #080e4a;
}

.next-btn:hover {
    background-color: #e1e1e1ff; /* Very light purple tint on hover */
    border-color: #080e4a; /* Darken border on hover for emphasis */
    color: #080e4a;
}

.next-btn:hover {
    opacity: 0.9; /* Slightly fade the button on hover */
}

/* --- Icon styling (recommended) --- */
.nav-icon {
    width: 1em; /* Makes the icon size relative to the font size */
    height: 1em;
}

/* IMPORTANT: If your right-arrow icon is not already white,
   this rule will force it to be white to match the button style. */
/* .next-btn .nav-icon {
    filter: brightness(0) invert(1);
} */
/* Section Styles */
.similar-ads-section {
    width: 100%; /* Allow Bootstrap container to manage width */
}

.similar-ads-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 20px; /* Space between header and grid */
}

.similar-icon {
    width: 30px; /* Adjust size as needed */
    height: 30px;
}

/* Ad Card Styles (Applied to each grid item) */
.ad-card {
    display: flex;
    gap: 14px;
    /* Styles moved from .similar-ads-content */
    border-radius: 10px;
    border: 1px solid rgba(40, 29, 82, 0.25);
    padding: 12px;
    width: 100%; /* Ensure card fills the column */
}

/* Internal Card Components (Largely Unchanged) */
.ad-images {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-ad-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.09);
    padding: 3px;
    flex-shrink: 0;
}

.ad-primary-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.ad-thumbnails {
    display: flex;
    gap: 2px;
    margin-top: 5px;
}

.ad-thumbnail {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    object-fit: cover;
}

.ad-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ad-title {
    font-size: 0.8rem; /* Sligh tly increased for better readability */
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.ad-industry,
.ad-service {
    font-size: 0.7rem; /* Slightly increased */
    font-weight: 400;
    margin: 5px 0 0;
}

.industry-label,
.service-label {
    color: var(--accent-color, #555);
}

.ad-meta {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.ad-views {
    background-color: var(--primary-color, #f0f0f0);
    color: var(--background-color, #333);
    font-size: 0.65rem;
    font-weight: 300;
    padding: 4px 6px;
    border-radius: 2px;
}

.ad-location {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid #ccc;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 3px;
}

.location-icon {
    width: 8px;
    height: 8px;
}

/* BREADCRUMBS CSS */
/* Base Hero Section Styles */
.hero-section {
    /* Key Fix: Use 100% width to be fluid, max-width to constrain it */
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 56px 20px 0;
    height: 131px;
}

.hero-container {
    /* Key Fix: Replaced the <img> with a CSS background for responsiveness */
    background-size: cover !important; /* This makes the image scale perfectly */

    border-radius: 10px;

    /* Key Fix: Use padding and flexbox to control height and alignment */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 20px; /* Controls the height of the banner */
    text-align: center;
    color: #fff;
    position: relative;
}

/* Content inside hero-container */
.hero-content {
    /* No special positioning needed now, flexbox handles it */
    width: 100%;
}

.hero-title {
    font-size: 35px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 16px 0; /* Replaced margin-top on underline with margin-bottom here */
}

.hero-underline {
    width: 150px;
    margin-bottom: 24px;
}

.hero-breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the breadcrumbs */
    flex-wrap: wrap; /* Allow items to wrap on small screens */
    gap: 10px;
}

/* Key Fix: Moved inline styles to CSS for better control */
.hero-breadcrumbs a,
.hero-breadcrumbs span {
    color: #fff; /* Use direct color instead of var if it's not defined elsewhere */
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
}

.hero-breadcrumbs a:hover {
    text-decoration: underline;
}

.hero-breadcrumbs img {
    width: 25px;
    height: auto; /* Maintain aspect ratio */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .hero-section {
        padding: 30px 15px 0; /* Adjust padding for mobile */
    }

    .hero-container {
        padding: 40px 15px; /* Less vertical space on mobile */
    }

    .hero-title {
        font-size: 28px; /* Slightly smaller title */
    }

    .hero-breadcrumbs {
        gap: 8px; /* Reduce gap between items */
    }

    .hero-breadcrumbs a,
    .hero-breadcrumbs span {
        font-size: 14px; /* Smaller font for better wrapping */
    }

    .hero-breadcrumbs img {
        width: 18px; /* Smaller arrow icon */
    }
}


@media only screen and (max-width: 600px) {
    .header-content{
        margin-top: 45px;
        margin-bottom: 40px;
    }.article-header{
        .article-header
        position: relative;
        right: -275px !important;

    }
}
.final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem; /* 14px */
  margin-top: 1.25rem; /* 20px */
}

/* Buttons common style */
.final-actions .btn {
  flex: 1 1 50%;         /* make each take 50% width on desktop */
  padding: 12px;         /* equal padding */
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border-radius: 5px;
  height: 48px;          /* equal height */
}

/* First button custom color */
.final-actions .btn:first-child {
  background-color: #f5e532 !important;
  color: #000;
  border: 1px solid #ddd;
}

/* Responsive: Stack vertically on small screens */
@media (max-width: 768px) {
  .final-actions {
    flex-direction: column;
  }
  .final-actions .btn {
    flex: 1 1 100%;   /* full width on mobile */
  }.profile-image{
    margin-top: -0.0625rem;
  }.tab-btn{
    width: 100%;
  }.info-value {
    overflow: hidden;
  }.download-btn{
    width: 100% !important;
  }
  .quick-chat-btn{
    width: 100% !important;
    text-align: center !important;
  }
  .quick-chat-btn i,span{
    text-align: center !important;
  }.final-actions .btn{
    width: 100% !important;
  }
}