/* Color Variables: Define your website’s color scheme */
/* --primary-color: Primary brand color (used for headers, nav links, primary buttons, etc.) */
:root {
    --primary-color: #322b83;
    /* --secondary-color: Secondary accent color (used for hover effects, secondary buttons, etc.) */
    --secondary-color: #f68e3a;
    /* --text-color: Main text color for body copy and primary text elements */
    --text-color: #322b83;
    /* --text-muted-color: Muted text color for secondary text or captions */
    --text-muted-color: #44345c;
    /* --link-color: Color used for hyperlinks */
    --link-color: #322b83;
    /* --hover-color: Color applied to interactive elements on hover */
    --hover-color: #f68e3a;
    /* --border-color: Color used for borders, dividers, and outlines */
    --border-color: rgba(50, 43, 131, 0.08);

    /* Additional Colors */
    /* --background-color: Main background color of the website */
    --background-color: #ffffff;
    /* --secondary-background-color: Used for sections, cards, or content blocks */
    --secondary-background-color: #f8f7fc;
    /* --neutral-light: Light neutral tone for subtle backgrounds */
    --neutral-light: #f7f7f7;
    /* --neutral-medium: Medium neutral tone for soft borders or separators */
    --neutral-medium: #e0e0e0;
    /* --neutral-dark: Dark neutral tone for icons or text when needed */
    --neutral-dark: #666666;

    /* Status Colors */
    /* --success-color: Color for success messages or indicators */
    --success-color: #28a745;
    /* --warning-color: Color for warnings */
    --warning-color: #ffc107;
    /* --danger-color: Color for errors or critical alerts */
    --danger-color: #dc3545;
    /* --info-color: Color for informational messages */
    --info-color: #17a2b8;

    /* Accent and Gradient */
    /* --accent-color: Accent color used to highlight key elements */
    --accent-color: #ffd700;
    /* --gradient-primary: Gradient combining the primary and secondary colors (ideal for backgrounds or buttons) */
    --gradient-primary: linear-gradient(45deg,
    var(--primary-color),
    var(--secondary-color));
}

/* Auth Links Styling */
.auth-links {
    margin-top: 15px;
    text-align: center;
}

.auth-links .link-secondary {
    color: var(--text-muted-color);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.auth-links .link-secondary:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Success and Error Message Styling */
.session-success-box {
    background-color: var(--success-color);
    color: white;
    padding: 12px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-success-box i {
    font-size: 16px;
}

/* Subtitle for auth forms */
.subtitle-login {
    color: var(--text-muted-color);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Font Face Definitions */
@font-face {
    font-family: "Poppins-Light";
    src: url(../fonts/Poppins-Light.ttf);
}

@font-face {
    font-family: "Poppins";
    src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: "Poppins-Medium";
    src: url(../fonts/Poppins-Medium.ttf);
}

@font-face {
    font-family: "Poppins-SemiBold";
    src: url(../fonts/Poppins-SemiBold.ttf);
}

@font-face {
    font-family: "Poppins-Bold";
    src: url(../fonts/Poppins-Bold.ttf);
}

/* Base Body Styles */
body {
    font-size: 1rem;
    line-height: 150%;
    font-family: "Poppins", sans-serif;
}

/* Utility Classes */
.rounded {
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    -ms-border-radius: 12px !important;
    -o-border-radius: 12px !important;
}

/* Section Padding */
section {
    padding: 60px 0;
}

/* Headings: Bold font for all heading elements */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins-Bold";
    margin: 0;
    line-height: 150%;
}

h1 {
    font-size: 4rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.8rem;
}

h5 {
    font-size: 1.3rem;
}

/* Paragraph Styles */
p {
    font-size: 1rem;
    line-height: 150%;
    margin: 0;
}

/* Input Placeholder Styles */
input::placeholder {
    text-align: start;
    font-size: 1rem;
}

/* Anchor Link Styles */
a,
a:active,
a:focus,
a:hover {
    text-decoration: none;
}

a:active,
a:focus,
a:hover {
    outline: 0;
}

/* Image Styles */
img {
    max-width: 100%;
    height: auto;
}

/* Unordered List Reset */
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Button Base Styles */
.btn {
    display: flex;
    align-items: center;
    grid-gap: 8px;
    justify-content: center;
    width: max-content;
    padding: 8px 20px;
    font-size: 1rem;
}

/* Overlay Element Styles */
.overlay {
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-color);
    /* Use main text color */
}

/* Pagination Styles */
.pagination {
    background-color: transparent !important;
    --bs-pagination-bg: transparent;
    gap: 10px;
}

.pagination li a {
    background-color: var(--background-color);
    /* Use main background color */
    color: var(--text-color);
    /* Use main text color */
    width: 40px;
    height: 40px;
    text-align: center;
}

.active > .page-link,
.page-link.active {
    background-color: var(--link-color);
    /* Use link color for active pages */
    color: #fff;
    border: none;
    font-weight: bold;
}

.pagination li:first-child a,
.pagination li:last-child a {
    background-color: transparent;
    color: inherit !important;
}

.pagination .page-item a {
    margin-left: 10px;
    border-radius: 50%;
}

.page-item:first-child .page-link {
    margin-left: 10px;
    border-radius: 50%;
    background-color: transparent;
}

.page-item:last-child .page-link {
    border-radius: 50%;
}

/* Primary Button Styles */
.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 50px;
    font-size: 16px;
}

.btn-primary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Outline Primary Button Styles */
.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
    border-radius: 50px;
    font-size: 16px;
}

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

/* Description Button Styles (Primary & Orange Variants) */
.dedcription-btn,
.dedcription-btn-orange {
    text-decoration: none;
    width: 160px;
    border: none;
    border-radius: 25px;
    background-color: var(--background-color);
    color: var(--primary-color);
    text-align: center;
    font-size: 1rem;
    padding: 7px 0;
    transition: all 0.3s;
    margin: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 30px;
    border: 1px solid var(--primary-color);
}

.dedcription-btn .btn-icon,
.dedcription-btn-orange .btn-icon-orange {
    background-color: var(--primary-color);
    width: 45px;
    height: 100%;
    float: left;
    border-radius: 25px 25px 0 25px;
    left: 0;
    top: 0;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    padding: 10px 15px;
}

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

.dedcription-btn-orange .btn-icon-orange {
    background-color: var(--secondary-color);
}

.dedcription-btn-orange {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.dedcription-btn-orange:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

.dedcription-btn-orange:hover .btn-icon-orange,
.dedcription-btn:hover .btn-icon {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.dedcription-btn-orange .name-descripeion,
.dedcription-btn .name-descripeion {
    position: relative;
    z-index: 1;
    font-family: "Poppins-Medium";
}

.btn-icon,
.btn-icon-orange {
    position: absolute;
    left: 15px;
    top: 10px;
}

.btn-icon i,
.btn-icon-orange i {
    color: #fff;
}

.dedcription-btn:hover .btn-icon,
.dedcription-btn-orange:hover .btn-icon-orange {
    width: 100%;
}

/* Navbar Styles */
.navbar {
    position: relative;
    /* For pseudo-element placement */
    background: var(--background-color);
    /* Use main background color for logo clarity */
    border-bottom: 2px solid var(--border-color);
    /* Use defined border color */
}

/* Magical Particle Background using a CSS Radial Gradient */
.navbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Radial gradient based on secondary color (using its rgba value) with reduced opacity */
    background: radial-gradient(circle,
    rgba(246, 142, 58, 0.3) 1px,
    transparent 1px);
    background-size: 30px 30px;
    opacity: 0.6;
    pointer-events: none;
    animation: moveParticles 30s linear infinite;
}

@keyframes moveParticles {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 1000px 1000px;
    }
}

/* Logo Styling with Hover Rotation */
.navbar-brand img {
    height: 75px;
    transition: transform 0.3s ease;
}

/* Navigation Link Styling */
.nav-link {
    color: var(--primary-color) !important;
    font-size: 1rem;
    position: relative;
    transition: color 0.3s ease;
}

.navbar-expand-lg .navbar-nav {
    gap: 10px;
}

.nav-link:hover,
.nav-link.active {
    color: var(--secondary-color) !important;
    font-family: "Poppins-SemiBold";
    font-weight: 600;

}

/* Underline Animation on Hover for Links */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
    border: none;
    margin: 0;
}

.nav-link:hover::after {
    width: 100%;
}

/* Dropdown Menu Customization */
.dropdown-menu {
    background-color: var(--primary-color);
    border: none;
    border-radius: 12px;
}

.dropdown-item {
    color: #fff;
    transition: background-color 0.3s ease;
}

.dropdown-item:hover {
    background-color: var(--hover-color);
    color: #fff;

}

/* Centering Navigation Items */
.navbar-expand-lg .navbar-nav {
    margin: 0 auto;
}

/* Buttons Group Layout */
.buttons-group {
    display: flex;
    align-items: center;
    grid-gap: 10px;
}

/* Dropdown Hover Effect for Desktop Devices */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    .navbar .dropdown:hover > a.nav-link {
        color: var(--secondary-color) !important;
    }
}

@media screen and (max-width: 768px) {
    /* Responsive adjustments if needed */
}

/* Shopping Cart Wrapper */
.shopping-cart-wrapper {
    position: relative;
    margin-left: 10px;
}

/* Shopping Cart Icon */
.shopping-cart-icon {
    position: relative;
    color: var(--primary-color);
    font-size: 1.8rem;
    text-decoration: none;
    cursor: pointer;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.8rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
}

/* Shopping Cart Dropdown */


.shopping-cart-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    width: 100%;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--neutral-medium, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 15px;
}

.shopping-cart-dropdown.active {
    display: block;
}

/* Cart Header */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--neutral-medium, #e0e0e0);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.cart-header h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin: 0;
}

.checkout-btn {
    background: var(--primary-color);
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

.checkout-btn:hover {
    background: var(--secondary-color);
}

/* Cart Items List */
.cart-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--neutral-medium, #e0e0e0);
}

.cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.cart-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.item-info {
    flex: 1;
}

.item-info h5 {
    margin: 0;
    font-size: 1rem;
    color: var(--primary-color);
}

.item-info p {
    margin: 2px 0;
    font-size: 0.85rem;
    color: var(--text-muted-color, #44345c);
}

/* Remove Item Button */
.remove-item {
    background: transparent;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.remove-item:hover {
    color: var(--hover-color);
}

/* Cart Footer */
.cart-footer {
    border-top: 1px solid var(--neutral-medium, #e0e0e0);
    padding-top: 10px;
    text-align: right;
    margin-top: 10px;
}

.cart-total {
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: bold;
}

/* ========== Hero Section Styles ========== */

/* Main header section with background image */
.header {
    position: relative;
    background: url("../img/bg-header.png") no-repeat center center;
    background-size: cover;
    padding: 40px 0 220px;
}

/* Dark overlay for better text contrast */
.header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* Container positioned above the overlay */
.header .container {
    position: relative;
    z-index: 2;
}

/* Headline styling */
.header h1 {
    color: #fff;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 10px;
}

/* Description styling */
.header p {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 1.25rem;
    max-width: 700px;
    margin: auto;

    margin-bottom: 20px;
}

/* ========== Search Filter Styles ========== */
/* Card shell */
.search-filter {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.search-filter .card-filter {
    background: #fff;
    padding: 12px 0;

}

.search-filter .input-group {
    flex-wrap: nowrap;
}

/* Desktop density */
.filter-desktop .input-group-text {
    background: #fff;
    border: 1px solid var(--border-color);
    border-inline-end: none;
    font-size: 14px;
}

.filter-desktop .form-control, .filter-desktop .form-select {
    border: 1px solid var(--border-color);
    height: 32px;
    font-size: 14px;

}

.filter-desktop .form-control:focus, .filter-desktop .form-select:focus {
    box-shadow: none;
    border-color: var(--primary-color);
}

.filter-desktop .minw-200 {
    min-width: 200px
}

.filter-desktop .minw-220 {
    min-width: 220px
}

.filter-desktop .minw-160 {
    min-width: 160px
}

.h-40 {
    height: 32px
}

/* Mobile panel spacing */
.filter-mobile .input-group-text {
    background: #fff;
    border: 1px solid var(--border-color);
    border-inline-end: none;
}

.filter-mobile .form-control, .filter-mobile .form-select {
    border: 1px solid var(--border-color);
    height: 44px;
}

.filter-mobile .form-control:focus, .filter-mobile .form-select:focus {
    box-shadow: none;
    border-color: var(--primary-color);
}

.h-44 {
    height: 44px
}

/* Better dropdown submenu (desktop & mobile) */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    inset-inline-end: 100%;
    margin-top: -.5rem;
}

/* Toggle button look (mobile) */
.btn-white {
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--border-color);
}

.btn-white:hover {
    border: 1px solid var(--border-color);
}

/* Optional: rounded selects like inputs */
.form-select {
    border-radius: .5rem;
}

/* RTL-friendly tweaks (Bootstrap handles most; ensure inline directions) */
[dir="rtl"] .input-group-text {
    border-inline-start: none;
    border-inline-end: 1px solid var(--border-color);
}


/* Section Title Container */
.section-title {
    position: relative;
    text-align: center;
    width: max-content;
    margin: auto;
}

/* Title Text with Background Highlight */
.section-title span {
    position: relative;
    display: inline-block;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--text-color);

    z-index: 1;
    /* Optional subtle text shadow for extra depth */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Pseudo-element creates a soft background block behind the title text */
.section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    width: 50%;
    height: 40%;
    background: hsl(27 91% 70% / 1);
    z-index: 0;
}

.section-description {
    margin-top: 10px;
    margin-bottom: 40px;
    color: var(--text-muted-color);
    font-size: 18px;
}

.media-slider .owl-prev, .media-slider .owl-next {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.media-slider .owl-prev {
    left: 10px;
}

.media-slider .owl-next {
    right: 10px;
}

/* ========== Featured Media Section ========== */

.featured-media-section {
    padding: 40px 0;
    position: relative;
    overflow: hidden;
    /*margin-top: -160px;*/
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted-color);
    max-width: 700px;
    margin: auto;
    margin-top: 10px;
}

/* Media Grid Layout */


.media-grid a {
    height: auto;
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}



.media-card:hover {
    transform: translateY(-4px);
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);*/
}

.media-img {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.media-img img {
    aspect-ratio: 16/9;
}


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

/* نوع الميديا فوق الصورة */
.media-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--secondary-color, #e67e22);
    color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* الجسم أسفل الصورة */
.media-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.media-body a{
    color: inherit !important;
}
.media-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #777;
    font-weight: 500;
}

.media-category {
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 6px;
    color: #444;
}

.media-date {
    color: #999;
}

.media-title {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    margin: 0;
}

.media-type {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
}

/* Root grid: two equal columns with same overall height */

.media-grid.media-grid-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    gap: 20px;
}

/* Each column is two rows: one BIG block and one row with two SMALL cards */

.media-col {
    display: grid;
    grid-template-rows: auto auto;
    gap: 20px;
}

/* Row that holds two small cards side by side */

.media-row {
    display: flex;
    gap: 20px;
}

/* Make small cards share the row equally */

.media-row .media-card {
    flex: 1 1 0;
    min-width: 0;
}

/* Fixed aspect ratios for visual balance */

.media-card.media-big .media-img {
    aspect-ratio: 3/4;
}

/* tall big tile */

.media-card.media-small .media-img {
    aspect-ratio: 1/1;
}

/* wide small tiles */

/* Ensure image fills its box */
.media-row .media-card
.media-img {
    position: relative;
    width: 100%;
    height: auto;
}

.media-row .media-card
.media-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-grid-mosaic .media-body {
    position: absolute;
    inset: 0;
    background: rgba(50, 43, 131, .7);
    opacity: 0;
    transition: opacity .3s ease;
    display: flex;
    align-items: center;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: #fff;

}

.media-grid-mosaic .media-title {
    color: #fff;
    font-size: 1.2rem;
}

.media-grid-mosaic
.media-small {
    height: 220px;
}

.media-grid-mosaic .media-description {
    color: #fff;
}

.media-grid a:hover .media-body {
    opacity: 1;
}

.media-grid-mosaic
.media-img img {
    height: 100%;
    object-fit: cover;
}

/* ================== Responsive Layout ================== */

/* Tablet (≤ 991px): still 2 columns but cards stack more clearly */
@media (max-width: 991.98px) {
    .media-grid.media-grid-mosaic {
        gap: 16px; /* smaller spacing */
    }

    .media-card.media-big .media-img {
        aspect-ratio: 4/3;
    }

    .media-card.media-small .media-img {
        aspect-ratio: 16/10;
    }
}

/* Mobile (≤ 767px): collapse into one column */
@media (max-width: 767.98px) {
    .media-grid.media-grid-mosaic {
        grid-template-columns: 1fr; /* single column */
    }

    .media-col {
        grid-template-rows: auto; /* just stack cards vertically */
    }

    .media-row {
        flex-direction: column; /* small cards under each other */
    }

    .media-row .media-card {
        flex: 1 1 auto;
    }

    /* Adjust ratios for better look on narrow screens */
    .media-card.media-big .media-img {
        aspect-ratio: 16/9;
    }

    .media-card.media-small .media-img {
        aspect-ratio: 16/9;
    }
}

/* Keep your existing .media-card hover, .media-body, .media-type-badge, etc. */

/* Base image ratio (small) */

.media-slider .owl-stage {
    display: flex;
    align-items: end;
    padding-bottom: 20px;
}

.media-slider .media-card .media-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3; /* small card height */
    object-fit: cover;
    transition: transform .3s ease;
}

/* “Big” items: taller image ratio */

.media-slider .owl-item.is-big .media-card .media-img img {
    aspect-ratio: 4/3; /* taller card height */
}

/* Optional: match your existing card spacing feel on hover */

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

/* Tabs styling (pill look similar to the screenshot) */

.media-tabs .nav-link {
    padding: .6rem 1rem;
    background: #FEF3E6; /* subtle neutral */
    color: #919191 !important;
    border: 0;
    height: 48px;

}

.media-tabs .nav-item:first-child .nav-link {
    border-radius: 8px 0 0 8px;

}

.media-tabs .nav-item:last-child .nav-link {
    border-radius: 0 8px 8px 0;

}

.media-tabs .nav-link.active {
    background: var(--secondary-color); /* your accent color */
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);

}


.media-slider .owl-nav i {
    font-size: 18px;
    line-height: 1;
}

.media-slider .owl-nav button:hover {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    background-color: #f7f7f7;
}

/* Keep your existing card/image styles for .media-card ... */

/* ========== Thematic Galleries Section Styles ========== */

.thematic-galleries-section {
    padding: 60px 0;
    background-color: var(--secondary-background-color, #f7f7f7);
    position: relative;
    overflow: hidden;
}

/* Galleries Grid Layout */

.galleries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 30px;
}

/* Gallery Card */

.gallery-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Gallery Image Container */

.gallery-img {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* Overlay with Gallery Info */

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(50, 43, 131, 0.7);
    /* Semi-transparent overlay */
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

/* Gallery Info Text */

.gallery-info {
    color: #fff;
}

.gallery-info h3 {
    font-size: 1.75rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.gallery-info p {
    font-size: 1rem;
    color: #fff;
    line-height: 1.4;
}

/* ===================== Thematic Galleries Section ===================== */
/* ===== Rows container: exactly 3 rows ===== */

.galleries-rows {
    display: grid;
    grid-template-rows: repeat(3, auto);
    gap: 20px; /* space between rows */
}

/* ===== Each row contains exactly 3 items laid out with flex ===== */

.gallery-row {
    display: flex;
    gap: 20px; /* space between cards */
    align-items: stretch;
}

/* ===== Fixed height for all cards (tweak once here) ===== */

.thematic-galleries-section {
    --row-h: 260px;
}

/* desktop default */

/* Card base: width is proportional to --w (fixed, not random) */

.gallery-card {
    /* width proportional to --w (no JS needed) */
    flex: var(--w, 1) 1 0;
    min-width: 0;

    /* visual (unchanged) */
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    transition: transform .3s ease, box-shadow .3s ease;
    text-decoration: none;
}

.gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* Image fills fixed height */

.gallery-img {
    position: relative;
    width: 100%;
    height: var(--row-h);
}

.gallery-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.gallery-card:hover .gallery-img img {
    transform: scale(1.03);
}

/* ===== Fixed width pattern (no randomness) ===== */
/* Row 1: three equal thirds */

.galleries-rows .gallery-row:nth-child(1) .gallery-card {
    --w: 1;
}

/* Row 2: middle is wider than the sides */

.galleries-rows .gallery-row:nth-child(2) .gallery-card:nth-child(1) {
    --w: 1;
}

.galleries-rows .gallery-row:nth-child(2) .gallery-card:nth-child(2) {
    --w: 1.8;
}

/* wider center */

.galleries-rows .gallery-row:nth-child(2) .gallery-card:nth-child(3) {
    --w: 1;
}

/* Row 3: equal thirds (same as row 1) */

.galleries-rows .gallery-row:nth-child(3) .gallery-card {
    --w: 1;
}

/* --- OPTIONAL: if you want row 3 with a wider left card instead, use this and remove the line above:
.galleries-rows .gallery-row:nth-child(3) .gallery-card:nth-child(1){ --w: 1.5; }
.galleries-rows .gallery-row:nth-child(3) .gallery-card:nth-child(2){ --w: 1.0; }
.galleries-rows .gallery-row:nth-child(3) .gallery-card:nth-child(3){ --w: 1.3; }
*/

/* Overlay (keep your original look) */

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(50, 43, 131, .7);
    opacity: 0;
    transition: opacity .3s ease;
    display: flex;
    align-items: center;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-info {
    color: #fff;
}

.gallery-info h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

/* ===== Optional responsive height only (width pattern stays fixed) ===== */
@media (max-width: 1199.98px) {
    .thematic-galleries-section {
        --row-h: 240px;
    }
}

@media (max-width: 991.98px) {
    .thematic-galleries-section {
        --row-h: 220px;
    }
}

@media (max-width: 575.98px) {
    .thematic-galleries-section {
        --row-h: 180px;
    }
}

/* ===================== Articles Section Styles ===================== */

.articles-section {
    padding: 80px 0;
}

/* Articles Grid */

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 30px;
}

/* Article Card */

.article-card {
    background-color: var(--background-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    flex-direction: column;
    min-height: 490px;
    margin: 15px;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Article Image */

.article-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* Article Content */

.article-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.article-title {
    font-size: 1.75rem;
    margin: 0 0 10px;
    color: var(--primary-color);
}

.article-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--text-muted-color);
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.article-excerpt {
    flex-grow: 1;
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 20px;
}

/* ===================== Latest Updates Section ===================== */

.latest-updates-section {
    padding: 80px 0;
    background-color: var(--secondary-background-color);
}

/* Updates Grid */

.updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 30px;
}

/* Update Card */

.update-card {
    background-color: var(--background-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.update-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Update Image */

.update-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.update-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* Update Content */

.update-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.update-title {
    font-size: 1.75rem;
    margin: 0 0 10px;
    color: var(--primary-color);
}

.update-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--text-muted-color);
}

.update-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.update-excerpt {
    flex-grow: 1;
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 20px;
}

.read-more {
    display: flex;
    gap: 6px;
    align-items: center;
    font-weight: bold;
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: var(--info-color);
}

/* ===================== Collections Section Styles ===================== */

.collections-container {
    display: flex;
    width: 90vw;
    margin: 0 auto;
}

.collection-panel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    flex: 0.5;
    margin: 10px;
    position: relative;
    transition: flex 0.7s ease-in;
    -webkit-transition: all 700ms ease-in;
}

.collection-panel h3 {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in 0.4s;
}

.collection-panel.active {
    flex: 5;
}

.collection-panel.active h3 {
    opacity: 1;
}

@media (max-width: 480px) {
    .collections-container {
        width: 100vw;
    }

    .collection-panel:nth-of-type(4),
    .collection-panel:nth-of-type(5) {
        display: none;
    }
}

/* ----------------------- Footer Section ----------------------- */

.footer {
    background: #0d1b2a;

    color: #fff;
    font-family: "Poppins", sans-serif;
    /* or your chosen font */
}

.footer .footer-top {
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-columns {
    display: grid;
    grid-template-columns: calc(36% - 30px) calc(17% - 30px) calc(15% - 30px) calc(30% - 30px);
    gap: 40px;
    text-align: start;
}

.footer-column h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.footer-column p,
.footer-column ul,
.footer-column form.footer-newsletter {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #fff;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;

}

.payment-logos {
    display: flex;
    gap: 10px;

}

.payment-logos {
    max-width: 60px
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--secondary-color);
}

.footer-column.social .social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-column.social .social-icons a {
    color: #fff;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.footer-column.social .social-icons a:hover {
    color: var(--secondary-color);
}

.footer-column.social form.footer-newsletter {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.footer-column.social form.footer-newsletter input {
    padding: 10px 15px;
    font-size: 0.95rem;
    border: none;
    border-radius: 8px;
    flex: 1;
    min-width: 150px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

}

.footer-column.social form.footer-newsletter button {
    padding: 10px 20px;
    font-size: 0.95rem;
    border: none;
    border-radius: 4px;
    background: var(--secondary-color);
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.footer-column.social form.footer-newsletter button:hover {
    background: var(--hover-color);
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.15);
    text-align: center;
    padding: 15px 0;
}

.footer-bottom p {
    font-size: 0.9rem;
    margin: 0;
}

/* ===================== Custom Owl Carousel Arrow Styles ===================== */

.owl-carousel .owl-nav.disabled {
    display: block;
}

.owl-carousel {
    padding: 0 30px;
}

.owl-prev,
.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: linear-gradient(45deg,
    var(--primary-color),
    var(--secondary-color));
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: 1000;
}

.owl-prev:hover,
.owl-next:hover {
    transform: translateY(-50%) scale(1.1);
}

.owl-prev {
    left: -20px;
}

.owl-next {
    right: -20px;
}

.owl-dots {
    display: none;
}

.breadcrumb-section {
    padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "\f105";
    /* FontAwesome icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #555;
}

.breadcrumb li a {
    text-decoration: none;
    color: #555;
    font-weight: normal;
}

.breadcrumb li {
    color: var(--secondary-color) !important;

    font-weight: bold;
}

.breadcrumb {
    justify-content: center;
    margin: 0;
    padding: 20px 0;
}

.name-page {
    padding: 20px;
    background: var(--secondary-background-color);
    text-align: center;
}

.name-page h5 {
    color: var(--primary-color);
    font-size: 2rem;
}

/* ===================== About Us Section Styles ===================== */

.about-us {
}

/* Flex layout for image and content */

.about-us .d-flex {
    gap: 3rem;
    /* Increase gap between image and content */
    align-items: center;
    flex-wrap: wrap;
}

/* Image Container */

.about-us .image {
    text-align: center;
    margin-bottom: 20px;
}

.about-us .image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.about-us .section-title {
    margin: 0 0 20px 0;
}

.about-us .section-title span {
    font-size: 2.5rem;
}

/*
/* Paragraph Styling */

.about-us .content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--text-color, #3c3c9c);
}

/* List Styling */

.about-us .about-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 0;
}

.about-us .about-list li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--text-muted-color, #44345c);
}

.about-us .content {
    flex: 1;
}

/* ===================== Team Section Styles ===================== */

.team-section {
    background-color: var(--secondary-background-color, #f7f7f7);
}

/* Team Grid Layout */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* Team Card */

.team-card {
    background: var(--background-color, #ffffff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    padding-bottom: 20px;
    margin: 15px;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Team Image */

.team-img {
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* Team Info */

.team-info {
    padding: 15px;
}

.team-name {
    font-size: 1.75rem;
    margin: 10px 0 5px;
    color: var(--primary-color);
}

.team-role {
    font-size: 1rem;
    color: var(--text-muted-color);
    margin-bottom: 10px;
}

/* Social Icons */

.team-social {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.team-social a {
    color: var(--secondary-color);
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.team-social a:hover {
    color: var(--hover-color);
}

/* ===================== Testimonials Section Styles ===================== */

.testimonials-section {
}

/* Owl Carousel Slider for Testimonials */

.owl-carousel.testimonial-slider {
    position: relative;
    padding: 20px 60px;
}

/* Testimonial Slide */

.testimonial-slide {
    padding: 20px;
}

/* Testimonial Content Split Layout */

.testimonial-content {
    display: flex;
    gap: 30px;

    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Image Half */

.testimonial-image {
    flex: 1 1 40%;
    max-width: 40%;
    padding-left: 30px;
    padding-bottom: 30px;
    position: relative;
}

.testimonial-image img {
    width: 400px !important;
    height: 390px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.testimonial-image::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--secondary-color);
    width: 400px;
    height: 390px;
    border-radius: 12px;
    z-index: -1;
}

/* Text Half */

.testimonial-text {
    flex: 1 1 55%;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

.testimonial-text p {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-color);
    margin-bottom: 20px;
    line-height: 1.6;
}

.testimonial-text h4 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 0 0 5px;
}

.testimonial-text span {
    font-size: 1rem;
    color: var(--text-muted-color);
}

/* Custom Owl Carousel Arrow Styles */

.testimonial-slider .owl-prev,
.testimonial-slider .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: var(--secondary-color) !important;
    color: #fff !important;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
    z-index: 1000;
}

.testimonial-slider .owl-prev:hover,
.testimonial-slider .owl-next:hover {
    transform: translateY(-50%) scale(1.1);
}

.testimonial-slider .owl-prev {
    left: -20px;
}

.testimonial-slider .owl-next {
    right: -20px;
}

/* Responsive: Stack image and text vertically on small screens */
@media (max-width: 768px) {
    .testimonial-content {
        flex-direction: column;
    }

    .testimonial-image,
    .testimonial-text {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .testimonial-image {
        height: 250px;
    }
}

/* ===================== Contact Section Styles ===================== */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* Both columns styling */

.contact-info,
.contact-form {
    background: #fefefe;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
    height: 100%;
}

/* Section Header */

.contact-section .section-header {
    margin-bottom: 2rem;
}

.contact-section .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.contact-section .section-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted-color);
}

.contact-section span {
    font-size: 2.5rem;
}

/* Contact Info Column */

.contact-info h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.info-list li {
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
}

.info-list li i {
    color: var(--secondary-color);
    font-size: 1.2rem;
}

.social-links a {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-right: 1rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--hover-color);
}

.contact-info p {
    font-size: 1.1rem;
    margin-top: 1rem;
    color: var(--text-muted-color);
    margin-bottom: 20px;
}

/* Contact Form Column */

.contact-form h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.contact-form p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--text-muted-color);
}

.contact-form form .form-control {
    margin-bottom: 15px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.contact-form form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(50, 43, 131, 0.2);
}

.contact-form form button {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    border: none;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: #fff;
    transition: background-color 0.3s ease;
}

.contact-form form button:hover {
    background-color: var(--secondary-color);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== Results Section ===================== */

.results-section {
    padding: 80px 0;
    background-color: var(--secondary-background-color, #f7f7f7);
}

.results-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* ===================== Result Card Base Styles ===================== */

/* Image Card */

.image-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* Video Card */

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

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

/* ===================== Overlay Styles ===================== */

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-card:hover .card-overlay {
    opacity: 1;
}

/* Overlay Icons for Image Cards */

.premium,
.overlay-icons a {
    color: #fff;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.overlay-icons a:hover {
    background: var(--secondary-color);
    transform: scale(1.1);
}

/* Video Info Overlay */

.video-info {
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
}

.video-info .video-quality,
.video-info .video-duration {
    display: block;
}

/* ===================== Card Footer with Creator Info ===================== */

.card-footer {
    padding: 10px 15px;
    background: #fff;
    border-top: 1px solid var(--secondary-background-color);
}

.creator-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.creator-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.creator-name {
    font-size: 1rem;
    color: var(--primary-color);
}

/* Base result card style */

.result-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
}

/* Media (image or video) fills the card */

.result-card img,
.result-card video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Slight zoom on hover */

.result-card:hover img,
.result-card:hover video {
    transform: scale(1.05);
}

/* Overlay that appears on hover */

.result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.result-card:hover .result-overlay {
    opacity: 1;
}

/* Content inside overlay */

.overlay-content {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    color: #fff;
    width: 100%;
    height: 100%;
}

.overlay-content .left-content {
    height: 100%;
}

.overlay-content .right-content {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 100%;
}

/* Overlay icons for download & favorite */

.overlay-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap: 10px;
}

/* Photographer info styling */

.photographer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.photographer-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--secondary-color, #f68e3a);
}

.photographer-info span {
    font-size: 1rem;
    font-weight: 600;
}

/* Media quality and video duration styling */

.media-quality,
.video-duration {
    color: #fff;
    font-size: 12px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px;
    cursor: default;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: max-content;
    transition: background 0.3s ease, transform 0.3s ease;
}

/* Additional spacing for video duration if needed */

.video-duration {
    margin-top: 5px;
}

/* ======================================================================
 Advanced Accordion Filter Styles - Enhanced Version
====================================================================== */

.filter-sidebar {
    background: var(--secondary-background-color);
    /* Cleaner background */
    border-radius: 10px;
    /* Smoother edges */
    border: 1px solid rgba(50, 43, 131, 0.08);
    padding: 15px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    /* Soft shadow for better depth */
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 12px 0;
    font-weight: 600;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.filter-header span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-header:hover {
    color: var(--secondary-color);
    /* Highlight on hover */
}

.filter-section {
    padding: 0 10px;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.3s ease;
}

.filter-section:last-child {
    border: none;
}

.filter-content {
    padding: 10px 0 15px;
}

.filter-content .grid-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Icon rotation animation */

.filter-header i {
    transition: transform 0.3s ease;
    font-size: 16px;
}

/* Bootstrap will set aria-expanded accordingly */

.filter-header[aria-expanded="true"] i.fas.fa-chevron-down {
    transform: rotate(180deg);
}

.filter-header[aria-expanded="false"] i.fas.fa-chevron-down {
    transform: rotate(0deg);
}

/* Filter buttons */

.btn-filter {
    background: #fff;
    color: var(--text-muted-color);
    border-radius: 6px;
    padding: 6px 16px;
    border: 1px solid #d8d8d8;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-filter:hover {
    background-color: var(--secondary-color);
    color: #ffffff;
    border-color: var(--secondary-color);
}

/* Color selection buttons */

.btn-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid transparent;
    transition: transform 0.3s ease, border 0.3s ease;
}

.btn-color:hover {
    transform: scale(1.2);
    border: 2px solid rgba(0, 0, 0, 0.2);
}

/* Color styles */

.btn-red {
    background-color: red;
}

.btn-blue {
    background-color: blue;
}

.btn-green {
    background-color: green;
}

.btn-yellow {
    background-color: yellow;
}

.btn-orange {
    background-color: orange;
}

.btn-purple {
    background-color: purple;
}

.btn-pink {
    background-color: pink;
}

.btn-brown {
    background-color: brown;
}

.btn-gray {
    background-color: gray;
}

.btn-cyan {
    background-color: cyan;
}

.btn-magenta {
    background-color: magenta;
}

.btn-lime {
    background-color: lime;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .filter-sidebar {
        padding: 10px;
    }

    .btn-filter {
        font-size: 12px;
        padding: 4px 10px;
    }

    .btn-color {
        width: 20px;
        height: 20px;
    }
}

/* ---------------------------------------------------------------------
     FAQ Section Styles (Accordion)
  --------------------------------------------------------------------- */

.faq-section {
    background-color: var(--background-color);
}

.accordion-button {
    background-color: var(--secondary-background-color);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.2rem;
    padding: 1rem;
    line-height: 1.4;
}

.accordion-button:not(.collapsed) {
    background-color: var(--background-color);
    color: var(--primary-color);
    box-shadow: none;
}

.accordion-body {
    font-size: 1rem;
    color: var(--text-color);
    background: var(--background-color);
    padding: 1rem;
}

/* ---------------------------------------------------------------------
     Help Guides Section
  --------------------------------------------------------------------- */

.help-guides {
    background-color: var(--secondary-background-color);
}

.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.guide-card {
    background: var(--background-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    text-align: center;
    padding: 20px;
}

.guide-card:hover {
    transform: scale(1.02);
}

.guide-card h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.guide-card p {
    font-size: 0.95rem;
    color: var(--text-muted-color);
    margin-bottom: 0;
}

.accordion-item {
    border-color: rgba(50, 43, 131, 0.08);
}

.accordion-button:focus {
    outline: none;
    box-shadow: none;
}

.accordion-button::after {
    color: var(--text-color);
}

/* Custom arrow icon for FAQ accordion (blue arrow) */

.accordion-button::after {
    content: "\f107";
    /* Font Awesome down arrow */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--text-color);
    /* Set arrow color to blue */
    font-size: 1.2rem;
    transition: transform 0.2s ease-in-out;
    background-image: none;
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
    transform: rotate(180deg);
}

/* Terms of Service Page Custom Styles */

.terms-of-service {
    color: var(--text-color, #322b83);
}

.terms-of-service article {
    background: var(--background-color, #ffffff);
    padding: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.terms-of-service h3 {
    font-size: 1.75rem;
    font-family: "Poppins-Bold", sans-serif;
    color: var(--primary-color, #322b83);
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--secondary-color, #f68e3a);
    padding-bottom: 5px;
}

.terms-of-service p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--text-color, #322b83);
}

.terms-of-service a {
    color: var(--secondary-color, #f68e3a);
    text-decoration: underline;
}

.terms-of-service a:hover {
    color: var(--primary-color, #322b83);
}

/* Privacy Policy Page Custom Styles */

.privacy-policy {
    background-color: #ffffff;
    /* White background for the main section */
    color: var(--text-color, #322b83);
}

.privacy-policy article {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}


.privacy-policy p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.privacy-policy ul {
    margin: 20px 0;
    padding-left: 20px;
}

.privacy-policy li {
    margin-bottom: 10px;
    font-size: 1rem;
}

.privacy-policy a {
    color: var(--secondary-color, #f68e3a);
    text-decoration: underline;
}

.privacy-policy a:hover {
    color: var(--primary-color, #322b83);
}

/* ================================
     Single Product Page Custom Styles
     ================================ */

.product-detail {
    padding: 60px 0;
    background-color: var(--secondary-background-color, #f8f7fc);
    font-family: "Poppins", sans-serif;
}

.product-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 30px;
}

.product-media {
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 510px;
    overflow: hidden;
}

.product-media img,
.product-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-media img:hover,
.product-media video:hover {
    transform: scale(1.05);
}

.product-info {
    padding: 30px;
}

.product-title {
    font-size: 2rem;
    font-family: "Poppins-Bold", sans-serif;
    color: var(--primary-color, #322b83);
    margin-bottom: 15px;
}

.product-price {
    font-size: 1.5rem;
    color: var(--secondary-color, #f68e3a);
    margin-bottom: 20px;
}

.product-description {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: var(--text-color, #322b83);
}

.product-details-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    grid-template-columns: 1fr 1fr;
    gap: 10px 30px;
    display: grid;
}

.product-details-list li {
    font-size: 0.9rem;
    color: var(--text-muted-color, #44345c);
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-details-list li i {
    color: var(--secondary-color, #f68e3a);
}

.add-to-cart-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color, #322b83);
    color: #fff;
    font-size: 1.1rem;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.add-to-cart-btn i {
    margin-right: 8px;
}

.add-to-cart-btn:hover {
    background-color: var(--secondary-color, #f68e3a);
}

/* ================================
       Related Media Section
       ================================ */

.related-media {
    background-color: #ffffff;
    font-family: "Poppins", sans-serif;
}

.related-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.related-media-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-media-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.related-media-img {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.related-media-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.related-media-info {
    padding: 15px;
    text-align: center;
}

.related-media-info h4 {
    font-size: 1.3rem;
    font-family: "Poppins-Bold", sans-serif;
    margin-bottom: 10px;
    color: var(--primary-color, #322b83);
}

.related-media-info p {
    font-size: 1rem;
    color: var(--secondary-color, #f68e3a);
}

/* ================================
     Product Reviews Section
     ================================ */

.product-reviews {
    background-color: #ffffff;
}

.review-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 20px 0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.review-header .reviewer-name {
    font-size: 1.1rem;
    font-family: "Poppins-Bold", sans-serif;
    color: var(--primary-color, #322b83);
}

.review-header .review-date {
    font-size: 0.9rem;
    color: var(--text-muted-color, #44345c);
}

.review-rating {
    color: var(--secondary-color, #f68e3a);
    margin-bottom: 10px;
}

.review-rating i {
    margin-right: 2px;
}

.review-comment {
    font-size: 1rem;
    color: var(--text-color, #322b83);
    line-height: 1.6;
}

/* ================================
     Articles Page Custom Styles
     ================================ */

/* Filter Bar Section */

.articles-filter-bar {
    padding: 0;
    margin-bottom: 20px;
}

.articles-filter-bar form {
    background: #fff;
    padding: 15px 20px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
}

.articles-filter-bar form > .form-area {
    flex: 1;
}

.articles-filter-bar .form-control,
.articles-filter-bar .form-select {
    border-radius: 50px;
}

.articles-filter-bar .input-group-text {
    border-radius: 50px 0 0 50px;
}

/* Articles Grid Section */

.articles-grid-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.articles-grid-section .article-card {
    margin: 0;
}

/* Preloader Styles */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f7fc;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Loader from Uiverse.io by Shoh2008 */

.loader {
    width: 64px;
    height: 64px;
    position: relative;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.loader:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    transform: rotate(45deg) translate(30%, 40%);
    background: #ff9371;
    box-shadow: 32px -34px 0 5px #ff3d00;
    animation: slide 2s infinite ease-in-out alternate;
}

.loader:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff3d00;
    transform: rotate(0deg);
    transform-origin: 35px 145px;
    animation: rotate 2s infinite ease-in-out;
}

@keyframes slide {

    0%,
    100% {
        bottom: -35px;
    }

    25%,
    75% {
        bottom: -2px;
    }

    20%,
    80% {
        bottom: 2px;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(-15deg);
    }

    25%,
    75% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(25deg);
    }
}

/* Privacy Policy Page Custom Styles */

.privacy-policy {
    background-color: #ffffff;
    /* White background for the main section */
    color: var(--text-color, #322b83);
}

.privacy-policy article {
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.privacy-policy h3 {
    font-size: 1.8rem;
    font-family: "Poppins-Bold", sans-serif;
    color: var(--primary-color, #322b83);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--secondary-color, #f68e3a);
    padding-bottom: 5px;
}

.privacy-policy p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.privacy-policy ul {
    margin: 20px 0;
    padding-left: 20px;
}

.privacy-policy li {
    margin-bottom: 10px;
    font-size: 1rem;
}

.privacy-policy a {
    color: var(--secondary-color, #f68e3a);
    text-decoration: underline;
}

.privacy-policy a:hover {
    color: var(--primary-color, #322b83);
}

/* --- Article Page Additional Styles --- */

.article-hero {
    background: var(--secondary-background-color);
    padding: 40px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.article-hero h1 {
    font-size: 2.8rem;
    color: var(--primary-color, #322b83);
    margin-bottom: 10px;
}

.article-meta {
    display: flex;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-muted-color);
    gap: 10px;
}

.article-container {
    padding: 40px 0;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.article-main {
    flex: 0 0 65.66%;
}

.article-main .featured {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.author-box {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.author-box img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 20px;
}

.author-info .name {
    font-size: 1.2rem;
    color: var(--primary-color, #322b83);
    font-weight: bold;
}

.article-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: var(--text-muted-color);
}

/* Sidebar for Related Articles */

.article-sidebar {
    flex: 0 0 30.33%;
    border-left: 1px solid #eee;
    padding-left: 30px;
}

.related-articles h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--primary-color, #322b83);
}

.related-articles ul {
    list-style: none;
    padding: 0;
}

.related-articles ul li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.related-articles ul li img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px;
}

.related-articles ul li a {
    font-size: 1rem;
    color: var(--primary-color, #322b83);
    text-decoration: none;
    font-weight: 500;
}

.related-articles ul li a:hover {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .article-container {
        flex-direction: column;
    }

    .article-main,
    .article-sidebar {
        flex: 1 1 100%;
    }

    .article-sidebar {
        border-left: none;
        padding-left: 0;
        margin-top: 30px;
    }
}

/* -------------------- Newsletter Section -------------------- */

.newsletter-section {
    padding: 60px 0;
    background-color: var(--background-color, #ffffff);
    border-top: 1px solid var(--border-color, #44345c);
}

.newsletter-section .container {
    max-width: 800px;
    margin: 0 auto;
}

.newsletter-form .input-group {
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-form .form-control {
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 30px 0 0 30px;
    padding: 12px 20px;
    font-size: 1rem;
}

.newsletter-form .btn {
    border-radius: 0 30px 30px 0;
    padding: 12px 20px;
    font-size: 1rem;
    background-color: var(--primary-color, #322b83);
    border: 1px solid var(--primary-color, #322b83);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.newsletter-form .btn:hover {
    background-color: var(--secondary-color, #f68e3a);
    border-color: var(--secondary-color, #f68e3a);
}

.navbar .item-last {
    order: 3;
}

@media (max-width: 768px) {
    .footer-columns {
        display: flex !important;
        flex-flow: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .section-title {
        width: auto;
        line-height: 120%;
    }

    .section-title span {
        font-size: 1.6rem !important;
        line-height: 120%;
    }


    .articles-grid,
    .media-grid {
        grid-template-columns: 1fr;
    }

    .owl-next {
        right: 0 !important;
    }

    .owl-prev {
        left: 0 !important;
    }

    .collections-container {
        width: 100%;
        height: 500px;
        flex-flow: column;
    }

    .collection-panel {
        flex: 2;
    }

    .articles-section {
        padding: 0;
    }

    .owl-carousel.testimonial-slider {
        padding: 20px;
    }

    .testimonial-slide {
        padding: 0 10px;
    }

    section {
        padding: 40px 0;
    }

    .filter-sidebar {
        margin-bottom: 20px;
    }

    .section-title::before {
        top: 0;
        display: none;
    }

    .product-details-list {
        grid-template-columns: 1fr;
    }

    .article-hero h1 {
        font-size: 1.8rem !important;
    }

    .article-meta {
        gap: 10px;
    }

    .shopping-cart-dropdown {
        right: 50%;
        transform: translateX(50%);
    }

    .navbar .item-last {
        order: 0;
        margin-inline-start: auto;
        margin-right: 20px;
    }

    .navbar > .container {
        justify-content: space-between;
    }
}


.switch-language {
    position: relative;
    display: inline-block;
    margin: 0;
}

.switch-language > span {
    position: absolute;
    top: 9px;
    pointer-events: none;
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    width: 50%;
    text-align: center;
}

.switch-language input.check-toggle-round-flat:checked ~ .off {
    color: var(--secondary-color);
}

.switch-language input.check-toggle-round-flat:checked ~ .on {
    color: #fff;
}

.switch-language > span.on {
    left: 0;
    padding-left: 2px;
    color: var(--secondary-color);
}

.switch-language > span.off {
    right: 0;
    padding-right: 4px;
    color: #fff;
}

.switch-language .check-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}

.switch-language .check-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.switch-language input.check-toggle-round-flat + label {
    padding: 2px;
    width: 97px;
    height: 40px;
    background-color: var(--secondary-color);
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
}

.switch-language input.check-toggle-round-flat + label:before,
input.check-toggle-round-flat + label:after {
    display: block;
    position: absolute;
    content: "";
}

.switch-language input.check-toggle-round-flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: var(--secondary-color);

    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
}

.switch-language input.check-toggle-round-flat + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 44px;
    background-color: #fff;
    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    -ms-border-radius: 52px;
    -o-border-radius: 52px;
    border-radius: 52px;
    -webkit-transition: margin 0.2s;
    -moz-transition: margin 0.2s;
    -o-transition: margin 0.2s;
    transition: margin 0.2s;
}

.switch-language input.check-toggle-round-flat:checked + label {
}

.switch-language input.check-toggle-round-flat:checked + label:after {
    margin-left: 44px;
}


.form-registration {
    width: 95%;
    max-width: 900px;
    height: 580px;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.1), 0 10px 10px -10px rgba(0, 0, 0, 0.02);
    display: flex;
    background: #fff;;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #eee;
}

.form-registration .title-login {
    font-size: 2.2em;
    line-height: 130%;
    text-align: center;
    color: var(--text-color);
}

.form-registration select,
.form-registration input {
    background: var(--secondary-background-color);
    border: none;
    padding: 12px 15px;
    margin: 0;
    width: 100%;
    font-size: 1em;
    height: 50px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.form-registration form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.forget,
.remember {
    font-size: 14px;
    color: var(--text-muted-color);
}

.form-registration input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}


.form-registration button {
    margin: 0 auto;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
    height: 50px;
    border-radius: 8px;
    width: 100%;
}

.form-registration span.loginwith {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    color: #333;
    font-size: 1em;
    display: inline-block;
    margin: 15px auto;
    font-weight: 100;
}

.form-registration span.loginwith::before {
    content: "";
    display: inline-block;
    width: 42%;
    height: 1px;
    background: #aaa;
    vertical-align: middle;
    margin-right: 5%;
}

.form-registration span.loginwith::after {
    content: "";
    display: inline-block;
    width: 45%;
    height: 1px;
    background: #aaa;
    vertical-align: middle;
    margin-left: 5%;
}

.form-registration .btn-google {
    background: #F9F9F9;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 10px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.form-registration .left-content {
    background: var(--secondary-color);
    padding: 2em 3em;
    text-align: center;
    width: 100%;
    height: 100%;
    flex: 1;

}

.back-button {
    margin-bottom: 40px;
}

.d-flex-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 80%;
}

.form-registration .btn-light {
    padding: 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-registration .right-content {
    padding: 2em 3em;
    text-align: center;
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.left-content h1 {
    color: #fff;
    font-size: 32px;
    line-height: 130%;

}

.left-content img {
    max-width: 100px;
}

.left-content p {
    color: #fff;
    font-size: 18px;
    line-height: 130%;

}

.left-content .btn {
    /* margin: 1em auto; */
    height: 45px;
    border-radius: 8px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
    border-color: #fff;
    background: transparent;
}

.left-content .btn:hover {
    background: #fff;
    color: var(--secondary-color);
}

.login-form {
    flex-direction: row-reverse;
}

.login-form .left-content {
    background: var(--primary-color);

}

.form-error-box {
    background-color: #ffe0e0;
    color: #b30000;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.08);
}

.form-error-box i {
    color: #ff4d4f;
    font-size: 16px;
}

input[type="tel"] {
    padding-inline-start: 50px;
}

.session-error-box {
    background: linear-gradient(90deg, #ffdddd, #ffeaea);
    border-left: 5px solid #ff4d4f;
    color: #b30000;
    font-size: 15px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    justify-content: center;
    font-weight: 600;
}

.session-error-box i {
    font-size: 18px;
}

@media (max-width: 768px) {
    .form-registration {
        flex-direction: column-reverse;
        height: auto;
        margin: auto;
        width: 100%;
    }

    .form-registration .right-content {
        padding: 2rem 1rem;
    }
}


/* ---------------- new ---------------*/

/* The snackbar - position it at the bottom and in the middle of the screen */

#successSnackbar, #failSnackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: green; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 130px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */

#successSnackbar.show, #failSnackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#failSnackbar {
    background-color: red;
}


/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

/* ------------------ User Profile Dropdown ------------------ */

.user-profile-wrapper {
    position: relative;
    margin-left: 20px;
    display: flex;
}

.user-profile-link {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    width: 40px;
    height: 40px;
}

.user-profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
    transition: border 0.3s;
    cursor: pointer;
}

.user-profile-link:hover .user-profile-pic {
    border-color: var(--secondary-color);
}

.user-profile-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 200px;
    z-index: 1000;
}

.user-profile-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-profile-dropdown ul li {
    border-bottom: 1px solid #eee;
}

.user-profile-dropdown ul li:last-child {
    border-bottom: none;
}

.user-profile-dropdown ul li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.95rem;
    transition: background 0.3s;
}

.user-profile-dropdown ul li a:hover {
    background: var(--secondary-background-color);
}

.user-profile-dropdown.active {
    display: block;
}

.user-profile-pic.placeholder {

    background: linear-gradient(45deg, #ff7e5f, #feb47b); /* تدرج لوني جذاب */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    border: transparent;
}

.profile-picture .user-profile-pic.placeholder {
    font-size: 32px;

}


.search-page {
    padding-top: 40px;
}

.search-page .media-img {

    /*padding-bottom: 0;*/
}

.search-page .media-img img {
    /*position: inherit;*/
    aspect-ratio: 4 / 3;
    height: auto;

}

.price-range-box {
    margin-top: 1.5rem;
}

.price-range-title {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.range-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: #555;
}

.range-values strong {
    color: #322b83;
}

.range-slider {
    position: relative;
    height: 40px;
}

.range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    background: transparent;
    height: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Slider Track */

.range-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
}

/* Slider Thumb */

.range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    background: #322b83;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: -6px;
    cursor: pointer;
    pointer-events: all;
    transition: background 0.2s ease;
}

.range-slider input[type="range"]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    background: #322b83;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
}

date-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 2px;
}

.date-range-column {

    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.5rem;

}

.date-range-column .date-input {
    background: #fff;
    color: var(--text-muted-color);
    border-radius: 6px;
    padding: 6px 16px;
    border: 1px solid #d8d8d8;
    font-size: 14px;
    transition: border 0.2s ease;
}

.date-range-column .date-input:focus {
    border-color: #4a6cf7;
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.15);
}

.date-range-column .date-input::placeholder {
    color: #888;
    font-weight: 500;
}

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 1rem;
}

.settings-section .social-links {
    flex-flow: column;
}

.settings-section .social-links label {
    line-height: 1;
    margin: 0;
}

.social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #f8f7fc;
    color: #322b83;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.social-links a:hover {
    background-color: #f68e3a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(246, 142, 58, 0.4);
}

.portfolio-overlay h3 {
    font-size: 1rem !important;
    color: #fff !important;
    margin: 0 !important;
}

.portfolio-overlay
.media-type {
    width: 30px;
    height: 30px;
}

/* Profile card container */

.profile-info-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;


    align-items: center;


}

/* Avatar styling */

.profile-avatar img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #f8f7fc;
}

/* Details section layout */

.profile-details {
    width: 100%;
}

/* Name styling */

.profile-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: #322b83;
    margin: 0;
}

/* Role/profession styling */

.profile-role {
    font-size: 1rem;
    color: #4a4a4a;
    margin: 0.25rem 0 0.75rem;
}

/* Bio text styling */

.profile-bio {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
}

/* Statistics list styling */

.profile-stats {
    display: flex;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

/* Individual stat item */

.profile-stats li {
    text-align: center;
}

/* Number emphasis */

.profile-stats strong {
    display: block;
    font-size: 1.25rem;
    color: #322b83;
    font-weight: 600;
}

/* Alternate stat color */

.profile-stats li + li strong {
    color: #322b83;
}

/* Contact links layout */

.profile-contact {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Individual contact link styling */

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4a4a4a;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s;
}

/* Contact link hover effect */

.contact-link:hover {
    color: #322b83;
}

/* Social icon styling */

.profile-socials a {
    margin-right: 0.75rem;
    color: #555;
    font-size: 1.1rem;
    transition: color 0.2s, transform 0.2s;
}

/* Social icon hover effect */

.profile-socials a:hover {
    color: #f68e3a;
    transform: translateY(-2px);
}

/* Base for Clear Filters button */

.btn-clear {
    display: block;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #323b97;
    border: none;
    background: transparent;
    width: max-content;
    text-decoration: underline;
    margin-left: auto;
}

/* Hover state */

.btn-clear:hover {
    background-color: transparent;
    box-shadow: none;
}

/* Active / focus state */

.btn-clear:active,
.btn-clear:focus {
    outline: none;
    background-color: transparent;
    box-shadow: none;
}

/* Icon spacing */

.btn-clear i {
    font-size: 1.1rem;
}

/* Ensure the filter-clear wrapper doesn't interfere with other styles */

.filter-clear {
    width: 100%;
}

.alert .fa-exclamation-triangle {
    font-size: 1.2rem;
}

.alert .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.search-page
.media-grid a {
    height: 280px;
    display: block;
}

/* Media Card Styles */

.search-page
.media-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* Media Image Container */

.search-page
.media-img {
    position: relative;
    width: 100%;
    padding-bottom: 65%;
    /* Aspect ratio control */
    height: 100%;
    overflow: hidden;
}

.search-page
.media-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    z-index: 1;
}

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

}

/* Overlay with Media Info */

.search-page
.media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(50, 43, 131, 0.7);
    /* Semi-transparent overlay */
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    z-index: 2;
}

.result-card:hover .media-overlay,
.media-card:hover .media-overlay {
    opacity: 1;

}

/* Media Info Text */

.search-page
.media-info {
    color: #fff;
}

.search-page
.media-info h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.search-page
.media-overlay .media-info h3 {
    margin-bottom: 0;
}

.search-page
.media-info p {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--neutral-light);
}

.container-btn-category {
    width: 100%;
}

.container-btn-category button {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--border-color);
    width: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.container-btn-category
.dropdown-toggle::after {
    display: none;
}


.news-slider .read-more {
    background-color: var(--secondary-color);
    color: white;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.news-slider .read-more i {
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

.news-slider .read-more:hover {
    background-color: var(--primary-color);
}

.news-slider .read-more:hover i {
    transform: rotate(0deg);
}

@media (max-width: 768px) {
    .main-content.active {
        margin-left: 90px;
    }

    .sidebar {
        width: 0 !important;
    }

    .sidebar.active {
        width: 90px !important;
    }

    .sidebar.active .sidebar-section-title,
    .sidebar.active nav ul li a span {
        display: none;
    }

    .sidebar.active .show-in-desktop {
        display: none;
    }

    .sidebar.active .show-in-mobile {
        display: block;
    }

    .sidebar.active nav ul li a {
        justify-content: center;
    }

    .main-content {
        margin-left: 0;
        padding: 20px;
    }

    .main-content.active {
    }

    .dashboard-header {
        padding: 10px;
    }

    .icon-wrapper {
        width: 35px;
        height: 35px;
        margin-left: 10px;
    }

    .icon-wrapper a {
        font-size: 1rem;
    }

    .header-container {
        gap: 0;
    }

    .header-left {
        flex: 2 !important;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }

    .stat-card {
        gap: 10px;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-align-last: center;
    }

    .section-title-dahsboard {
        font-size: 1.2em;
    }

    .hamburger {
        width: 35px;
        height: 35px;
    }

    .btn {
        font-size: 14px;
        padding: 10px;
    }

    section {
        padding: 40px 0;
    }

    canvas {
        width: 100% !important;
        height: auto !important;
    }

    .chart-card {
        min-width: 280px;
    }

    .purchase-filters {
        flex-flow: column;
        gap: 10px;
    }

    .transaction-filters .filter-group,
    .purchase-filters .d-flex {
        flex-wrap: wrap;
        width: 100%;
    }

    .header-section .btn {
        width: max-content;
    }

    #revenueBreakdownChart {
        width: 100% !important;
        height: auto !important;
        margin: auto;
    }

    .settings-container {
        gap: 20px;
        background: transparent;
    }

    #salesChart {
        height: 300px !important;
    }

    .search-box {
        display: none;
    }

    .alert-warning {
        flex-direction: column;
        align-items: end !important;

    }

    .privacy-policy article {
        padding: 20px;
    }

    .gallery-row {
        flex-direction: column;
    }

    .gallery-card {
        flex: none;
        width: 100%;

    }
    .search-filter{
        box-shadow: none;
    }
}


.creative-videos-section {
    background-color: var(--secondary-background-color, #f7f7f7);
}


/* ===== Minimal, professional styling ===== */


/* Grid: responsive 1–3 columns */
.editorial__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .editorial__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .editorial__grid {
        grid-template-columns: 1fr;
    }
}

.card--editorial {
    overflow: visible;
    border-radius: 16px;
}

/* Media (keeps consistent height using aspect-ratio) */
.card__media {
    margin: 0;
}

.card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; /* adjust if you prefer */
    object-fit: cover;
    display: block;
    border-radius: 16px;

}

/* Overlay container */
.card__overlay {
    position: absolute;
    bottom: 0;
    padding: 14px 16px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 16px;
}

/* Info block (left side) */
.card__info {
    display: grid;
    gap: 8px;
    max-width: 85%;
}

/* Meta row */
.card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    color: #fff;
}

/* Category pill */
.badge--soft {
    display: inline-block;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
}

/* Title */
.card__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.35;
    color: #fff;
    font-weight: 700;
}

/* CTA circle button */
.card__cta_container {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.card__cta {
    border: 1px solid var(--secondary-color);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;

    color: var(--primary-color);
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease;
}

.card__cta:hover {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* Optional: subtle inset border around the image for polish */
.card__img {
    border-right: 12px;
}

/* ===== Hero banner background ===== */
.hero-banner {
    /* Full-width section with background image */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 60px 0; /* vertical breathing space */
    position: relative;
}

/* ===== The translucent rounded panel ===== */
.hero-panel {
    /* Semi-transparent dark overlay (like the screenshot) */
    background: rgba(51, 44, 129, 0.40);


    color: #fff;
    padding: 48px 28px;
    border-radius: 18px;
    max-width: 980px; /* keeps it from stretching too wide */
    margin: 0 auto; /* center within container */
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

/* ===== Typography ===== */
.hero-title {
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.5px;
    margin: 0 0 14px;
    text-transform: uppercase; /* matches the screenshot */
}

.hero-subtitle {
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.7;
    opacity: 0.95;
    max-width: 900px;
    margin: 0 auto 22px;
}

/* ===== CTA Button (orange, rounded) ===== */
.hero-cta {
    /* Solid orange button similar to the image */
    background-color: var(--secondary-color); /* adjust to your brand if needed */
    color: #fff;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 700;
    border: none;
    text-decoration: none;
    margin: 0 auto;
}

.hero-cta:hover,
.hero-cta:focus {
    background-color: #e18c1f;
    color: #fff;
}

/* ===== Responsive touch-ups ===== */
@media (max-width: 576px) {
    .hero-panel {
        padding: 28px 20px;
    }
}



/* Editorial Page Styles */
.editorial-trending {
    padding: 32px 0 16px;
    border-bottom: 1px solid var(--border-color);
}

.trending-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--primary-color);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 10px 20px;
    width: fit-content;
    box-shadow: 0 10px 30px rgba(20, 16, 100, 0.08);
    margin: auto;
}

.trending-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: #ffffff;
}

.trending-label {
    letter-spacing: 0.4px;
}

.tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    justify-content: center;
}

.tag-chip {
    border: none;
    background: #ffffff;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 500;
    color: var(--text-muted-color);
    box-shadow: 0 8px 24px rgba(25, 22, 90, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tag-chip:hover,
.tag-chip.active {
    background: var(--secondary-color);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(246, 142, 58, 0.35);
}

.last-media-section {
    padding: 40px 0;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.section-heading h2 {
    font-family: "Poppins-SemiBold";
    font-size: 28px;
    color: var(--primary-color);
}

.media-card-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.media-card-grid.columns-4 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.media-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.media-card:hover {
    transform: translateY(-6px);
}

.media-thumb {
    aspect-ratio: 16 / 10;
    width: 100%;
    overflow: hidden;
}

.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-body {
    padding: 20px 22px 24px;
}

.media-body h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--text-color);
}

.media-meta {
    font-size: 14px;
    color: var(--neutral-dark);
}

.media-empty-state {
    background: #ffffff;
    border-radius: 24px;
    padding: 48px 24px;
    text-align: center;
    font-size: 16px;
    color: var(--neutral-dark);
    box-shadow: 0 18px 40px rgba(20, 16, 100, 0.08);
}

.editorial-main {
    padding: 24px 0 80px;
    background-color: var(--secondary-background-color);
}

.editorial-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 32px;
}

.sidebar-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(20, 16, 100, 0.08);
    margin-bottom: 24px;
}

.sidebar-title {
    font-family: "Poppins-SemiBold";
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 18px;
}

.agenda-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.agenda-list li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.agenda-time {
    font-family: "Poppins-SemiBold";
    color: var(--secondary-color);
    min-width: 56px;
}

.agenda-info {
    flex: 1;
}

.agenda-info p {
    margin: 4px 0 0;
    color: var(--neutral-dark);
    font-size: 14px;
}

.agenda-tag {
    display: inline-block;
    background: rgba(246, 142, 58, 0.12);
    color: var(--secondary-color);
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.top-story-chips {
    display: grid;
    gap: 12px;
}

.story-chip {
    display: block;
    padding: 14px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(50, 43, 131, 0.9), rgba(246, 142, 58, 0.85));
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    letter-spacing: 0.6px;
}

.story-chip:hover {
    opacity: 0.85;
}

.mini-media-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.mini-media-list li {
    display: flex;
    gap: 14px;
    align-items: center;
}

.mini-media-list img {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 12px 32px rgba(20, 16, 100, 0.1);
}

.mini-media-list h4 {
    font-size: 15px;
    margin: 0 0 6px;
    color: var(--text-color);
}

.mini-media-list span {
    font-size: 13px;
    color: var(--neutral-dark);
}

.breaking-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.breaking-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(20, 16, 100, 0.12);
}

.field-list li {
    align-items: flex-start;
}

.editorial-content .category-block {
    margin-bottom: 48px;
}

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.category-kicker {
    font-family: "Poppins-SemiBold";
    font-size: 22px;
    position: relative;
    padding-left: 18px;
}

.category-kicker::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.accent-politics {
    color: #d7432f;
}

.accent-culture {
    color: #f68e3a;
}

.accent-sports {
    color: #0fb37a;
}

@media (max-width: 1200px) {
    .media-card-grid.columns-4 {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 992px) {
    .editorial-layout {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 576px) {
    .trending-banner {
        width: 100%;
        justify-content: center;
    }

    .tag-chip {
        width: 100%;
        text-align: center;
    }

    .media-body {
        padding: 18px;
    }

    .media-card {
        border-radius: 20px;
    }

    .mini-media-list li {
        align-items: flex-start;
    }
}

/* Events Calendar Styles */
.events-calendar-section {
    padding: 60px 0 100px;
    background: var(--secondary-background-color);
}

.calendar-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(20, 16, 100, 0.08);
    padding: 32px;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.calendar-month {
    font-family: "Poppins-SemiBold";
    font-size: 24px;
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.calendar-month .btn{
    margin: 0;
}
.calendar-nav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: all 0.2s ease;
}

.calendar-nav:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff;
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-weekdays {
    margin-bottom: 12px;
    text-align: center;
    font-weight: 600;
    color: var(--neutral-dark);
}

.calendar-grid {
    min-height: 420px;
}

.calendar-day {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: default;
    outline: none;
}

.calendar-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(20, 16, 100, 0.08);
}

.calendar-day:focus-visible {
    box-shadow: 0 0 0 3px rgba(50, 102, 255, 0.25);
    border-color: #1d4ed8;
}

.calendar-day.disabled {
    opacity: 0.45;
    cursor: default;
}

.calendar-day .day-number {
    font-family: "Poppins-SemiBold";
    font-size: 15px;
    color: var(--text-color);
}

.calendar-day.disabled .day-number {
    color: var(--neutral-dark);
}

/* Today marker */
.calendar-day.today {
    border-color: rgba(29, 78, 216, 0.55);
    position: relative;
}

.calendar-day.today .day-number {
    color: #1d4ed8;
}

.calendar-day.today::after {
    content: "Today";
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.08);
    border-radius: 999px;
    padding: 2px 8px;
}

.calendar-day.has-events {
    cursor: pointer;
    border-color: rgba(246, 142, 58, 0.45);
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}

.calendar-event-badge {
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    padding: 6px 10px;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    background: rgba(50, 43, 131, 0.08);
    color: var(--primary-color);
}

.calendar-event-badge.primary {
    background: rgba(50, 102, 255, 0.12);
    color: #1d4ed8;
}

.calendar-event-badge.accent {
    background: rgba(246, 142, 58, 0.15);
    color: #f97316;
}

.calendar-event-badge.success {
    background: rgba(16, 185, 129, 0.18);
    color: #0f9d69;
}

.calendar-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: var(--neutral-dark);
    font-size: 12px;
}

.calendar-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.calendar-legend .today-dot {
    background: #1d4ed8;
}

.calendar-legend .event-dot {
    background: #f97316;
}

.events-offcanvas {
    max-width: 800px;
    width: 100% !important;
}

.events-offcanvas .offcanvas-header {
    padding: 28px 28px 12px;
    border-bottom: 1px solid var(--border-color);
}

.events-offcanvas-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.events-offcanvas-kicker {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.events-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 28px 32px;
    background: var(--secondary-background-color);
}

.media-empty-state {
    margin: 0;
}

.event-card {
    display: flex;
    gap: 18px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 18px 20px;
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(20, 16, 100, 0.08);
}

.event-card-date {
    flex: 0 0 88px;
    border-radius: 18px;
    background: rgba(246, 142, 58, 0.12);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.event-card-date .month {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-color);
}

.event-card-date .day {
    font-size: 28px;
    font-family: "Poppins-SemiBold";
    color: var(--text-color);
    line-height: 1;
}

.event-card-date .year {
    font-size: 12px;
    color: var(--neutral-dark);
}

.event-card-date .time {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: var(--secondary-color);
    border-radius: 999px;
    padding: 6px 12px;
}

.event-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.event-card-header {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.event-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-card-category {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.event-card-info h4 {
    font-size: 18px;
    color: var(--text-color);
    margin: 0;
}

.event-card-info p {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-dark);
    line-height: 1.6;
}

.event-card-media {
    flex: 0 0 140px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.event-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.event-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--neutral-dark);
}

.event-card-meta i {
    color: var(--secondary-color);
}

.event-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.event-card-actions .event-button {
    flex: 1;
    min-width: 130px;
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 600;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-card-actions .event-button.primary {
    background: var(--secondary-color);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(246, 142, 58, 0.35);
}

.event-card-actions .event-button.primary:hover {
    transform: translateY(-1px);
}

.event-card-actions .event-button.outline {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
}

.event-card-actions .event-button.outline:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .calendar-card {
        padding: 20px;
    }

    .calendar-weekdays,
    .calendar-grid {
        gap: 6px;
    }

    .calendar-day {
        padding: 10px;
        justify-content: center;
    }

    .events-offcanvas {
        max-width: 100%;
    }

    .event-card {
        flex-direction: column;
    }

    .event-card-date {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .event-card-date .time {
        margin-top: 0;
    }

    .event-card-header {
        flex-direction: column;
    }

    .event-card-media {
        width: 100%;
        height: 180px;
    }

    .event-card-actions {
        flex-direction: column;
    }
}

.event-card-actions .event-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(246, 142, 58, 0.25);
}

.events-offcanvas .btn-close {
    box-shadow: none !important;
}

@media (max-width: 576px) {
    .calendar-events .calendar-event-badge {
        display: none !important;
    }

    .calendar-events {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: auto;
        min-height: 12px;
    }

    .calendar-events::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        background: #f97316;
    }

    .calendar-events::after {
        content: attr(data-count);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        background: rgba(246, 142, 58, 0.14);
        color: #f97316;
    }


}

/* Mobile-friendly "Today" indicator */
@media (max-width: 576px) {

    .calendar-day.today::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 10px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #1d4ed8;
        padding: 0;
    }

    .calendar-day.today .day-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(29, 78, 216, 0.10);
        color: #1d4ed8;
        font-weight: 700;
    }
}

/* Show the "Today" label only on larger screens */
@media (min-width: 577px) {
    .calendar-day.today::after {
        content: "Today";
        position: absolute;
        top: 8px;
        right: 10px;
        font-size: 11px;
        font-weight: 700;
        color: #1d4ed8;
        background: rgba(29, 78, 216, 0.08);
        border-radius: 999px;
        padding: 2px 4px;
    }
}