/* Gilroy Font Face Declarations */
@font-face {
    font-family: 'Gilroy';
    src: url('/assets/fonts/Gilroy/Gilroy-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/assets/fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/assets/fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/assets/fonts/gilroy/Gilroy-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/assets/fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/assets/fonts/gilroy/Gilroy-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/assets/fonts/gilroy/Gilroy-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Optional: Gilroy Italic variants if you have them */
@font-face {
    font-family: 'Gilroy';
    src: url('/assets/fonts/gilroy/Gilroy-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/assets/fonts/gilroy/Gilroy-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Update CSS Variables for Gilroy */

:root {
    /* Typography - Using Gilroy for everything */
    --font-body--family: "Gilroy", sans-serif;
    --font-body--style: normal;
    --font-body--weight: 600;

    --font-heading--family: "Gilroy", sans-serif;
    --font-heading--style: normal;
    --font-heading--weight: 800;

    --font-button--family: "Gilroy", sans-serif;
    --font-button--style: normal;
    --font-button--weight: 700;
    /* h1-h6 sizes optimized for Gilroy */
    --font-h1--size: 60px;
    --font-h2--size: 48px;
    --font-h3--size: 36px;
    --font-h4--size: 24px;
    --font-h5--size: 20px;
    --font-h6--size: 16px;

    /* header nav */
    --font-nav-main: 16px;

    /* Colors */
    --color-background: rgba(255, 255, 255, 1);
    --color-foreground: rgba(28, 37, 57, 1);
    --color-foreground-heading: rgba(28, 37, 57, 1);
    --color-foreground-subheading: rgba(93, 102, 111, 1);
    --color-background-subheading: rgba(255, 255, 255, 0.1);
    --color-border-subheading-bg: rgba(2, 19, 53, 1);
    --color-primary: rgba(28, 37, 57, 1);
    --color-primary-background: rgba(28, 37, 57, 1);
    --color-primary-hover: rgba(28, 37, 57, 1);
    --color-primary-background-hover: rgba(28, 37, 57, 1);
    --color-border: rgba(255, 255, 255, 0.3);
    --color-border-hover: rgba(93, 102, 111, 0.5);
    --color-shadow: rgba(0, 0, 0, 1);
    --color-overlay: rgba(28, 37, 57, 0.6);

    /* Buttons */
    --font-button-size: 16px;
    --font-button-size-mobile: 16px;
    --style-button-height: 56px;
    --style-button-height-mobile: 48px;
    --style-button-slim-height: 52px;
    --style-button-slim-height-mobile: 40px;
    --style-cta-underline-offset: 5px;
    --style-cta-underline-thickness: 1px;

    /* Colors - Primary Button */
    --color-primary-button-text: rgba(255, 255, 255, 1);
    --color-primary-button-background: rgba(2,19,53,1);
    --color-primary-button-border: rgba(2,19,53,1);
    --color-primary-button-icon: rgba(2,19,53,1);
    --color-primary-button-icon-background: rgba(255, 255, 255, 1);

    --color-primary-button-hover-text: rgba(2,19,53,1);
    --color-primary-button-hover-background: rgba(255, 255, 255, 1);
    --color-primary-button-hover-border: rgba(2,19,53,1);
    --color-primary-button-hover-icon: rgba(255, 255, 255, 1);
    --color-primary-button-hover-icon-background: rgba(2,19,53,1);

    /* Colors - Secondary Button */
    --color-secondary-button-text: rgba(2,19,53,1);
    --color-secondary-button-background: rgba(255, 255, 255, 1);
    --color-secondary-button-border: rgba(255, 255, 255, 1);
    --color-secondary-button-icon: rgba(255, 255, 255, 1);
    --color-secondary-button-icon-background: rgba(2,19,53,1);

    --color-secondary-button-hover-text: rgba(255, 255, 255, 1);
    --color-secondary-button-hover-background: rgba(2,19,53,1);
    --color-secondary-button-hover-border: rgb(255, 255, 255);
    --color-secondary-button-hover-icon: rgba(2,19,53,1);
    --color-secondary-button-hover-icon-background: rgba(255, 255, 255, 1);

    /* Colors - Input */
    --color-input-background: rgba(255, 255, 255, 1);
    --color-input-text: rgba(93, 102, 111, 1);
    --color-input-border: rgba(93, 102, 111, 0.2);
    --color-input-hover-background: rgba(255, 255, 255, 1);
    --color-input-hover-text: rgba(93, 102, 111, 1);
    --color-input-hover-border: rgba(93, 102, 111, 0.2);

    /* Borders */
    --style-border-width-buttons-primary: 1px;
    --style-border-width-buttons-secondary: 1px;
    --style-border-radius-buttons-primary: 40px;
    --style-border-radius-buttons-secondary: 40px;

    --style-border-width-inputs: 1px;
    --style-border-radius-inputs: 8px;
    --style-border-width: 1px;

    /* Focus */
    --focus-outline-width: 1px;
    --focus-outline-offset: 3px;

    /* Pagination */
    --style-pagination-border-width: 1px;
    --pagination-item-foreground: rgba(28, 37, 57, 1);
    --pagination-item-background: rgba(242, 242, 242, 1);
    --pagination-item-border: rgba(242, 242, 242, 1);
    --pagination-item-active-foreground: rgba(255, 255, 255, 1);
    --pagination-item-active-background: rgba(28, 37, 57, 1);
    --pagination-item-active-border: rgba(28, 37, 57, 1);

    /* Swiper */
    --swiper-navigation-size: 14px;
    --swiper-navigation-color: rgba(28, 37, 57, 1);
    --swiper-navigation-background-color: rgba(242, 242, 242, 0);
    --swiper-navigation-hover-color: rgba(28, 37, 57, 1);
    --swiper-navigation-hover-background-color: transparent;
    --swiper-pagination-bullet-inactive-color: rgba(242, 242, 242);
    --swiper-pagination-color: rgba(28, 37, 57, 1);
    --swiper-pagination-bullet-inactive-opacity: 1;
}

@media (max-width: 767px) {
    :root {
        --font-h1--size: 48px;
        --font-h2--size: 40px;
        --font-h3--size: 28px;
        --font-h4--size: 20px;
        --font-h5--size: 18px;
        --swiper-navigation-size: 12px;
    }
}

.service-icon-small {
    width: 2.5rem;
    /* Using rem units for better scalability */
    height: 2.5rem;
    object-fit: contain;
}


/* Fixed Size Icon Wrapper */
.icon-wrapper--fixed {
    width: 60px; /* Fixed width */
    height: 60px; /* Fixed height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Fixed Icon Size */
.icon-fixed {
    width: 32px; /* Fixed icon width */
    height: 32px; /* Fixed icon height */
    object-fit: contain; /* Ensures icon fits properly */
}

/* Dark Background */
.icon-wrapper--dark {
    background-color: rgba(2,19,53,1); /* Dark background */
}

/* Rounded Edges */
.icon-wrapper--rounded {
    border-radius: 12px; /* Rounded corners */
}

/* Invert Icon Colors */
.icon-invert {
    filter: invert(1); /* White icons on dark background */
}

/* Optional: Size Variants */
.icon-wrapper--xs {
    width: 40px;
    height: 40px;
}

.icon-wrapper--xs .icon-fixed {
    width: 20px;
    height: 20px;
}

.icon-wrapper--sm {
    width: 50px;
    height: 50px;
}

.icon-wrapper--sm .icon-fixed {
    width: 26px;
    height: 26px;
}

.icon-wrapper--md {
    width: 60px;
    height: 60px;
}

.icon-wrapper--md .icon-fixed {
    width: 32px;
    height: 32px;
}

.icon-wrapper--lg {
    width: 70px;
    height: 70px;
}

.icon-wrapper--lg .icon-fixed {
    width: 38px;
    height: 38px;
}

.icon-wrapper--xl {
    width: 80px;
    height: 80px;
}

.icon-wrapper--xl .icon-fixed {
    width: 44px;
    height: 44px;
}

/* Circle Variant */
.icon-wrapper--circle {
    border-radius: 50%;
}

/* Hover Effects */
.icon-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}
                            
.user-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: #001f3f;
    /* Navy blue */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    text-transform: uppercase;
    box-shadow: 0 4px 8px rgba(0, 31, 63, 0.2);
    transition: all 0.3s ease;
}

.user-avatar--small {
    width: 90px;
    height: 90px;
    font-size: 2rem;
}

.user-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 31, 63, 0.3);
}

/* Alternative: Dynamic colors based on first letter */
.user-avatar[data-letter="A"] {
    background-color: #001f3f;
}

.user-avatar[data-letter="B"] {
    background-color: #002b55;
}

.user-avatar[data-letter="C"] {
    background-color: #003366;
}

.user-avatar[data-letter="D"] {
    background-color: #004080;
}

.user-avatar[data-letter="E"] {
    background-color: #004d99;
}

.user-avatar[data-letter="F"] {
    background-color: #0059b3;
}

.user-avatar[data-letter="G"] {
    background-color: #0066cc;
}

.user-avatar[data-letter="H"] {
    background-color: #0073e6;
}

.user-avatar[data-letter="I"] {
    background-color: #0080ff;
}

.user-avatar[data-letter="J"] {
    background-color: #001f3f;
}

.user-avatar[data-letter="K"] {
    background-color: #002b55;
}

.user-avatar[data-letter="L"] {
    background-color: #003366;
}

.user-avatar[data-letter="M"] {
    background-color: #004080;
}

.user-avatar[data-letter="N"] {
    background-color: #004d99;
}

.user-avatar[data-letter="O"] {
    background-color: #0059b3;
}

.user-avatar[data-letter="P"] {
    background-color: #0066cc;
}

.user-avatar[data-letter="Q"] {
    background-color: #0073e6;
}

.user-avatar[data-letter="R"] {
    background-color: #0080ff;
}

.user-avatar[data-letter="S"] {
    background-color: #001f3f;
}

.user-avatar[data-letter="T"] {
    background-color: #002b55;
}

.user-avatar[data-letter="U"] {
    background-color: #003366;
}

.user-avatar[data-letter="V"] {
    background-color: #004080;
}

.user-avatar[data-letter="W"] {
    background-color: #004d99;
}

.user-avatar[data-letter="X"] {
    background-color: #0059b3;
}

.user-avatar[data-letter="Y"] {
    background-color: #0066cc;
}

.user-avatar[data-letter="Z"] {
    background-color: #0073e6;
}

/* For numbers or special characters */
.user-avatar[data-letter="0"],
.user-avatar[data-letter="1"],
.user-avatar[data-letter="2"],
.user-avatar[data-letter="3"],
.user-avatar[data-letter="4"],
.user-avatar[data-letter="5"],
.user-avatar[data-letter="6"],
.user-avatar[data-letter="7"],
.user-avatar[data-letter="8"],
.user-avatar[data-letter="9"] {
    background-color: #2d3748;
    /* Dark gray for numbers */
}

/* Responsive design */
@media (max-width: 768px) {
    .user-avatar {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .user-avatar--small {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .user-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .user-avatar--small {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}

/* Optional: Gradient background variant */
.user-avatar--gradient {
    background: linear-gradient(135deg, #001f3f 0%, #003366 100%);
}

/* Optional: Border variant */
.user-avatar--bordered {
    border: 3px solid #e2e8f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Animation for new comments */
@keyframes avatarPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 8px rgba(0, 31, 63, 0.2);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(0, 31, 63, 0.4);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 4px 8px rgba(0, 31, 63, 0.2);
    }
}

/* Mobile Responsive Font Size Override */
@media (max-width: 767px) {

    /* Target the specific heading */
    .heading.text-50 {
        font-size: 30px !important;
        /* Optional: Adjust line-height for smaller text */
        line-height: 1.5;
    }
}

.text-danger {
    color: #ff4d4f;
}

.user-avatar--new {
    animation: avatarPulse 0.6s ease-in-out;
}

/* Typewriter animation styles */
.typewriter-wrapper {
    display: inline-block;
    position: relative;
}

.typewriter-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}

.typewriter-cursor {
    display: inline-block;
    color: inherit;
    animation: blink 1s infinite;
    font-weight: 400;
    vertical-align: middle;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* Optional: Add a gradient text effect to match your theme */
.typewriter-text {
    background: linear-gradient(90deg, #060344ff, #488fecff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.backward {
    overflow: visible !important;
    z-index: -9999;
}


/* Firefox specific - partial support */
@-moz-document url-prefix() {
    .select-wrapper select option {
        background-color: var(--color-input-background);
        color: var(--color-input-text);
    }
}

/* Custom dropdown alternative for consistent styling */
.custom-select {
    position: relative;
    width: 30%;
    /* height: auto; */
    /* z-index: 9999; */
    /* Forces the dropdown above everything */
}

.field:has(.custom-select) {
    position: relative;
    z-index: 1;
}

.form-blog-search {
    position: relative;
    z-index: 1;
}

/* Mobile Responsive Styles for Career Component */
@media (max-width: 767px) {

    /* 1. Stack the Search Form Vertically */
    .form-blog-search {
        display: flex;
        flex-direction: column;
        /* Stacks items top to bottom */
        gap: 16px;
        /* Adds space between input, select, and button */
    }

    /* 2. Make Input, Select, and Reset Button Full Width */
    .form-blog-search input,
    .form-blog-search .button {
        width: 100% !important;
        margin: 0;
    }

    /* 3. Fix the Custom Select Width */
    .form-blog-search .custom-select {
        width: 100% !important;
        /* Overrides the desktop 30% width */
    }

    /* 4. Ensure the Custom Select Trigger matches input height */
    .custom-select__trigger {
        width: 100%;
        box-sizing: border-box;
        /* Ensures padding doesn't break width */
    }

    /* 5. Handle the Category Buttons (Wrap them) */
    .field.buttons {
        display: flex;
        flex-wrap: wrap;
        /* Allows buttons to drop to next line */
        gap: 10px;
        /* Space between buttons */
        justify-content: flex-start;
    }

    /* Optional: Make category buttons expand to fill space */
    .field.buttons .button {
        flex-grow: 1;
        text-align: center;
        justify-content: center;
    }
}

.custom-select__trigger {
    min-height: var(--style-button-height-mobile);
    padding: 12px 12px 12px 20px;
    /* font-size: var(--font-button-size-mobile); */
    /* font-family: var(--font-body--family); */
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.custom-select__trigger:hover {
    border-color: var(--color-input-hover-border);
}

.custom-select__trigger::after {
    content: '';
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235D666F'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

.custom-select.open .custom-select__trigger::after {
    transform: rotate(180deg);
}

.custom-select__options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.custom-select.open .custom-select__options {
    display: block;
}

.custom-select__option {
    display: block;
    width: 100%;
    border-radius: var(--style-border-radius-inputs);
    margin: 0;
    /* Remove gap issues */
    padding: 12px 20px;
}


.custom-select__option:hover {
    background-color: var(--color-secondary-button-hover-background) !important;
    color: white !important;
}


.custom-select__option.selected {
    background-color: var(--color-primary-background);
    color: var(--color-primary);
}



/* Hide default file input */
#FaqForm-upload {
    display: none;
}

/* File upload container */
.file-upload-container {
    width: 100%;
}

/* Upload box styling */
.upload-box {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
    background-color: #f9fafb;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.upload-box:hover {
    border-color: #102547;
    background-color: #f0f9ff;
}

.upload-box:has(input:focus) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Upload icon */
.upload-icon {
    color: #6b7280;
    margin-bottom: 16px;
}

.upload-box:hover .upload-icon {
    color: #153068;
}

/* Upload text */
.upload-title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 8px;
}

.upload-info {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

.info-item {
    display: block;
    margin-bottom: 4px;
}

/* Browse button */
.browse-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #020407;
    color: white;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.browse-button:hover {
    background-color: #153068;
}

/* Selected file display */
.selected-file {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    margin-top: 12px;
}

.selected-file.show {
    display: flex;
}

.file-name {
    font-size: 14px;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-name::before {
    content: "📄";
    font-size: 16px;
}

.remove-file {
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.remove-file:hover {
    background-color: #fee2e2;
    color: #dc2626;
}

/* Drag and drop states */
.upload-box.drag-over {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.upload-box.file-selected {
    border-style: solid;
    border-color: #10b981;
    background-color: #f0fdf4;
}

/* Responsive */
@media (max-width: 768px) {
    .upload-box {
        padding: 24px 16px;
    }

    .upload-info {
        font-size: 13px;
    }
}

/* Visually hidden label */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Career CSS Classes */
.careers-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.career-item {
    --color-background: rgba(242, 242, 242, 1);
    --color-foreground: rgba(2,19,53,1);
    --color-foreground-heading: rgba(28, 37, 57, 1);
    background-color: var(--color-background);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.career-item:hover {
    /* --color-background: rgba(32, 40, 45, 1);
      --color-foreground: rgba(255, 255, 255, 1);
      --color-foreground-heading: rgba(255, 255, 255, 1);
      transform: translateY(-2px); */
    box-shadow: 0 8px 24px rgba(28, 37, 57, 0.568);
}

.hover:hover {
    --color-background: rgba(32, 40, 45, 1);
    --color-foreground: rgba(255, 255, 255, 1);
    --color-foreground-heading: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.career-header {
    padding: 28px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: inherit;
    transition: all 0.3s ease;
}

.career-header:hover {
    text-decoration: none;
}

.career-title-section {
    flex: 1;
    min-width: 0;
    /* Allows text truncation */
}

.career-title {
    font-size: var(--font-h4--size);
    font-weight: var(--font-heading--weight);
    color: var(--color-foreground-heading);
    line-height: 1.3;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.career-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.career-tags .subheading-bg {
    --color-background-subheading: rgba(255, 255, 255, 0.9);
    --color-border-subheading-bg: rgba(255, 255, 255, 0.3);
    --color-foreground-subheading: rgba(32, 40, 45, 1);
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
}

.career-item:hover .career-tags .subheading-bg {
    /* --color-background-subheading: rgba(255, 255, 255, 0.2);
      --color-border-subheading-bg: rgba(255, 255, 255, 0.4);
      --color-foreground-subheading: rgba(255, 255, 255, 1); */
}

.career-preview {
    padding: 0 32px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
}

.career-item:hover .career-preview {
    display: block;
    animation: fadeIn 0.3s ease;
}

.preview-content {
    color: var(--color-foreground);
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 20px;
}

.career-item .apply-section {
    display: flex;
    justify-content: flex-end;
}

.career-item .button--primary {
    --color-primary-button-text: rgba(255, 255, 255, 1);
    --color-primary-button-background: rgba(2,19,53,1);
    --color-primary-button-hover-text: rgba(2,19,53,1);
    --color-primary-button-hover-background: rgba(255, 255, 255, 1);
}

.career-item:hover .button--primary {
    --color-primary-button-text: rgba(2,19,53,1);
    --color-primary-button-background: rgba(255, 255, 255, 1);
    --color-primary-button-hover-text: rgba(255, 255, 255, 1);
    --color-primary-button-hover-background: rgba(2,19,53,1);
}

.button--reset {
    min-width: 100px;
    width: 100%;
}

/* Animation for preview */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Active filter button state */
.buttons .button.button--primary.active {
    --color-primary-button-text: rgba(255, 255, 255, 1);
    --color-primary-button-background: rgba(28, 37, 57, 1);
    --color-primary-button-hover-text: rgba(255, 255, 255, 1);
    --color-primary-button-hover-background: rgba(28, 37, 57, 0.9);
}

/* Responsive styles */
@media (max-width: 991px) {
    .career-header {
        padding: 24px;
        gap: 16px;
    }

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

    .career-tags {
        gap: 10px;
    }

    .career-tags .subheading-bg {
        font-size: 14px;
        padding: 6px 14px;
    }
}

@media (max-width: 767px) {
    .career-item {
        border-radius: 10px;
    }

    .career-header {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .career-title {
        font-size: 18px;
        -webkit-line-clamp: 1;
    }

    .career-tags {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .career-tags .subheading-bg {
        padding: 6px 12px;
        font-size: 14px;
    }

    .career-preview {
        padding: 0 20px 20px;
    }
}

.attachment__caption {
    display: none;
}

.attachment--preview {
    pointer-events: none;
    cursor: default;
}

.yearly-price {
    display: block;
    margin-top: 8px;
}

.yearly-price small {
    font-size: 14px;
    color: #666;
    font-weight: 400;
}

/* Add to your existing CSS file */
.pricing-cards .product-grid {
    display: flex;
    flex-wrap: wrap;
}

.pricing-cards .col-12.col-lg-12.col-xl-4 {
    display: flex;
}

.card-pricing {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-pricing .text-lists {
    flex-grow: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .heading.text-80 {
        font-size: 50px;
        /* Decreased by 20px (approx 2 steps) */
    }
}

@media (max-width: 576px) {
    .heading.text-80 {
        font-size: 35px;
        /* Even smaller for very small screens */
        line-height: 1.2;
    }
}

/* Minimal equal height solution */
.testimonial-swiper .swiper-wrapper {
    align-items: stretch;
    /* Key property */
}

.testimonial-swiper .swiper-slide {
    height: auto;
}

.card-testimonial {
    height: 100%;
    /* Make card take full slide height */
    display: flex;
    flex-direction: column;
    padding: 40px;
}

.card-testimonial .text-24 {
    flex: 1;
    /* Make testimonial text expand */
    margin-bottom: 30px;
}

.card-testimonial .user-info-wrap {
    margin-top: auto;
    /* Push user info to bottom */
}

/* Toast Notification Styles */
.toast-container {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    width: 100%;
    pointer-events: none;
}

@media (max-width: 768px) {
    .toast-container {
        top: 80px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

.toast-notification {
    pointer-events: all;
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-out 4.7s forwards;
    transform-origin: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.toast-notification:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Success Toast */
.toast-success {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.toast-success .toast-icon {
    color: #10b981;
}

/* Info Toast (if needed later) */
.toast-info {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.toast-info .toast-icon {
    color: #3b82f6;
}

/* Warning Toast (if needed later) */
.toast-warning {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.toast-warning .toast-icon {
    color: #f59e0b;
}

/* Error Toast (if needed later) */
.toast-error {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.toast-error .toast-icon {
    color: #ef4444;
}

.toast-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
}

.toast-success .toast-icon {
    background: rgba(16, 185, 129, 0.1);
}

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

.toast-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #111827;
}

.toast-success .toast-title {
    color: #065f46;
}

.toast-message {
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

.toast-success .toast-message {
    color: #047857;
}

.toast-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
}

.toast-success .toast-close:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

/* Progress Bar (Optional) */
.toast-notification::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.3;
    animation: progressBar 5s linear forwards;
}

.toast-success::after {
    background: #10b981;
}

/* Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

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

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes progressBar {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .toast-notification {
        padding: 16px;
        gap: 12px;
        border-radius: 10px;
    }

    .toast-icon {
        width: 32px;
        height: 32px;
    }

    .toast-title {
        font-size: 15px;
    }

    .toast-message {
        font-size: 13px;
    }
}

/* Accessibility */
.toast-notification:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.toast-close:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}