@import url('https://fonts.googleapis.com/css?family=Tajawal&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@font-face{
    font-family:'Montserrat';
    src:url("fonts/Montserrat-Black.eot");
    src:local("☺"),url("fonts/Montserrat-Black.woff") format("woff"),url("fonts/Montserrat-Black.ttf") format("truetype"),url("fonts/Montserrat-Black.svg") format("svg");
    font-weight:900;
    font-style:normal
}
@font-face{
    font-family:'Montserrat';
    src:url("fonts/Montserrat-Bold.eot");
    src:local("☺"),url("fonts/Montserrat-Bold.woff") format("woff"),url("fonts/Montserrat-Bold.ttf") format("truetype"),url("fonts/Montserrat-Bold.svg") format("svg");
    font-weight:700;
    font-style:normal
}
@font-face{
    font-family:'Montserrat';
    src:url("fonts/Montserrat-Regular.eot");
    src:local("☺"),url("fonts/Montserrat-Regular.woff") format("woff"),url("fonts/Montserrat-Regular.ttf") format("truetype"),url("fonts/Montserrat-Regular.svg") format("svg");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:'Montserrat';
    src:url("fonts/Montserrat-Light.eot");
    src:local("☺"),url("fonts/Montserrat-Light.woff") format("woff"),url("fonts/Montserrat-Light.ttf") format("truetype"),url("fonts/Montserrat-Light.svg") format("svg");
    font-weight:300;
    font-style:normal
}
:root { --color-primary: #06b6d4; --color-secondary: rgba(51, 170, 255, 1); --color-accent: #facc15; --color-background: #0e0e0e; --color-card: #18181b; --color-text: #ffffff; --color-text-muted: #cacaca; } * { margin: 0; padding: 0; font-family: "Montserrat", "Tajawal", sans-serif; box-sizing: border-box; } body { background-color: var(--color-background); color: var(--color-text); line-height: 1.5; } [class~="container"] { max-width: 75rem; margin: 0 auto; padding: 0 1.25rem; } [class~="header"] { position: fixed; top: 0; left: 0; right: 0; background-color: rgba(14, 14, 14, 0.9); backdrop-filter: blur(0.625rem); z-index: 1000; padding: 1.25rem 0; } [class~="header-content"] { display: flex; justify-content: space-between; align-items: center; } [class~="logo"] { color: var(--color-primary); font-size: 1.5rem; font-weight: bold; text-decoration: none; } [class~="nav-links"] { display: flex; gap: 1.875rem; } [class~="nav-link"] { color: var(--color-text); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } [class~="nav-link"]:hover { color: var(--color-primary); } [class~="lang-switcher"] { display: flex; gap: 0.625rem; } [class~="lang-btn"] { background-color: transparent; border: 0.0625rem solid var(--color-primary); color: var(--color-text); padding: 0.3125rem 0.9375rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.875rem; transition: all 0.3s ease; } [class~="lang-"]btn[class~="active"] { background-color: var(--color-primary); } [class~="hero"] { padding: 11.25rem 0 6.25rem; background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('/placeholder[class~="svg"]?height=800&width=1200'); background-size: cover; background-position: center; text-align: center; } [class~="hero"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1); z-index: 1; } [class~="hero-content"] { position: relative; z-index: 2; animation: fadeIn 1.5s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } } [class~="hero"] h1 { font-size: 3rem; margin-bottom: 1.25rem; text-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.5); } [class~="hero"] p { color: var(--color-text-muted); font-size: 1.125rem; max-width: 37.5rem; margin: 0 auto 1.875rem; text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.5); } [class~="btn"] { display: inline-block; background-color: rgba(6, 182, 212, 0.2); border: 0.125rem solid rgba(255, 255, 255, 0.3); color: var(--color-text); padding: 0.9375rem 1.875rem; border-radius: 3.125rem; text-decoration: none; font-weight: 600; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.0625rem; cursor: pointer; font-size: 1rem; position: relative; overflow: hidden; } [class~="btn"]::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transition: all 0.5s; } [class~="btn"]:hover::before { left: 100%; } [class~="btn"]:hover { transform: translateY(-0.125rem); } [class~="gang-system-section"] { padding: 6.25rem 0; border-top: 0.0625rem solid rgba(6, 182, 212, 0.2); border-bottom: 0.0625rem solid rgba(6, 182, 212, 0.2); } [class~="update-banner"] { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-bottom: 3.75rem; padding: 1.875rem; background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(6, 182, 212, 0.1)); border-radius: 1.25rem; border: 0.125rem solid rgba(245, 158, 11, 0.3); text-align: center; } [class~="update-icon"] { font-size: 3rem; color: #f59e0b; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } [class~="update-content"] h2 { font-size: 1.75rem; margin-bottom: 0.625rem; background: linear-gradient(45deg, #f59e0b, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [class~="update-content"] p { font-size: 1.125rem; color: var(--color-text-muted); } [class~="gang-features-grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: 1.875rem; margin-bottom: 3.75rem; } [class~="gang-feature-card"] { border: 0.0625rem solid rgba(245, 158, 11, 0.2); border-radius: 0.9375rem; padding: 1.875rem; text-align: center; transition: all 0.3s ease; backdrop-filter: blur(0.625rem); } [class~="gang-feature-card"]:hover { transform: translateY(-0.625rem); border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 1.25rem 2.5rem rgba(245, 158, 11, 0.1); } [class~="feature-icon"] { width: 5rem; height: 5rem; background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(6, 182, 212, 0.2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; border: 0.125rem solid rgba(245, 158, 11, 0.3); } [class~="feature-icon"] i { font-size: 2rem; color: #f59e0b; } [class~="gang-feature-card"] h3 { font-size: 1.5rem; margin-bottom: 0.9375rem; color: #fff; } [class~="gang-feature-card"] p { color: var(--color-text-muted); line-height: 1.6; } [class~="gang-video-section"] { text-align: center; margin-top: 3.75rem; } [class~="gang-video-section"] h3 { font-size: 1.75rem; margin-bottom: 1.875rem; color: #fff; } [class~="gang-cta"] { margin-top: 1.875rem; } [class~="gang-cta"] p { font-size: 1.125rem; margin-bottom: 1.25rem; color: var(--color-text-muted); } [class~="gang-btn"] { background: linear-gradient(135deg, #f59e0b, #d97706); border: 0.125rem solid #f59e0b; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 0.0625rem; padding: 0.9375rem 2.5rem; font-size: 1rem; } [class~="gang-btn"]:hover { background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 0.625rem 1.875rem rgba(245, 158, 11, 0.3); transform: translateY(-0.1875rem); } [class~="features"] { padding: 6.25rem 0; } [class~="section-header"] { text-align: center; margin-bottom: 3.75rem; } [class~="section-header"] h2 { font-size: 2.25rem; margin-bottom: 0.625rem; } [class~="section-header"] p { color: var(--color-text-muted); } [class~="cards"] { display: flex; justify-content: center; gap: 1.875rem; flex-wrap: wrap; margin-bottom: 3.75rem; } [class~="card"] { background-color: var(--color-card); border: 0.0625rem solid rgba(255, 255, 255, 0.1); border-radius: 0.9375rem; padding: 1.875rem; width: 21.25rem; position: relative; backdrop-filter: blur(0.625rem); transition: all 0.3s ease; } [class~="card"]:hover { transform: translateY(-0.625rem); box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.3); } [class~="card"] h3 { font-size: 1.5rem; margin-bottom: 1.25rem; text-align: center; color: #fff; } [class~="plan-icon"] { font-size: 3rem; text-align: center; margin-bottom: 1.25rem; } [class~="plan-description"] { color: rgba(255, 255, 255, 0.8); margin-bottom: 1.25rem; text-align: center; height: 2.5rem; } [class~="price"] { font-size: 2.25rem; font-weight: bold; margin-bottom: 0.3125rem; text-align: center; color: #fff; } [class~="before-price"] { text-decoration: line-through; color: rgba(236, 9, 9, 0.7); font-size: 1.75rem; margin-right: 0.625rem; } [class~="discount-price"] { color: #ffffff; font-weight: bold; font-size: 2.25rem; } [class~="price-period"] { color: rgba(255, 255, 255, 0.7); margin-bottom: 1.25rem; display: block; text-align: center; } [class~="features-list"] { list-style-type: none; padding: 0; margin-bottom: 1.875rem; max-height: fit-content; overflow-y: auto; } [class~="features-list"] li { margin-bottom: 0.625rem; display: flex; align-items: center; color: rgba(255, 255, 255, 0.9); } [class~="features-list"] li::before { content: "✓"; color: #fff; margin-right: var(--before-margin-right, 0); margin-left: var(--before-margin-left, 0); font-weight: bold; } [class~="card"] [class~="btn"] { width: 100%; text-align: center; margin-top: 1.25rem; padding: 0.75rem; border-radius: 0.625rem; font-weight: 600; transition: all 0.3s ease; } [class~="plan-btn-lite"] { background-color: rgba(16, 185, 129, 0.2); border: 0.125rem solid rgba(16, 185, 129, 0.6); color: #fff; } [class~="plan-btn-lite"]:hover { background-color: rgba(16, 185, 129, 0.3); } [class~="plan-btn-original"] { background-color: rgba(59, 130, 246, 0.2); border: 0.125rem solid rgba(59, 130, 246, 0.6); color: #fff; } [class~="plan-btn-original"]:hover { background-color: rgba(59, 130, 246, 0.3); } [class~="plan-btn-pro"] { background-color: rgba(245, 158, 11, 0.2); border: 0.125rem solid rgba(245, 158, 11, 0.6); color: #fff; } [class~="plan-btn-pro"]:hover { background-color: rgba(245, 158, 11, 0.3); } [class~="popular-badge"] { background-color: #3b82f6; color: #fff; padding: 0.375rem 1rem; border-radius: 1.25rem; font-size: 0.75rem; position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); font-weight: bold; box-shadow: 0 0.25rem 0.75rem rgba(59, 130, 246, 0.3); } [class~="plan-background-lite"] { background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95) ); box-shadow: 0 0.5rem 2rem rgba(16, 185, 129, 0.2); } [class~="plan-background-original"] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95) ); box-shadow: 0 0.5rem 2rem rgba(59, 130, 246, 0.2); } [class~="plan-background-pro"] { background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95) ); box-shadow: 0 0.5rem 2rem rgba(245, 158, 11, 0.2); } [class~="disabled-plan"] { opacity: 0.7; filter: grayscale(0.3); } [class~="disabled-plan"] button { background-color: rgba(156, 163, 175, 0.2) !important; border-color: rgba(156, 163, 175, 0.4) !important; cursor: not-allowed !important; } [class~="comparison-table"] { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 2.5rem; border-radius: 0.625rem; overflow: hidden; box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.1); } [class~="comparison-table"] th, [class~="comparison-table"] td { padding: 1.25rem; border-bottom: 0.0625rem solid #333; } [class~="comparison-table"] th { background: rgba(0, 180, 216, 0.1); border: 0.0625rem solid rgba(0, 180, 216, 0.2); font-weight: bold; text-transform: uppercase; letter-spacing: 0.0625rem; } [class~="comparison-table"] td { background-color: rgba(24, 24, 27, 0.3); } [class~="comparison-table"] tr:hover td { background-color: rgba(24, 24, 27, 0.5); } [class~="comparison-table"] tr:last-child td { border-bottom: none; } [class~="comparison-table"] td:first-child { font-weight: bold; } [class~="comparison-table"] [class~="check"] { color: var(--color-primary); font-size: 1.5rem; } [class~="comparison-table"] [class~="cross"] { color: #ff4d4d; font-size: 1.5rem; } [class~="video-section"] { padding: 5rem 0; text-align: center; } [class~="video-container"] { max-width: 50rem; margin: 0 auto; box-shadow: 0 0 1.875rem rgba(0, 0, 0, 0.3); border-radius: 0.625rem; overflow: hidden; } @media (max-width: 60.5rem) { [class~="cards"] { flex-direction: column; align-items: center; } [class~="card"] { width: 100%; max-width: 21.875rem; } [class~="gang-features-grid"] { grid-template-columns: 1fr; } [class~="update-banner"] { flex-direction: column; text-align: center; } } @media (max-width: 48rem) { [class~="nav-links"] { display: none; } [class~="hero"] h1 { font-size: 2.25rem; } [class~="comparison-table"] { font-size: 0.875rem; } [class~="comparison-table"] th, [class~="comparison-table"] td { padding: 0.625rem; } [class~="video-container"] { width: 90%; } [class~="update-content"] h2 { font-size: 1.375rem; } [class~="gang-feature-card"] { padding: 1.25rem; } } ::-webkit-scrollbar { width: 0.625rem; } ::-webkit-scrollbar-track { background-color: var(--color-background); } ::-webkit-scrollbar-thumb { background-color: var(--color-primary); border-radius: 0.625rem; border: 0.0625rem solid transparent; } ::-webkit-scrollbar-thumb:hover { background-color: #007292; } [class~="security-info"] { padding: 2rem 0; margin: 3rem 0; background: transparent; } [class~="security-content"] { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; max-width: 75rem; margin: 0 auto; } [class~="security-item"] { flex: 1; min-width: 18.75rem; max-width: 31.25rem; display: flex; align-items: flex-start; gap: 1.5rem; padding: 2rem; background: rgba(0, 180, 216, 0.1); border: 0.0625rem solid rgba(0, 180, 216, 0.2); border-radius: 0.75rem; transition: all 0.3s ease; } [class~="security-item"]:hover { transform: translateY(-0.3125rem); background: rgba(0, 180, 216, 0.15); border-color: rgba(0, 180, 216, 0.3); } [class~="icon-wrapper"] { width: 3.125rem; height: 3.125rem; display: flex; align-items: center; justify-content: center; background: rgba(0, 180, 216, 0.15); border-radius: 0.75rem; flex-shrink: 0; } [class~="security-item"] i { font-size: 1.5rem; color: #00b4d8; } [class~="text-content"] { flex: 1; } [class~="security-item"] h4 { color: #fff; margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 600; } [class~="security-item"] p { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; line-height: 1.6; } [class~="security-item"] [class~="en"], [class~="security-item"] [class~="ar"] { display: none; } html[lang="en"] [class~="security-item"] [class~="en"] { display: block; } html[lang="ar"] [class~="security-item"] [class~="ar"] { display: block; } @media (max-width: 48rem) { [class~="security-item"] { padding: 1.5rem; min-width: 17.5rem; } [class~="icon-wrapper"] { width: 2.5rem; height: 2.5rem; } [class~="security-item"] i { font-size: 1.25rem; } } footer { display: flex; position: fixed; background-color: #111; color: #e7dbd9; font-family: 'Lato', sans-serif; z-index: 9999; bottom: 0; width: 100%; justify-content: center; padding: 0.625rem 0; box-shadow: 0 -0.125rem 0.3125rem rgba(0, 0, 0, 0.2); } [class~="footer-section"] { margin: 0; min-width: 12.5rem; text-align: center; } [class~="footer-section"] p { margin: 0; font-size: 0.9rem; } [class~="modal"] { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(0.5rem); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal[class~="show"] { opacity: 1; visibility: visible; } body[class~="modal-open"] { overflow: hidden; } [class~="modal-content"] { background: linear-gradient(145deg, #1a1f2b, #1f2937); margin: 5% auto; padding: 0; width: 90%; max-width: 37.5rem; border-radius: 1rem; position: relative; border: 0.0625rem solid rgba(255, 255, 255, 0.1); box-shadow: 0 1.5625rem 3.125rem -0.75rem rgba(0, 0, 0, 0.5); transform: scale(0.7); opacity: 0; transition: all 0.3s ease; } .modal[class~="show"] [class~="modal-content"] { transform: scale(1); opacity: 1; } [class~="modal-header"] { background: rgba(0, 180, 216, 0.1); padding: 1.25rem 1.875rem; border-radius: 1rem 1rem 0 0; display: flex; align-items: center; gap: 0.9375rem; border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1); } [class~="modal-header"] i { font-size: 1.5rem; color: #00b4d8; } [class~="modal-body"] { padding: 1.875rem; } [class~="close"] { color: rgba(255, 255, 255, 0.5); position: absolute; top: 0.9375rem; right: 1.25rem; font-size: 1.75rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; } [class~="close"]:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } [class~="steps-list"] { list-style: none; padding: 0; margin: 1.5625rem 0; counter-reset: step-counter; } [class~="steps-list"] li { display: flex; align-items: center; gap: 0.9375rem; padding: 0.9375rem; background: rgba(255, 255, 255, 0.03); margin-bottom: 0.625rem; border-radius: 0.75rem; transition: all 0.3s ease; counter-increment: step-counter; } [class~="steps-list"] li::before { content: counter(step-counter); font-weight: bold; color: #00b4d8; margin-right: 0.625rem; } [class~="steps-list"] li:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(0.3125rem); } [class~="step-icon"] { width: 2.5rem; height: 2.5rem; background: rgba(0, 180, 216, 0.15); border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } [class~="step-icon"] i { color: #00b4d8; font-size: 1.125rem; } [class~="step-content"] { flex: 1; } [class~="selected-plan"] { color: #00b4d8; font-weight: 600; } [class~="claim-info"] { margin-top: 1.875rem; padding: 1.25rem; background: rgba(0, 180, 216, 0.05); border-radius: 0.75rem; border: 0.0625rem solid rgba(0, 180, 216, 0.1); display: flex; gap: 1.25rem; } [class~="claim-icon"] { width: 3.125rem; height: 3.125rem; background: rgba(0, 180, 216, 0.15); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } [class~="claim-icon"] i { color: #00b4d8; font-size: 1.5rem; } [class~="claim-text"] h4 { margin-bottom: 0.625rem; color: #fff; } [class~="claim-text"] p { color: rgba(255, 255, 255, 0.7); line-height: 1.6; } [class~="claim-link"] { color: #00b4d8; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } [class~="claim-link"]:hover { color: #3dd2f3; text-decoration: underline; } [class~="modal-actions"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9375rem; margin-top: 1.5625rem; } [class~="payment-btn"] { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; color: white; font-weight: 600; transition: all 0.3s ease; cursor: pointer; } [class~="payment-btn"]:hover { transform: translateY(-0.125rem); } [class~="payment-btn"] i { font-size: 1.25rem; } [class~="visa-btn"] { background: #1a1f71; } [class~="visa-btn"]:hover { background: #2a2f81; } @media (max-width: 48rem) { [class~="modal-content"] { width: 95%; margin: 10% auto; } [class~="steps-list"] li { padding: 0.75rem; } [class~="claim-info"] { flex-direction: column; text-align: center; } [class~="claim-icon"] { margin: 0 auto; } } [lang="en"] [data-lang="ar"], [lang="ar"] [data-lang="en"] { display: none; } [class~="gallery-section"] { padding: 8rem 0; background: transparent; } [class~="gallery-section"] h2 { text-align: center; margin-bottom: 2rem; color: var(--color-text); } [class~="gallery-grid"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1rem; margin-bottom: 2rem; } [class~="gallery-item"] { position: relative; border-radius: 0.75rem; overflow: hidden; cursor: pointer; aspect-ratio: 4/3; background: rgba(0, 180, 216, 0.1); border: 0.0625rem solid rgba(0, 180, 216, 0.2); transition: transform 0.3s ease, border-color 0.3s ease; } [class~="gallery-item"]:hover { transform: translateY(-0.3125rem); border-color: rgba(0, 180, 216, 0.4); } [class~="gallery-item"] img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } [class~="gallery-overlay"] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } [class~="gallery-item"]:hover [class~="gallery-overlay"] { opacity: 1; } [class~="gallery-overlay"] i { color: white; font-size: 2rem; } [class~="gallery-pagination"] { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 2rem; } [class~="pagination-btn"] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(0, 180, 216, 0.1); border: 0.0625rem solid rgba(0, 180, 216, 0.2); border-radius: 0.5rem; color: var(--color-text); cursor: pointer; transition: all 0.3s ease; } [class~="pagination-btn"]:hover { background: rgba(0, 180, 216, 0.2); border-color: rgba(0, 180, 216, 0.4); } [class~="pagination-btn"]:disabled { opacity: 0.5; cursor: not-allowed; } [class~="pagination-info"] { font-size: 0.9rem; color: var(--color-text-muted); } [class~="gallery-modal"] { display: none; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(0.5rem); } [class~="gallery-modal-content"] { position: relative; margin: auto; padding: 1.25rem; width: 90%; max-width: 75rem; height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } [class~="gallery-modal-content"] img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 0.5rem; } [class~="gallery-caption"] { margin-top: 1rem; color: white; text-align: center; } [class~="gallery-close"] { position: absolute; top: 0.9375rem; right: 2.1875rem; color: #f1f1f1; font-size: 2.5rem; font-weight: bold; cursor: pointer; z-index: 2001; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } [class~="gallery-close"]:hover { background: rgba(255, 255, 255, 0.2); } [class~="gallery-nav"] { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border: none; color: white; padding: 1rem; cursor: pointer; border-radius: 50%; transition: all 0.3s ease; } [class~="gallery-nav"]:hover { background: rgba(255, 255, 255, 0.2); } [class~="gallery-"]nav[class~="prev"] { left: 1.25rem; } [class~="gallery-"]nav[class~="next"] { right: 1.25rem; } @media (max-width: 62rem) { [class~="gallery-grid"] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 36rem) { [class~="gallery-grid"] { grid-template-columns: 1fr; } [class~="gallery-nav"] { padding: 0.75rem; } [class~="gallery-close"] { top: 0.625rem; right: 0.625rem; } [class~="pagination-info"] { font-size: 0.8rem; } } [lang="en"] [class~="ar"], [lang="ar"] [class~="en"] { display: none; }