/* Faculty hero — match reference design (Bootstrap + custom CSS) */

#wrap #hero-section.ust-fec-hero,
#wrapwrap #hero-section.ust-fec-hero,
section#hero-section.ust-fec-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 700px !important;
    height: 700px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    background-color: #ffffff !important;
    background-image: linear-gradient(to bottom right, #f8fafc 0%, #ffffff 50%, #e8f4ff 100%) !important;
    color: #212529 !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom right, #f8fafc 0%, #ffffff 50%, #e8f4ff 100%) !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__blob {
    position: absolute !important;
    display: block !important;
    border-radius: 9999px !important;
    filter: blur(64px) !important;
    -webkit-filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__blob--tr {
    top: 5rem !important;
    right: 0 !important;
    width: 600px !important;
    height: 600px !important;
    max-width: 55vw !important;
    background: linear-gradient(to bottom right, rgba(219, 234, 254, 0.5), transparent) !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__blob--bl {
    bottom: 0 !important;
    left: 0 !important;
    width: 400px !important;
    height: 400px !important;
    max-width: 40vw !important;
    background: linear-gradient(to top right, rgba(239, 246, 255, 0.7), transparent) !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__shape--square {
    position: absolute !important;
    top: 22% !important;
    right: 4rem !important;
    width: 8rem !important;
    height: 8rem !important;
    border: 2px solid #bfdbfe !important;
    border-radius: 1rem !important;
    transform: rotate(12deg) !important;
    opacity: 0.35 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: transparent !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__shape--circle {
    position: absolute !important;
    bottom: 30% !important;
    right: 9rem !important;
    width: 5rem !important;
    height: 5rem !important;
    border: 2px solid #93c5fd !important;
    border-radius: 50% !important;
    opacity: 0.22 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: transparent !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__shell {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    min-height: 700px !important;
}

/* Badge */
#wrap #hero-section.ust-fec-hero .ust-fec-hero__badge {
    background-color: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 9999px !important;
    letter-spacing: 0.06em !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__badge-icon,
#wrap #hero-section.ust-fec-hero .ust-fec-hero__badge-icon.fa-microchip,
#wrap #hero-section.ust-fec-hero .ust-fec-hero__badge .text-blue-600 {
    color: #2563eb !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__badge-icon svg {
    fill: #2563eb !important;
    width: 0.875rem !important;
    height: 0.875rem !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__badge .textBox.ust-fec-hero__badge-text {
    color: #2563eb !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Title — mainHd (same translatable pattern as section 2 overview) */
#wrap #hero-section.ust-fec-hero .ust-fec-hero__content .mainHd {
    text-transform: none !important;
    padding-bottom: 0 !important;
    letter-spacing: -0.025em !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__title-line {
    display: block !important;
    font-size: 4.5rem !important; /* 72px — .text-brand-blue */
    font-weight: 800 !important;
    line-height: 1.05 !important;
    color: rgb(0, 86, 179) !important;
    margin: 0 0 0.35rem !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__title-accent {
    display: block !important;
    font-size: 4.5rem !important; /* 72px */
    font-weight: 800 !important;
    line-height: 1.05 !important;
    margin: 0 0 1.5rem !important;
    color: transparent !important;
    background-image: linear-gradient(to right, #2563eb, #0891b2) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

#wrap #hero-section.ust-fec-hero .textBox.ust-fec-hero__lead {
    font-size: 1.25rem !important;
    line-height: 1.625 !important;
    color: #4b5563 !important;
    max-width: 36rem !important;
    margin: 0 0 2rem !important;
    padding: 0 !important;
}

@media (max-width: 1399.98px) {
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-line,
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-accent {
        font-size: 3.75rem !important; /* 60px */
    }
}

@media (max-width: 1199.98px) {
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-line,
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-accent {
        font-size: 3rem !important; /* 48px */
    }
}

@media (max-width: 991.98px) {
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-line,
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-accent {
        font-size: 2.5rem !important; /* 40px */
    }
}

@media (max-width: 767.98px) {
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-line,
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-accent {
        font-size: 2.25rem !important; /* 36px */
    }
}

@media (max-width: 479.98px) {
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-line,
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__title-accent {
        font-size: 1.75rem !important; /* 28px */
    }
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__actions {
    margin-top: 0 !important;
}

/* Buttons */
#wrap #hero-section.ust-fec-hero .ust-fec-hero__btn-primary {
    background-color: #2563eb !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 1rem 2rem !important;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3) !important;
    transition: transform 300ms ease, background-color 300ms ease, box-shadow 300ms ease !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__btn-primary:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
    transform: translateY(-0.25rem) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__btn-outline {
    background-color: #ffffff !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
    border-radius: 0.5rem !important;
    padding: 1rem 2rem !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__btn-outline:hover {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}

/* Right column — image */
#wrap #hero-section.ust-fec-hero .ust-fec-hero__media-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__media-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 32rem !important;
    margin: 0 auto !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__media-glow {
    position: absolute !important;
    inset: -1rem !important;
    border-radius: 1.25rem !important;
    background: linear-gradient(to bottom right, rgba(191, 219, 254, 0.45), transparent) !important;
    filter: blur(32px) !important;
    -webkit-filter: blur(32px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__media-frame {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 32rem !important;
    min-height: 22rem !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
    background: #e5e7eb !important;
    line-height: 0 !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__media-img {
    display: block !important;
    width: 100% !important;
    min-height: 22rem !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    vertical-align: middle !important;
}

@media (min-width: 992px) {
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__media-frame,
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__media-img {
        min-height: 26rem !important;
    }
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__media-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to top,
        rgba(30, 58, 138, 0.12) 0%,
        transparent 45%
    ) !important;
    pointer-events: none !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__stat-card {
    position: absolute !important;
    bottom: -1.5rem !important;
    left: -1.5rem !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1.25rem 1.5rem !important;
    background: #ffffff !important;
    border: 1px solid #f3f4f6 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__stat-icon {
    width: 3rem !important;
    height: 3rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.5rem !important;
    background: linear-gradient(to bottom right, #3b82f6, #2563eb) !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__stat-icon .fa {
    color: #ffffff !important;
    font-size: 1.25rem !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__stat-value {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
}

#wrap #hero-section.ust-fec-hero .ust-fec-hero__stat-label {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    line-height: 1.2 !important;
}

@media (max-width: 991.98px) {
    #wrap #hero-section.ust-fec-hero {
        height: auto !important;
        min-height: 0 !important;
    }

    #wrap #hero-section.ust-fec-hero .ust-fec-hero__shell {
        min-height: 0 !important;
        height: auto !important;
    }

    #wrap #hero-section.ust-fec-hero .ust-fec-hero__media-wrap {
        max-width: 100% !important;
        margin-top: 1.5rem !important;
    }

    #wrap #hero-section.ust-fec-hero .ust-fec-hero__media-frame {
        max-width: 100% !important;
    }

    #wrap #hero-section.ust-fec-hero .ust-fec-hero__stat-card {
        bottom: 0.75rem !important;
        left: 0.75rem !important;
    }

    #wrap #hero-section.ust-fec-hero .ust-fec-hero__shape--square,
    #wrap #hero-section.ust-fec-hero .ust-fec-hero__shape--circle {
        display: none !important;
    }
}

#wrap section.innerBanner {
    display: none !important;
}

/* RTL — hero mirrors production Arabic layout (text right, image left) */
#wrap.ust-fec-page[dir="rtl"] #hero-section.ust-fec-hero .ust-fec-hero__content,
#wrap.ust-fec-page[dir="rtl"] #hero-section.ust-fec-hero .textBox.ust-fec-hero__lead,
html[dir="rtl"] #wrap.ust-fec-page #hero-section.ust-fec-hero .ust-fec-hero__content,
html[dir="rtl"] #wrap.ust-fec-page #hero-section.ust-fec-hero .textBox.ust-fec-hero__lead {
    text-align: right;
}

#wrap.ust-fec-page[dir="rtl"] #hero-section.ust-fec-hero .ust-fec-hero__title-accent,
html[dir="rtl"] #wrap.ust-fec-page #hero-section.ust-fec-hero .ust-fec-hero__title-accent {
    background-image: linear-gradient(to left, #2563eb, #0891b2) !important;
}

#wrap.ust-fec-page[dir="rtl"] #hero-section.ust-fec-hero .ust-fec-hero__stat-card,
html[dir="rtl"] #wrap.ust-fec-page #hero-section.ust-fec-hero .ust-fec-hero__stat-card {
    left: auto !important;
    right: -1.5rem !important;
}

#wrap.ust-fec-page[dir="rtl"] #hero-section.ust-fec-hero .ust-fec-hero__blob--tr,
html[dir="rtl"] #wrap.ust-fec-page #hero-section.ust-fec-hero .ust-fec-hero__blob--tr {
    right: auto !important;
    left: 0 !important;
}

#wrap.ust-fec-page[dir="rtl"] #hero-section.ust-fec-hero .ust-fec-hero__shape--square,
html[dir="rtl"] #wrap.ust-fec-page #hero-section.ust-fec-hero .ust-fec-hero__shape--square {
    right: auto !important;
    left: 5rem !important;
}

#wrap.ust-fec-page[dir="rtl"] #hero-section.ust-fec-hero .ust-fec-hero__shape--circle,
html[dir="rtl"] #wrap.ust-fec-page #hero-section.ust-fec-hero .ust-fec-hero__shape--circle {
    right: auto !important;
    left: 10rem !important;
}

@media (max-width: 991.98px) {
    #wrap.ust-fec-page[dir="rtl"] #hero-section.ust-fec-hero .ust-fec-hero__stat-card,
    html[dir="rtl"] #wrap.ust-fec-page #hero-section.ust-fec-hero .ust-fec-hero__stat-card {
        right: 0.75rem !important;
        left: auto !important;
    }
}