.page-general .main-content-area {
    max-width: 1320px;
    margin: 0 0 80px;
    /* padding: 0 20px; */
}

/* Base Row Logic */
.general-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 100px;
    align-items: center;
}

/* The Flip */
.row-reverse {
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
}

/* Text Content Styling */
.general-text-content {
    /* Text gets slightly more space than the image */
    width: 570px;
    max-width: 100%;
}

.general-main-title,
.ceo-title {
    font-size: 32px;
    font-weight: 700;
    color: #373536;
    margin-bottom: 10px;
    position: relative;
}

.sub-title-accent {
    font-weight: 400;
    font-size: 32px;
    line-height: 38px;
    color: #373536;
}

.general-paragraph,
.ceo-message p {
    font-size: 18px;
    line-height: 1.45;
    color: #373536;
    font-weight: 400;
}

/* Image Styling */
.general-image-wrapper {
    display: flex;
    height: 100%;
    width: 570px;
    max-width: 100%;
    width: 720px;
}

.row-reverse .general-image-wrapper {
    width: 570px;
}

.row-reverse .general-text-content {
    width: 720px;
}


.general-row .general-text-content:only-child,
.general-row:not(:has(.general-image-wrapper)) .general-text-content {
    width: 100%;
}


.rounded-general-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    /* Matches the JPG rounded corners */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
    /* Soft lift */
    display: block;
}

/* CEO Specifics */
.ceo-signature {
    margin-top: 30px;
    font-size: 18px;
    /* Brand lime accent line */
    font-weight: 400;
}

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

    .general-row,
    .row-reverse {
        flex-direction: column;
        gap: 30px;
    }

    .general-text-content {
        order: 1;
    }

    .general-image-wrapper {
        order: 2;
        width: 100%;
    }
}

/* --- Quality & ISO Section Specifics --- */
.iso-section {
    align-items: center;
    /* Vertical center alignment for badge vs text */
    gap: 60px;
}

/* The Grid Container on the Right */
.iso-grid-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.iso-top-row {
    display: flex;
    gap: 50px;
    justify-content: center;
}

.iso-badge-item {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iso-badge-item img {
    width: auto;
    margin-bottom: 15px;
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

.iso-badge-item p {
    font-size: 18px;
    line-height: 1.4;
    color: #373536;
    font-weight: 500;
}

/* Bottom SII Badge row */
.iso-bottom-row {
    max-width: 480px;
}

.sii-badges-img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.iso-footer-note {
    font-size: 18px;
    font-weight: 500;
    color: #373536;
}

/* --- Quality List (The Bullet Points) --- */
.quality-text,
.quality-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    font-size: 18px;
    color: #373536;
}

.quality-list {
    padding-inline: 25px;
}

.quality-list li {
    margin-bottom: 10px;
    position: relative;
    padding-right: 25px;
    /* Space for the custom bullet */
    line-height: 1.4;
}

/* Custom Lime Green Bullet */
.quality-list li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background-color: #373536;
    /* Brand Lime */
    border-radius: 50%;
}

/* --- Story Section (Reverse Logic) --- */
.row-reverse {
    flex-direction: row-reverse;
}

.row-reverse .general-text-content {
    width: 720px;
    /* Wider text for the story */
}

.row-reverse .general-image-wrapper {
    width: 570px;
    /* Smaller image for the story */
}

.row-small {
    display: flex; /* Ensures flexbox is active */
    align-items: center;
    max-width: 1163px;
    width: 100%;
    justify-content: space-between; /* Pushes text to left, image to right */
    gap: 13px; /* Optional: Adjusts the math gap (1163px max - 570px image - 580px text = 13px leftover) */
}

.row-small .general-text-content {
    /* 1. Tells the text to grow and fill 100% of the row if the image is missing */
    flex-grow: 1; 
    
    /* 2. Cleans up the conflicting widths so it behaves nicely with flexbox */
    width: auto; 
    max-width: 580px; /* Prevents text from getting wider than 580px WHEN the image is there */
}

.row-small .general-image-wrapper {
    /* Prevents the image container from shrinking below or growing past 570px */
    flex: 0 0 570px; 
    width: 570px;
}

/* AUTOMATIC FULL WIDTH TRICK: 
   If the image wrapper doesn't exist in the HTML, remove the max-width restriction on the text */
.row-small:not(:has(.general-image-wrapper)) .general-text-content {
    max-width: 100%;
}

/* Image Polish */
.rounded-general-img {
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}

.rounded-general-img:hover {
    transform: translateY(-5px);
}

/* --- Mobile Fixes --- */
@media (max-width: 992px) {
    .general-row {
        flex-direction: column !important;
        align-items: center;
        gap: 40px;
    }

    .general-text-content,
    .general-image-wrapper,
    .row-reverse .general-text-content,
    .row-reverse .general-image-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .iso-top-row {
        flex-wrap: wrap;
        gap: 30px;
    }

    .quality-list li {
        text-align: start;
    }
}


.general-info-section {
    max-width: 1163px;
    margin: 180px 0 60px;
}

.info-pods-container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    /* Spacing between the pods */
}

/* Base Pod Styling */
.info-pod {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    text-align: center;
}

.info-pod:hover {
    transform: translateY(-5px);
    /* Lift effect */
}

/* The Color-Coded Icon Frames */
.icon-frame {
    width: 100%;
    aspect-ratio: 1;
    /* Keeps them perfectly square */
    border-radius: 25px;
    /* Your standardized corner radius */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 30px;
    /* Space around the icon */
    transition: box-shadow 0.3s ease;
    height: 303px;
}

/* sampling colors from the provided JPG... */

/* Lime Green Family */
.pod--lime .icon-frame {
    background-color: #A9B7241A;
    /* Faint Pastel Yellow/Lime */
}

.pod--lime .pod-icon {
    /* filter: invert(65%) sepia(85%) saturate(300%) hue-rotate(35deg) brightness(100%) contrast(100%); */
    /* Converts black SVG to brand lime */
}

/* Teal Blue Family */
.pod--teal .icon-frame {
    background-color: #72CAC91A;
    /* Faint Pastel Teal */
}

.pod--teal .pod-icon {
    /* filter: invert(58%) sepia(70%) saturate(450%) hue-rotate(130deg) brightness(95%) contrast(100%); */
    /* Converts black SVG to brand teal */
}

/* Orange Family */
.pod--orange .icon-frame {
    background-color: #F15A221A;
    /* Faint Pastel Orange/Peach */
}

.pod--orange .pod-icon {
    /* filter: invert(45%) sepia(90%) saturate(1200%) hue-rotate(10deg) brightness(100%) contrast(105%); */
    /* Converts black SVG to brand orange */
}

/*Typography */
.pod-title {
    font-size: 22px;
    font-weight: 500;
    color: #373536;
    margin: 0;
    line-height: 1.3;
}

/* Focus state for keyboard users */
.info-pod:focus-within .icon-frame {
    outline: 3px solid #F1B724;
    /* Yellow accessibility highlight */
    outline-offset: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .info-pods-container {
        flex-wrap: wrap;
        gap: 20px;
    }

    .info-pod {
        flex: 0 0 calc(30% - 10px);
        /* 2 per row */
    }

    /* 3rd pod: center it alone on the second row */
    .info-pod:last-child:nth-child(odd) {
        /* flex: 0 0 60%; */
        /* margin-inline: auto; */
    }
}


.quick-links-section {
    margin: 40px auto;
    padding: 30px 0 50px;
    /* Framing lines from the JPG */
    border-top: 2px #72cac880 solid;
    border-bottom: 2px #72cac880 solid;
    position: relative;
}

.links-container {
    /* Align content to the right edge */
}

.section-blue-title {
    color: #05538E !important;
    /* Brand Deep Blue */
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: right;
    line-height: 1;
}

.section-title.section-blue-title {
    border-bottom: 2px solid #05538E;
    padding-bottom: 40px;
}

.links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align list to the right */
    gap: 15px;
}

.link-item {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-direction: row-reverse;
}

.link-item a {
    color: #373536;
    font-size: 18px;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
    font-weight: 400;
}

.link-item a:hover {
    color: #05538E;
}

/* --- The Orange Arrow Icon --- */
.orange-arrow {
    /* width: 12px; */
    /* height: 12px; */
    /* border-top: 2.5px solid #F15A22; */
    /* Brand Orange */
    /* border-right: 2.5px solid #F15A22; */
    /* transform: rotate(45deg); */
    /* Points left in RTL context */
    /* display: inline-block; */
    /* position: relative; */
    /* transition: transform 0.3s ease; */
    background: none;
}

/* Arrow body/stem */
.orange-arrow::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2.5px;
    background-color: #F15A22;
    top: 50%;
    right: -2px;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: right center;
    display: none;
}

.link-item:hover .orange-arrow {
    /* transform: rotate(45deg) translateX(-5px); */
    /* Move inward on hover */
}



.documents-download-section {
    margin: 60px 0;
    border-bottom: 2px #72cac880 solid;
    padding-bottom: 60px;
}

.documents-download-container {
    width: 1170px;
    max-width: 100%;
}

.documents-download-section .section-title {
    border: 0;
    margin-bottom: 20px;
}

/* Header Row */
.docs-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 2px solid #999;
    /* Grey line from JPG */
    margin-bottom: 10px;
}

.header-name,
.header-action {
    font-size: 15px;
    font-weight: 700;
    color: #373536;
    min-width: 150px;
}

/* List Items */
.docs-list {
    list-style: none;
    padding: 0;
}

.doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    transition: background 0.2s;
}

/* Hover effect for better UX */
.doc-item:hover {
    background-color: #f9f9f9;
}

.doc-info {
    display: flex;
    align-items: center;
    gap: 30px;
}

.file-type-icon {
    width: 30px;
    height: auto;
}

.doc-name {
    font-size: 18px;
    color: #373536;
    font-weight: 400;
}

/* --- Download Button --- */
.btn-download {
    /* Brand Yellow */
    color: #373536;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    flex-direction: row-reverse;
    min-width: 150px;
    justify-content: center;
    background-color: #F1AD13;
}

.btn-download:hover {}


/* --- Section Specifics --- */
.customer-forms {
    margin-top: 60px;
    border-bottom: 2px #72cac880 solid;
    padding-bottom: 40px;
}


/* --- Table Header --- */
.docs-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 2px solid #05538E;
    /* Darker blue line from JPG */
    margin-bottom: 10px;
}

.header-name,
.header-action {
    font-size: 15px;
    font-weight: 800;
    color: #373536;
}

/* --- List Items --- */
.doc-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px 0;
    /* Subtle separator */
}

.doc-name-link {
    font-size: 18px;
    color: #373536;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
    font-weight: 400;
}

.doc-name-link:hover {
    color: #3B91B0;
}

/* --- The Teal Print Button --- */
.btn-print {
    background-color: #3B91B0;
    /* Exact Teal from JPG */
    color: #ffffff;
    text-decoration: none;
    height: 40px;
    min-width: 150px;
    border-radius: 22px;
    /* Perfect pill shape */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.btn-print:hover {
    background-color: #05538E;
    transform: scale(1.03);
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .btn-print {
        min-width: 100px;
        font-size: 13px;
    }
}



.management-section {
    max-width: 1300px;
    margin: 40px auto;
    direction: rtl;
}

.management-container {
    max-width: 1170px;
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    color: #373536;
    border-bottom: 2px solid #373536;
    padding-bottom: 15px;
    margin-bottom: 40px;
}

/* Personnel Grid */
.personnel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 30px;
    margin-bottom: 60px;
    border-bottom: 1px #72CAC9 solid;
    padding-bottom: 40px;
}

.person-card {
    background-color: #72CAC91A;
    border: 1px solid #72CAC9;
    border-radius: 25px;
    padding: 25px 50px 17px;
    min-height: 150px;
    transition: transform 0.3s ease;
    min-height: 170px;
}

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

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0px;
    justify-content: flex-start;
}

.dot-indicator {
    width: 14px;
    height: 14px;
    background-color: #F1AD13;
    border-radius: 50%;
}

.person-name {
    font-size: 20px;
    font-weight: 700;
    color: #373536;
}

.person-role {
    font-weight: 600;
    font-size: 18px;
    color: #373536;
    text-align: start;
    padding-inline-start: 27px;
}

.person-desc {
    font-size: 18px;
    color: #373536;
    line-height: 1.5;
    text-align: start;
    font-weight: 400;
    max-width: 350px;
    padding-inline-start: 27px;
}

/* --- Main Container --- */
.departments-section {
    max-width: 1300px;
    margin-bottom: 120px;
    margin-inline: auto;
}

.main-accordion-wrapper {
    max-width: 1170px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Spacing between the accordions */
    background-color: #ffffff;
    border-radius: 30px;
    /* Soft shadow to lift the entire section */
    box-shadow: 0 10px 40px rgba(0, 85, 140, 0.04);
}

.department-accordion {
    border: 1px solid #72CAC9;
    background-color: #72CAC91A;
    /* Header remains white usually */
    border-radius: 25px;
    overflow: hidden;
    direction: rtl;
    margin-bottom: 20px;
}

/* --- Summary / Trigger --- */
.accordion-trigger {
    display: flex;
    align-items: center;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    /* Hide default arrow */
    gap: 20px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    margin-inline: 30px;
}

.accordion-trigger::-webkit-details-marker {
    display: none;
}

.dept-title {
    font-size: 18px;
    font-weight: 700;
    color: #373536;
    margin: 0;
    text-align: start;
    flex-grow: 1;
}

/* --- Plus/Minus Icon Logic --- */
.status-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.status-icon::before,
.status-icon::after {
    content: '';
    position: absolute;
    background-color: #373536;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontal line (Minus) */
.status-icon::before {
    width: 16px;
    height: 2px;
}

/* Vertical line (Makes it Plus) */
.status-icon::after {
    width: 2px;
    height: 16px;
}

/* Open State Changes */
details[open] .accordion-trigger {
    border-bottom-color: #373536;
}

details[open] .status-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
    /* Vanishes to leave the minus */
}

/* --- Content Styling --- */
.accordion-content {
    padding: 35px 30px;
    /* background-color: #72CAC91A; */
    /* Your requested light teal bg */
}

.info-grid {
    display: grid;
    /* Using your specific fractional weights */
    grid-template-columns: 0.9fr 0.9fr 1.4fr;
    gap: 30px;
}

.info-item {
    margin-bottom: 25px;
    max-width: 205px;
    /* Restricts line width for readability */
}

.info-item--wide {
    max-width: 100%;
    /* Column 3 needs more space */
}

.info-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    color: #373536;
    margin-bottom: 6px;
    text-align: start;
}

.info-val {
    display: block;
    font-size: 16px;
    color: #373536;
    text-decoration: none;
    line-height: 1.6;
    text-align: start;
    font-weight: 400;
}

/* Hover Effect */
.accordion-trigger:hover {}



@media (max-width: 768px) {
    .personnel-grid {
        display: flex;
        flex-flow: column;
        gap: 25px;
    }

    .person-card {
        min-height: 1px;
        padding-inline: 25px;
        border-radius: 15px;
    }

    .info-grid {
        gap: 0;
        display: flex;
        flex-flow: column;
    }
}



.faq-section {
    margin: 120px 0;
    border-bottom: 2px #72cac880 solid;
    padding-bottom: 120px;
}

.faq-container {
    width: 1170px;
    max-width: 100%;
}

.faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 50px;
}

/* --- Base Accordion Styling --- */
.faq-accordion {
    border: 1px solid #72CAC9;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: #72CAC9;
    /* Default closed state */
}

.faq-trigger {
    display: flex;
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    gap: 20px;
    display: flex;
    flex-direction: row-reverse;
    margin-inline: 25px;
}

.faq-trigger::-webkit-details-marker {
    display: none;
}

.faq-question {
    font-size: 18px;
    font-weight: 700;
    color: #373536;
    /* Dark text on Teal */
    margin: 0;
    flex-grow: 1;
}

/* --- Open State Logic --- */
details[open].faq-accordion {
    background-color: #ffffff;
    /* Becomes white when open */
}

details[open] .faq-trigger {
    background-color: transparent;
    border-bottom: 1px solid #72CAC933;
}

/* --- Plus/Minus Icon --- */
.status-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.status-icon::before,
.status-icon::after {
    content: '';
    position: absolute;
    background-color: #373536;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.status-icon::before {
    width: 18px;
    height: 2px;
}

/* Horizontal */
.status-icon::after {
    width: 2px;
    height: 18px;
}

/* Vertical */

/* Change to Minus on Open */
details[open] .status-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

/* --- Content Styling --- */
.faq-content {
    padding: 25px 25px 40px;
    background-color: #ffffff;
    color: #373536;
    line-height: 1.8;
    /* Centered text as seen in JPG */
}

.faq-content p {
    font-size: 16px;
    font-weight: 400;
}

.inline-link {
    color: #05538E;
    text-decoration: underline;
    font-weight: 600;
}

/* Hover Effect for closed items */
.faq-accordion:not([open]):hover {
    filter: brightness(1.05);
}


.tariffs-section {
    margin: 60px 0;
}

.tariffs-container {
    width: 1170px;
    max-width: 100%;
}

.tariffs-section .section-title.section-blue-title {
    margin-bottom: 0;
}

.tariffs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Header Styling */
.tariffs-table thead {
    /* Thick Navy border from JPG */
    border-bottom: 2px solid #72CAC933;
    /* Teal divider */
}

.tariffs-table th {
    padding: 20px 0;
    text-align: right;
    font-size: 18px;
    font-weight: 700;
    color: #231F20;
    vertical-align: top;
}

.tariffs-table th small {
    display: block;
    font-size: 16px;
    font-weight: 400;
    margin-top: 4px;
    color: #231F20;
}

/* Body Styling */
.tariffs-table td {
    padding: 30px 0;
    font-size: 16px;
    color: #231F20;
    line-height: 1.6;
    border-bottom: 2px solid #72CAC933;
    /* Light teal divider */
    vertical-align: top;
    font-weight: 400;
}

/* Bold the result of the calculations */
.tariffs-table td strong {
    display: block;
    margin-top: 10px;
    font-weight: 400;
}

/* Footer / Total Row */
.total-row td {
    border-bottom: none;
    font-weight: 400;
    padding-top: 40px;
}

/* Numerical Alignment - keep numbers clean */
.tariffs-table td:nth-child(3),
.tariffs-table td:nth-child(4) {
    width: 20%;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .tariffs-table {
        display: block;
        overflow-x: auto;
        /* Allow horizontal scroll on mobile */
        white-space: nowrap;
    }
}


.related-media-section {
    margin: 60px 0;
    /* Leave space for arrows on sides */
    position: relative;
    overflow: hidden;
}

.related-media-container {
    width: 1150px;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.media-swiper {
    padding: 10px 0;
}

.media-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 15px;
    /* Matches the JPG rounded corners */
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.media-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.media-card:hover img {
    transform: scale(1.05);
}

/* --- Play Button Overlay --- */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button-icon {
    width: 56px;
    height: 56px;
    /* border: 2px solid #fff; */
    border-radius: 50%;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
}

.play-button-icon svg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border: 0;
    margin: auto;
    height: 100%;
}

/* --- Navigation Arrows --- */
.custom-nav {
    width: 45px !important;
    height: 45px !important;
    /* border: 1px solid #72CAC9 !important; */
    /* Brand Teal */
    /* border-radius: 50%; */
    /* background-color: #fff; */
    /* transition: all 0.3s ease; */
}

.custom-nav::after {
    font-size: 18px !important;
    color: #72CAC9 !important;
    font-weight: bold;
    display: none;
}

.custom-nav:hover {
    /* background-color: #72CAC9; */
}

.custom-nav:hover::after {
    color: #fff !important;
}

/* Position arrows outside the swiper area */
.swiper-button-next {
    right: 0px !important;
}

.swiper-button-prev {
    left: 0px !important;
}


.related-projects-section {
    margin: 60px auto;
}

.related-projects-container {
    width: 1170px;
    max-width: 100%;
    margin: 120px 0;
    border-bottom: 2px #72cac880 solid;
    padding-bottom: 120px;
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
    /* Vertical / Horizontal gap */
}

.project-horizontal-card {
    display: flex;
    flex-direction: row;
    /* RTL Image on Left, Text on Right */
    align-items: center;
    gap: 25px;
}

.project-image {
    flex: 0 0 240px;
    height: 160px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-content {
    flex: 1;
    text-align: right;
}

.project-title {
    font-size: 20px;
    font-weight: 700;
    color: #373536;
    margin-bottom: 8px;
}

.project-excerpt {
    font-size: 16px;
    line-height: 1.5;
    color: #373536;
    margin-bottom: 15px;
    font-weight: 400;
    opacity: .6;
}

/* --- The Colorful "Read More" Buttons --- */
.read-more-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: transform 0.2s;
}

.arrow-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


/* Color Themes Sampling */
.theme--orange .read-more-btn {
    color: #F15A22;
}

.theme--orange .arrow-circle {
    background-color: #FEF3F0;
    border: 1px solid #FDE6E0;
}

.theme--teal .read-more-btn {
    color: #3B91B0;
}

.theme--teal .arrow-circle {
    background-color: #F1F9FA;
    border: 1px solid #E3F2F4;
}

.theme--blue .read-more-btn {
    color: #05538E;
}

.theme--blue .arrow-circle {
    background-color: #F0F4F7;
    border: 1px solid #E1E9F0;
}

.theme--lime .read-more-btn {
    color: #A9B724;
}

.theme--lime .arrow-circle {
    background-color: #F7F8EE;
    border: 1px solid #F0F2E0;
}

/* Interaction */
.read-more-btn:hover {
    transform: translateX(-5px);
}

/* Mobile */
@media (max-width: 992px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}


/* ── Additional Mobile Polish (about.html / general.html) ─── */

@media (max-width: 768px) {

    /* Reduce large row bottom margins */
    .general-row {
        margin-bottom: 50px;
    }

    /* Fluid heading sizes */
    .general-main-title,
    .ceo-title {
        font-size: clamp(22px, 5.5vw, 32px);
    }

    .sub-title-accent {
        font-size: clamp(20px, 5vw, 32px);
        line-height: 1.3;
    }

    /* Fluid body text */
    .general-paragraph,
    .ceo-message p {
        font-size: clamp(15px, 3.8vw, 18px);
    }

    /* Shrink the huge top margin on the pods info section */
    .general-info-section {
        margin-top: 60px;
    }

    /* Let icon frames be square via aspect-ratio instead of fixed height */
    .icon-frame {
        height: auto;
        padding: 25px;
    }

    /* Tighten ISO section gap */
    .iso-section {
        gap: 30px;
    }

    /* Fluid pod titles */
    .pod-title {
        font-size: clamp(16px, 4vw, 22px);
    }

    /* Full-width row-small */
    .row-small {
        max-width: 100%;
    }

    /* Reduce related-projects top margin */
    .related-projects-container {
        margin-top: 60px;
        padding-bottom: 60px;
    }

    /* Reduce faq top margin */
    .faq-section {
        margin: 60px 0;
        padding-bottom: 60px;
    }
}

@media (max-width: 480px) {

    /* Stack ISO badge items vertically on very small screens */
    .iso-top-row {
        flex-direction: column;
        align-items: center;
    }

    .iso-badge-item {
        width: 100%;
        max-width: 220px;
    }

    /* Ensure project cards stack cleanly */
    .project-horizontal-card {
        flex-direction: column;
    }

    .project-image {
        flex: none;
        width: 100%;
        height: 180px;
    }
}