/* === source: utility.css === */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
:root {
  /* ألوان أساسية */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text-main:#e6e6e6 ;
  --color-text-maine: #1f3b63;
  --color-text-muted: #6c757d;
  --color-text-muteds: #555;
  --color-text-mutedsc: #f97316;
  --color-text-mutedscf: #1f4b77;
  --color-text-half: #f4f4f4;
  --color-text-halfy: #162c4a;
  --color-text-halfyp: #1f2937;
  --color-text-halfypy: #6b7280;
  --color-text-hal: #f4f6f9;
  --color-text-whi: #ccc;
  --color-text-end:#dbe3ee ;
  --color-text-gray:#f3f4f6 ;
  --color-text-gr: #f5f7fa;
  --color-text-green: #16a34a;
  --color-text-whitee: #f9fafb;
  --color-text-whiteef: #374151;
  --color-text-bluee: #0f2742;
  --color-text-greeen: #b9e9d3;
  --color-text-grayyy: #bbbfc2;

  /* أزرق غامق/كحلي */
  --color-navy-main: #1f4c73;
  --color-navy-mainn: #0B1F2E;
  --color-navy-alt: #ff8c42;
  --color-navy-header: #144979;
  --color-navy-text: #0b1c2d;
  --color-navy-text-soft: #1f4e79;
  --color-navy-text-sof: #ffc107;
  --color-navy-text-sofi:#1f3c88 ;
  --color-navy-text-dark:#214e78 ;
  --color-navy-text-main: #f4f5f7;
  --color-navy-text-darkess:#1a1a1a ;
  /* برتقالي */
  --color-orange-main: #f47429;
  --color-orange-alt: #ff7a2f;
  --color-orange-cta: #FF7A1A;
  --color-orange-soft:#f47b20;

  /* أزرق فاتح */
  --color-blue-light:#ffe9dd ;
  --color-blue-btn: #6e9fce;
  --color-blue-btns:#2f5bd1 ;
  --color-blue-btnss:#7c3aed ;
  --color-blue-btnssr:#dcfce7 ;
  --color-blue-btnssr:# ;

  /* رماديات */
  --color-gray-bg-soft: #fff1e6;
  --color-gray-text: #d3d0d0;
  --color-gray-muted:#e8e8e8 ;
  --color-gray-line: #e0e0e0;
  --color-gray-linee: #ff7a00;
  --color-gray-lineer: #ede9fe;
  --color-grays-lineer: #475569;
    /* red */
  --color-red-line: #ffe8d5;
  --blue-white-gradient: linear-gradient(
        to bottom,
        #0e2cd5 30%,
        #9db4ff 70%,
        #ffffff 200%
    );
}

body{
color: var(--color-white);
/* overflow: rely on layout fixes in app-shell.css (no horizontal clipping) */
/* background-image: url("./image/Laptop\ with\ Code\ and\ Cityscape\ Sunset\ 1.svg"); */
background-size: cover;
background-position: center;
font-family: 'Poppins', sans-serif;

}

/* === source: style.css === */



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

.header{
position:fixed;
top:0;
left:0;
width:100%;
height: 73px;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
z-index:1000;
background:var(--color-white);
}

.logo{
width: 180px;
height: 37px;
top: 28px;
left: 17px;
}

.logo a{
display: block;
text-decoration: none;
line-height: 0;
}

.mobile-logo-link,
.menu-logo-link{
display: inline-block;
text-decoration: none;
line-height: 0;
}

.nav a{
color: var(--color-black);
text-decoration:none;
margin:0 15px;
transition:0.3s;
}

.header-actions{
display:flex;
align-items:center;
gap: 20px;
}
/* ======================== */
.search-box {
    position: relative;
    width: 312px;
    height: 38px;
}

.search-box input {
    width: 100%;
    height: 40px;
    padding-block: 10px;
    padding-inline-end: 10px;
    padding-inline-start: 35px;
    border: 1px solid var( --color-navy-header);
    border-radius: 25px;
    outline: none;
    transition: 0.3s;
    box-shadow: 0 0 5px  var( --color-navy-header);
}
.search-img {
    position: absolute;
    inset-inline-end: 40px;
    top: 10px;
    transform: translateY(-50%);
    width: 59px;
    height: 20px;
    cursor: pointer;
}
.search-img img{
    position: absolute;
    inset-inline-end: -35px;
    top: -0px;
     width: 60px;
    height: 40px;
}
.search-img i {
    position: absolute;
    top: 20px;
    inset-inline-start: 65px;
    transform: translate(-50%, -50%);
    color:  var( --color-white);
    font-size: 13px;
    pointer-events: none;
}
/* ============================== */
.earth-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.earth-icon img{
    display: block;
    width: 27px;
    height: 27px;
    object-fit: contain;
}
.earth-icon i{
    font-size: 27px;
    color: var( --color-navy-header);
}
.register-btn{
background:var( --color-navy-header);
border:none;
padding:10px 25px;
border-radius:25px;
color:var( --color-white);
cursor:pointer;
transition:0.3s;
line-height: 1.2;
align-self: center;
margin: 0;
font-size: inherit;
}

.register-btn:hover{
background:var(--color-orange-main);
}

/* ================= HERO ================= */

.hero{
height:100vh;
position:relative;
background: url("/image/laptop-code-sunset.svg") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding-top:100px;
}

.overlay{
position:absolute;
inset:0;
background:linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
}

.hero-content{
position:relative;
max-width:700px;
z-index:2;
margin-top: -250px;
}

.hero h1{
font-size:40px;
margin-bottom:20px;
}

.hero p{
margin-bottom:30px;
line-height:1.6;
}

.buttons{
display:flex;
justify-content:center;
gap:20px;
}

/* زرار أبيض */
.btn-solid {
  background: var(--color-white);
  width: 266px;
  min-height: 55px;
  color: var(--color-black);
  padding: 14px 30px;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
}

.btn-solid span {
  transition: 0.3s ease;
  display: block;
  margin: 0;
  line-height: 1.25;
  text-align: center;
}

.btn-solid:hover span {
  transform: scale(1.2);
}

/* الزرار الشفاف المتغير */
.btn-outline {
  background: transparent;
  width: 266px;
  min-height: 55px;
  color: var(--color-white);
  padding: 14px 30px;
  border-radius: 30px;
  border: 2px solid var(--color-white);
  text-decoration: none;
  transition: 0.4s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
}

.btn-outline span {
  transition: 0.3s ease;
  display: block;
  margin: 0;
  line-height: 1.25;
  text-align: center;
}

.btn-outline:hover span {
  transform: scale(1.2);
}

/* ================= Stats ================= */

.stats{
position:absolute;
top:250px;
left:80px;
z-index:2;
}

.stats div{
margin-bottom:20px;
}

.stats h3{
font-size:21px;
font-style:initial;
color:var(--color-white);
}

/* ================= Partners ================= */

.partners{
    position:absolute;
    left:60px;
    bottom:50px;
    width:400px;
    overflow:hidden;
    opacity:0.6;
}

.partners-track{
    display:flex;
    gap:20px;
    animation:scrollLogos 1s linear infinite alternate;
}

.partners img{
    height:30px;
    object-fit:contain;
}

/* الحركة */
@keyframes scrollLogos{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* ================= Moving Strip ================= */

.moving-strip{
position:absolute;
bottom:120px;
left:60px;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(5px);
padding:12px 30px;
border-radius:30px;
white-space:nowrap;
}

@keyframes moveStrip{
from{
transform:translateX(0);
}
to{
transform:translateX(60px);
}
}

/* ================= Scroll Button ================= */

.scroll-btn{
position:absolute;
left:50%;
bottom:40px;
color: var(--color-black);
font-style:initial;
transform:translateX(-50%);
opacity:0.6;
background:var(--color-text-muted);
backdrop-filter:blur(5px);
padding:12px 30px;
border-radius:30px;
}


/* ==================text============== */
.buttom-right{
    position: absolute;
    bottom: 110px;
    right: 20px;
    margin-bottom: 30px;
    font-size: large;

}
.right-bottom-section{
    position:absolute;
    right:170px;
    bottom:70px;
    text-align:center;
    color:var(--color-white);
    font-size:14px;
}

.image-stack{
    margin-top:10px;
    display:flex;
    flex-direction:column; /* الصور فوق بعض */
}

.image-stack img{
    width:40px; /* ممكن تغيري الحجم حسب التصميم */
    height:auto;
    object-fit:contain;
}

.man{
    position: absolute;
    right: 180px;
}
.girl{
    position: absolute;
    right: 160px;
}
.black{
    position: absolute;
    right: 140px;
}
.orange{
    position: absolute;
    right: 115px;
}
.plus{
    position: absolute;
    right: 126px;
    bottom: 5px;
}
.text-image span{
    color: var(--color-orange-main);

}
/* =============================================section mobile============================================== */
/* اخفاء الموبايل افتراضياً (mobile menu is #site-mobile-menu — styled in app-shell.css) */
.mobile-header,
.mobile-hero {
    display: none;

}

/* نخفي نسخة الديسكتوب تحت عرض التابلت (نفس نقطة القائمة الجانبية 1024px) */
@media (max-width: 1024px) {

.hero,
.partners,
.moving-strip,
.scroll-btn,
.right-sec {
    display: none;
}

.close-menu {
    font-size: 26px;
    cursor: pointer;
    color: var(--color-navy-alt);
}
/* ================= HERO ================= */
.mobile-hero {
    text-align: center;
    padding: 40px 20px;
    background: url("/image/laptop-code-sunset.svg") center/cover no-repeat;
    color: var(--color-white);
    display: block;
}

.mobile-hero h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.mobile-hero h1 {
    font-size: 24px;
    margin-bottom: 15px;
}

.mobile-hero p {
    font-size: 14px;
    margin-bottom: 30px;
}

/* ================= STATS ================= */
.mobile-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.mobile-stats h3 {
    font-size: 18px;
}

.mobile-stats span {
    font-size: 12px;
}

/* ================= SEARCH BOX ================= */
.mobile-search {
    display: flex;
    align-items: center;
    background: var(--color-white);
    border-radius: 15px;
    padding: 10px;
    gap: 10px;
}

.mobile-search input {
    border: none;
    flex: 1;
    outline: none;
}

.search-icon {
    background: var(--blue-white-gradient);
    color: var(--color-white);
    padding: 10px;
    border-radius: 10px;
}

.mic-icon {
    background: var(--blue-white-gradient);
    color: var(--color-white);
    padding: 10px;
    border-radius: 50%;
}

}

/* =============================section2=============================== */
.category-section {
    padding: 60px 8%;
    display: block;
}

/* Category section: visible on mobile — layout reflow in app-shell.css */

.section-header {
    text-align: center;
    margin-bottom: 40px;
}
.section-header span{
    color: var(--color-navy-text-soft);
    font-weight: bold;
    font-size: 28px;
}


.small-title span{
    color: var(--color-orange-main);

}
.section-header h2 {
    font-size: 25px;
    margin-top: 10px;
    color: var(--color-black);
}


.category-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* LEFT */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 623px; /* ده اللي هيظبط التساوي */
    min-width: 0;
    max-width: 100%;
}

.vertical {
    flex: 1;
}

/* RIGHT */
.right-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    min-width: 0;
    max-width: 100%;
}

.large {
    min-height: 280px;
    height: clamp(17.5rem, 32vw, 20rem);
}


 .bottom-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.row {
    display: flex;
    gap: 25px;
}

.row .horizontal {
    flex: 1;
    height: 160px;
    transition: 0.4s ease;
}
/* الصورة اللي عليها hover */
.row .horizontal:hover {
    flex: 1.2;
}

.row .horizontal:hover h3 {
    font-size: 20px;
}

/* CARD STYLE */
.card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    transition: 0.4s ease;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease;
}

.card h3, .card .content {
    position: absolute;
    color: var(--color-white);
    z-index: 2;
    transition: 0.4s ease;
}

.card h3 {
    bottom: 20px;
    left: 20px;
    font-size: 18px;
}

/* Text block: single absolute anchor; heading must NOT use .card h3 absolute (would overlap <p>) */
.large .content {
    bottom: 20px;
    left: 20px;
    right: 1.25rem;
    max-width: min(60%, 32rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
}

.large .content h3 {
    position: static;
    bottom: auto;
    left: auto;
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    line-height: 1.25;
    font-weight: 700;
    margin: 0;
}

.large .content p {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.55;
    margin: 0;
    white-space: normal;
    max-width: 100%;
}

/* Overlay */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

/* LEFT HOVER (VERTICAL) */
.left-column:hover .vertical {
    flex: 0.7;
}

.left-column .vertical:hover {
    flex: 1.3;
}

.left-column .vertical:hover h3 {
    font-size: 22px;
}

/* RIGHT BOTTOM HOVER (HORIZONTAL) */
.bottom-grid:hover .horizontal {
    transform: scaleX(0.9);
}

.bottom-grid .horizontal:hover {
    transform: scaleX(1.1);
}

.bottom-grid .horizontal:hover h3 {
    font-size: 20px;
}

/* GENERAL HOVER ZOOM */
.card:hover img {
    transform: scale(1.1);
}

/* BUTTON — flex centers the CTA under the category grid in LTR and RTL (no asymmetric offset hack) */
.explore {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-inline: 0;
    width: 100%;
    box-sizing: border-box;
}

.explore button {
    background: linear-gradient(to right, var(--color-navy-text-soft) 50%, var(--color-orange-main) 50%);
    background-size: 200% 100%; /* مساحة الحركة */
    background-position: left;  /* يبدأ من اليمين */
    color: var(--color-white);
    padding: 12px 35px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
    transition: background-position 1.5s ease; /* سرعة الحركة */
}

.explore button:hover {
    background-position: right; /* يتحرك اللون من اليمين للشمال */
}
/* ==================================== section3 ============================================== */
.best-sellersr {
    padding: 60px 80px;
    background: var(--color-text-half);
}

.containerr {
    max-width: 1300px;
    margin: auto;
}

/* Header */

/* 1fr | centered title | 1fr so “See all” sits on inline-end (right LTR / left RTL) */
.section-headerr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.top-textr {
    color: var(--color-orange-alt);
    font-size: 14px;
    font-weight: 600;
}

.titler {
    grid-column: 2;
    text-align: center;
    max-width: min(100%, 42rem);
    justify-self: center;
    min-width: 0;
}

.titler h2 {
    font-size: 36px;
    color: var(--color-navy-text);
    margin: 5px 0;
    font-weight: 700;

}

.titler p {
    color: var(--color-text-muted);
    font-size: 14px;
}

.see-allr {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    text-decoration: none;
    color: var(--color-navy-text);
    font-weight: 500;
    white-space: nowrap;
}

/* Cards */

.cardsr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cardr {
    background: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: 0.3s;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 360px;
    position: relative;
    left: 0;
    padding: 15px;
    border-radius: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.card-imager {
    position: relative;
    flex-shrink: 0;
}

.card-imager img {
    width: 100%;
    height: 200px;
    object-fit: cover;
        border-radius: 20px;

}

.badgesr {
    position: absolute;
    top: 15px;
    right: 15px;
    left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    max-width: calc(100% - 30px);
    z-index: 1;
}

/* Nesting beats `* { padding: 0 }` and keeps pills readable on LTR */
.badgesr .badger {
    background: var(--color-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
    box-sizing: border-box;
}

.badger {
    background: var(--color-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
    box-sizing: border-box;
}

.card-contentr {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
    gap: 10px;
}

.card-topr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.625rem;
    flex-shrink: 0;
}

.card-topr h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-navy-text);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.durationr {
    background: var(--color-gray-text);
    flex-shrink: 0;
    width: fit-content;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--color-black);
    text-align: center;
    box-sizing: border-box;
}

.descriptionr {
    font-size: 12px;
    color: var(--color-black);
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

/* Button Animation */

.btnr {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: var(--color-navy-text-soft);
    color: var(--color-white);
    font-size: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    flex-shrink: 0;
    margin-top: auto;
}
.btnr span {
    position: relative;
    z-index: 2;   /* يخلي النص فوق الطبقة البرتقالى */
}

.btnr::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-orange-alt);
    transition: 0.4s ease;
    z-index: 1;
}

.btnr:hover::before {
    left: 0;
}

.btnr:hover {
    color: var(--color-white);
}

.btnr span {
    position: relative;
    z-index: 1;
}
/* ==================mobile ====================== */
/* تابلت ومتوسط: شبكة مرنة + كروت بعرض الحاوية */
@media (min-width: 769px) and (max-width: 1199px) {
    .best-sellersr .cardsr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        justify-items: stretch;
    }

    .best-sellersr .cardsr .cardr {
        width: 100%;
        max-width: 100%;
        left: 0;
        height: auto;
        min-height: 0;
    }
}

/* Wide desktop: fill grid tracks (matches RTL layout; old 350px + left:-90px caused misalignment) */
@media (min-width: 1440px) {
    .best-sellersr .cardsr .cardr {
        width: 100%;
        max-width: 100%;
        left: 0;
        min-height: 408px;
        height: auto;
    }
}

/* الموبايل: الكروت تحت بعض */
@media (max-width: 768px) {
    .best-sellersr .cardsr {
        grid-template-columns: 1fr; /* كارت واحد في كل صف */
        gap: 15px;
    }

    /* نخفي الكارت الرابع والخامس لو موجود */
    .best-sellersr .cardsr .cardr:nth-child(n+4) {
        display: none;
    }

    /* النصوص في النص */
    .best-sellersr .titler {
        text-align: center;
        margin-bottom: 20px;
    }

    /* تصغير الكارت للموبايل */
    .best-sellersr .cardsr .cardr {
        width: 100%; /* ياخد كل عرض العمود */
        height: auto; /* ارتفاع مرن حسب المحتوى */
        padding: 12px;
        left: 0;
        min-height: 0;
    }

    .best-sellersr .cardsr .card-imager img {
        height: 140px; /* أصغر من الديسكتوب */
    }

    .best-sellersr .card-topr h3 {
        font-size: 14px;
    }

    .best-sellersr .descriptionr {
        font-size: 12px;
    }
}
/* ====================================section4========================== */
.best-sellersrs {
    padding: 60px 80px;
    background: var(--color-white);
}

.containerrs {
    max-width: 1300px;
    margin: auto;
}

/* Header */

.section-headerrs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.top-textrs {
    color: var(--color-orange-alt);
    font-size: 14px;
    font-weight: 600;
}

.titlers {
    grid-column: 2;
    text-align: center;
    max-width: min(100%, 42rem);
    justify-self: center;
    min-width: 0;
}

.titlers h2 {
    font-size: 36px;
    color: var(--color-navy-text);
    margin: 5px 0;
    font-weight: 700;

}

.titlers p {
    color: var(--color-text-muted);
    font-size: 14px;
}

.see-allrs {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    text-decoration: none;
    color: var(--color-navy-text);
    font-weight: 500;
    white-space: nowrap;
}

/* Cards */

.cardsrs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cardrs {
    background: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: 0.3s;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 360px;
    position: relative;
    left: 0;
    padding: 15px;
    border-radius: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.card-imagers {
    position: relative;
    flex-shrink: 0;
}

.card-imagers img {
    width: 100%;
    height: 200px;
    object-fit: cover;
        border-radius: 20px;

}

.badgesrs {
    position: absolute;
    top: 15px;
    right: 15px;
    left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    max-width: calc(100% - 30px);
    z-index: 1;
}

.badgesrs .badgers {
    background: var(--color-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
    box-sizing: border-box;
}

.badgers {
    background: var(--color-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
    box-sizing: border-box;
}

.card-contentrs {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
    gap: 10px;
}

.card-toprs {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.625rem;
    flex-shrink: 0;
}

.card-toprs h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-navy-text);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.durationrs {
    background: var(--color-gray-text);
    flex-shrink: 0;
    width: fit-content;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--color-black);
    text-align: center;
    box-sizing: border-box;
}

.descriptionrs {
    font-size: 12px;
    color: var(--color-black);
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

/* Button Animation */

.btnrs {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: var(--color-navy-text-soft);
    color: var(--color-white);
    font-size: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    flex-shrink: 0;
    margin-top: auto;
}
.btnrs span {
    position: relative;
    z-index: 2;   /* يخلي النص فوق الطبقة البرتقالى */
}

.btnrs::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-orange-alt);
    transition: 0.4s ease;
    z-index: 1;
}

.btnrs:hover::before {
    left: 0;
}

.btnrs:hover {
    color: var(--color-white);
}

.btnrs span {
    position: relative;
    z-index: 1;
}
/* ==================mbile======================= */
/* ================= Responsive - Hot Programs ================= */

/* ===== التابلت ===== */
@media (min-width: 769px) and (max-width: 1199px) {
    .best-sellersrs .cardsrs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .best-sellersrs .cardsrs .cardrs {
        width: 100%;
        max-width: 100%;
        height: auto;
        left: 0;
        min-height: 0;
    }
}

@media (min-width: 1440px) {
    .best-sellersrs .cardsrs .cardrs {
        width: 100%;
        max-width: 100%;
        left: 0;
        min-height: 408px;
        height: auto;
    }
}


/* ===== الموبايل ===== */
@media (max-width: 768px) {

    /* الكروت تحت بعض */
    .best-sellersrs .cardsrs {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* نخفي الكارت الرابع */
    .best-sellersrs .cardsrs .cardrs:nth-child(n+4) {
        display: none;
    }

    /* نلغي الـ left عشان كان بيبوظ الدنيا */
    .best-sellersrs .cardrs {
        width: 100%;
        height: auto;
        left: 0px;
        padding: 12px;
    }

    /* تصغير الصورة شوية */
    .best-sellersrs .card-imagers img {
        height: 140px;
    }

    /* النصوص تبقى متوسطة */
    .best-sellersrs .card-toprs h3 {
        font-size: 14px;
    }

    .best-sellersrs .descriptionrs {
        font-size: 12px;
    }

    /* الهيدر في النص */
    .best-sellersrs .titlers {
        text-align: center;
        margin-bottom: 20px;
    }
}
/* ====================================section5========================== */
.best-sellersrx {
    padding: 60px 80px;
    background: var(--color-text-half);
}

.containerrx {
    max-width: 1300px;
    margin: auto;
}

/* Header */

.section-headerrx {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.top-textrx {
    color: var(--color-orange-alt);
    font-size: 14px;
    font-weight: 600;
}

.titlerx {
    grid-column: 2;
    text-align: center;
    max-width: min(100%, 42rem);
    justify-self: center;
    min-width: 0;
}

.titlerx h2 {
    font-size: 36px;
    color: var(--color-navy-text);
    margin: 5px 0;
    font-weight: 700;

}

.titlerx p {
    color: var(--color-text-muted);
    font-size: 14px;
}

.see-allrx {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    text-decoration: none;
    color: var(--color-navy-text);
    font-weight: 500;
    white-space: nowrap;
}

/* Narrow screens: stack title + “See all” so the link stays tappable and readable */
@media (max-width: 768px) {
    .section-headerr,
    .section-headerrs,
    .section-headerrx {
        grid-template-columns: 1fr;
        row-gap: 0.75rem;
        justify-items: center;
    }

    .section-headerr .titler,
    .section-headerrs .titlers,
    .section-headerrx .titlerx {
        grid-column: 1;
        max-width: 100%;
    }

    .section-headerr .see-allr,
    .section-headerrs .see-allrs,
    .section-headerrx .see-allrx {
        grid-column: 1;
        justify-self: center;
        white-space: normal;
        text-align: center;
    }
}

/* Cards */

.cardsrx {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cardrx {
    background: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: 0.3s;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 360px;
    position: relative;
    left: 0;
    padding: 15px;
    border-radius: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.card-imagerx {
    position: relative;
    flex-shrink: 0;
}

.card-imagerx img {
    width: 100%;
    height: 200px;
    object-fit: cover;
        border-radius: 20px;

}

.badgesrx {
    position: absolute;
    top: 15px;
    right: 15px;
    left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    max-width: calc(100% - 30px);
    z-index: 1;
}

.badgesrx .badgerx {
    background: var(--color-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
    box-sizing: border-box;
}

.badgerx {
    background: var(--color-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
    box-sizing: border-box;
}

.card-contentrx {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
    gap: 10px;
}

.card-toprx {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.625rem;
    flex-shrink: 0;
}

.card-toprx h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-navy-text);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.durationrx {
    background: var(--color-gray-text);
    flex-shrink: 0;
    width: fit-content;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--color-black);
    text-align: center;
    box-sizing: border-box;
}

.descriptionrx {
    font-size: 12px;
    color: var(--color-black);
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

/* Button Animation */

.btnrx {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: var(--color-navy-text-soft);
    color: var(--color-white);
    font-size: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    flex-shrink: 0;
    margin-top: auto;
}
.btnrx span {
    position: relative;
    z-index: 2;   /* يخلي النص فوق الطبقة البرتقالى */
}

.btnrx::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-orange-alt);
    transition: 0.4s ease;
    z-index: 1;
}

.btnrx:hover::before {
    left: 0;
}

.btnrx:hover {
    color: var(--color-white);
}

.btnrx span {
    position: relative;
    z-index: 1;
}
/* =================mobile====================== */
/* ================= Responsive - Upcoming Diplomas ================= */

/* ===== Tablet ===== */
@media (min-width: 769px) and (max-width: 1199px) {
    .best-sellersrx .cardsrx {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .best-sellersrx .cardsrx .cardrx {
        width: 100%;
        max-width: 100%;
        height: auto;
        left: 0;
        min-height: 0;
    }
}

@media (min-width: 1440px) {
    .best-sellersrx .cardsrx .cardrx {
        width: 100%;
        max-width: 100%;
        left: 0;
        min-height: 408px;
        height: auto;
    }
}


/* ===== Mobile ===== */
@media (max-width: 768px) {

    /* الكروت تحت بعض */
    .best-sellersrx .cardsrx {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* نخفي الكارت الرابع */
    .best-sellersrx .cardsrx .cardrx:nth-child(n+4) {
        display: none;
    }

    /* نلغي العرض الثابت والـ left */
    .best-sellersrx .cardrx {
        width: 100%;
        height: auto;
        left: 0;
        padding: 12px;
    }

    .best-sellersrx .card-imagerx img {
        height: 140px;
    }

    .best-sellersrx .titlerx {
        text-align: center;
    }
}
/* =========================section6================== */
.partnerse {
  padding: 80px 0;
  text-align: center;
  background: var(--color-white);

}

/* ===== Heading ===== */

.headinge {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.dashe {
  width: 30px;
  height: 3px;
  background: var(--color-orange-soft); /* برتقالي */
}

.headinge h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-navy-text-sofi); /* أزرق غامق */
}

.descriptione {
  color: var(--color-black);
  font-size: 15px;
  margin-bottom: 60px;
}

/* ===== Slider ===== */

.slidere {
  overflow: hidden;
  width: 100%;
}

.slide-tracke {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: scroll 10s ease-in-out infinite alternate;
}

.slide-tracke img {
  height: 80px;
  object-fit: contain;
  transition: 0.3s;
}

.slide-tracke img:hover {
  transform: scale(1.1);
}

/* ===== Animation ===== */

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* ================================section 7====================================== */
.learning-journey {
    padding: 80px 20px;
    background: var(--color-white);

}

.containerws {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: auto;
    gap: 50px;
}

/* ===== Left Side ===== */
.left h3 {
    color: var(--color-text-muteds);
    font-weight: 500;
    margin-bottom: 10px;
}

.left h1 {
    font-size: 36px;
    margin-bottom: 40px;
    line-height: 1.3;
    color: var(--color-black);
}

.steps .step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

.steps .icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.steps .text h4 {
    font-size: 18px;
    margin-bottom: 5px;
    color: var(--color-text-muteds);
}

.steps .text p {
    color: var(--color-text-muteds);
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Right Side ===== */
.right {
    position: relative;
    flex-shrink: 0;
}

.right .blob {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    position: absolute;
    top: 50px;
    right: -100px;
    z-index: 1;
}

.right .main-img {
    position: relative;
    width: 400px;
    z-index: 2;
    border-radius: 12px;
    bottom: -200px;
}

.right .small-img {
    position: absolute;
    top: 370px;
    right: 17px;
    width: 180px;
    border-radius: 12px;
    z-index: 3;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.right .red{
  color: var(--color-red-line);
  position: absolute;
  top: 460px;
  right: 100px;
  z-index: 5;

}
/* ===============mobile=============== */
/* ===== Mobile تعديل سكشن Learning Journey ===== */
@media (max-width: 768px) {

    /* نخفي الجزء اليمين */
    .learning-journey .right {
        display: none;
    }

    .containerws {
        flex-direction: column;
    }

    .learning-journey .step:last-child {
        display: none;
    }

    .left h1 {
        font-size: 26px;
    }

    .steps .text p br {
        display: none;
    }
}
/* =====================section8=========================== */
.partnersq {
    padding: 80px 20px;
    background: var(--color-text-hal);

}

.containerq {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.section-titleq {
    font-size: 28px;
    font-weight: bold;
    color: var(--color-navy-main);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dashq {
    width: 20px;
    height: 3px;
    background: var(--color-orange-main);
    display: inline-block;
}

.section-descq {
    margin-top: 15px;
    color: var(--color-text-muteds);
    font-size: 15px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.cardsq {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}

.cardq {
    background: var(--color-white);
    border-radius: 15px;
    padding: 30px 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: 0.3s ease;
}

.cardq:hover {
    transform: translateY(-5px);
}

.cardq-image img {
    width: 80px;
    height: auto;
    margin-bottom: 20px;
}

.card-textq {
    font-size: 13px;
    color: var(--color-text-muteds);
    line-height: 1.6;
}
/* ====================mobile========================= */
/* نخفي السكشن في الموبايل */
@media (max-width: 768px) {
    .partnersq {
        display: none;
    }
}
/* ===================================section9=================== */
.testimonials{
    padding:80px 20px;
    text-align:center;
    background:var(--color-white);
    box-sizing:border-box;



}
.container{
    display: block;
}

.section-small{
    color:var(--color-navy-text-soft);
    font-weight:bold;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size: 35px;
}

.dash{
    width:20px;
    height:3px;
    background:var(--color-orange-alt);
}

.section-title{
    font-size:40px;
    margin-top:10px;
    margin-bottom:60px;
    color: var(--color-black);
    width: 100%;
}

/* Testimonials main heading: orange; prior desktop size then −12% */
.testimonials .section-title {
    margin-bottom: 60px;
    color: var(--color-orange-main, #f47429);
    font-size: calc(40px * 1.2 * 0.9 * 0.9 * 0.88);
}

.testimonial-cards{
    display:flex;
    gap:20px;
    justify-content:center;

}

.testimonial-card{
    background:var(--color-navy-text-soft);
    color:var(--color-white);
    width:250px;
    height:623px;
    border-radius:20px;
    cursor:pointer;
    transition:all 0.4s ease;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start; /* يخلي المحتوى يبدأ من فوق */
    padding-top:30px;
    position:relative;
}

.testimonial-card.active{
    width:700px;
    background:var(--color-white);
    color:var(--color-black);
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.testimonial-content{
    padding-left:60px;
    padding-right: 60px;

    text-align:center;
    width: 560px;
    height: 823px;
}

/* نخفي النص بس مش الصورة */
/* نخفي النص */
/* hide text when closed */
.testimonial-card:not(.active) h3,
.testimonial-card:not(.active) .role,
.testimonial-card:not(.active) .description,
.testimonial-card:not(.active) .mini-img {
    display:none;
}
.avatar{
    width:100px;
    height:150px;
    border-radius:50%;
    margin-bottom:15px;
}

.role{
    font-size:14px;
    color:var(--color-gray-text);
    margin-bottom:20px;
}

.description{
    font-size:14px;
    line-height:2;
    color: var(--color-navy-text-soft);
}
.description span{
    color: var(--color-orange-alt);
}

/*
 * Testimonials only: quote + mini image.
 * Full-width .bottom stretched quote vs text — keep a centered track matching .testimonial-content (~560px).
 */
.testimonials .testimonial-card .bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 32px));
    max-width: calc(100% - 32px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0;
    box-sizing: border-box;
}

.testimonials .testimonial-card.active .bottom {
    justify-content: space-between;
}

.testimonials .testimonial-card .quote {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    min-width: 0;
}

.testimonials .testimonial-card .quote img {
    width: min(160px, 100%);
    max-width: 180px;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    opacity: 0.35;
    transition: 0.4s ease;
    margin: 0;
    display: block;
}

.testimonials .testimonial-card.active .quote img {
    width: 50px;
    max-width: 50px;
    height: auto;
    opacity: 1;
}

.testimonials .testimonial-card .mini-img {
    width: 150px;
    height: 100px;
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
}
/* ==============mobile================= */
/* اخفاء اخر كارد في الموبايل */
@media (max-width: 768px) {
    .testimonial-card:last-child {
        display: none;
    }
}
/* =====================section10================ */
.herov{
    display:flex;
    height:100vh;
    overflow:hidden;
    background:var(--color-navy-mainn);

}

/* ================= LEFT SIDE ================= */

.leftv{
    width:50%;
    padding:80px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:var(--color-white);
}

.small-titlev{
    font-size:40px;
    margin-bottom:15px;
}

.small-titlev span{
    color:var(--color-orange-cta);
}
.simv{
    font-size: 21px;
    margin-top: -70px;
    white-space: nowrap;
}
.simv span{
    color:var(--color-orange-cta);
}

.leftv h1{
    font-size:27px;
    line-height:1.4;
    margin-bottom:-200px;
    white-space: nowrap;
}

.leftv h1 span{
    color:var(--color-orange-cta);
}

.leftv p{
    color:var(--color-gray-muted);
    font-size:15px;
    line-height:1.6;
    margin-top:150px;
    width:480px;
}


/* Community section CTA (replaces magic-btnv / broken absolute hover) */
.community-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    align-self: flex-start;
    padding: 0.875rem 1.25rem 0.875rem 1.5rem;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        var(--color-orange-main, #f47429) 0%,
        var(--color-orange-alt, #ff8c42) 100%
    );
    color: var(--color-white, #fff);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow:
        0 4px 16px rgba(244, 116, 41, 0.38),
        0 1px 2px rgba(15, 39, 66, 0.08);
    border: none;
    cursor: pointer;
    transition:
        box-shadow 0.25s ease,
        transform 0.2s ease,
        filter 0.2s ease;
}

.community-cta:hover {
    box-shadow:
        0 8px 28px rgba(244, 116, 41, 0.45),
        0 2px 6px rgba(15, 39, 66, 0.1);
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.community-cta:focus-visible {
    outline: 2px solid var(--color-white, #fff);
    outline-offset: 3px;
}

.community-cta:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.community-cta__text {
    line-height: 1.2;
}

.community-cta__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
    transition:
        background 0.2s ease,
        transform 0.25s ease;
}

.community-cta:hover .community-cta__circle {
    background: rgba(255, 255, 255, 0.38);
    transform: translateX(4px);
}

.community-cta__arrow {
    font-size: 0.8rem;
    line-height: 1;
    color: inherit;
}

/* ================= RIGHT SIDE ================= */

.rightv{
    width:40%;
    position:relative;
    overflow:hidden;
    right: -80px;
}


/* blur فوق وتحت */
.rightv::before,
.rightv::after{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:120px;
    z-index:2;
}

.rightv::before{
    top:0;
    background:linear-gradient(to bottom,var(--color-navy-mainn),transparent);
}

.rightv::after{
    bottom:0;
    background:linear-gradient(to top,var(--color-navy-mainn),transparent);
}

.slide-trackev{
    display:flex;
    flex-direction:column;
    animation:scrollY 5s ease-in-out infinite alternate;
}

.slide-trackev img{
    width:100%;
    height:auto;
    object-fit:cover;
}
.abovev{
    width:100%;
    height:auto;
    object-fit:cover;
    margin-top: -150px;

}

/* ===== Animation رأسية ===== */

@keyframes scrollY{
    0%{
        transform: translateY(0%);
    }

    40%{
        transform: translateY(-40%);
    }

}
@media (max-width: 768px) {
    .herov {
        display: none;
    }
}
/* =================================section11=========================== */
.why{
    padding:80px 20px;
    background:var(--color-white);
}

.container{
    max-width:1200px;
    margin:auto;
}

.section-header{
    text-align:center;
    margin-bottom:60px;
}

.small-title{
    color:var(--color-navy-main);
    font-weight:600;
    font-size:34px;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.dash{
    width:20px;
    height:3px;
    background:var(--color-orange-alt);
    display:inline-block;
}

.section-header h2{
    font-size:32px;
    font-weight:700;
    margin:20px 0;
    color:var(--color-black);
}

.section-header p{
    color:var(--color-gray-text);
    max-width:600px;
    margin:auto;
    font-size:15px;
}

.content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    margin-bottom:60px;
}

.features{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:40px;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
}

.feature-item h4{
    font-size:18px;
    margin-bottom:6px;
    color: var(--color-black);
    font-weight: bold;
}

.feature-item p{
    font-size:14px;
    color:var(--color-black);
}

.number{
    background:var(--color-navy-text-soft);
    color:var(--color-white);
    font-size:14px;
    font-weight:600;
    padding:6px 10px;
    border-radius:6px;
    min-width:40px;
    text-align:center;
}

.center-image{
    flex:1;
    display:flex;
    justify-content:center;
}

.center-image img{
    width:350px;
    height:450px;
    object-fit:cover;
    border-radius:200px;
}

.statsd{
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;

}

.stat-boxd{
    flex:0 0 210px;
    height:95px;
    background:var(--color-navy-text-soft);
    color:var(--color-white);
    padding:15px 20px;
    border-radius:12px;

    display:flex;              /* ده المهم */
    align-items:center;        /* يخليهم في نص الارتفاع */
    gap:15px;                  /* مسافة بين الايقونة والكلام */
}

.stat-boxd .icond{
    font-size:22px;
    margin-bottom:10px;
}
.stat-boxd .icond img{
    width:35px;     /* تحكمي في الحجم */
    height:35px;
    object-fit:contain;
    margin-top: 20px;
}

.stat-boxd h3{
    margin:0;
    font-size:22px;
}

.stat-boxd span{
    display:block;
    font-size:13px;
    margin-top:4px;
}


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

@media (max-width: 1024px){

    .content{
        flex-direction:column;
        text-align:center;
    }

    .features{
        align-items:center;
    }

    .feature-item{
        justify-content:center;
    }

    .center-image img{
        width:300px;
        height:400px;
    }

    .statsd{
        justify-content:center;
    }
}

@media (max-width: 600px){

    .section-header h2{
        font-size:30px;
    }

    .center-image img{
        width:250px;
        height:350px;
    }

    .stat-boxd{
        width:100%;
    }
}
@media (max-width: 768px) {
    .statsd {
        display: none;
    }
}
/* ====================section12================ */
.contactm {
    background-color: var(--color-text-main);
    text-align: center;
    padding: 120px 20px;
}

.containerm {
    max-width: 900px;
    margin: auto;
}

/* Small Title */
.small-titlem {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.small-titlem .linem {
    width: 25px;
    height: 3px;
    background-color: var(--color-orange-main);
}

.small-titlem h4 {
    color: var(--color-text-mutedscf);
    font-size: 40px;
    font-weight: 600;
}

.sub-textm {
    color: var(--color-text-muted);
    margin-bottom: 40px;
    font-size: 24px;
}

/* Main Heading */
.containerm h1 {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-text-maine);
    line-height: 1.4;
    margin-bottom: 50px;
}

.containerm h1 span {
    color: var(--color-orange-soft);
}

/* Button */
.btnm {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-navy-text-soft);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 40px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    /* transition: color 0.3s ease; */
    z-index: 1;
}

/* Overlay Effect */
.btnm::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background-color: var(--color-orange-soft);
    transition: width 0.5s ease;
    z-index: -1;
}

.btnm:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

.btnm:hover {
    color: var(--color-white);
}

.btnm span {
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .contactm {
        display: none;
    }
}
/* ========================section13================= */
.challengel{
  padding:120px 20px;
  overflow-x: hidden;
  background:var(--color-text-hal);


}

.containerl{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}

/* LEFT SIDE */

.small-titlel{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:15px;
}

.linel{
  width:25px;
  height:3px;
  background:var(--color-orange-soft);
}

.small-titlel h4{
  color:var(--color-navy-main);
  font-size: 35px;
}

.sub-textl{
  color:var(--color-text-muteds);
  font-size:14px;
  margin-bottom:25px;
  max-width:500px;
}
.downfl{
    margin-top: 150px;
}

.leftl h1{
    font-size:48px;
    color:var(--color-navy-text-dark);
    line-height:1.2;
    margin-bottom:40px;
    white-space: normal;
}

.orangel{
  color:var(--color-orange-soft);
}

.infol{
  display:flex;
  gap:40px;
  margin-bottom:40px;
}

.infol h5{
  margin-bottom:10px;
  color:var(--color-navy-text-dark);
}

.infol p{
  font-size:14px;
  color:var(--color-text-muteds);
  max-width:260px;
}

/* BUTTON */

.btnl{
  padding:15px 45px;
  background:var(--color-navy-text-dark);
  color:var(--color-white);
  text-decoration:none;
  border-radius:50px;
  position:relative;
  overflow:hidden;
  z-index:1;
  font-weight:600;
  display:inline-block;
}

.btnl::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:0%;
  height:100%;
  background:var(--color-orange-soft);
  transition:.5s;
  z-index:-1;
}

.btnl:hover::before{
  width:100%;
}

/* RIGHT SIDE */
.rightl{
  flex:1;
  display:flex;
  justify-content:center;

}

.rightl img{
    width:100%;
    max-width:800px;
    height:auto;
    display:block;

}

/* RESPONSIVE */

@media(max-width:1024px){
  .containerl{
    flex-direction:column;
    text-align:center;
  }

  .infol{
    flex-direction:column;
    align-items:center;
  }

  .rightl{
    margin-top:60px;
    width:100%;
  }

  .bg-shapel{
    display:none;
  }
}
@media (max-width: 768px) {
    .challengel {
        display: none;
    }
}
/* =============================section14=================================== */
.heroy{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--color-white);
    position:relative;
    overflow:hidden;
    background:var(--color-text-halfy);

}

/* dotted background */
.heroy::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background-image: radial-gradient(var(--color-text-maine) 1px, transparent 1px);
    background-size: 20px 20px;
    top:0;
    left:0;
    z-index:0;
}

.contenty{
    position:relative;
    z-index:2;
    max-width:900px;
}

.small-titley{
    color:var(--color-white);
    margin-bottom:15px;
    margin-top: 10px;
    font-weight:bold;
    font-size: 25px;
}
.small-titley span{
      color:var(--color-orange-cta);

}
.contenty h1{
    font-size:32px;
    line-height:1.4;
    margin-bottom:40px;
}

.contenty h1 span{
    color:var(--color-orange-cta);
}

.descy{
    margin-top:30px;
    font-size:14px;
    color:var(--color-text-whi);
    line-height:1.6;
    max-width:650px;
    margin-left:auto;
    margin-right:auto;
}
.wrapper{
  width:400px;
  height:400px;
  background:var(--color-text-halfy);
  display:flex;
  justify-content:center;
  align-items:center;
  margin-left: 100px;
}
/* لف الأقواس الكبيرة */
.orangeArcsBig{
  transform-origin:300px 300px;
  animation: spinBig 8s linear infinite;
}

/* لف الأقواس الصغيرة */
.orangeArcsSmall{
  transform-origin:300px 300px;
  animation: spinSmall 12s linear infinite reverse;
}

/* لف الدائرة المنقطة */
.dottedCircle{
  transform-origin:300px 300px;
  animation: spinDots 20s linear infinite;
}

@keyframes spinBig{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes spinSmall{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}

@keyframes spinDots{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}



/* button */
.cta-btn{
    margin-top:30px;
    margin-bottom: 10px;
    padding:14px 35px;
    border:none;
    background:var(--color-white);
    color:var(--color-navy-text-darkess);
    font-size:16px;
    border-radius:8px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:0.3s;
}

.cta-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:var(--color-orange-cta);
    transform:scaleY(0);
    transform-origin:top;
    transition:0.4s ease;
    z-index:-1;
}

.cta-btn:hover::before{
    transform:scaleY(1);
}

.cta-btn:hover{
    color:var(--color-white);
    background: var(--color-orange-alt);
}
@media (max-width: 768px) {
    .heroy {
        display: none;
    }
}
/* ===============section 15=============================  */
.insights{
    padding:80px 20px;
    text-align:center;
    position:relative;
    /* background:#f2f4f7; */

}

.containeri{
    max-width:1200px;
    margin:auto;
}

.containeri h2{
    font-size:42px;
    font-weight:700;
    line-height:1.3;
    color: var(--color-black);

}

.containeri h2 span{
    color:var(--color-orange-alt);
}

.subtitle{
    margin-top:15px;
    color:var(--color-gray-muted);
    font-size:14px;
}

.contenti{
    margin-top:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
}

/* Video */
.video-card{
    position:relative;
    width:380px;
}

.video-card img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
}

.video-card .play{
    position:absolute;
    top:50%;
    left:45%;
    transform:translate(-50%,-50%);
    width:70px;
    height:70px;
    border-radius:50%;
    /* background:rgba(255,255,255,0.8); */
}

.video-card p{
    margin-top:-55px;
    font-weight:600;
    color: var(--color-text-halfy);
}

/* Cards */
.cardi{
    background:var(--color-white);
    padding:25px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,0.07);
    /* text-align:center; */
    width: 290px;
    color: var(--color-black);

}
.sma img{
     margin-left: -200px;
    margin-top:-10px ;
}
.sma h4{
    margin-top: -40px;
    margin-left: 50px;
    color: var(--color-black);
}
.cardi.largei{
    width:290px;
    font-size: 12px;
    margin-top: 50px;

}

.cardi.smalli{
    width:290px;
    height: 120px;
    margin-top:0px;
}
.cardi.smalli img{
    margin-left: -190px;
    margin-top:20px ;
}
.cardi.smalli h4{
    margin-top: -50px;
    margin-left: 50px;

}
.cardi.smalli p{
       margin-left: 50px;
}
.left-cards, .right-cards{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:start;
}
.right-cards{
    margin-left: -100px;
    z-index: 1;

}
.left-cards{
    margin-right: -100px;
    z-index: 1;


}
button{
    margin-top:15px;
    padding:8px 18px;
    background:var(--color-blue-btn);
    color:var(--color-white);
    border:none;
    border-radius:20px;
    font-size:12px;
    cursor:pointer;
}
@media (max-width: 768px) {
    .insights {
        display: none;
    }
}
/* =====================================section16 =====================*/
.news-section{
    padding:80px 10%;
}

.section-header{
    text-align:center;
    margin-bottom:60px;
}

.section-header h2{
    color:var(--color-text-halfy);
    font-size:32px;
    font-weight:700;
    margin-bottom:10px;
}

.section-header p{
    color:var(--color-text-muted);
    font-size:16px;
}

.news-container{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
}

 /* ================= LEFT CARD ================= */

.main-card img{
    width:80%;
    height: 50%;
    border-radius:12px;
    display:block;
}

.badge{
    display:inline-block;
    background:var(--color-navy-text-soft);
    color:var(--color-white);
    font-size:12px;
    padding:6px 15px;
    border-radius:20px;
    margin:20px 0 15px 0;
}

.main-card h3{
    font-size:22px;
    color:var(--color-black);
    margin-bottom:15px;
    line-height:1.4;
}

.main-card p{
    color:var(--color-text-muted);
    font-size:15px;
    line-height:1.6;
    margin-bottom:15px;
}

.read-more{
    color:var(--color-navy-text-soft);
    text-decoration:none;
    font-weight:600;
}

.read-more:hover{
    text-decoration:underline;
}

/* ================= RIGHT SIDE ================= */

.side-card{
    display:flex;
    gap:20px;
    margin-bottom:30px;
    align-items:flex-start;
}

.side-img{
    position:relative;
}

.side-img img{
    width:170px;
    height:150px;
    object-fit:cover;
    border-radius:12px;
}

.side-img .badge{
    position:absolute;
    bottom:8px;
    left:8px;
    font-size:10px;
    padding:4px 10px;
}

.side-content h4{
    font-size:16px;
    color:var(--color-black);
    margin-bottom:8px;
    line-height:1.4;
}

.side-content p{
    font-size:14px;
    color:var(--color-text-muted);
    line-height:1.5;
}

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

@media(max-width:1024px){
    .news-container{
        grid-template-columns:1fr;
    }

    .side-card{
        flex-direction:row;
    }
}

@media(max-width:600px){
    .side-card{
        flex-direction:column;
    }

    .side-img img{
        width:100%;
        height:auto;
    }
}
@media (max-width: 768px) {
    .news-section {
        display: none;
    }
}
/* ==================================section 17=============================== */
    .subscribe-wrapper {
      width: 100%;
      max-width: 100%;
      margin: 80px auto;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      padding-inline: clamp(1rem, 4vw, 2.5rem);
      box-sizing: border-box;
    }

    .subscribe-card {
      position: relative;
      background: var( --color-text-whi);
      border-radius: 32px;
      padding: 40px clamp(1.25rem, 5vw, 72px);
      overflow:visible;
      width: 100%;
      max-width: 1090px;
      box-sizing: border-box;
    }

    /* زخرفة الدوائر اليسار */
    .subscribe-card::before {
      content: "";
      position: absolute;
      left: -120px;
      bottom: -160px;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, transparent 58%, rgba(255,255,255,0.15) 60%, transparent 62%),
        radial-gradient(circle at center, transparent 68%, rgba(255,255,255,0.12) 70%, transparent 72%),
        radial-gradient(circle at center, transparent 78%, rgba(255,255,255,0.10) 80%, transparent 82%);
      opacity: 0.9;
      pointer-events: none;
    }

    /* زخرفة الدوائر اليمين */
    .subscribe-card::after {
      content: "";
      position: absolute;
      right: -140px;
      top: -140px;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, transparent 58%, rgba(255,255,255,0.14) 60%, transparent 62%),
        radial-gradient(circle at center, transparent 70%, rgba(255,255,255,0.10) 72%, transparent 74%);
      opacity: 0.9;
      pointer-events: none;
    }

    .subscribe-content {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .subscribe-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--color-text-muted);
      margin-bottom: 24px;
    }

    .subscribe-title span {
      font-weight: 600;
      color: var(--color-text-mutedsc);

    }

    .subscribe-form {
      display: inline-flex;
      align-items: center;
      background: var(--color-white);
      border-radius: 26px;
      padding: 3px;
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.10);
      overflow: hidden;
    }

    .email-field {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px 10px 18px;
      min-width: 260px;
    }

    .email-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1.5px solid var(--color-gray-line);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: var(--color-text-half);
    }

    .email-placeholder {
      font-size: 13px;
      color: var(--color-text-muted);
      white-space: nowrap;
    }

    .subscribe-button {
      border: none;
      margin-top: -0px;
      background: var(--color-orange-alt);
      color: var(--color-text-main);
      padding: 0 26px;
      height: 40px;
      border-radius: 22px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.15s ease,
                  box-shadow 0.15s ease;
      box-shadow: 0 8px 16px rgba(0,0,0,0.18);
      white-space: nowrap;
    }

    .subscribe-button:hover {
      background: var(--color-orange-main);
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.22);
    }

    .subscribe-button:active {
      transform: translateY(0);
      box-shadow: 0 6px 12px rgba(0,0,0,0.18);
    }

    /* الأيقونة البرتقالية العلوية – مايلة وطالعة برا الإطار */
    .corner-fab {
      position: absolute;
      right: 18px;
      top: -26px;                 /* طالعة بره أكتر */
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--color-orange-alt);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 22px rgba(0,0,0,0.25);
      z-index: 2;
      transform: rotate(-18deg);  /* ميل خفيف للدائرة كلها */
    }

    .corner-fab svg {
      width: 24px;
      height: 24px;
      fill: var(--color-white);
      transform: rotate(-30deg) translateX(2px) translateY(-2px);
      /* ميل معاكس بسيط للطيارة عشان تبان طالعة لفوق ويمين */
    }

    /* تابلت */
    @media (max-width: 900px) {
      .subscribe-card {
        padding: 32px 28px;
        border-radius: 26px;
      }

      .subscribe-title {
        font-size: 20px;
      }
    }

    /* موبايل */
    @media (max-width: 600px) {
      body {
        padding: 12px;
      }

      .subscribe-card {
        padding: 24px 18px 28px;
        border-radius: 22px;
      }

      .subscribe-title {
        font-size: 18px;
        line-height: 1.5;
      }

      .subscribe-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        border-radius: 18px;
      }

      .email-field {
        justify-content: center;
        min-width: 0;
      }

      .subscribe-button {
        margin: 6px 8px 4px;
        width: auto;
      }

      .corner-fab {
        width: 48px;
        height: 48px;
        right: 14px;
        top: -24px;              /* تفضل طالعة برا حتى على الموبايل */
      }

      .corner-fab svg {
        width: 20px;
        height: 20px;
      }
    }
    @media (max-width: 768px) {
    .subscribe-wrapper {
        display: none;
      }
    }
    /* =========================section 18====================  */

    footer.footer {
      width: 100%;
      min-height:200px;

      background: var(--color-text-halfy);              /* الخلفية الكحلي */
      border: 2px solid var(--color-navy-main);           /* الإطار الأزرق */
      padding: 32px 250px 26px;
      color: var(--color-text-whi);

    }

    .footer-inner {
    max-width: 1300px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      gap: 40px;
      align-items: flex-start;
    }

    /* عمود 1: لوجو + وصف */
    .footer-col-1 {
      flex: 1.1;
      max-width: 360px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .footer-logo img {
      height: 34px;       /* عدليها لو أبعاد اللوجو مختلفة */
      width: auto;
      display: block;
    }

    .footer-logo-text {
      font-size: 11px;
      text-transform: uppercase;
      color: var(--color-text-end);
      letter-spacing: 0.06em;
    }

    .footer-description {
      font-size: 12px;
      line-height: 1.7;
      color: var(--color-text-end);
    }

    /* عمود 2: Quick links في عمودين */
    .footer-col-2 {
      flex: 0.9;
      max-width: 260px;
    }

    .footer-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 14px;
      color: var(--color-white);
    }

    .footer-links {
      list-style: none;
      columns: 2;           /* عمودين */
      column-gap: 32px;
      padding: 0;
    }

    .footer-links li {
      font-size: 13px;
      color: var(--color-text-end);
      margin-bottom: 6px;
      cursor: pointer;
      transition: color 0.15s ease;
      break-inside: avoid;
      white-space: nowrap;
    }
    /* عمود 3: Newsletter + سوشيال */
    .footer-col-3 {
      flex: 1.1;
      max-width: 360px;
    }

    .footer-col-3 p {
      font-size: 12px;
      color: var(--color-gray-muted);
      margin-bottom: 14px;
    }

    .newsletter-form {
      display: flex;
      width: 100%;
      max-width: 320px;
      margin-bottom: 14px;
      align-items: center;
    }

    .newsletter-form input {
      flex: 1;
      height: 40px;
      padding: 8px 10px;
      border-radius: 3px 0 0 3px;
      border: 1px solid var(--color-navy-text);
      border-right: none; /* نلغي الحد على الجنب اليمين عشان يلصق بالزرار */
      font-size: 12px;
      outline: none;
      background: var(--color-white);
      color: var(--color-black);
      margin-bottom: 0;
    }

    .newsletter-form input::placeholder {
      color: var(--color-gray-muted);
    }

    .newsletter-form button {
      padding: 0 20px;
      margin-top: -0px;
      height: 40px;
      border-radius: 0 3px 3px 0;
      border: none;
      background: var(--color-navy-alt);
      color: var(--color-white);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease;

    }

    .newsletter-form button:hover {
      background: var(--color-blue-btn);
    }

    .footer-social {
      display: flex;
      gap: 10px;
      font-size: 16px;
    }

    .footer-social a {
      color: var(--color-white);
      text-decoration: none;
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid transparent;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .footer-social a:hover {
      background: var(--color-navy-alt);
      border-color: var(--color-blue-light);
      color: var(--color-blue-light);
    }
    .accordion-icon {
       display: none;
    }
    /* ريسبونسف للموبايل */
   @media (max-width: 900px) {

  footer.footer {
    width: 100%;
    padding: 40px 20px;
    display: flex;
    text-align: center;
    justify-content: center;
  }

  .footer-inner {
    flex-direction: column;
    gap: 30px;
  }

  /* نخلي اللوجو والوصف في النص */
  .footer-col-1,
  .footer-col-3 {
    max-width: 100%;
  }

  /* الفورم ياخد العرض */
  .newsletter-form {
    max-width: 100%;
  }

  /* نخلي اللينكات عمود واحد */
  .footer-links {
    columns: 1;
  }

  /* accordion style */
  .footer-accordion {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding: 15px 0;
    text-align: left;
  }

  .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .accordion-header h4 {
    margin: 0;
  }

  .accordion-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
  }

  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .footer-accordion.active .accordion-content {
    max-height: 500px;
    margin-top: 10px;
  }

  .footer-accordion.active .accordion-icon {
    transform: rotate(45deg);
  }
  .accordion-icon {
    display: block;
  }
}
/* =========================direction page======================== */
.gallery-section{
    background:var(--color-text-half);
    padding:80px 0;
    overflow:hidden;
}

.container{
    max-width:1600px;
    margin:auto;
    padding:0 20px;
}

.main-title{
    text-align:center;
    font-size:36px;
    font-weight:700;
    color:var( --color-navy-text-soft);
    line-height:1.4;
}

.main-title span{
    display:block;
    color:var(--color-orange-main);
}

.filter-menu{
    list-style:none;
    display:flex;
    justify-content:center;
    gap:30px;
    margin:30px 0 50px;
    font-size:14px;
    color:var(--color-navy-alt);
}

.filter-menu li.active{
    color:var(--color-orange-main);
    font-weight:600;
    position:relative;
}


.filter-menu li.active{
    color:var(--color-orange-main);
    font-weight:600;
}
.filter-menu li.active::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-8px;
    width:90px;
    height:1px;
    background:var(--color-orange-cta);
    border-radius:5px;
}

.filter-menu li:hover{
    color:var(--color-orange-main);
}

/* ====== السلايدر ====== */

.slider{
    overflow:hidden;
}

.slider-track{
    display:flex;
    gap:40px;
    animation: scroll 8s linear infinite;
}

.gallery-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows:220px;
    gap:20px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.item{
    overflow:hidden;
    border-radius:6px;
}

.item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:0.4s;
}

.item:hover img{
    transform:scale(1.05);
}

/* الصورة الكبيرة */
.big{
    grid-column:3/4;
    grid-row:1/3;
}

/* الحركة المستمرة */
@keyframes scroll{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-50%);
    }
}
/* =======section 2======= */
/* ================= Header ================= */

.section-headerdi{
    text-align:center;
    padding:60px 20px 40px;
    background:var(--color-text-half);
}

.section-headerdi h2{
    font-size:32px;
    color:var( --color-navy-text-soft);
    font-weight:700;
    position:relative;
    display:inline-block;
}

.section-headerdi h2::before{
    content:"";
    position:absolute;
    left:-25px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:3px;
    background:var( --color-orange-alt);
}

.section-headerdi p{
    margin-top:15px;
    color:var( --color-gray-text);
    font-size:15px;
}

/* ================= Grid ================= */

.coursesdi{
    width:90%;
    max-width:1200px;
    margin:auto;
    padding-bottom:60px;

    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:25px;
}

/* ================= Card ================= */

.course-carddi{
    position:relative;
    height:220px;
    border-radius:14px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
    padding:20px;
    color:var(--color-white);
}

.course-carddi::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2));
}

.course-contentdi{
    position:relative;
    z-index:2;
}

.course-contentdi h3{
    font-size:20px;
    margin-bottom:8px;
}

.course-contentdi p{
    font-size:13px;
    opacity:0.85;
    margin-bottom:15px;
}

.course-infodi{
    display:flex;
    gap:20px;
    font-size:12px;
    opacity:0.9;
}

.course-infodi span{
    display:flex;
    align-items:center;
    gap:6px;
}

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

@media(max-width:768px){
    .coursesdi{
        grid-template-columns:1fr;
    }
}
/* section3 */
/* ================= Section ================= */

.ai-section{
    width:100%;
    padding:80px 20px 100px;
    background:var( --color-navy-text);
    text-align:center;
    color:var( --color-white);
    position:relative;
}

/* small title */
.small-title{
    color:var(--color-orange-alt);
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

/* main title */
.ai-section h2{
    font-size:32px;
    font-weight:700;
    margin-bottom:50px;
}

/* ================= Cards ================= */

.cardsm{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.cardm{
    background:var( --color-text-muted);
    padding:35px 25px;
    border-radius:12px;
    transition:0.3s ease;
}

.cardm:hover{
    transform:translateY(-8px);
    background:var(--color-navy-header);
}

.cardm .icon{
    font-size:32px;
    margin-bottom:20px;
}

.cardm h3{
    font-size:18px;
    margin-bottom:15px;
}

.cardm p{
    font-size:13px;
    color:var(--color-gray-line);
    line-height:1.6;
}

/* bottom white divider */
.ai-section::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2px;
    background:var(--color-white);
}

/* ================= Dark Section ================= */

.dark-section{
    width:100%;
    height:250px;
    background:var(--color-navy-text);
}

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

@media(max-width:1024px){
    .cardsm{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .cardsm{
        grid-template-columns:1fr;
    }
}
/* ======================================three page=================================== */
.herotwo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:80px 8%;
    min-height:100vh;
    background:var(--color-text-gr);
}

/* LEFT SIDE */

.hero-contenttwo{
    width:50%;
}

.hero-contenttwo h1{
    font-size:56px;
    font-weight:800;
    line-height:1.2;
    color:var(--color-navy-text-sofi);
}

.hero-contenttwo h1 span{
    color:var(--color-orange-main);
}

.hero-contenttwo p{
    margin-top:20px;
    color:var( --color-text-muted);
    font-size:16px;
    max-width:480px;
}

.search-boxtwo{
    margin-top:30px;
    display:flex;
    width:420px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    border-radius:8px;
    overflow:hidden;
    background:var(--color-white);
}

.search-boxtwo input{
    flex:1;
    padding:14px;
    border:none;
    outline:none;
    font-size:14px;
}

.search-boxtwo button{
    width:55px;
    border:none;
    background:var(--color-navy-text-sofi);
    color:var(--color-white);
    font-size:18px;
    cursor:pointer;
}

.categoriestwo{
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.categoriestwo button{
    padding:10px 18px;
    border-radius:6px;
    border:none;
    background:var(--color-gray-text);
    color:var(--color-navy-text-sofi);
    font-size:13px;
    cursor:pointer;
    transition:0.3s;
}

.categoriestwo button:hover{
    background:var(--color-gray-text);
}

.categoriestwo .active{
    background:var(--color-orange-main);
    color:var(--color-white);
}

/* RIGHT SIDE */

.hero-imagetwo{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-imagetwo img{
    width:100%;
    max-width:500px;
    object-fit:contain;
}

@media(max-width:1024px){
    .herotwo{
        flex-direction:column;
        text-align:center;
    }

    .hero-contenttwo,
    .hero-imagetwo{
        width:100%;
    }

    .search-boxtwo{
        margin:auto;
        margin-top:30px;
    }

    .categoriestwo{
        justify-content:center;
    }

    .hero-contenttwo h1{
        font-size:42px;
    }
}
.hero-righttwo{
    width:50%;
    position:relative;
    height:600px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hero-righttwo img{
    width: 500px;
    height: 800px;
}
/* BLUE CIRCLE */

.shape-bluetwo{
    width:450px;
    height:450px;
    background:var(--color-navy-text-sofi);
    border-radius:50%;
    position:absolute;
    z-index:0;
}

/* ORANGE HALF RING */

.shape-orangetwo{
    width:280px;
    height:280px;
    border:35px solid var(--color-orange-main);
    border-radius:50%;
    position:absolute;
    top:20px;
    right:100px;
    z-index:1;
}

/* PERSON IMAGE */

.persontwo{
    position:absolute;
    width:300px;
    z-index:2;
}

/* CARDS */

.cardtwo{
    position:absolute;
    background:rgba(191, 188, 188, 0.5);
    padding:15px 20px;
    border-radius:12px;
    box-shadow:0 15px 30px rgba(0,0,0,0.08);
    font-size:14px;
    z-index:3;
}

.studentstwo{
    top:90px;
    left:40px;
}

.besttwo{
    bottom:140px;
    left:60px;
    background:var(--color-orange-main);
    color:var(--color-white);
    font-weight:600;
}

.coursetwo{
    top:220px;
    right:40px;
}

.congratstwo{
    bottom:60px;
    right:20px;
}
/* section 2 */



/* === source: skillone.css === */

.herotwo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:80px 8%;
    min-height:100vh;
    background:var(--color-text-gr);
}

/* LEFT SIDE */

.hero-contenttwo{
    width:50%;
}

.hero-contenttwo h1{
    font-size:56px;
    font-weight:800;
    line-height:1.2;
    color:var(--color-blue-btns);
}

.hero-contenttwo h1 span{
    color:var(--color-orange-main);
}

.hero-contenttwo p{
    margin-top:20px;
    color:var(--color-text-muted);
    font-size:16px;
    max-width:480px;
}

.search-boxtwo{
    margin-top:30px;
    display:flex;
    width:420px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    border-radius:8px;
    overflow:hidden;
    background:var( --color-white);
}

.search-boxtwo input{
    flex:1;
    padding:14px;
    border:none;
    outline:none;
    font-size:14px;
}

.search-boxtwo button{
    width:55px;
    border:none;
    background:var(--color-navy-text-dark);
    color:var( --color-white);
    font-size:18px;
    cursor:pointer;
   margin-top:5px ;
}

.categoriestwo{
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.categoriestwo button{
    padding:10px 18px;
    border-radius:6px;
    border:none;
    background:var(--color-text-grayyy);
    color:var( --color-text-muteds);
    font-size:13px;
    cursor:pointer;
    transition:0.3s;
}

.categoriestwo button:hover{
    background:var(--color-text-hal);
}

.categoriestwo .active{
    background:var(--color-orange-main);
    color:var(--color-white);
}

/* RIGHT SIDE */

.hero-imagetwo{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-imagetwo img{
    width:100%;
    max-width:500px;
    object-fit:contain;
}

@media(max-width:1024px){
    .herotwo{
        flex-direction:column;
        text-align:center;
    }

    .hero-contenttwo,
    .hero-imagetwo{
        width:100%;
    }

    .search-boxtwo{
        margin:auto;
        margin-top:30px;
    }

    .categoriestwo{
        justify-content:center;
    }

    .hero-contenttwo h1{
        font-size:42px;
    }
}
.hero-righttwo{
    width:50%;
    position:relative;
    height:600px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hero-righttwo img{
    width: 500px;
    height: 800px;
}
/* BLUE CIRCLE */

.shape-bluetwo{
    width:450px;
    height:450px;
    background:var(--color-blue-btn);
    border-radius:50%;
    position:absolute;
    z-index:0;
}

/* ORANGE HALF RING */

.shape-orangetwo{
    width:280px;
    height:280px;
    border:35px solid var(--color-orange-main);
    border-radius:50%;
    position:absolute;
    top:20px;
    right:100px;
    z-index:1;
}

/* PERSON IMAGE */

.persontwo{
    position:absolute;
    width:300px;
    z-index:2;
}

/* CARDS */

.cardtwo{
    position:absolute;
    background:rgba(191, 188, 188, 0.5);
    padding:15px 20px;
    border-radius:12px;
    box-shadow:0 15px 30px rgba(0,0,0,0.08);
    font-size:14px;
    z-index:3;
}

.studentstwo{
    top:90px;
    left:40px;
}

.besttwo{
    bottom:140px;
    left:60px;
    background:var(--color-orange-main);
    color:var(--color-white);
    font-weight:600;
}

.coursetwo{
    top:220px;
    right:40px;
}

.congratstwo{
    bottom:60px;
    right:20px;
}
/* ========================= */
/* 📱 Mobile */
/* ========================= */

@media (max-width: 768px){

  /* hero-righttwo: keep visible — layout refined in app-shell.css */
  .hero-contenttwo{
    width:100%;
  }

  /* صغري الهيدر شوية عشان يبقى متظبط */
  .hero-contenttwo h1{
    font-size:34px;
  }

  /* خلي صندوق البحث فل ويدث */
  .search-boxtwo{
    width:100%;
  }

}
/* ============================================================ */
.containertreefo{
   display:grid;
    grid-template-columns: 280px 1fr;  /* سايدبار + المحتوى */
    gap:30px;
    padding:20px;
    background:var(--color-white);
    /* height:1900px ;
    width: 1500px; */
}

/* ================= Sidebar ================= */
.sidebar{
   width:280px;
    background:var(--color-white);
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    height:max-content;

}

/* header */
.sidebar-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  margin-bottom:15px;
  color:var(--color-navy-text-dark);
}

.sidebar-header span{
  font-size:18px;
}

/* search */
.search-boxth{
  position:relative;
  margin-bottom:25px;
}

.search-boxth input{
  width:250px;
  padding:10px 35px 10px 12px;
  border-radius:8px;
  border:1px solid var(--color-text-halfyp);
  outline:none;
  font-size:13px;
  background:var(--color-white);
}

.search-boxth i{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:var(--color-text-muted);
}

/* section titles */
.section-title{
  font-size:12px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--color-black);
  text-transform:uppercase;
}

/* menu items */
.menu{
  list-style:none;
  margin-bottom:22px;
}

.menu li{
  background:var(--color-white);
  border:1px solid var(--color-text-whitee);
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  color:var(--color-text-halfyp);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  cursor:pointer;
  transition:.2s;
}

.menu li:hover{
  background:var(--color-text-whitee);
}

.menu li.active{
  background:var(--color-text-mutedsc);
  color:var(--color-white);
  border-color:var(--color-text-mutedscs);
}

.menu li span{
  font-size:12px;
  color:inherit;
}

/* dropdown style box */
.dropdown{
  background:var(--color-white);
  border:1px solid var(--color-text-whitee);
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  color:var(--color-text-halfypy);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
  cursor:pointer;
}

/* tags */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag{
  background:var(--color-text-whitee);
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  color:var(--color-text-whiteef);
}

/* ================= Main Content ================= */



.page-headertreefo{
    display:flex;
    justify-content:space-between;
    align-items:start;
    margin-bottom:25px;
    flex-direction: column;
    color: var(--color-black);

}

.page-headetreerfo h2{
    font-size:22px;
    font-weight:600;
    width: 1200px;
}
.page-headetreerfo p{
    font-size:15px;
    font-weight:100;
    color: var(--color-text-muted);
}


/* ===================================== */
/* Grid layout for cards */
.cardstreefo{
  display:grid;
grid-template-columns: repeat(3, 1fr);
  gap:20px;
}

/* ================= Card ================= */
.cardfo{
  width:100%;
  background:var(--color-navy-text-main);
  border-radius:22px;
  padding:18px;
  box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.cardfo img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px;
}

.card-contentfo{
  padding:15px 5px 5px;
}

.title-rowfo{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.card-titlefo{
  font-size:20px;
  font-weight:700;
  color:var(--color-navy-text-darkess);
}

.location-badgefo{
  background:var(--color-blue-light);
  color:var(--color-orange-cta);
  font-size:12px;
  padding:6px 10px;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap: nowrap;
}

.card-descfo{
  font-size:14px;
  color:var(--color-text-halfypy);
  margin:12px 0 16px;
  line-height:1.5;
}

.levelsfo{
  display:flex;
  gap:10px;
  margin-bottom:15px;
}

.levelfo{
  font-size:12px;
  padding:6px 14px;
  border-radius:20px;
}

.levelfo.bluefo{
  background:var(--color-blue-btn);
  color:var(--color-blue-btns);
}

.levelfo.orangefo{
  background:var(--color-gray-bg-soft);
  color:var(--color-orange-cta);
  border:1px solid var(--color-orange-cta);
}

.info-rowfo{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  white-space: nowrap;
}

.infofo{
  flex:1;
  background:var(--color-gray-muted);
  padding:8px 10px;
  border-radius:20px;
  font-size:12px;
  text-align:center;
  color: var(--color-black);
}

/* Button style adapted for anchor tags */
.btnfo {
  display: inline-block; /* يخلي الرابط يتصرف زي الزرار */
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: none;
  border-radius: 14px;
  background: var(--color-navy-text-dark);
  color: var(--color-white);
  text-decoration: none; /* يشيل underline */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-align: center; /* يخلي النص في النص */
}

.btnfo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--color-orange-cta);
  transition: width 0.6s ease;
  z-index: -1;
}

.btnfo:hover::before {
  width: 100%;
}
/* ================ */
/* ================= Pagination ================= */

.paginationfo{
    margin:50px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.page-btn{
    display: inline-flex;        /* يخليه يتصرف زي زرار */
    align-items: center;         /* توسيط رأسي */
    justify-content: center;     /* توسيط أفقي */

    min-width: 40px;
    height: 40px;
    padding: 0 14px;

    border-radius: 8px;
    border: 1px solid var(--color-gray-line);
    background: var(--color-white);

    font-size: 14px;
    color: var(--color-black);
    text-decoration: none;       /* يشيل underline */

    cursor: pointer;
    transition: 0.3s;
    margin-top: 5px;
}

.page-btn:hover{
    background:var(--color-orange-soft);
    color:var(--color-white);
    border-color:var(--color-orange-soft);
}

.page-btn.active{
    background:var(--color-orange-soft);
    color:var(--color-white);
    border:none;
}

.page-btn.disabled{
    opacity:0.5;
    cursor:not-allowed;
}
/* ====================section 3================= */
.containerfi {
    width: 90%;
    margin: 80px auto;

}

/* Header */
.trendingfi{
  width: 100%;
  background: var(--color-text-half);
  padding: 60px 0;
}
.trending-headerfi {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.hotfi {
    color: var(--color-gray-linee);
    font-size: 18px;
}

.trending-headerfi h2 {
    font-size: 42px;
    margin: 8px 0;
    color: var(--color-navy-header);
}

.trending-headerfi p {
    color: #64748b;
    font-size: 14px;
}

.trending-headerfi a {
    color: var(--color-gray-linee);
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.trending-headerfi a:hover {
    opacity: 0.7;
}

/* Cards Grid */

.cardsfi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Card */

.cardfi {
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: 0.3s;
}

.cardfi:hover {
    transform: translateY(-5px);
}

.cardfi img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.card-contentfi {
    padding: 20px;
}

/* Title + On Site */

.title-rowfi {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-rowfi h3 {
    font-size: 18px;
    color: var(--color-black);
}

.onsitefi {
    background: var(--color-red-line);
    color: var(--color-gray-linee);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* Description */

.descfi {
    color: #64748b;
    font-size: 13px;
    margin: 12px 0;
    line-height: 1.5;
}

/* Badges */

.badgesfi {
    margin-bottom: 12px;
}

.badgefi {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin-right: 6px;
}

.purplefi {
    background: var(--color-gray-lineer);
    color: var(--color-blue-btnss);
}

.greenfi {
    background: var(--color-blue-btnssr);
    color: var(--color-text-green);
}

.orangefi {
    background: var(--color-red-line);
    color: var(--color-gray-linee);
}

/* Info */

.infofi {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-grays-lineer);
    margin-bottom: 15px;
}

.infofi i {
    margin-right: 5px;
}

/* Button */

.btnfi {
  position: relative;
    width: 100%;
    background: var(--color-text-maine);
    color: var(--color-white);
    border: none;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition:color 0.4s ease ;
}

.btnfi::before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-gray-linee);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease;
  z-index: -1;
}
.btnfi:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}
.btnfi:hover{
  color: var(--color-white);
}
.accordion-icon {
       display: none;
    }
/* ========== */
/* ========================= */
/* 📱 Mobile Responsive */
/* ========================= */

@media (max-width: 768px){

  /* اخفي السايدبار */
  .sidebar{
    display: none;
  }

  /* خلي الكونتينر عمود واحد */
  .containertreefo{
    grid-template-columns: 1fr;
    padding:15px;
  }

  /* خلي الكروت تاخد العرض كله */
  .cardstreefo{
    grid-template-columns: 1fr;
  }

  .cardsfi{
    grid-template-columns: 1fr;
  }

}
/* 📱 موبايل صغير */
@media (max-width: 600px){

  /* الكروت تبقى كارت واحد في الصف */
  .cardstreefo{
    grid-template-columns: 1fr;
  }

  .cardsfi{
    grid-template-columns: 1fr;
  }

  /* الهيدر */
  .trending-headerfi{
    flex-direction: column;
    gap: 15px;
  }

  .trending-headerfi h2{
    font-size: 26px;
  }

  /* خلي info تحت بعض */
  .infofi{
    flex-direction: column;
    gap: 6px;
  }

  .info-rowfo{
    flex-direction: column;
    gap: 6px;
    white-space: normal;
  }

  /* صغر الصور شوية */
  .cardfo img,
  .cardfi img{
    height: 180px;
  }
}


/* === source: skilltwo.css === */

.containertreefo{
   display:grid;
    grid-template-columns: 280px 1fr;  /* سايدبار + المحتوى */
    gap:30px;
    padding:20px;
    background:var(--color-white);
    height:1900px ;
    width: 1500px;
}

/* ================= Sidebar ================= */
.sidebar{
   width:280px;
    background:var(--color-white);
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    height:max-content;

}

/* header */
.sidebar-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  margin-bottom:15px;
  color:var(--color-navy-text-dark);
}

.sidebar-header span{
  font-size:18px;
}

/* search */
.search-boxth{
  position:relative;
  margin-bottom:25px;
}

.search-boxth input{
  width:250px;
  padding:10px 35px 10px 12px;
  border-radius:8px;
  border:1px solid var(--color-text-halfyp);
  outline:none;
  font-size:13px;
  background:var(--color-white);
}

.search-boxth i{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:var(--color-text-muted);
}

/* section titles */
.section-title{
  font-size:12px;
  font-weight:700;
  margin-bottom:10px;
  color:var(  --color-navy-text-main);
  text-transform:uppercase;
}

/* menu items */
.menu{
  list-style:none;
  margin-bottom:22px;
}

.menu li{
  background:var(--color-white);
  border:1px solid var(--color-text-whitee);
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  color:var(--color-text-halfyp);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  cursor:pointer;
  transition:.2s;
}

.menu li:hover{
  background:var(--color-text-whitee);
}

.menu li.active{
  background:var(--color-text-mutedsc);
  color:var(--color-white);
  border-color:var(--color-text-mutedsc);
}

.menu li span{
  font-size:12px;
  color:inherit;
}

/* dropdown style box */
.dropdown{
  background:var(--color-white);
  border:1px solid var(--color-text-whitee);
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  color:var(--color-text-halfypy);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
  cursor:pointer;
}

/* tags */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag{
  background:var(--color-text-whitee);
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  color:var(--color-text-whiteef);
}

/* ================= Main Content ================= */



.page-headertreefo{
    display:flex;
    justify-content:space-between;
    align-items:start;
    margin-bottom:25px;
    flex-direction: column;
    color: var(--color-black);

}

.page-headetreerfo h2{
    font-size:22px;
    font-weight:600;
    width: 1200px;
}
.page-headetreerfo p{
    font-size:15px;
    font-weight:100;
    color: var(--color-text-muted);
}


/* ===================================== */
/* Grid layout for cards */
.cardstreefo{
  display:grid;
grid-template-columns: repeat(3, 1fr);
  gap:20px;
}

/* ================= Card ================= */
.cardfo{
  width:100%;
  background:var(--color-navy-text-main);
  border-radius:22px;
  padding:18px;
  box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.cardfo img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px;
}

.card-contentfo{
  padding:15px 5px 5px;
}

.title-rowfo{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.card-titlefo{
  font-size:20px;
  font-weight:700;
  color:var(--color-navy-text-darkess);
}

.location-badgefo{
  background:var(--color-blue-light);
  color:var(--color-orange-cta);
  font-size:12px;
  padding:6px 10px;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap: nowrap;
}

.card-descfo{
  font-size:14px;
  color:var(--color-text-halfypy);
  margin:12px 0 16px;
  line-height:1.5;
}

.levelsfo{
  display:flex;
  gap:10px;
  margin-bottom:15px;
}

.levelfo{
  font-size:12px;
  padding:6px 14px;
  border-radius:20px;
}

.levelfo.bluefo{
  background:var(--color-blue-btn);
  color:var(--color-blue-btns);
}

.levelfo.orangefo{
  background:var(--color-gray-bg-soft);
  color:var(--color-orange-cta);
  border:1px solid var(--color-orange-cta);
}

.info-rowfo{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  white-space: nowrap;
}

.infofo{
  flex:1;
  background:var(--color-gray-muted);
  padding:8px 10px;
  border-radius:20px;
  font-size:12px;
  text-align:center;
  color: var(--color-black);
}

.btnfo {
  display: inline-block; /* يخلي الرابط يتصرف زي الزرار */
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: none;
  border-radius: 14px;
  background: var(--color-navy-text-dark);
  color: var(--color-white);
  text-decoration: none; /* يشيل underline */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-align: center; /* يخلي النص في النص */
}

.btnfo::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:0%;
  height:100%;
  background:var(--color-orange-cta);
  transition:width .6s ease;
  z-index:-1;
}

.btnfo:hover::before{
  width:100%;
}
/* ================ */
/* ================= Pagination ================= */

.paginationfo{
    margin:50px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.page-btn{
    display: inline-flex;          /* يخليه زرار حقيقي */
    align-items: center;           /* توسيط رأسي */
    justify-content: center;       /* توسيط أفقي */

    min-width: 40px;
    height: 40px;
    padding: 0 14px;

    border-radius: 8px;
    border: 1px solid var(--color-gray-line);
    background: var(--color-white);

    font-size: 14px;
    color: var(--color-black);
    text-decoration: none;

    cursor: pointer;
    transition: 0.3s;

    margin-top: 30px;   /* دي الصح بدل top */
}

.page-btn:hover{
    background:var(--color-orange-soft);
    color:var(--color-white);
    border-color:var(--color-orange-soft);
}

.page-btn.active{
    background:var(--color-orange-soft);
    color:var(--color-white);
    border:none;



}

.page-btn.disabled{
    opacity:0.5;
    cursor:not-allowed;
}
/* =======================section 3============= */
.dark-section{
    width:100%;
    height:250px;
    background:var(--color-navy-text-dark);
}
/* =========================== */
@media (max-width: 768px){
  .dark-section{
    display: none;
  }
}
@media (max-width: 576px){
  .dark-section{
    display: none;
  }
}

/* === source: uiux.css === */

.header{
position:fixed;
top:0;
left:0;
width:100%;
height: 73px;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
z-index:1000;
background:var(--color-white);
}

.logo{
width: 180px;
height: 37px;
top: 28px;
left: 17px;
}

.nav a{
color: var(--color-black);
text-decoration:none;
margin:0 15px;
transition:0.3s;
}

.header-actions{
display:flex;
align-items:center;
gap: 20px;
}
/* ======================== */
.search-box {
    position: relative;
    width: 312px;
    height: 38px;
}

.search-box input {
    width: 100%;
    height: 40px;
    padding: 10px 10px 10px 35px;
    border: 1px solid var( --color-navy-header);
    border-radius: 25px;
    outline: none;
    transition: 0.3s;
    box-shadow: 0 0 5px  var( --color-navy-header);
}
.search-img {
    position: absolute;
    right: 40px;
    top: 10px;
    transform: translateY(-50%);
    width: 59px;
    height: 20px;
    cursor: pointer;
}
.search-img img{
    position: absolute;
    right: -35px;
    top: -0px;
     width: 60px;
    height: 40px;
}
.search-img i {
    position: absolute;
    top: 20px;
    left: 65px;
    transform: translate(-50%, -50%);
    color:  var( --color-white);
    font-size: 13px;
    pointer-events: none;
}
/* ============================== */
.earth-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.earth-icon img{
    display: block;
    width: 27px;
    height: 27px;
    object-fit: contain;
}
.earth-icon i{
    font-size: 27px;
    color: var( --color-navy-header);
}
.register-btn{
background:var( --color-navy-header);
border:none;
padding:10px 25px;
border-radius:25px;
color:var( --color-white);
cursor:pointer;
transition:0.3s;
line-height: 1.2;
align-self: center;
margin: 0;
font-size: inherit;
}

.register-btn:hover{
background:var(--color-orange-main);
}



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

.course-sectionfou{
  width:1500px;
  margin:auto;
  padding:60px 0;
  display:flex;
  gap:40px;
  align-items:flex-start;
  background:var( --color-text-gr);
  margin-top:30px ;

}

/* ================= Left Side ================= */

.leftfou{
  flex:2;
}

.hero-imgfou{
  position:relative;
}

.hero-imgfou img{
  width:900px;
  /* max-width:800px; */
  height:500px;
  object-fit:cover;
  border-radius:18px;
}

.play-btnfou{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:70px;
  height:70px;
  border-radius:50%;
  background:var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  cursor:pointer;
  color: black;
}

.leftfou h1{
  margin-top:30px;
  font-size:48px;
  font-weight:700;
  color:var(--color-navy-main);
  line-height:1.2;
}

.leftfou h1 span{
  color:var(--color-text-mutedsc);
}

.descfou{
  margin-top:15px;
  color:var(--color-text-halfypy);
  font-size:16px;
  max-width:650px;
}

.ratingfou{
  margin-top:20px;
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  color: var(--color-text-muteds);
}

.badgefou{
  background:var(--color-text-mutedsc);
  color:var(--color-white);
  padding:5px 12px;
  border-radius:6px;
  font-size:14px;
}

.starsfou{
  color:var(--color-text-mutedsc);
  font-weight:600;
}

.tabsfou{
  margin-top:25px;
  display:flex;
  gap:10px;
}

.tabsfou button{
  padding:8px 18px;
  border-radius:20px;
  border:none;
  background:var(--color-text-whitee);
  color:var(--color-text-muteds);
  cursor:pointer;
}


/* ================= Right Side ================= */

.rightfou{
  flex:1;
  position:relative;
}

.course-cardfou{
  background:var(--color-white);
  padding:25px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.course-infofou{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--color-text-whitee);
  font-size:14px;
  color: var(--color-text-bluee);
}

.course-infofou:last-child{
  border-bottom:none;
}

/* Accordion */

.branchfou{
  border:1px solid var(--color-text-end);
  border-radius:10px;
  margin-top:15px;
  overflow:hidden;
  transition:0.3s;
}

.branch-headerfou{
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.branch-headerfou h4{
  font-size:14px;
  color: var(--color-text-bluee);
}

.arrowfou{
  font-size:18px;
  transition:0.3s;
  color: var(--color-text-bluee);
}

.branch-bodyfou{
  height:0;
  overflow:hidden;
  padding:0 15px;
  transition:height 0.3s ease;
  color:var(--color-text-halfypy);
  font-size:13px;
}

.branch.activefou{
  border:2px solid var(--color-navy-main);
  background:var(--color-text-gray);
}

.branchfou.active .arrowfou{
  transform:rotate(180deg);
}

.branch-body-contentfou{
  padding:10px 0 15px;
}

/* Buttons */

.btn-primaryfou{
  display:inline-block;   /* مهم علشان يتصرف كزرار */
  margin-top:20px;
  width:100%;
  padding:14px;
  border-radius:10px;
  background:var(--color-text-mutedsc);
  color:var(--color-white);
  font-size:16px;
  text-align:center;      /* علشان النص يبقى في النص */
  text-decoration:none;   /* يشيل الخط تحت اللينك */
  cursor:pointer;
  transition:0.3s ease;
}

.btn-primaryfou:hover{
  background:var(--color-orange-alt);
  transform:translateY(-2px);
}

.btn-secondaryfou{
  margin-top:12px;
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  background:var(--color-text-whitee);
  cursor:pointer;
}

/* Sticky Card (داخل العمود بس) */

.sticky-cardfou{
  background:var(--color-text-bluee);
  color:var(--color-white);
  padding:20px;
  border-radius:14px;
  text-align:center;
  margin-top:20px;
  position:fixed;
  top:590px;
  width: 440px;
  z-index: 1;
}

.sticky-cardfou button{
  margin-top:15px;
  padding:10px 18px;
  border-radius:8px;
  border:none;
  background:var(--color-white);
  color:var(--color-text-bluee);
  cursor:pointer;
  width:100%;
}
/* ===================section2===================== */
.learn-sectionsi{
  padding:80px 0;
  text-align:center;
  background:var(--color-text-gray);
}

.learn-sectionsi h2{
  font-size:42px;
  color:var(--color-navy-text-dark);
  font-weight:700;
  margin-bottom:60px;
  line-height:1.3;
}

.learn-sectionsi h2 span{
  color:var(--color-text-mutedsc);
}

/* ================= Cards Layout ================= */

.cardssi{
  width:85%;
  margin:auto;
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}

/* ================= Card ================= */

.cardsi{
  background:var(--color-white);
  width:320px;
  padding:35px 30px;
  border-radius:20px;
  text-align:left;
  box-shadow:0 15px 35px rgba(0,0,0,0.05);
  transition:0.3s ease;
}

.cardsi:hover{
  transform:translateY(-5px);
}

.icon-boxsi{
  width:60px;
  height:60px;
  background:var(--color-text-end);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin-bottom:20px;
}

.cardsi h3{
  font-size:18px;
  margin-bottom:18px;
  color:var(--color-navy-text-dark);
}

.cardsi h3 span{
  color:var(--color-text-mutedsc);
}

.cardsi ul{
  list-style:disc;
  padding-left:18px;
  color:var(--color-text-muteds);
  font-size:14px;
  line-height:1.8;
}
/* ===========================section3========== */
/* ======= Section Wrapper ======= */

.outline-sectionsev{
    padding:100px 8%;
    text-align:center;
    position:relative;
    color:var(--color-white);
    background:var(--color-navy-text);
    font-family: "Segoe UI", sans-serif;
        box-sizing:border-box;



}

/* Badge */

.badgesev{
    display:inline-block;
    background:var(--color-text-mutedsc);
    color:var(--color-white);
    padding:6px 18px;
    border-radius:50px;
    font-size:13px;
    margin-bottom:20px;
}

/* Title */

.outline-sectionsev h1{
    font-size:42px;
    font-weight:700;
    margin-bottom:15px;
}

.subtitlesev{
    max-width:600px;
    margin:auto;
    color:var(--color-text-halfypy);
    font-size:15px;
    line-height:1.6;
    margin-bottom:60px;
}

/* ===== Accordion ===== */

.accordionsev{
    max-width:900px;
    margin:0 auto;
}

.accordion-itemsev{
    background:var(--color-text-bluee);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:12px;
    margin-bottom:18px;
    overflow:hidden;
    transition:0.3s;
}

.accordion-headersev{
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
}

.header-leftsev{
    display:flex;
    align-items:center;
    gap:15px;
}

.numbersev{
    width:34px;
    height:34px;
    background:var(--color-text-mutedsc);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
}

.module-titlesev{
    font-size:18px;
    font-weight:600;
}

.arrowsev{
    font-size:16px;
    transition:0.3s;
}

.accordion-contentsev{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
    padding:0 24px;
}

.accordion-contentsev p{
    color:var(--color-text-halfypy);
    font-size:14px;
    margin-bottom:12px;
    display: flex;
    justify-content: start;
}

.accordion-contentsev ul{
    margin-bottom:20px;
    margin-left: 0;
    padding-left: 1.25rem;
}

.accordion-contentsev li{
    color:var(--color-text-end);
    font-size:14px;
    margin-bottom:6px;
    list-style-type:circle;
    list-style-position: inside;


}
.accordion-contentsev li::marker {
  color: var(--color-orange-alt);
  font-size: 20px;
}

/* Active State */

.accordion-itemsev.active .accordion-contentsev{
    max-height:300px;
    padding-bottom:20px;
}

.accordion-itemsev.active .arrowsev{
    transform:rotate(180deg);
}

/* Button */

.cta-btnsev{
    margin-top:50px;
    background:var(--color-text-mutedsc);
    color:var(--color-white);
    border:none;
    padding:14px 40px;
    font-size:15px;
    font-weight:600;
    border-radius:8px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(249,115,22,0.3);
    transition:0.3s;
}

.cta-btnsev:hover{
    transform:translateY(-3px);
}
/* ===================section4================= */
.batchesei {
    padding: 100px 0;
    background: var(--color-white);
      font-family: Arial, sans-serif;
}

.containerei {
    width: 85%;
    margin: auto;
    text-align: center;
}

.section-titleei {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-navy-text-soft);
    margin-bottom: 60px;
}

.cardsei {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.cardei {
    background: var(--color-white);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}

.cardei:hover {
    transform: translateY(-8px);
}

.badgeei {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.fillingei {
    background: var(--color-gray-linee);
    color: var(--color-white);
}

.openei {
    background: var(--color-text-greeen);
    color: var(--color-navy-text-soft);
}

.cardei h3 {
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 700;
}

.cardei p {
    color: var( --color-text-muted);
    font-size: 15px;
    margin-bottom: 5px;
}

.seatsei {
    margin-bottom: 20px;
}

.cardei a {
    text-decoration: none;
    color: var(--color-gray-linee);
    font-weight: 600;
    font-size: 16px;
    transition: 0.3s;
    margin-top: 20px;
    display: inline-block;
}

.cardei a:hover {
    opacity: 0.7;
}
/* ==================section5=================== */
.testimonialsnei {
  padding: 100px 0;
  background: var(--color-text-gray);
  font-family: Arial, sans-serif;
}

.containernei {
  width: 90%;
  margin: auto;
  text-align: center;
}

.section-titlenei {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-navy-text-soft);
  margin-bottom: 60px;
}

.testimonial-wrappernei {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-behavior: smooth;
  cursor: grab;
}

.testimonial-wrappernei::-webkit-scrollbar {
  display: none;
}

.testimonial-cardnei {
  width: 450px;
  flex: 0 0 auto;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
  overflow: hidden;
  text-align: left;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.card-topnei {
  padding: 20px;
  position: relative;
}

.orange-linenei {
  width: 40px;
  height: 3px;
  background: var(--color-gray-linee);
  margin-bottom: 10px;
}

.starsnei {
  color: var(--color-gray-linee);
  font-size: 18px;
  margin-bottom: 5px;
}

.labelnei {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 14px;
  color: var(--color-gray-linee);
}

.reviewnei {
  padding: 0 20px 20px;
  color: var(--color-text-muteds);
  line-height: 1.6;
  font-size: 15px;
}

.card-bottomnei {
  background: var(--color-navy-text-soft);
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  margin-top: auto;
}

.card-bottomnei img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.card-bottomnei h4 {
  font-size: 15px;
  margin-bottom: 4px;
}

.card-bottomnei span {
  font-size: 13px;
  opacity: 0.8;
}
/* ==========section6========== */
.faqigh {
  padding: 100px 0;
  background: var(--color-text-halfy);
  font-family: Arial, sans-serif;

}

.containerigh {
  width: 80%;
  margin: auto;
  height: 500px;
}

.accordionigh {
  background: var(--color-text-bluee);
  border-radius: 12px;
  padding: 25px 30px;
  margin-bottom: 25px;
  cursor: pointer;
  transition: 0.3s;

}

.accordion-headerigh {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.leftigh {
  display: flex;
  align-items: center;
  gap: 15px;
}

.numberigh {
  width: 35px;
  height: 35px;
  background: var(--color-gray-linee);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.accordionigh h3 {
  color: var(--color-white);
  font-size: 20px;
  font-weight: 600;
}

.iconigh {
  color: var(--color-text-end);
  transition: 0.3s;
}

.accordion-contentigh {
  max-height: 0;
  overflow: hidden;
  transition: 0.4s ease;
  color: var(--color-text-end);
  font-size: 14px;
  line-height: 1.7;
  margin-top: 15px;
}

.accordionigh.active .accordion-contentigh {
  max-height: 300px;
}

.accordionigh.active .iconigh {
  transform: rotate(180deg);
}
/* ================section6============== */
.career-sectioncis{
    background:var(--color-text-gray);
    padding:30px 60px;
}

.career-headercis{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    height: 100px;
}

.career-headercis i{
    font-size:50px;
    color:var(--color-navy-text-soft);
}

.career-headercis h2{
    font-size:40px;
    font-weight:700;
    color:var(--color-navy-text-soft);
}

.career-tagscis{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.tagcis{
    background:var(--color-text-grayyy);
    color:var(--color-text-whiteef);
    font-size:13px;
    padding:6px 14px;
    border-radius:50px;
}
/* =============================================== */
 footer.footer {
      width: 100%;
      height:300px;

      background: var(--color-text-maine);              /* الخلفية الكحلي */
      border: 2px solid var(--color-navy-main);           /* الإطار الأزرق */
      padding: 32px 250px 26px;
      color: var(--color-text-whi);

    }

    .footer-inner {
    max-width: 1300px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      gap: 40px;
      align-items: flex-start;
    }

    /* عمود 1: لوجو + وصف */
    .footer-col-1 {
      flex: 1.1;
      max-width: 360px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .footer-logo img {
      height: 34px;       /* عدليها لو أبعاد اللوجو مختلفة */
      width: auto;
      display: block;
    }

    .footer-logo-text {
      font-size: 11px;
      text-transform: uppercase;
      color: var(--color-text-end);
      letter-spacing: 0.06em;
    }

    .footer-description {
      font-size: 12px;
      line-height: 1.7;
      color: var(--color-text-end);
    }

    /* عمود 2: Quick links في عمودين */
    .footer-col-2 {
      flex: 0.9;
      max-width: 260px;
    }

    .footer-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 14px;
      color: var(--color-white);
    }

    .footer-links {
      list-style: none;
      columns: 2;           /* عمودين */
      column-gap: 32px;
      padding: 0;
    }

    .footer-links li {
      font-size: 13px;
      color: var(--color-text-end);
      margin-bottom: 6px;
      cursor: pointer;
      transition: color 0.15s ease;
      break-inside: avoid;
      white-space: nowrap;
    }
    /* عمود 3: Newsletter + سوشيال */
    .footer-col-3 {
      flex: 1.1;
      max-width: 360px;
    }

    .footer-col-3 p {
      font-size: 12px;
      color: var(--color-gray-muted);
      margin-bottom: 14px;
    }

    .newsletter-form {
      display: flex;
      width: 100%;
      max-width: 320px;
      margin-bottom: 14px;
      align-items: center;
    }

    .newsletter-form input {
      flex: 1;
      height: 40px;
      padding: 8px 10px;
      border-radius: 3px 0 0 3px;
      border: 1px solid var(--color-navy-text);
      border-right: none; /* نلغي الحد على الجنب اليمين عشان يلصق بالزرار */
      font-size: 12px;
      outline: none;
      background: var(--color-white);
      color: var(--color-black);
      margin-bottom: 0;
    }

    .newsletter-form input::placeholder {
      color: var(--color-gray-muted);
    }

    .newsletter-form button {
      padding: 0 20px;
      margin-top: -0px;
      height: 40px;
      border-radius: 0 3px 3px 0;
      border: none;
      background: var(--color-text-mutedsc);
      color: var(--color-white);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease;

    }

    .newsletter-form button:hover {
      background: var(--color-blue-btn);
    }

    .footer-social {
      display: flex;
      gap: 10px;
      font-size: 16px;
    }

    .footer-social a {
      color: var(--color-white);
      text-decoration: none;
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid transparent;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .footer-social a:hover {
      background: var(--color-navy-alt);
      border-color: var(--color-blue-light);
      color: var(--color-blue-light);
    }
    .accordion-icon {
       display: none;
    }
    /* ============== */
/* hide back button on desktop */
.back-btn {
  display: none;
}
    /* ================= MOBILE ONLY (header/nav — full menu panel in app-shell.css) ================= */
@media (max-width: 1024px){

/* hide desktop nav — language: only in burger drawer on small screens (see app-shell) */
.nav,
.search-box,
.register-btn,
.earth-icon {
  display:none;
}

/* Entire actions strip hidden on mobile (nav lives in burger drawer) */
.header .header-actions {
  display: none !important;
}
.back-btn{
    min-width: 40px;
    height:40px;
    border-radius:10px;
    border:2px solid var(--color-navy-text-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align: center;
    cursor:pointer;
    font-size:18px;
    color:var(--color-navy-text-soft);
    margin-right: 0;
    background: transparent;
  }

/* burger visible — navy to match Figma header */
.header .burger{
  display:inline-flex;
  font-size:24px;
  cursor:pointer;
  color: var(--color-navy-header, #144979);
  margin-right: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
}

.header{
  padding:15px 20px;
  gap: 10px;
  flex-wrap: nowrap;
}

/* mobile drawer chrome + list: themed in app-shell.css (Figma) */
.close-menu{
  font-size:22px;
  cursor:pointer;
}

#site-mobile-menu .menu-links{
  display:block;
  width:100%;
}

#site-mobile-menu .site-mobile-menu__list{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;
}

#site-mobile-menu .site-mobile-menu__list > li{
  list-style:none;
  margin:0;
  padding:0;
}

#site-mobile-menu .menu-item{
  display:flex;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  text-decoration: none;
}

/* hero layout mobile */
.course-sectionfou{
  width:100%;
  flex-direction:column;
  padding:30px 20px;
}

.hero-imgfou img{
  width:100%;
  height:250px;
}

.rightfou{
  width:100%;
}

.sticky-cardfou{
  display:none;
}

}

/* === source: nextstep.css === */

 .heroone{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:80px 8%;
    height:700px;
    background:
    linear-gradient(
        to right,
        rgba(12,37,59,0.9) 40%,
        rgba(12,37,59,0.6) 70%,
        rgba(12,37,59,0.2) 100%
    ),
    url('/images/home/hero-bg.jpg');
    background-size:cover;
    background-position:center;
    color:var(--color-white);
}

/* ===== LEFT ===== */

.hero-contentone{
    width:50%;
}

.badgeone{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(270deg ,var(--color-navy-header) ,var(--color-orange-main));
    padding:6px 14px;
    border-radius:50px;
    font-size:18px;
    margin-bottom:20px;
    padding: 15px;
}

.badgeone h1{
    font-size:46px;
    line-height:1.3;
    font-weight:700;
    margin-bottom:30px;
}

.orangeone{
    color:var(--color-text-mutedsc);
}

.hero-statsone{
    display:flex;
    gap:90px;
    margin-top: 50px;
}

.hero-statsone strong{
    font-size:30px;
}

.hero-statsone p{
    font-size:13px;
    opacity:0.8;
}

/* ===== RIGHT ===== */

.hero-imageone{
    position:relative;
    width:480px;
}

.hero-imageone img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

/* rating */

.ratingone{
    position:absolute;
    bottom:40px;
    left:-30px;
    background:var(--color-navy-header);
    padding:2px 22px;
    border-radius:12px;
    text-align:center;
}

.ratingone strong{
    font-size:20px;
}

/* users */

.usersone{
    position:absolute;
    top:20px;
    right:-70px;
    background:var(--color-white);
    color:var(--color-text-halfyp);
    padding:2px 8px;
    border-radius:12px;
    box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

.usersone strong{
    font-size:16px;
}
/* ===================section======================== */
*{
    margin: 0;
    padding: 0px;
}
.booking-sectiontin{
    width:100%;
    min-height:100vh;
    background:var(--color-text-gray);
    padding:80px 8%;
    position: relative;
    overflow: hidden;
    box-sizing:border-box;
}
.booking-sectiontin::before{
    content:"";
    position:absolute;
    top:420px;
    left:0px;
    width:350px;
    height:350px;
    background:url("/image/plue.svg") no-repeat center/cover;
    z-index:0;
}

.booking-wrappertin{
    width:100%;
    max-width: 1500px;
    display:flex;
    justify-content: center;
    gap:80px;
    padding:0px;
     overflow-x: hidden;
     margin: auto;
     position: relative;
     z-index: 1;
}

.section-titletin{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
    width: 571px;
}

.icon-boxtin{
    width:50px;
    height:50px;
    background:var(--color-text-mutedscf);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-white);
    font-size:20px;
}

.section-titletin h3{
    font-size:18px;
    margin-bottom:3px;
    color: var(--color-text-halfyp);
}

.section-titletin p{
    font-size:13px;
    color:var(--color-text-halfypy);
}

.form-cardtin{
    background:var(--color-white);
    padding:30px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-cardtin input,
.form-cardtin select{
    height:45px;
    background:#eef1f5;
    border:none;
    border-radius:8px;
    padding:0 15px;
}

.book-btntin{
    display: inline-block;      /* يخليه يتصرف زي زرار */
    text-decoration: none;      /* يشيل underline */
    text-align: center;         /* يخلي النص في النص */
    line-height: 45px;          /* يظبط النص عموديًا بدل height */

    background: var(--color-text-mutedscf);
    color: var(--color-white);
    height: 45px;
    padding: 0 20px;            /* مسافة يمين وشمال */
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
}

.sharetin{
    text-align:center;
    margin-top:15px;
}

.sharetin .iconstin{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:8px;
    color:var(--color-text-halfypy);
}

/* RIGHT SIDE */

.summary-cardtin{
    background:var(--color-text-end);
    padding:30px;
    border-radius:18px;
    height: 580px;
     display:flex;
    flex-direction:column;
    gap: 2px;
    color: var(--color-text-halfyp);
}

.course-itemtin{
    display:flex;
    gap:10px;
    margin:15px 0;
}

.course-itemtin img{
    width:60px;
    height:60px;
    border-radius:10px;
    object-fit:cover;
}

.info-rowtin{
    display:flex;
    justify-content:space-between;
    margin:10px 0;
}

.discount-cardtin{
    display:flex;
    margin-top:20px;
    background:var(--color-white);
    border-radius:15px;
    overflow:hidden;
}

.discount-lefttin{
    background:var(--color-text-mutedscf);
    color:var(--color-white);
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    padding:20px 10px;
    font-weight:bold;
}

.discount-righttin{
    padding:20px;
    flex:1;
}

.discount-righttin button{
    margin-top:10px;
    padding:8px 20px;
    border-radius:8px;
    border:1px solid #ddd;
    background:var(--color-text-gray);
    color: var(--color-text-halfyp);
}
/* ====================section======================== */
.testimonialsele {
  padding: 90px 0;
  text-align: center;
   background: var(--color-text-hal);
}

.containerele {
  width: 92%;
  margin: auto;
}

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

.section-headerele h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-navy-main);
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.section-headerele .dashele {
  color: var(--color-navy-alt);
  margin-right: 8px;
}

.section-headerele p {
  max-width: 650px;
  margin: auto;
  font-size: 14px;
  color: var( --color-text-muted);
  line-height: 1.8;
}

/* ===== SLIDER ===== */

.sliderele {
  display: flex;
  gap: 30px;
  margin-top: 60px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-left: 40px;
}

.sliderele::-webkit-scrollbar {
  display: none;
}

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

.cardele {
  min-width: 300px;   /* يخلي 4 ونص ظاهرين */
  background: var(--color-white);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

/* الجزء الأزرق */

.card-topele {
  background: var(--color-navy-text);
  padding: 30px 20px 90px;
  text-align: center;
  position: relative;
  color: var(--color-white);
}

.small-titleele {
  font-size: 13px;
  display: block;
  margin-bottom: 8px;
}

.starsele i {
  color: var(--color-navy-text-sof);
  font-size: 14px;
  margin: 0 2px;
}

/* الجزء الأبيض */

.card-bodyele {
  padding: 60px 22px 30px;
  margin-top: 0px;
  text-align: center;
  position: relative;
}

.card-bodyele img {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px  var(--color-navy-text);
  margin-bottom: 15px;
  position: absolute;
  top: -70PX;
  left: 120PX;


}

.card-bodyele h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text-halfy);
}

.jobele {
  font-size: 12px;
  color: var( --color-text-muted);
}

.card-bodyele p {
  font-size: 13px;
  color: var( --color-text-muted);
  margin-top: 15px;
  line-height: 1.7;
}

/* === source: congratulation.css === */

/* ===== CLS Success Section ===== */

.cls-success-section {
  width: 100%;
  height: 700px;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

/* Card */

.cls-success-card {
  background-color: var(--color-white);
  width: 800px;
  max-width: 100%;
  padding: 45px 55px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09);
  margin-bottom: 35px;
}

/* Logo */

.cls-logo img{
    width: 180px;
    height: auto;

}
/* Divider */

.cls-divider {
  height: 1px;
  background-color: var(--color-text-main);
  margin: 25px 0 35px;
}

/* Title */

.cls-success-content h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-maine);
  margin-bottom: 20px;
  line-height: 1.4;
}

.cls-highlight {
  color: var(--color-orange-soft);
}

/* Paragraph */

.cls-success-content p {
  font-size: 16px;
  color: var(--color-text-muteds);
  line-height: 1.8;
  max-width: 650px;
  margin: 0 auto;
}

/* Button */

.cls-success-btn {
  display: inline-block;
  padding: 14px 45px;
  background-color: var(--color-text-maine);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(31, 59, 99, 0.25);
  transition: all 0.3s ease;
}

.cls-success-btn:hover {
  background-color: var(--color-text-halfy);
  transform: translateY(-3px);
}

/* Responsive */

@media (max-width: 768px) {

  .cls-success-card {
    padding: 35px 25px;
  }

  .cls-success-content h1 {
    font-size: 20px;
  }

  .cls-success-content p {
    font-size: 14px;
  }

}