/* =====================================================
   professional.css  —  Moderate modernization overlay
   Loaded AFTER the theme's color.css so it can refine
   look & feel without touching the base template.
   Theme identity kept: Islamic green + gold accent.
   ===================================================== */

:root {
    --rsm-green: #1f8a4c;
    --rsm-green-dark: #156f3c;
    --rsm-green-light: #2ecc71;
    --rsm-gold: #f5a623;
    --rsm-ink: #1c2b22;
    --rsm-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    --rsm-shadow-sm: 0 4px 14px rgba(0, 0, 0, .08);
    --rsm-radius: 14px;
    --rsm-ease: .28s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Global polish ---------- */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

/* smoother anchor transitions everywhere */
a,
.thm-btn,
.serv-box,
.post-box,
.pillar-box,
.course-box {
    transition: var(--rsm-ease);
}

/* ---------- Top bar readability ---------- */
.topbar .topbar-info-list li {
    position: relative;
    padding: 0 14px;
    font-weight: 600;
    letter-spacing: .2px;
}

.topbar .topbar-info-list li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .25);
}

/* ---------- Buttons ---------- */
.thm-btn {
    border-radius: 999px !important;
    box-shadow: var(--rsm-shadow-sm);
    font-weight: 700 !important;
    letter-spacing: .3px;
}

.thm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(31, 138, 76, .35);
}

/* ---------- Hero slider ---------- */
.feat-wrap.v1 .feat-item {
    position: relative;
}

/* dark gradient scrim so caption text always readable */
.feat-wrap.v1 .feat-item .feat-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%);
}

.feat-wrap.v1 .feat-cap h2 {
    text-shadow: 0 4px 18px rgba(0, 0, 0, .6);
    font-size: clamp(30px, 5vw, 64px);
    letter-spacing: .5px;
}

.feat-wrap.v1 .feat-cap p {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    font-size: clamp(14px, 2vw, 20px);
}

.hero-cta {
    margin-top: 22px;
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-cta .btn-hero {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--rsm-shadow-sm);
    transition: var(--rsm-ease);
}

.hero-cta .btn-hero.primary {
    background: var(--rsm-green);
    color: #fff;
}

.hero-cta .btn-hero.gold {
    background: var(--rsm-gold);
    color: #1c2b22;
}

.hero-cta .btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
    filter: brightness(1.05);
}

/* ---------- Department / service cards ---------- */
.serv-box {
    border-radius: var(--rsm-radius);
    box-shadow: var(--rsm-shadow-sm);
    overflow: hidden;
    border-bottom: 4px solid transparent;
}

.serv-box:hover {
    transform: translateY(-8px);
    box-shadow: var(--rsm-shadow);
    border-bottom-color: var(--rsm-gold);
}

.serv-box i {
    transition: var(--rsm-ease);
}

.serv-box:hover i {
    transform: scale(1.12);
}

.serv-box a[href] {
    display: inline-block;
    margin-top: 6px;
    font-weight: 700;
    position: relative;
}

.serv-box a[href]::after {
    content: " \2192";
    opacity: 0;
    margin-left: -6px;
    transition: var(--rsm-ease);
}

.serv-box:hover a[href]::after {
    opacity: 1;
    margin-left: 4px;
}

/* ---------- Stats / pillars ---------- */
.pillar-box {
    border-radius: var(--rsm-radius);
    padding: 10px 6px;
    transition: var(--rsm-ease);
}

.pillar-box:hover {
    transform: translateY(-6px);
}

.pillar-box h3 {
    font-weight: 700;
    letter-spacing: .3px;
}

.pillar-box i.d-block {
    font-size: 30px;
    font-weight: 800;
    font-style: normal;
    color: var(--rsm-gold) !important;
}

/* ---------- News / blog post cards ---------- */
.post-box {
    border-radius: var(--rsm-radius);
    overflow: hidden;
    box-shadow: var(--rsm-shadow-sm);
    background: rgba(0, 0, 0, .15);
}

.post-box:hover {
    transform: translateY(-8px);
    box-shadow: var(--rsm-shadow);
}

.post-box .post-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.post-box .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--rsm-ease);
}

.post-box:hover .post-img img {
    transform: scale(1.06);
}

.post-box .post-info {
    padding: 18px;
}

/* ---------- Notice / blog list rows ---------- */
.course-box {
    border-radius: 10px;
    padding: 6px 8px;
}

.course-box:hover {
    background: rgba(255, 255, 255, .06);
    transform: translateX(4px);
}

/* ---------- Section rhythm ---------- */
.sec-title-inner h2,
.sec-title-inner h1 {
    letter-spacing: .4px;
}

/* ---------- Contact form inputs ---------- */
.cont-form input,
.cont-form textarea {
    border-radius: 10px !important;
    transition: var(--rsm-ease);
}

.cont-form input:focus,
.cont-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(31, 138, 76, .15);
    border-color: var(--rsm-green) !important;
    outline: none;
}

/* ---------- Principal card ---------- */
.plyr-wrp img {
    border-radius: 10px;
}

/* ---------- Responsive top rows: cleaner spacing ---------- */
.rspn-scil li {
    padding: 0 6px;
    font-weight: 600;
}