/* ========================================================= VAZIR FONT
 ========================================================= */
 @font-face {
 font-family: "Vazir";
 src: url("/asset/front/fonts/vazir/Vazir.woff2") format("woff2"), url("/asset/front/fonts/vazir/Vazir.woff")
 format("woff");
 font-weight: 400;
 font-style: normal;
 font-display: swap;
 }

 @font-face {
 font-family: "Vazir";
 src: url("/asset/front/fonts/vazir/Vazir-Light.woff2") format("woff2"),
 url("/asset/front/fonts/vazir/Vazir-Light.woff") format("woff");
 font-weight: 300;
 font-style: normal;
 font-display: swap;
 }

 @font-face {
 font-family: "Vazir";
 src: url("/asset/front/fonts/vazir/Vazir-Medium.woff2") format("woff2"),
 url("/asset/front/fonts/vazir/Vazir-Medium.woff") format("woff");
 font-weight: 500;
 font-style: normal;
 font-display: swap;
 }

 @font-face {
 font-family: "Vazir";
 src: url("/asset/front/fonts/vazir/Vazir-Bold.woff2") format("woff2"), url("/asset/front/fonts/vazir/Vazir-Bold.woff")
 format("woff");
 font-weight: 700 900;
 font-style: normal;
 font-display: swap;
 }

 /* ========================================================= ROOT
 ========================================================= */
 :root {
 --navy: #011530;
 --navy-light: #06213f;
 --blue: #1da1ff;
 --cyan: #42e8ff;
 --white: #ffffff;
 --text: rgba(255, 255, 255, .86);
 --muted: rgba(255, 255, 255, .55);
 --border: rgba(255, 255, 255, .10);
 --light-bg: #f5f8fc;
 --gray: #64748b;
 }

 /* ========================================================= RESET
 ========================================================= */
 *,
 *::before,
 *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: inherit;
 }

 html {
 scroll-behavior: smooth;
 }

 body {
 margin: 0;
 background: var(--light-bg);
 color: #111827;
 font-family: "Vazir", Tahoma, Arial, sans-serif;
 font-weight: 400;
 }

 a {
 text-decoration: none;
 }

 button {
 font-family: inherit;
 }

 /* ========================================================= HEADER
 ========================================================= */
 .site-header {
 position: fixed;
 top: 0;
 right: 0;
 width: 100%;
 height: 82px;
 z-index: 9999;
 background: var(--navy);
 border-bottom: 1px solid rgba(255, 255, 255, .07);
 transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, border-color .35s ease;
 }

 .site-header::after {
 content: "";
 position: absolute;
 bottom: -1px;
 right: 8%;
 left: 8%;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(66, 232, 255, .55), rgba(29, 161, 255, .75), rgba(66, 232, 255,
 .55), transparent);
 opacity: .65;
 filter: drop-shadow(0 0 7px rgba(66, 232, 255, .45));
 }

 .site-header.scrolled {
 background: rgba(1, 21, 48, .72);
 backdrop-filter: blur(18px) saturate(150%);
 -webkit-backdrop-filter: blur(18px) saturate(150%);
 border-bottom: 1px solid rgba(66, 232, 255, .12);
 box-shadow: 0 12px 45px rgba(0, 0, 0, .25);
 }

 /* ========================================================= HEADER CONTAINER
 ========================================================= */
 .header-container {
 max-width: 1350px;
 height: 100%;
 margin: auto;
 padding: 0 28px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 30px;
 }

 /* ========================================================= LOGO
 ========================================================= */
 .logo {
 display: flex;
 align-items: center;
 gap: 13px;
 flex-shrink: 0;
 color: white;
 }

 .logo-image-wrapper {
 position: relative;
 width: 52px;
 height: 52px;
 }

 .logo-image-wrapper::before {
 content: "";
 position: absolute;
 inset: -5px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(66, 232, 255, .32), transparent 65%);
 filter: blur(5px);
 opacity: .75;
 }

 .logo-image {
 position: relative;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 object-fit: cover;
 display: block;
 border: 1px solid rgba(255, 255, 255, .20);
 box-shadow: 0 0 0 2px rgba(66, 232, 255, .08), 0 0 22px rgba(29, 161, 255, .20);
 }

 .logo-text {
 display: flex;
 flex-direction: column;
 gap: 3px;
 }

 .logo-title {
 color: white;
 font-size: 18px;
 font-weight: 900;
 letter-spacing: -.4px;
 }

 .logo-title span {
 color: var(--cyan);
 text-shadow: 0 0 12px rgba(66, 232, 255, .35);
 }

 .logo-subtitle {
 color: rgba(255, 255, 255, .48);
 font-size: 10px;
 }

 /* ========================================================= DESKTOP NAV
 ========================================================= */
 .main-nav {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 3px;
 flex: 1;
 }

 .main-nav a {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 11px 14px;
 border-radius: 9px;
 color: rgba(255, 255, 255, .68);
 font-size: 12.5px;
 font-weight: 600;
 white-space: nowrap;
 transition: color .25s ease, background .25s ease, box-shadow .25s ease;
 }

 .main-nav a::before {
 content: "";
 position: absolute;
 right: 50%;
 bottom: 3px;
 width: 0;
 height: 1px;
 transform: translateX(50%);
 background: linear-gradient(90deg, var(--blue), var(--cyan));
 box-shadow: 0 0 8px rgba(66, 232, 255, .7);
 transition: width .25s ease;
 }

 .main-nav a:hover {
 color: white;
 background: rgba(255, 255, 255, .045);
 }

 .main-nav a:hover::before {
 width: 24px;
 }

 .main-nav a.active {
 color: white;
 background: linear-gradient(135deg, rgba(29, 161, 255, .12), rgba(66, 232, 255, .035));
 box-shadow: inset 0 0 18px rgba(29, 161, 255, .035);
 }

 .main-nav a.active::before {
 width: 28px;
 }

 /* ========================================================= HEADER ACTIONS
 ========================================================= */
 .header-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
 }

 .start-btn {
 position: relative;
 height: 43px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 18px;
 border-radius: 10px;
 overflow: hidden;
 color: var(--navy);
 background: linear-gradient(135deg, #ffffff, #dffaff);
 font-size: 12px;
 font-weight: 900;
 box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 0 18px rgba(66, 232, 255, .10);
 transition: transform .25s ease, box-shadow .25s ease;
 }

 .start-btn::before {
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 width: 70%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
 transform: skewX(-20deg);
 transition: left .55s ease;
 }

 .start-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 0 22px rgba(66, 232, 255, .24);
 }

 .start-btn:hover::before {
 left: 130%;
 }

 /* ========================================================= MOBILE MENU
 ========================================================= */
 .menu-toggle {
 display: none;
 width: 45px;
 height: 45px;
 border-radius: 11px;
 border: 1px solid rgba(66, 232, 255, .15);
 background: rgba(255, 255, 255, .045);
 cursor: pointer;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
 }

 .menu-toggle span {
 width: 20px;
 height: 2px;
 border-radius: 10px;
 background: white;
 transition: transform .25s ease, opacity .25s ease;
 }

 .menu-toggle.active span:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
 }

 .menu-toggle.active span:nth-child(2) {
 opacity: 0;
 }

 .menu-toggle.active span:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
 }

 /* ========================================================= MAIN
 ========================================================= */
 main {
 padding-top: 82px;
 }

 /* ========================================================= HERO
 ========================================================= */
 .hero-section {
 position: relative;
 min-height: calc(100vh - 82px);
 width: 100%;
 overflow: hidden;
 display: flex;
 align-items: center;
 background: var(--navy);
 }

 .hero-background {
 position: absolute;
 inset: 0;
 background-image: url("../images/hero-section.webp");
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 transform: scale(1.03);
 }

 .hero-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(90deg, rgba(1, 21, 48, .30) 0%, rgba(1, 21, 48, .58) 35%, rgba(1, 21, 48, .91) 72%, #011530
 100%);
 }

 .hero-overlay::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(1, 21, 48, .18), transparent 35%, rgba(1, 21, 48, .65) 100%);
 }

 .hero-glow {
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
 filter: blur(80px);
 opacity: .22;
 }

 .hero-glow-1 {
 width: 420px;
 height: 420px;
 top: 10%;
 left: 8%;
 background: rgba(29, 161, 255, .40);
 }

 .hero-glow-2 {
 width: 280px;
 height: 280px;
 bottom: 5%;
 left: 38%;
 background: rgba(66, 232, 255, .25);
 }

 .hero-container {
 position: relative;
 z-index: 5;
 width: 100%;
 max-width: 1350px;
 margin: 0 auto;
 padding: 80px 28px;
 }

 .hero-content {
 max-width: 680px;
 }

 .hero-badge {
 width: fit-content;
 display: flex;
 align-items: center;
 gap: 9px;
 padding: 8px 13px;
 margin-bottom: 22px;
 border-radius: 50px;
 border: 1px solid rgba(66, 232, 255, .20);
 background: rgba(66, 232, 255, .055);
 color: rgba(255, 255, 255, .72);
 font-size: 11px;
 font-weight: 600;
 backdrop-filter: blur(10px);
 }

 .hero-badge-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--cyan);
 box-shadow: 0 0 10px rgba(66, 232, 255, .9);
 animation: pulseNeon 2s infinite;
 }

 .hero-title {
 color: #ffffff;
 font-size: clamp(42px, 5vw, 72px);
 line-height: 1.25;
 font-weight: 900;
 letter-spacing: -1.5px;
 margin-bottom: 22px;
 }

 .hero-title span {
 color: var(--cyan);
 text-shadow: 0 0 15px rgba(66, 232, 255, .25), 0 0 35px rgba(29, 161, 255, .18);
 }

 .hero-description {
 max-width: 610px;
 color: rgba(255, 255, 255, .68);
 font-size: 14px;
 line-height: 2.15;
 margin-bottom: 30px;
 }

 .hero-actions {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 42px;
 }

 .hero-primary-btn,
 .hero-secondary-btn {
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 11px;
 font-size: 12px;
 }

 .hero-primary-btn {
 gap: 12px;
 padding: 0 20px;
 color: var(--navy);
 background: linear-gradient(135deg, #ffffff, #dffaff);
 font-weight: 900;
 box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 8px 30px rgba(66, 232, 255, .12);
 transition: transform .25s ease, box-shadow .25s ease;
 }

 .hero-primary-btn:hover {
 transform: translateY(-3px);
 box-shadow: 0 0 25px rgba(66, 232, 255, .25), 0 12px 35px rgba(0, 0, 0, .20);
 }

 .hero-arrow {
 font-size: 18px;
 }

 .hero-secondary-btn {
 padding: 0 20px;
 border: 1px solid rgba(255, 255, 255, .18);
 color: rgba(255, 255, 255, .85);
 background: rgba(255, 255, 255, .045);
 backdrop-filter: blur(10px);
 font-weight: 700;
 transition: background .25s ease, border-color .25s ease;
 }

 .hero-secondary-btn:hover {
 background: rgba(66, 232, 255, .08);
 border-color: rgba(66, 232, 255, .30);
 }

 .hero-scroll {
 position: absolute;
 z-index: 5;
 bottom: 25px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 align-items: center;
 gap: 10px;
 color: rgba(255, 255, 255, .38);
 font-size: 9px;
 }

 .hero-scroll-line {
 width: 35px;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--cyan));
 }

 /* ========================================================= LEARNING / SPECIAL EXAMS SECTION
 ========================================================= */
 .exams-section {
 position: relative;
 width: 100%;
 padding: 100px 28px;
 background: var(--light-bg);
 overflow: hidden;
 }

 .exams-section::before {
 content: "";
 position: absolute;
 width: 500px;
 height: 500px;
 top: -250px;
 right: -180px;
 border-radius: 50%;
 background: rgba(29, 161, 255, .055);
 filter: blur(100px);
 }

 .exams-section::after {
 content: "";
 position: absolute;
 width: 350px;
 height: 350px;
 bottom: -180px;
 left: -150px;
 border-radius: 50%;
 background: rgba(66, 232, 255, .045);
 filter: blur(90px);
 }

 .exams-container {
 position: relative;
 z-index: 2;
 width: 100%;
 max-width: 1350px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: .75fr 1.6fr;
 gap: 55px;
 align-items: center;
 }

 /* ========================================================= EXAMS INTRO
 ========================================================= */
 .exams-intro {
 direction: rtl;
 padding-right: 15px;
 }

 .exams-kicker {
 display: inline-block;
 margin-bottom: 16px;
 color: var(--blue);
 font-size: 10px;
 font-weight: 900;
 letter-spacing: 2px;
 }

 .exams-intro h2 {
 margin: 0 0 20px;
 color: var(--navy);
 font-size: clamp(34px, 4vw, 54px);
 line-height: 1.45;
 font-weight: 900;
 }

 .exams-intro h2 span {
 display: block;
 color: var(--blue);
 text-shadow: 0 5px 20px rgba(29, 161, 255, .12);
 }

 .exams-intro p {
 max-width: 360px;
 margin: 0;
 color: var(--gray);
 font-size: 13px;
 line-height: 2.15;
 }

 .exams-line {
 width: 80px;
 height: 2px;
 margin-top: 28px;
 background: linear-gradient(90deg, var(--blue), var(--cyan));
 }

 /* ========================================================= EXAM GRID
 ========================================================= */
 .exam-types {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 18px;
 }

 /* ========================================================= EXAM CARD
 ========================================================= */
 .exam-type-card {
 position: relative;
 min-height: 330px;
 border-radius: 20px;
 overflow: hidden;
 display: block;
 background: var(--navy);
 box-shadow: 0 18px 45px rgba(1, 21, 48, .10);
 isolation: isolate;
 transition: transform .35s ease, box-shadow .35s ease;
 }

 .exam-type-card:hover {
 transform: translateY(-7px);
 box-shadow: 0 25px 55px rgba(1, 21, 48, .18);
 }

 .exam-type-image {
 position: absolute;
 inset: 0;
 z-index: -2;
 background-size: cover;
 background-position: center;
 transition: transform .65s ease;
 }

 .exam-type-card:hover .exam-type-image {
 transform: scale(1.06);
 }

 .exam-type-content {
 position: absolute;
 z-index: 2;
 right: 22px;
 left: 22px;
 bottom: 20px;
 color: white;
 }

 .exam-type-top {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 margin-bottom: 14px;
 }

 .exam-type-arrow {
 width: 34px;
 height: 34px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 background: rgba(255, 255, 255, .08);
 border: 1px solid rgba(255, 255, 255, .12);
 color: white;
 font-size: 15px;
 opacity: .75;
 transition: transform .3s ease, background .3s ease;
 }

 .exam-type-card:hover .exam-type-arrow {
 transform: translateX(-4px);
 background: rgba(66, 232, 255, .16);
 }

 .exam-type-label {
 display: block;
 margin-bottom: 7px;
 color: var(--cyan);
 font-size: 8px;
 font-weight: 900;
 letter-spacing: 1.5px;
 }

 .exam-type-content h3 {
 margin: 0 0 8px;
 color: white;
 font-size: 20px;
 line-height: 1.5;
 font-weight: 900;
 }

 .exam-type-content p {
 max-width: 330px;
 margin: 0 0 14px;
 color: rgba(255, 255, 255, .62);
 font-size: 10.5px;
 line-height: 1.9;
 }

 .exam-type-meta {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 6px;
 }

 .exam-type-meta span {
 padding: 5px 8px;
 border-radius: 6px;
 background: rgba(255, 255, 255, .07);
 border: 1px solid rgba(255, 255, 255, .08);
 color: rgba(255, 255, 255, .58);
 font-size: 8px;
 }

 /* =========================================================
 HISTOLOGY CATEGORIES
 ========================================================= */

 .categories-section {
 position: relative;
 width: 100%;
 padding: 100px 28px;
 background: #ffffff;
 overflow: hidden;
 }

 .categories-section::before {
 content: "";
 position: absolute;

 width: 450px;
 height: 450px;

 top: -220px;
 right: -150px;

 border-radius: 50%;

 background: rgba(29, 161, 255, .055);

 filter: blur(100px);

 pointer-events: none;
 }

 .categories-container {
 position: relative;
 z-index: 2;

 width: 100%;
 max-width: 1350px;

 margin: 0 auto;
 }


 /* =========================================================
 HEADER
 ========================================================= */

 .categories-header {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;

 gap: 40px;

 margin-bottom: 35px;
 }

 .categories-label {
 display: block;

 margin-bottom: 10px;

 color: var(--blue);

 font-size: 10px;
 font-weight: 900;

 letter-spacing: 2px;
 }

 .categories-header h2 {
 margin: 0;

 color: var(--navy);

 font-size: clamp(30px, 4vw, 46px);

 line-height: 1.5;

 font-weight: 900;
 }

 .categories-header h2 span {
 color: var(--blue);

 text-shadow:
 0 5px 20px rgba(29, 161, 255, .12);
 }

 .categories-header p {
 max-width: 420px;

 margin: 0;

 color: var(--gray);

 font-size: 12px;

 line-height: 2;
 }


 /* =========================================================
 CATEGORY GRID
 DESKTOP = 6 ITEMS PER ROW
 ========================================================= */

 .categories-row {
 width: 100%;

 display: grid;

 grid-template-columns:
 repeat(6, minmax(0, 1fr));

 gap: 14px;
 }


 /* =========================================================
 CATEGORY CARD
 ========================================================= */

 .category-card {
 position: relative;

 width: 100%;

 aspect-ratio: 4 / 3;

 overflow: hidden;

 border-radius: 16px;

 background: var(--navy);

 box-shadow:
 0 12px 32px rgba(1, 21, 48, .08);

 isolation: isolate;

 transition:
 transform .3s ease,
 box-shadow .3s ease;
 }

 .category-card:hover {
 transform: translateY(-5px);

 box-shadow:
 0 18px 38px rgba(1, 21, 48, .14);
 }


 /* =========================================================
 IMAGE
 ========================================================= */

 .category-card img {
 width: 100%;
 height: 100%;

 display: block;

 object-fit: cover;

 transition:
 transform .55s ease;
 }

 .category-card:hover img {
 transform: scale(1.07);
 }


 /* =========================================================
 DARK OVERLAY
 ========================================================= */

 .category-card::after {
 content: "";

 position: absolute;

 inset: 0;

 z-index: 1;

 background:
 linear-gradient(180deg,
 transparent 20%,
 rgba(1, 21, 48, .10) 40%,
 rgba(1, 21, 48, .94) 100%);

 pointer-events: none;
 }


 /* =========================================================
 TEXT
 ========================================================= */

 .category-overlay {
 position: absolute;

 z-index: 2;

 right: 15px;
 left: 15px;

 bottom: 15px;

 display: flex;

 flex-direction: column;

 gap: 3px;
 }

 .category-overlay span {
 color: #ffffff;

 font-size: 14px;

 line-height: 1.6;

 font-weight: 900;
 }

 .category-overlay small {
 color: rgba(255, 255, 255, .58);

 font-size: 7px;

 letter-spacing: .3px;
 }


 /* =========================================================
 LARGE TABLET
 5 ITEMS PER ROW
 ========================================================= */

 @media(max-width: 1200px) {

 .categories-row {
 grid-template-columns:
 repeat(5, minmax(0, 1fr));
 }

 }


 /* =========================================================
 TABLET
 4 ITEMS PER ROW
 ========================================================= */

 @media(max-width: 1000px) {

 .categories-section {
 padding: 80px 20px;
 }

 .categories-row {
 grid-template-columns:
 repeat(4, minmax(0, 1fr));

 gap: 13px;
 }

 }


 /* =========================================================
 SMALL TABLET
 3 ITEMS PER ROW
 ========================================================= */

 @media(max-width: 800px) {

 .categories-section {
 padding: 70px 18px;
 }

 .categories-header {
 flex-direction: column;

 align-items: flex-start;

 gap: 15px;
 }

 .categories-header p {
 max-width: 600px;
 }

 .categories-row {
 grid-template-columns:
 repeat(3, minmax(0, 1fr));

 gap: 12px;
 }

 }


 /* =========================================================
 MOBILE
 2 ITEMS PER ROW
 ========================================================= */

 @media(max-width: 600px) {

 .categories-section {
 padding: 60px 15px;
 }

 .categories-row {
 grid-template-columns:
 repeat(2, minmax(0, 1fr));

 gap: 10px;
 }

 .category-card {
 border-radius: 13px;

 aspect-ratio: 4 / 3;
 }

 .category-overlay {
 right: 11px;
 left: 11px;

 bottom: 11px;
 }

 .category-overlay span {
 font-size: 11px;
 }

 .category-overlay small {
 font-size: 6.5px;
 }

 }


 /* =========================================================
 VERY SMALL MOBILE
 1 ITEM PER ROW
 ========================================================= */

 @media(max-width: 400px) {

 .categories-row {
 grid-template-columns: 1fr;

 gap: 12px;
 }

 .category-card {
 aspect-ratio: 16 / 10;

 border-radius: 14px;
 }

 .category-overlay {
 right: 15px;
 left: 15px;

 bottom: 15px;
 }

 .category-overlay span {
 font-size: 16px;
 }

 .category-overlay small {
 font-size: 7px;
 }

 }

 /* ========================================================= EXAM PREVIEW
 ========================================================= */
 .exam-preview-section {
 position: relative;
 padding: 100px 28px;
 background: var(--navy);
 }

 .exam-preview-container {
 max-width: 900px;
 margin: 0 auto;
 }

 .exam-progress-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 margin-bottom: 15px;
 }

 .exam-question-count {
 color: rgba(255, 255, 255, .65);
 font-size: 11px;
 }

 .exam-timer {
 display: flex;
 align-items: center;
 gap: 7px;
 padding: 8px 12px;
 border-radius: 9px;
 background: rgba(255, 255, 255, .06);
 border: 1px solid rgba(255, 255, 255, .08);
 color: #ffffff;
 font-size: 12px;
 font-weight: 800;
 }

 .exam-timer span {
 color: var(--cyan);
 }

 .exam-progress {
 width: 100%;
 height: 6px;
 margin-bottom: 25px;
 overflow: hidden;
 border-radius: 20px;
 background: rgba(255, 255, 255, .08);
 }

 .exam-progress-bar {
 width: 35%;
 height: 100%;
 border-radius: inherit;
 background: linear-gradient(90deg, var(--blue), var(--cyan));
 }

 .exam-question-card {
 padding: 20px;
 border-radius: 22px;
 background: rgba(255, 255, 255, .045);
 border: 1px solid rgba(255, 255, 255, .08);
 }

 .exam-question-image {
 width: 100%;
 height: 380px;
 overflow: hidden;
 border-radius: 15px;
 background: var(--navy-light);
 }

 .exam-question-image img {
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
 }

 .exam-question-title {
 margin: 25px 5px 20px;
 color: #ffffff;
 font-size: 18px;
 line-height: 2;
 font-weight: 800;
 }

 .exam-options {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px;
 }

 .exam-option {
 min-height: 55px;
 padding: 12px 15px;
 display: flex;
 align-items: center;
 gap: 12px;
 border-radius: 11px;
 border: 1px solid rgba(255, 255, 255, .08);
 background: rgba(255, 255, 255, .035);
 color: rgba(255, 255, 255, .72);
 cursor: pointer;
 font-size: 11px;
 }

 .exam-option:hover {
 background: rgba(66, 232, 255, .07);
 border-color: rgba(66, 232, 255, .25);
 color: #ffffff;
 }

 .exam-option-number {
 width: 28px;
 height: 28px;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 8px;
 background: rgba(255, 255, 255, .07);
 color: var(--cyan);
 font-weight: 900;
 }

 /* ========================================================= ANIMATIONS
 ========================================================= */
 @keyframes pulseNeon {

 0%,
 100% {
 opacity: 1;
 box-shadow: 0 0 8px rgba(66, 232, 255, .8);
 }

 50% {
 opacity: .55;
 box-shadow: 0 0 18px rgba(66, 232, 255, 1);
 }
 }

 @keyframes menuIn {
 from {
 opacity: 0;
 transform: translateY(-8px);
 }

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

 /* ========================================================= TABLET
 ========================================================= */
 @media (max-width: 1150px) {
 .header-container {
 padding: 0 18px;
 gap: 15px;
 }

 .main-nav a {
 padding: 10px 9px;
 font-size: 11px;
 }

 .logo-subtitle {
 display: none;
 }

 .logo-title {
 font-size: 16px;
 }

 .exams-container {
 grid-template-columns: .65fr 1.5fr;
 gap: 35px;
 }

 .exam-types {
 gap: 14px;
 }

 .exam-type-card {
 min-height: 310px;
 }
 }

 @media (max-width: 1000px) {
 .exams-container {
 grid-template-columns: 1fr;
 gap: 35px;
 }

 .exams-intro {
 padding: 0;
 text-align: center;
 }

 .exams-intro h2 span {
 display: inline;
 }

 .exams-intro p {
 max-width: 600px;
 margin: 15px auto 0;
 }

 .exams-line {
 margin: 24px auto 0;
 }
 }

 /* ========================================================= MOBILE HEADER
 ========================================================= */
 @media (max-width: 900px) {
 .site-header {
 height: 72px;
 }

 .header-container {
 padding: 0 16px;
 }

 .logo-image-wrapper,
 .logo-image {
 width: 46px;
 height: 46px;
 }

 .main-nav {
 position: absolute;
 top: 84px;
 right: 14px;
 left: 14px;
 width: auto;
 padding: 8px;
 display: none;
 flex-direction: column;
 align-items: stretch;
 gap: 3px;
 background: rgba(1, 21, 48, .96);
 backdrop-filter: blur(20px);
 border: 1px solid rgba(66, 232, 255, .13);
 border-radius: 15px;
 box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
 }

 .main-nav.show {
 display: flex;
 animation: menuIn .25s ease forwards;
 }

 .main-nav a {
 width: 100%;
 justify-content: flex-start;
 padding: 13px 14px;
 font-size: 13px;
 }

 .header-actions {
 display: none;
 }

 .menu-toggle {
 display: flex;
 }

 main {
 padding-top: 72px;
 }

 /* HERO */
 .hero-section {
 min-height: calc(100svh - 72px);
 }

 .hero-background {
 transform: scale(1.01);
 background-position: center;
 }

 .hero-overlay {
 background: linear-gradient(180deg, rgba(1, 21, 48, .25) 0%, rgba(1, 21, 48, .48) 38%, rgba(1, 21, 48, .78) 78%,
 rgba(1, 21, 48, .94) 100%);
 }

 .hero-container {
 padding: 55px 20px 80px;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: calc(100svh - 72px);
 }

 .hero-content {
 width: 100%;
 max-width: 620px;
 margin: 0 auto;
 text-align: center;
 }

 .hero-badge {
 margin: 0 auto 20px;
 font-size: 10px;
 }

 .hero-title {
 font-size: clamp(34px, 10vw, 48px);
 line-height: 1.45;
 margin-bottom: 17px;
 }

 .hero-description {
 max-width: 540px;
 margin: 0 auto 26px;
 font-size: 12.5px;
 line-height: 2.05;
 }

 .hero-actions {
 width: 100%;
 max-width: 390px;
 margin: 0 auto 30px;
 display: flex;
 gap: 9px;
 }

 .hero-primary-btn,
 .hero-secondary-btn {
 height: 48px;
 flex: 1;
 padding: 0 13px;
 font-size: 11px;
 white-space: nowrap;
 }

 /* CATEGORIES */
 .categories-section {
 padding: 70px 18px;
 }

 .categories-header {
 flex-direction: column;
 align-items: flex-start;
 gap: 15px;
 }

 .categories-header p {
 max-width: 600px;
 }

 .categories-row {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 }

 /* ========================================================= MOBILE
 ========================================================= */
 @media (max-width: 650px) {
 .exams-section {
 padding: 65px 15px;
 }

 .exams-intro h2 {
 font-size: 31px;
 }

 .exams-intro p {
 font-size: 11.5px;
 line-height: 2;
 }

 .exam-types {
 grid-template-columns: 1fr;
 gap: 15px;
 }

 .exam-type-card {
 min-height: 300px;
 border-radius: 18px;
 }

 .exam-type-content {
 right: 20px;
 left: 20px;
 bottom: 19px;
 }

 .exam-type-content h3 {
 font-size: 19px;
 }

 .categories-section {
 padding: 60px 15px;
 }

 .categories-row {
 grid-template-columns: 1fr;
 }

 .category-card {
 aspect-ratio: 16 / 10;
 }

 .category-overlay span {
 font-size: 18px;
 }

 .exam-preview-section {
 padding: 70px 16px;
 }

 .exam-question-image {
 height: 280px;
 }

 .exam-options {
 grid-template-columns: 1fr;
 }

 .exam-question-title {
 font-size: 15px;
 }
 }

 /* ========================================================= SMALL MOBILE
 ========================================================= */
 @media (max-width: 400px) {
 .logo-text {
 display: none;
 }

 .logo-image-wrapper,
 .logo-image {
 width: 44px;
 height: 44px;
 }

 .hero-container {
 padding: 35px 15px 60px;
 }

 .hero-title {
 font-size: 31px;
 line-height: 1.55;
 }

 .hero-description {
 font-size: 11.5px;
 line-height: 1.95;
 }

 .hero-actions {
 gap: 7px;
 }

 .hero-primary-btn,
 .hero-secondary-btn {
 height: 45px;
 font-size: 10px;
 padding: 0 9px;
 }

 .exam-type-card {
 min-height: 280px;
 }

 .exam-question-image {
 height: 220px;
 }

 .exam-question-card {
 padding: 12px;
 }
 }

 /* ========================================================= REDUCED MOTION
 ========================================================= */
 @media (prefers-reduced-motion: reduce) {

 *,
 *::before,
 *::after {
 scroll-behavior: auto !important;
 animation: none !important;
 transition: none !important;
 }
 }

 /* =================================
 SECTION
 ================================= */

 .image-carousel-section {
 width: 100%;
 background: #011530;
 padding: 50px 0;
 overflow: hidden;
 }


 /* =================================
 CAROUSEL
 ================================= */

 .image-carousel {
 width: 100%;
 max-width: 1400px;
 margin: auto;
 position: relative;
 padding: 0 55px;
 }


 /* =================================
 TRACK
 ================================= */

 .carousel-track {
 display: flex;
 gap: 20px;
 overflow-x: auto;
 scroll-behavior: smooth;
 scroll-snap-type: x mandatory;

 scrollbar-width: none;
 }

 .carousel-track::-webkit-scrollbar {
 display: none;
 }


 /* =================================
 ITEM
 ================================= */

 .carousel-item {
 flex: 0 0 calc((100% - 60px) / 4);
 scroll-snap-align: start;
 }


 /* =================================
 IMAGE
 ================================= */

 .carousel-image {
 width: 100%;
 aspect-ratio: 9 / 16;

 overflow: hidden;

 border-radius: 18px;

 background: #061d36;

 position: relative;
 }


 .carousel-image img {
 width: 100%;
 height: 100%;

 display: block;

 object-fit: cover;

 transition: transform 0.5s ease;
 }


 /* =================================
 HOVER
 ================================= */

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


 /* =================================
 BUTTONS
 ================================= */

 .carousel-btn {
 position: absolute;

 top: 50%;
 transform: translateY(-50%);

 width: 44px;
 height: 44px;

 border: none;
 border-radius: 50%;

 background: rgba(255, 255, 255, 0.95);

 color: #011530;

 font-size: 30px;

 display: flex;
 align-items: center;
 justify-content: center;

 cursor: pointer;

 z-index: 10;

 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);

 transition: all 0.25s ease;
 }


 .carousel-btn:hover {
 transform: translateY(-50%) scale(1.08);
 background: #ffffff;
 }


 .carousel-prev {
 left: 5px;
 }


 .carousel-next {
 right: 5px;
 }


 /* =================================
 TABLET
 ================================= */

 @media(max-width: 992px) {

 .carousel-item {
 flex: 0 0 calc((100% - 20px) / 2);
 }

 }


 /* =================================
 MOBILE
 ================================= */

 @media(max-width: 576px) {

 .image-carousel {
 padding: 0 45px;
 }

 .carousel-item {
 flex: 0 0 100%;
 }

 .carousel-track {
 gap: 15px;
 }

 .carousel-btn {
 width: 38px;
 height: 38px;

 font-size: 25px;
 }

 }

 .carousel-link {
 display: block;
 width: 100%;
 height: 100%;
 text-decoration: none;
 color: inherit;
 }

 /* =========================================================
 ABOUT SECTION
 ========================================================= */

 .about-section {
 position: relative;
 width: 100%;
 padding: 110px 28px;
 background: var(--light-bg);
 overflow: hidden;
 }

 .about-section::before {
 content: "";
 position: absolute;
 width: 500px;
 height: 500px;
 top: -250px;
 left: -180px;
 border-radius: 50%;
 background: rgba(29, 161, 255, .055);
 filter: blur(110px);
 pointer-events: none;
 }

 .about-section::after {
 content: "";
 position: absolute;
 width: 350px;
 height: 350px;
 right: -150px;
 bottom: -180px;
 border-radius: 50%;
 background: rgba(66, 232, 255, .045);
 filter: blur(100px);
 pointer-events: none;
 }

 .about-container {
 position: relative;
 z-index: 2;

 width: 100%;
 max-width: 1150px;

 margin: 0 auto;

 display: grid;
 grid-template-columns: 430px 1fr;

 gap: 85px;

 align-items: center;
 }


 /* =========================================================
 IMAGE
 ========================================================= */

 .about-image-wrapper {
 position: relative;
 width: 100%;
 max-width: 430px;
 margin: 0 auto;
 }

 .about-image-glow {
 position: absolute;
 width: 85%;
 height: 85%;

 top: 8%;
 left: 8%;

 border-radius: 50%;

 background: rgba(29, 161, 255, .25);

 filter: blur(65px);

 z-index: 0;
 }

 .about-image {
 position: relative;
 z-index: 1;

 width: 100%;

 aspect-ratio: 4 / 5;

 overflow: hidden;

 border-radius: 28px;

 background: var(--navy);

 border: 1px solid rgba(255, 255, 255, .08);

 box-shadow:
 0 30px 70px rgba(1, 21, 48, .18),
 0 0 0 8px rgba(29, 161, 255, .025);
 }

 .about-image::after {
 content: "";

 position: absolute;
 inset: 0;

 background:
 linear-gradient(180deg,
 transparent 45%,
 rgba(1, 21, 48, .12) 65%,
 rgba(1, 21, 48, .55) 100%);

 pointer-events: none;
 }

 .about-image img {
 width: 100%;
 height: 100%;

 display: block;

 object-fit: cover;
 object-position: center center;
 transition: transform .7s ease;
 }

 .about-image-wrapper:hover .about-image img {
 transform: scale(1.035);
 }


 /* =========================================================
 IMAGE BADGE
 ========================================================= */

 .about-image-badge {
 position: absolute;

 z-index: 3;

 right: -18px;
 bottom: 28px;

 display: flex;
 align-items: center;

 gap: 9px;

 padding: 11px 15px;

 border-radius: 12px;

 background: rgba(1, 21, 48, .92);

 border: 1px solid rgba(66, 232, 255, .18);

 color: rgba(255, 255, 255, .85);

 font-size: 10px;

 font-weight: 700;

 box-shadow:
 0 15px 35px rgba(1, 21, 48, .25);

 backdrop-filter: blur(12px);
 }

 .about-badge-dot {
 width: 7px;
 height: 7px;

 flex-shrink: 0;

 border-radius: 50%;

 background: var(--cyan);

 box-shadow:
 0 0 10px rgba(66, 232, 255, .9);
 }


 /* =========================================================
 CONTENT
 ========================================================= */

 .about-content {
 direction: rtl;

 text-align: right;
 }

 .about-label {
 display: block;

 margin-bottom: 12px;

 color: var(--blue);

 font-size: 10px;

 font-weight: 900;

 letter-spacing: 2px;
 }

 .about-content h2 {
 margin: 0;

 color: var(--navy);

 font-size: clamp(34px, 4vw, 52px);

 line-height: 1.45;

 font-weight: 900;
 }

 .about-content h2 span {
 display: block;

 color: var(--blue);

 text-shadow:
 0 5px 20px rgba(29, 161, 255, .12);
 }

 .about-line {
 width: 75px;
 height: 2px;

 margin: 22px 0 25px;

 background:
 linear-gradient(90deg,
 var(--blue),
 var(--cyan));
 }

 .about-content p {
 max-width: 600px;

 margin: 0 0 15px;

 color: var(--gray);

 font-size: 13px;

 line-height: 2.2;
 }

 .about-content .about-lead {
 color: #334155;

 font-size: 15px;

 font-weight: 600;

 line-height: 2.1;
 }


 /* =========================================================
 DOCTOR
 ========================================================= */

 .about-doctor {
 display: flex;

 align-items: center;

 gap: 13px;

 margin-top: 28px;

 padding-top: 22px;

 border-top: 1px solid rgba(1, 21, 48, .08);

 width: fit-content;
 }

 .about-doctor-icon {
 width: 48px;
 height: 48px;

 display: flex;

 align-items: center;
 justify-content: center;

 border-radius: 50%;

 background: var(--navy);

 color: var(--cyan);

 font-size: 11px;

 font-weight: 900;

 border: 1px solid rgba(66, 232, 255, .15);

 box-shadow:
 0 8px 25px rgba(1, 21, 48, .12);
 }

 .about-doctor div:last-child {
 display: flex;

 flex-direction: column;

 gap: 4px;
 }

 .about-doctor strong {
 color: var(--navy);

 font-size: 13px;

 font-weight: 900;
 }

 .about-doctor span {
 color: var(--gray);

 font-size: 10px;
 }


 /* =========================================================
 TABLET
 ========================================================= */

 @media(max-width: 900px) {

 .about-section {
 padding: 80px 20px;
 }

 .about-container {
 grid-template-columns: 340px 1fr;

 gap: 45px;
 }

 .about-image-badge {
 right: -10px;
 }

 }


 /* =========================================================
 MOBILE
 ========================================================= */

 @media(max-width: 700px) {

 .about-section {
 padding: 70px 18px;
 }

 .about-container {
 grid-template-columns: 1fr;

 gap: 45px;
 }

 .about-image-wrapper {
 max-width: 380px;
 }

 .about-content {
 text-align: center;
 }

 .about-content h2 span {
 display: inline;
 }

 .about-line {
 margin: 20px auto 24px;
 }

 .about-content p {
 margin-left: auto;
 margin-right: auto;
 }

 .about-doctor {
 margin-left: auto;
 margin-right: auto;

 text-align: right;
 }

 }


 /* =========================================================
 SMALL MOBILE
 ========================================================= */

 @media(max-width: 400px) {

 .about-section {
 padding: 60px 15px;
 }

 .about-image-badge {
 right: 10px;
 bottom: 15px;
 }

 .about-content h2 {
 font-size: 31px;
 }

 .about-content .about-lead {
 font-size: 13px;
 }

 .about-content p {
 font-size: 11.5px;
 line-height: 2;
 }

 }

 /* =========================================================
 FOOTER
 ========================================================= */

 .site-footer {
 position: relative;
 background: #011530;
 color: #ffffff;
 overflow: hidden;
 }

 /* Glow */
 .site-footer::before {
 content: "";
 position: absolute;
 width: 500px;
 height: 500px;
 top: -300px;
 right: -150px;
 border-radius: 50%;
 background: rgba(29, 161, 255, .08);
 filter: blur(100px);
 pointer-events: none;
 }

 .site-footer::after {
 content: "";
 position: absolute;
 width: 400px;
 height: 400px;
 bottom: -280px;
 left: -150px;
 border-radius: 50%;
 background: rgba(66, 232, 255, .055);
 filter: blur(100px);
 pointer-events: none;
 }


 /* =========================================================
 FOOTER TOP
 ========================================================= */

 .footer-main {
 position: relative;
 z-index: 2;

 max-width: 1350px;
 margin: 0 auto;

 padding: 75px 28px 55px;

 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr 1.1fr;

 gap: 55px;

 border-bottom: 1px solid rgba(255, 255, 255, .08);
 }


 /* =========================================================
 BRAND
 ========================================================= */

 .footer-brand {
 max-width: 390px;
 }

 .footer-logo {
 display: inline-flex;
 align-items: center;
 gap: 13px;

 margin-bottom: 22px;

 color: #ffffff;
 }

 .footer-logo-image {
 position: relative;

 width: 55px;
 height: 55px;

 border-radius: 50%;

 object-fit: cover;

 border: 1px solid rgba(255, 255, 255, .18);

 box-shadow:
 0 0 0 2px rgba(66, 232, 255, .06),
 0 0 25px rgba(29, 161, 255, .18);
 }

 .footer-logo-text {
 display: flex;
 flex-direction: column;
 gap: 3px;
 }

 .footer-logo-title {
 font-size: 20px;
 font-weight: 900;
 letter-spacing: -.5px;
 }

 .footer-logo-title span {
 color: var(--cyan);

 text-shadow:
 0 0 12px rgba(66, 232, 255, .3);
 }

 .footer-logo-subtitle {
 color: rgba(255, 255, 255, .42);
 font-size: 9px;
 }

 .footer-description {
 color: rgba(255, 255, 255, .55);

 font-size: 11.5px;
 line-height: 2.15;

 max-width: 360px;

 margin-bottom: 25px;
 }


 /* =========================================================
 FOOTER SOCIAL
 ========================================================= */

 .footer-social {
 display: flex;
 align-items: center;
 gap: 8px;
 }

 .footer-social a {
 width: 38px;
 height: 38px;

 display: flex;
 align-items: center;
 justify-content: center;

 border-radius: 10px;

 background: rgba(255, 255, 255, .045);

 border: 1px solid rgba(255, 255, 255, .08);

 color: rgba(255, 255, 255, .7);

 font-size: 11px;
 font-weight: 700;

 transition:
 transform .25s ease,
 background .25s ease,
 border-color .25s ease,
 color .25s ease;
 }

 .footer-social a:hover {
 transform: translateY(-3px);

 color: #ffffff;

 background: rgba(66, 232, 255, .09);

 border-color: rgba(66, 232, 255, .3);

 box-shadow:
 0 8px 25px rgba(0, 0, 0, .18);
 }


 /* =========================================================
 FOOTER COLUMNS
 ========================================================= */

 .footer-column h3 {
 position: relative;

 margin: 5px 0 20px;

 color: #ffffff;

 font-size: 13px;
 font-weight: 900;
 }

 .footer-column h3::after {
 content: "";

 display: block;

 width: 30px;
 height: 2px;

 margin-top: 10px;

 background:
 linear-gradient(90deg,
 var(--blue),
 var(--cyan));

 box-shadow:
 0 0 8px rgba(66, 232, 255, .35);
 }

 .footer-links {
 display: flex;
 flex-direction: column;
 gap: 11px;
 }

 .footer-links a {
 position: relative;

 width: fit-content;

 color: rgba(255, 255, 255, .52);

 font-size: 10.5px;

 transition:
 color .25s ease,
 transform .25s ease;
 }

 .footer-links a::before {
 content: "←";

 position: absolute;

 right: -18px;

 opacity: 0;

 color: var(--cyan);

 transition: opacity .25s ease;
 }

 .footer-links a:hover {
 color: #ffffff;

 transform: translateX(-4px);
 }

 .footer-links a:hover::before {
 opacity: 1;
 }


 /* =========================================================
 CONTACT
 ========================================================= */

 .footer-contact {
 display: flex;
 flex-direction: column;
 gap: 12px;
 }

 .footer-contact-item {
 display: flex;
 align-items: flex-start;

 gap: 10px;

 color: rgba(255, 255, 255, .55);

 font-size: 10.5px;
 line-height: 1.9;
 }

 .footer-contact-icon {
 width: 32px;
 height: 32px;

 flex-shrink: 0;

 display: flex;
 align-items: center;
 justify-content: center;

 border-radius: 9px;

 background: rgba(66, 232, 255, .06);

 border: 1px solid rgba(66, 232, 255, .10);

 color: var(--cyan);

 font-size: 11px;
 }

 .footer-contact-item strong {
 display: block;

 color: rgba(255, 255, 255, .82);

 font-size: 10px;

 margin-bottom: 1px;
 }


 /* =========================================================
 FOOTER CTA
 ========================================================= */

 .footer-cta {
 margin-top: 20px;

 padding: 18px;

 border-radius: 14px;

 background:
 linear-gradient(135deg,
 rgba(29, 161, 255, .08),
 rgba(66, 232, 255, .035));

 border: 1px solid rgba(66, 232, 255, .10);
 }

 .footer-cta p {
 margin: 0 0 12px;

 color: rgba(255, 255, 255, .58);

 font-size: 9.5px;
 line-height: 1.9;
 }

 .footer-cta a {
 height: 38px;

 display: flex;
 align-items: center;
 justify-content: center;

 border-radius: 9px;

 color: #011530;

 background:
 linear-gradient(135deg,
 #ffffff,
 #dffaff);

 font-size: 10px;
 font-weight: 900;

 transition:
 transform .25s ease,
 box-shadow .25s ease;
 }

 .footer-cta a:hover {
 transform: translateY(-2px);

 box-shadow:
 0 8px 25px rgba(66, 232, 255, .18);
 }


 /* =========================================================
 FOOTER BOTTOM
 ========================================================= */

 .footer-bottom {
 position: relative;
 z-index: 2;

 max-width: 1350px;

 margin: 0 auto;

 padding: 20px 28px;

 display: flex;
 align-items: center;
 justify-content: space-between;

 gap: 20px;
 }

 .footer-copyright {
 color: rgba(255, 255, 255, .35);

 font-size: 9px;
 }

 .footer-copyright strong {
 color: rgba(255, 255, 255, .55);

 font-weight: 700;
 }

 .footer-bottom-links {
 display: flex;
 align-items: center;
 gap: 20px;
 }

 .footer-bottom-links a {
 color: rgba(255, 255, 255, .35);

 font-size: 9px;

 transition: color .25s ease;
 }

 .footer-bottom-links a:hover {
 color: var(--cyan);
 }


 /* =========================================================
 FOOTER RESPONSIVE
 ========================================================= */

 @media(max-width: 1000px) {

 .footer-main {
 grid-template-columns: 1.4fr 1fr 1fr;

 gap: 40px;
 }

 .footer-brand {
 grid-column: span 3;
 max-width: 650px;
 }

 }


 @media(max-width: 700px) {

 .footer-main {
 padding: 60px 20px 40px;

 grid-template-columns: repeat(2, 1fr);

 gap: 40px 30px;
 }

 .footer-brand {
 grid-column: span 2;
 }

 .footer-description {
 max-width: 550px;
 }

 .footer-bottom {
 padding: 20px;

 flex-direction: column;

 text-align: center;
 }

 }


 @media(max-width: 450px) {

 .footer-main {
 padding: 55px 16px 35px;

 grid-template-columns: 1fr;

 gap: 35px;
 }

 .footer-brand {
 grid-column: auto;
 }

 .footer-logo-title {
 font-size: 18px;
 }

 .footer-bottom-links {
 flex-wrap: wrap;

 justify-content: center;

 gap: 12px 18px;
 }

 }

 /* =========================================================
 FOOTER
 ========================================================= */

 .site-footer {
 position: relative;
 width: 100%;
 background: #011530;
 color: #ffffff;
 overflow: hidden;
 }


 /* =========================================================
 BACKGROUND GLOW
 ========================================================= */

 .site-footer::before {
 content: "";
 position: absolute;

 width: 500px;
 height: 500px;

 top: -280px;
 left: -180px;

 border-radius: 50%;

 background: rgba(29, 161, 255, .07);

 filter: blur(100px);

 pointer-events: none;
 }


 .site-footer::after {
 content: "";

 position: absolute;

 width: 350px;
 height: 350px;

 right: -150px;
 bottom: -200px;

 border-radius: 50%;

 background: rgba(66, 232, 255, .05);

 filter: blur(100px);

 pointer-events: none;
 }


 /* =========================================================
 CONTAINER
 ========================================================= */

 .footer-container {

 position: relative;
 z-index: 2;

 width: 100%;
 max-width: 1350px;

 margin: 0 auto;

 padding: 75px 28px 65px;

 display: grid;

 grid-template-columns:
 1.7fr 1fr 1fr 1fr;

 gap: 60px;
 }


 /* =========================================================
 BRAND
 ========================================================= */

 .footer-brand {
 max-width: 360px;
 }


 .footer-logo {

 display: inline-flex;

 align-items: center;

 gap: 13px;

 margin-bottom: 22px;

 color: #ffffff;
 }


 .footer-logo-image {

 position: relative;

 width: 52px;
 height: 52px;

 flex-shrink: 0;
 }


 .footer-logo-image::before {

 content: "";

 position: absolute;

 inset: -5px;

 border-radius: 50%;

 background:
 radial-gradient(circle,
 rgba(66, 232, 255, .28),
 transparent 68%);

 filter: blur(5px);
 }


 .footer-logo-image img {

 position: relative;

 width: 52px;
 height: 52px;

 display: block;

 object-fit: cover;

 border-radius: 50%;

 border: 1px solid rgba(255, 255, 255, .18);

 box-shadow:
 0 0 0 2px rgba(66, 232, 255, .06),
 0 0 25px rgba(29, 161, 255, .18);
 }


 .footer-logo-text {

 display: flex;

 flex-direction: column;

 gap: 4px;
 }


 .footer-logo-text strong {

 color: #ffffff;

 font-size: 19px;

 font-weight: 900;

 letter-spacing: -.4px;
 }


 .footer-logo-text strong span {

 color: #42e8ff;

 text-shadow:
 0 0 12px rgba(66, 232, 255, .35);
 }


 .footer-logo-text small {

 color: rgba(255, 255, 255, .42);

 font-size: 9px;
 }


 .footer-brand p {

 max-width: 340px;

 margin: 0;

 color: rgba(255, 255, 255, .48);

 font-size: 11px;

 line-height: 2.2;
 }


 /* =========================================================
 COLUMNS
 ========================================================= */

 .footer-column {

 display: flex;

 flex-direction: column;

 align-items: flex-start;

 gap: 12px;
 }


 .footer-column h3 {

 margin: 0 0 8px;

 color: #ffffff;

 font-size: 13px;

 font-weight: 900;

 position: relative;

 padding-bottom: 10px;
 }


 .footer-column h3::after {

 content: "";

 position: absolute;

 right: 0;
 bottom: 0;

 width: 25px;
 height: 1px;

 background:
 linear-gradient(90deg,
 #1da1ff,
 #42e8ff);

 box-shadow:
 0 0 8px rgba(66, 232, 255, .5);
 }


 .footer-column a {

 position: relative;

 color: rgba(255, 255, 255, .48);

 font-size: 10.5px;

 transition:
 color .25s ease,
 transform .25s ease;
 }


 .footer-column a::before {

 content: "←";

 position: absolute;

 right: -18px;

 opacity: 0;

 color: #42e8ff;

 transition:
 opacity .25s ease,
 transform .25s ease;
 }


 .footer-column a:hover {

 color: #ffffff;

 transform: translateX(-4px);
 }


 .footer-column a:hover::before {

 opacity: 1;

 transform: translateX(-2px);
 }


 /* =========================================================
 BOTTOM
 ========================================================= */

 .footer-bottom {

 position: relative;

 z-index: 3;

 border-top:
 1px solid rgba(255, 255, 255, .07);
 }


 .footer-bottom-container {

 width: 100%;

 max-width: 1350px;

 margin: 0 auto;

 padding: 20px 28px;

 display: flex;

 align-items: center;

 justify-content: space-between;

 gap: 20px;
 }


 .footer-copyright {

 color: rgba(255, 255, 255, .35);

 font-size: 9.5px;
 }


 .footer-developer {

 display: flex;

 align-items: center;

 gap: 5px;

 color: rgba(255, 255, 255, .35);

 font-size: 9.5px;
 }


 .footer-developer a {

 color: #42e8ff;

 font-weight: 800;

 transition:
 color .25s ease,
 text-shadow .25s ease;
 }


 .footer-developer a:hover {

 color: #ffffff;

 text-shadow:
 0 0 12px rgba(66, 232, 255, .65);
 }


 /* =========================================================
 TOP LINE
 ========================================================= */

 .footer-bottom::before {

 content: "";

 position: absolute;

 top: -1px;

 right: 8%;
 left: 8%;

 height: 1px;

 background:
 linear-gradient(90deg,
 transparent,
 rgba(66, 232, 255, .45),
 rgba(29, 161, 255, .65),
 rgba(66, 232, 255, .45),
 transparent);

 box-shadow:
 0 0 8px rgba(66, 232, 255, .25);
 }


 /* =========================================================
 TABLET
 ========================================================= */

 @media(max-width: 900px) {

 .footer-container {

 grid-template-columns:
 1.5fr 1fr 1fr;

 gap: 45px;
 }

 .footer-brand {

 grid-column: 1 / -1;

 max-width: 550px;
 }

 }


 /* =========================================================
 MOBILE
 ========================================================= */

 @media(max-width: 600px) {

 .footer-container {

 grid-template-columns: 1fr 1fr;

 padding: 60px 20px 45px;

 gap: 40px 25px;
 }


 .footer-brand {

 grid-column: 1 / -1;

 text-align: center;

 margin: 0 auto;
 }


 .footer-logo {

 justify-content: center;
 }


 .footer-brand p {

 margin: 0 auto;
 }


 .footer-column {

 align-items: flex-start;
 }


 .footer-bottom-container {

 padding: 18px 20px;

 flex-direction: column;

 text-align: center;

 gap: 9px;
 }

 }


 /* =========================================================
 SMALL MOBILE
 ========================================================= */

 @media(max-width: 400px) {

 .footer-container {

 grid-template-columns: 1fr;

 text-align: center;

 gap: 35px;
 }


 .footer-column {

 align-items: center;
 }


 .footer-column h3::after {

 right: 50%;

 transform: translateX(50%);
 }

 }

 /* =========================================================
 CONTACT
 ========================================================= */

 .footer-contact {
 min-width: 0;
 }


 .footer-contact-item {

 display: flex !important;

 align-items: center;

 gap: 10px;

 color: rgba(255, 255, 255, .52) !important;

 font-size: 10px !important;

 direction: ltr;

 transition:
 color .25s ease,
 transform .25s ease;
 }


 .footer-contact-item:hover {

 color: #ffffff !important;

 transform: translateX(-3px);
 }


 .footer-contact-item::before {
 display: none !important;
 }


 /* =========================================================
 EMAIL ICON
 ========================================================= */

 .footer-contact-icon {

 width: 32px;

 height: 32px;

 flex-shrink: 0;

 display: flex;

 align-items: center;

 justify-content: center;

 border-radius: 9px;

 background: rgba(255, 255, 255, .05);

 border: 1px solid rgba(66, 232, 255, .10);

 color: #42e8ff;

 font-size: 15px;

 transition:
 background .25s ease,
 border-color .25s ease,
 box-shadow .25s ease;
 }


 .footer-contact-item:hover .footer-contact-icon {

 background: rgba(66, 232, 255, .08);

 border-color: rgba(66, 232, 255, .25);

 box-shadow:
 0 0 15px rgba(66, 232, 255, .10);
 }


 /* =========================================================
 SOCIAL
 ========================================================= */

 .footer-social {

 display: flex;

 align-items: center;

 flex-wrap: wrap;

 gap: 7px;

 margin-top: 8px;
 }


 .social-link {

 position: relative;

 height: 32px;

 padding: 0 11px;

 display: flex !important;

 align-items: center;

 justify-content: center;

 border-radius: 8px;

 background: rgba(255, 255, 255, .045);

 border: 1px solid rgba(255, 255, 255, .08);

 color: rgba(255, 255, 255, .48) !important;

 font-size: 8.5px !important;

 transition:
 color .25s ease,
 background .25s ease,
 border-color .25s ease,
 transform .25s ease;
 }


 .social-link::before {

 display: none !important;
 }


 .social-link:hover {

 color: #ffffff !important;

 background: rgba(66, 232, 255, .08);

 border-color: rgba(66, 232, 255, .22);

 transform: translateY(-2px);
 }

 .footer-social .social-link img {
 width: 16px;
 height: 16px;
 object-fit: contain;
 display: block;
 filter: brightness(0) saturate(100%)
 invert(72%)
 sepia(84%)
 saturate(1700%)
 hue-rotate(155deg)
 brightness(103%)
 contrast(102%);
 transition: filter .25s ease, transform .25s ease;
 }

 .footer-social .social-link:hover img {
 filter: brightness(0) invert(1);
 }
 /* ========================================================= QUIZ — HISTOACADEMI DESIGN SYSTEM Navy + Blue + Cyan /
 Glassmorphism ========================================================= */ .quiz-overlay { position: fixed; inset: 0;
 z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; background:
 radial-gradient( circle at 20% 20%, rgba(29, 161, 255, .12), transparent 35% ), radial-gradient( circle at 80% 80%,
 rgba(66, 232, 255, .08), transparent 35% ), rgba(1, 21, 48, .86); backdrop-filter: blur(16px) saturate(140%);
 -webkit-backdrop-filter: blur(16px) saturate(140%); animation: quizOverlayIn .25s ease; } .quiz-overlay.active {
 display: flex; } /* ========================================================= QUIZ BOX
 ========================================================= */ .quiz-box { position: relative; width: 100%; max-width:
 760px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 30px; border-radius: 24px; background:
 linear-gradient( 145deg, rgba(255, 255, 255, .98), rgba(247, 250, 253, .98) ); border: 1px solid rgba(66, 232, 255,
 .16); box-shadow: 0 35px 90px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 50px rgba(29, 161, 255, .08);
 animation: quizBoxIn .35s cubic-bezier(.2, .8, .2, 1); scrollbar-width: thin; scrollbar-color: rgba(29, 161, 255, .35)
 transparent; } .quiz-box::-webkit-scrollbar { width: 5px; } .quiz-box::-webkit-scrollbar-track { background:
 transparent; } .quiz-box::-webkit-scrollbar-thumb { background: rgba(29, 161, 255, .35); border-radius: 20px; } /*
 ========================================================= TOP GLOW
 ========================================================= */ .quiz-box::before { content: ""; position: absolute; top:
 -120px; right: -100px; width: 260px; height: 260px; border-radius: 50%; background: rgba(29, 161, 255, .08); filter:
 blur(70px); pointer-events: none; } /* ========================================================= HEADER
 ========================================================= */ .quiz-header { position: relative; z-index: 2; display:
 flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; } /*
 ========================================================= TITLE
 ========================================================= */ .quiz-title { margin: 0; color: #1da1ff; font-size: 11px;
 font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; text-shadow: 0 3px 12px rgba(29, 161, 255, .12); }
 .quiz-question-number { margin-top: 6px; color: #64748b; font-size: 13px; font-weight: 500; } .quiz-question-number b {
 color: #011530; font-weight: 900; } /* ========================================================= TIMER
 ========================================================= */ .quiz-timer { position: relative; width: 58px; height:
 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background:
 linear-gradient( 145deg, #011530, #06213f ); border: 1px solid rgba(66, 232, 255, .20); color: #ffffff; font-size:
 19px; font-weight: 900; box-shadow: 0 8px 25px rgba(1, 21, 48, .18), 0 0 20px rgba(29, 161, 255, .08); }
 .quiz-timer::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1px solid rgba(66,
 232, 255, .08); pointer-events: none; } .quiz-timer.warning { background: linear-gradient( 145deg, #a86f19, #d99420 );
 border-color: rgba(255, 210, 100, .25); box-shadow: 0 8px 25px rgba(217, 148, 32, .18); } .quiz-timer.danger {
 background: linear-gradient( 145deg, #8e1d1d, #c62828 ); border-color: rgba(255, 120, 120, .25); box-shadow: 0 8px 25px
 rgba(198, 40, 40, .20); animation: timerPulse .7s infinite; } /*
 ========================================================= PROGRESS
 ========================================================= */ .quiz-progress { position: relative; width: 100%; height:
 7px; margin-bottom: 15px; overflow: hidden; border-radius: 20px; background: #e7edf3; box-shadow: inset 0 1px 3px
 rgba(1, 21, 48, .06); } #quizProgress { position: relative; width: 20%; height: 100%; border-radius: inherit;
 background: linear-gradient( 90deg, #1da1ff, #42e8ff ); box-shadow: 0 0 12px rgba(66, 232, 255, .35); transition: width
 .35s ease; } #quizProgress::after { content: ""; position: absolute; top: 0; right: 0; width: 60px; height: 100%;
 background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .55) ); opacity: .45; } /*
 ========================================================= STATUS
 ========================================================= */ .quiz-status { display: flex; align-items: center;
 justify-content: space-between; gap: 15px; margin-bottom: 27px; color: #64748b; font-size: 12px; } .quiz-status b {
 color: #011530; font-weight: 900; } /* ========================================================= QUESTION
 ========================================================= */ .quiz-question { position: relative; } .quiz-question h2 {
 margin: 0 0 24px; color: #011530; font-size: 21px; line-height: 2; font-weight: 900; letter-spacing: -.3px; } /*
 ========================================================= OPTIONS
 ========================================================= */ .quiz-options { display: grid; gap: 11px; } .quiz-option {
 position: relative; width: 100%; min-height: 58px; padding: 12px 16px; display: flex; align-items: center; gap: 13px;
 border: 1px solid #e1e7ed; border-radius: 13px; background: linear-gradient( 135deg, #ffffff, #fafcfe ); color:
 #263445; font-family: inherit; font-size: 13px; font-weight: 500; text-align: right; cursor: pointer; box-shadow: 0 5px
 18px rgba(1, 21, 48, .035); transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow
 .25s ease, color .25s ease; } .quiz-option:hover { transform: translateY(-2px); border-color: rgba(29, 161, 255, .35);
 background: linear-gradient( 135deg, #ffffff, #f2fbff ); color: #011530; box-shadow: 0 10px 28px rgba(29, 161, 255,
 .08); } /* ========================================================= OPTION NUMBER
 ========================================================= */ .quiz-option-number { width: 35px; height: 35px;
 min-width: 35px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background:
 linear-gradient( 145deg, #edf5fa, #e6edf3 ); border: 1px solid rgba(1, 21, 48, .05); color: #011530; font-size: 12px;
 font-weight: 900; transition: background .25s ease, color .25s ease, box-shadow .25s ease; } .quiz-option:hover
 .quiz-option-number { background: linear-gradient( 145deg, #1da1ff, #42e8ff ); color: #011530; box-shadow: 0 0 15px
 rgba(66, 232, 255, .20); } /* ========================================================= CORRECT
 ========================================================= */ .quiz-option.correct { border-color: #2e8b57; background:
 linear-gradient( 135deg, #edf8f1, #f5fcf7 ); color: #17633c; box-shadow: 0 8px 25px rgba(46, 139, 87, .08); }
 .quiz-option.correct .quiz-option-number { background: #2e8b57; color: #ffffff; } /*
 ========================================================= WRONG
 ========================================================= */ .quiz-option.wrong { border-color: #c62828; background:
 linear-gradient( 135deg, #fff0f0, #fff7f7 ); color: #9d2222; box-shadow: 0 8px 25px rgba(198, 40, 40, .07); }
 .quiz-option.wrong .quiz-option-number { background: #c62828; color: #ffffff; } /*
 ========================================================= ACTION
 ========================================================= */ .quiz-actions { margin-top: 22px; display: flex;
 align-items: center; justify-content: flex-start; } #skipBtn { border: 0; padding: 8px 0; background: transparent;
 color: #64748b; font-family: inherit; font-size: 12px; cursor: pointer; transition: color .25s ease, transform .25s
 ease; } #skipBtn:hover { color: #1da1ff; transform: translateX(-3px); } /*
 ========================================================= RESULT
 ========================================================= */ .quiz-result { display: none; position: relative;
 text-align: center; } .quiz-result.active { display: block; animation: quizResultIn .35s ease; } .result-check { width:
 76px; height: 76px; margin: 0 auto 17px; display: flex; align-items: center; justify-content: center; border-radius:
 50%; background: linear-gradient( 145deg, #e9f9f0, #f4fcf7 ); border: 1px solid rgba(46, 139, 87, .12); color: #2e8b57;
 font-size: 32px; font-weight: 900; box-shadow: 0 12px 30px rgba(46, 139, 87, .10); } .quiz-result > span { display:
 block; color: #1da1ff; font-size: 10px; font-weight: 900; letter-spacing: 2px; } .quiz-result h2 { margin: 10px 0;
 color: #011530; font-size: 24px; font-weight: 900; } .result-score { margin: 15px 0 25px; color: #011530; font-size:
 42px; font-weight: 900; line-height: 1; } .result-score span { color: #1da1ff; } /*
 ========================================================= RESULT ITEMS
 ========================================================= */ .result-items { display: grid; grid-template-columns:
 repeat(3, 1fr); gap: 11px; margin-bottom: 25px; } .result-items div { padding: 17px 12px; border-radius: 14px;
 background: linear-gradient( 145deg, #f7f9fb, #eef3f7 ); border: 1px solid rgba(1, 21, 48, .05); box-shadow: 0 7px 20px
 rgba(1, 21, 48, .035); } .result-items b { display: block; margin-bottom: 4px; color: #011530; font-size: 24px;
 font-weight: 900; } .result-items span { color: #64748b; font-size: 11px; } /*
 ========================================================= RESULT BUTTONS
 ========================================================= */ #restartQuiz, #closeQuiz { border: 0; border-radius: 10px;
 padding: 12px 22px; margin: 5px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition:
 transform .25s ease, box-shadow .25s ease, background .25s ease; } #restartQuiz { color: #011530; background:
 linear-gradient( 135deg, #ffffff, #dffaff ); box-shadow: 0 7px 22px rgba(29, 161, 255, .10), 0 0 0 1px rgba(29, 161,
 255, .08); } #restartQuiz:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(29, 161, 255, .18); }
 #closeQuiz { color: #475569; background: #eef1f4; } #closeQuiz:hover { transform: translateY(-2px); background:
 #e4e9ee; color: #011530; } /* ========================================================= ANIMATIONS
 ========================================================= */ @keyframes quizOverlayIn { from { opacity: 0; } to {
 opacity: 1; } } @keyframes quizBoxIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1;
 transform: translateY(0) scale(1); } } @keyframes quizResultIn { from { opacity: 0; transform: translateY(12px); } to {
 opacity: 1; transform: translateY(0); } } @keyframes timerPulse { 0%, 100% { transform: scale(1); } 50% { transform:
 scale(1.07); } } /* ========================================================= MOBILE
 ========================================================= */ @media (max-width: 600px) { .quiz-overlay { padding: 12px;
 } .quiz-box { max-height: calc(100vh - 24px); padding: 21px; border-radius: 20px; } .quiz-header { margin-bottom: 18px;
 } .quiz-title { font-size: 9px; } .quiz-question-number { font-size: 11px; } .quiz-timer { width: 50px; height: 50px;
 font-size: 17px; } .quiz-status { font-size: 11px; margin-bottom: 20px; } .quiz-question h2 { margin-bottom: 19px;
 font-size: 17px; line-height: 1.95; } .quiz-options { gap: 9px; } .quiz-option { min-height: 54px; padding: 10px 12px;
 gap: 10px; border-radius: 11px; font-size: 12px; } .quiz-option-number { width: 31px; height: 31px; min-width: 31px;
 border-radius: 8px; font-size: 11px; } .result-check { width: 65px; height: 65px; font-size: 28px; } .quiz-result h2 {
 font-size: 20px; } .result-score { font-size: 36px; } .result-items { grid-template-columns: 1fr; gap: 8px; }
 .result-items div { padding: 12px; } #restartQuiz, #closeQuiz { padding: 11px 18px; font-size: 11px; } } /*
 ========================================================= VERY SMALL MOBILE
 ========================================================= */ @media (max-width: 400px) { .quiz-overlay { padding: 8px;
 } .quiz-box { padding: 17px; border-radius: 17px; } .quiz-question h2 { font-size: 15px; } .quiz-option { font-size:
 11px; } .quiz-timer { width: 46px; height: 46px; font-size: 15px; } } /*
 ========================================================= REDUCED MOTION
 ========================================================= */ @media (prefers-reduced-motion: reduce) { .quiz-overlay,
 .quiz-box, .quiz-result, .quiz-timer { animation: none !important; } .quiz-option, #restartQuiz, #closeQuiz, #skipBtn {
 transition: none !important; } }
 
 #exam,
#about,
#contact {
    scroll-margin-top: 100px;
}


/* =========================================================
   FOOTER CONTACT
========================================================= */

.footer-contact {
    direction: rtl;
}

.footer-contact h3 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
}

.footer-contact-description {
    margin: 0 0 18px;
    max-width: 320px;

    font-size: 13px;
    line-height: 2;

    color: #9ca3af;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    color: #d1d5db;
    text-decoration: none;

    font-size: 13px;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-contact-item:hover {
    color: #ffffff;
    transform: translateX(-3px);
}

.footer-contact-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);

    font-size: 16px;
}


/* =========================================================
   SOCIAL
========================================================= */

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 20px;
}

.social-link {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.social-link img {
    width: 18px;
    height: 18px;

    display: block;
}

.social-link:hover {
    transform: translateY(-4px);

    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}

/* =========================================================
   ATLAS MODAL - FIX CONTENT VISIBILITY
========================================================= */

.atlas-modal-main {
    display: grid !important;
    grid-template-columns: minmax(280px, 42%) minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* IMAGE */

.atlas-modal-image {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: #eef4f9 !important;
    z-index: 1 !important;
}

.atlas-modal-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: cover !important;
    border-radius: 24px !important;
}


/* =========================================================
   CONTENT
========================================================= */

.atlas-modal-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 100px !important;

    position: relative !important;
    z-index: 10 !important;

    color: #34445a !important;
    overflow: visible !important;
}


/* HEADING */

.atlas-modal-heading {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    margin: 0 0 24px !important;
}

.atlas-modal-heading > span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    margin-bottom: 8px !important;

    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;

    color: #1da1ff !important;
}

.atlas-modal-heading h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    margin: 0 !important;

    font-size: 28px !important;
    line-height: 1.7 !important;
    font-weight: 800 !important;

    color: #011530 !important;
}


/* =========================================================
   BODY
========================================================= */

.atlas-modal-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 50px !important;

    color: #34445a !important;

    font-size: 15px !important;
    line-height: 2.1 !important;

    text-align: right !important;

    overflow: visible !important;
}

.atlas-modal-body p {
    display: block !important;

    margin: 0 0 18px !important;

    color: #34445a !important;
    font-size: 15px !important;
    line-height: 2.1 !important;
}

.atlas-modal-body strong {
    display: inline !important;

    color: #011530 !important;
    font-weight: 800 !important;
}

.atlas-modal-body h3 {
    display: block !important;

    margin: 28px 0 12px !important;

    color: #011530 !important;

    font-size: 19px !important;
    line-height: 1.8 !important;
    font-weight: 800 !important;
}


/* INFO BOX */

.atlas-modal-body .atlas-info-box {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;

    margin: 24px 0 !important;
    padding: 18px 20px !important;

    border-right: 3px solid #1da1ff !important;
    border-radius: 14px !important;

    background: rgba(29, 161, 255, 0.07) !important;

    color: #34445a !important;
}

.atlas-modal-body .atlas-info-box strong {
    display: block !important;

    margin-bottom: 6px !important;

    color: #1da1ff !important;
}

.atlas-modal-body .atlas-info-box p {
    display: block !important;

    margin: 0 !important;

    color: #34445a !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .atlas-modal-main {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .atlas-modal-image {
        position: relative !important;
        top: auto !important;
    }

    .atlas-modal-image img {
        max-height: 380px !important;
    }

    .atlas-modal-content {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .atlas-modal-heading h1 {
        font-size: 23px !important;
    }

    .atlas-modal-body,
    .atlas-modal-body p {
        font-size: 14px !important;
        line-height: 2 !important;
    }

}

.atlas-modal-content {
    background: red !important;
    min-height: 500px !important;
    display: block !important;
}

.atlas-modal-body {
    color: black !important;
    background: yellow !important;
    display: block !important;
}