/*===================
        header
====================*/

.Header {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(242, 242, 243);
    box-shadow: rgba(255, 255, 255, 0.447) 0px 6px 36px;
    
    .navbar {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-around;
    }

    .navbar-title {
        display: none;
    }

    .header-img {
        width: 40px;
        margin-top: 10px;
        padding: 6px;
        z-index: 10;
        position: relative;
        border-radius: 50%;
    }
    
    .header-active-img img {
        background: rgb(187, 226, 235);
        border-radius: 50%;
        transition: all 0.3s;
    }
    .navbar-item img {
        transition: all 0.3s;
    }

    /* tooltips */
    .navbar-item {
        position: relative; 
       

        &::before {
            content: attr(data-title);
            color: white;
            position: absolute;
            bottom: 60px; /* فاصله از بالا */
            left: 50%;
            transform: translateX(-50%); /* وسط‌چین کردن دقیق */
            padding: 4px 10px;
            background: #4bbfce;
            white-space: nowrap;
            border-radius: 20px;
            opacity: 0; /* در حالت عادی مخفی */
            transition: opacity 0.3s; /* انیمیشن نرم برای زیبایی بیشتر */
            pointer-events: none; /* جلوگیری از تداخل با موس */
            transition: all 0.3s;
        }
    
        &::after {
            content: "";
            position: absolute;
            bottom: 54px; /* باید کمی پایین‌تر از ::before باشد */
            left: 50%;
            transform: translateX(-50%);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid #4bbfce; /* رنگ باید با پس‌زمینه before یکی باشد */
            opacity: 0; /* در حالت عادی مخفی */
            transition: opacity 0.3s;
            pointer-events: none;
        }
        &:hover img {
            transition: all 0.3s;
            background: rgb(187, 226, 235);;
        }

        &:hover::before, 
        &:hover::after {
            opacity: 1;
            
        }
    }

    .header-active-img.navbar-item::after,
    .header-active-img.navbar-item::before {
        opacity: 1;
    }
}

@media screen and (min-width: 660px) {
    body {
        margin-bottom: 70px;
    }
}
@media screen and (min-width: 700px) {
    .Header {
        left: auto;
        top: 0;
        box-shadow: 0 0 0 transparent;
        width: 200px;
        direction: rtl;

        .navbar-title {
            display: block;
            text-align: center;        
            color: #000;
            font-size: 1.2rem;
            margin-top: 20px;
        }

        .navbar {
            flex-direction: column;
            margin-top: 20px;
        }

        .navbar-item::before {
            opacity: 1;
            background: transparent;
            color: #000;
            left: auto;
            right: 33px;
            bottom: 50%;
            transform: translateY(50%);
            
        }
        .header-active-img::before{
            color: white;
        }
        .navbar-item::after {
            display: none;
        }
        
        .header-active-img::after {
            content: "";
            width: 5px;
            border-radius: 10px;
            height: 61px;
            background: #1966be;
            position: absolute;
            right: -2px;
            top: -1px;
            opacity: 1; /* در حالت عادی مخفی */
            display: block;
            border: transparent; 
            box-shadow: -4px 0px 7px #d1d2d496;
        }

        .header-active-img img,
        .navbar-item:hover img {
            background: transparent;
        }

        .header-active-img {
            background-image: linear-gradient(270deg, #5a88bc 11%, transparent);
        } 

        .navbar-item:hover:not(.header-active-img) img {
            transform: translateX(-5px);
        }

        .navbar-item:not(.header-active-img):hover::before {
            right: 38px;
        }
    }
}

/*===================
        main
====================*/

.main-title {
    text-align: center;
    font-size: 1.3rem;
    padding-top: 30px;
    font-weight: 500;
    position: relative;
}

.main-up-text {
    text-align: center;
    font-size: 0.8rem;
    color: rgb(203, 203, 203);
    margin-top: 20px;
}

/*===============
    main navbar
===============*/

.main-navbar {
    display: flex;
    justify-content: space-around;
    margin: 0 50px;
    margin-top: 20px;

    .main-navbar-text {
        white-space: nowrap;
        user-select: none;
        background: rgba(39, 43, 65, 0.641);
        padding: 6px 30px;
        border-radius: 20px 0;
        border: solid rgba(102, 106, 164, 0.479) 1px;
    }

    .main-navbar-active {
        background: #57a1f5;
        box-shadow: 0 1px 10px #75a6de;
        border-radius: 0 20px;
    }

    .main-navbar-hover {   
        transition: all 0.3s;

        &:hover {
            border-radius: 0 20px;
            border: solid rgb(11, 73, 166) 1px;
            background: rgb(26, 26, 29);
        }
    }
}
@media screen and (max-width: 370px) {
    .main-navbar {
        gap: 10px;
    }
}
@media screen and (min-width: 700px) {
    .main-up-text, 
    .main-title {
        margin-right: 50px;
    }
    .main-navbar {
        justify-content: end;
        gap: 20px;
    }
}

/*==================================
     AI project / Wheader project
=================================*/

.project-container {
    direction: rtl;
    display: flex;
    justify-content: flex-start; /* شروع از سمت راست با توجه به direction: rtl */
    align-items: flex-start;
    flex-direction: row; /* در حالت کلی به صورت سطری باشد */
    flex-wrap: wrap;
    gap: 20px; /* فاصله بین کارت‌ها */
    margin: 0 50px;


    .ai-project,
    .wheater-project {
        margin: 0 auto;
        width: 90%;
        border-radius: 16px;
        border: solid rgb(110, 118, 130) 1.6px;
        background: #19202d;
        margin-top: 30px;
        margin-bottom: 50px;
        transition: all 0.4s;
        

        &:hover {
            background: rgb(26, 26, 29);
            box-shadow: 2px 8px 20px #23262b;
            border: solid rgb(11, 73, 166) 1.6px;
        }
    }

    .ai-down, .wheater-down {
        padding: 10px;
        padding-top: 0;

    }

    .ai-img, .wheater-img {
        width:100%;
        border-radius: 16px 16px 0px 0px;
        height: 190px;
    }
    
    .wheater-img {
        object-fit: cover;
    }

    .ai-title, .wheater-title {
        margin-bottom: 10px;
    }

    .ai-info, .wheater-info {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        padding: 30px 10px;
        padding-bottom: 20px;
        margin: 30px 0;
        border-bottom: solid rgba(114, 125, 143, 0.46) 1px;
    }

    .ai-Surface, .wheater-Surface {
        color: rgb(11, 195, 11);
        background: rgba(11, 195, 11, 0.238);
        border-radius: 15px;
        padding: 2px 12px;
        padding-right: 10px;
    }

    .ai-lang, .wheater-lang {
        color: rgb(138, 172, 224);
        background: rgb(7, 7, 7);
        padding: 2px 8px;
        border-radius: 6px;
        border: solid rgba(114, 125, 143, 0.46) 1px;
    }

    .ai-btn, .wheater-btn {
        width: 100%;
        display: block;
        text-align: center;
        background: #57a1f5;
        box-shadow: 0 1px 8px #57a1f5;
        border-radius: 6px;
        padding: 10px 0;
        border: none;
        transition: transform 0.3s;
        color: white;
        &:hover {
            transform: translateY(-3px);
        }

        &:active {
            transform: scale(0.96);
        }
    }
}


@media screen and (min-width: 700px) {
    .project-container {
        flex-direction: row; /* چیدمان افقی در دسکتاپ */
        justify-content: flex-start; /* شروع از سمت راست صفحه (کنار منوی عمودی) */
        margin-top: 60px;

    .ai-project, .wheater-project {
        margin: 0;
    }

    .ai-down, .wheater-down {
        padding: 22px;
        padding-top: 0;
        }
    }

    .main-up-text {
        text-align: right;
    }

    .main-title {
        text-align: right;
    }
}

/*** creacting card widths ***/


@media screen and (min-width: 1168px) {
    .project-container {
        .ai-project, .wheater-project {
            width: 30%;
        }
    }
}

@media screen and (max-width: 1167px) and (min-width: 800px) {
    .project-container {
        justify-content: center;

        .ai-project, .wheater-project {
            width: 70%;
        }
    }
}

@media screen and (min-width: 700px) and (max-width: 880px) {
    .project-container {
        justify-content: center;
    }
    .project-container .ai-project,
    .project-container .wheater-project {
        width: 80%;
    }
}

@media screen and (max-width: 1315px) and (min-width: 1135px) {
    .project-container {
        .ai-project, .wheater-project {
            width: 40%;
        }
    }
}

@media screen and (max-width: 530px) {
    html {
        font-size: 12px;
    }
    .project-container {
        .ai-project, .wheater-project {
            width: 100%;
        }
    }
}
/* ********************* */

@media screen and (max-width: 1382px) {
    .project-container {
        .wheater-text{
            margin-bottom: -26px;
        }
    }
}
@media screen and (max-width: 1632px) {
    .project-container {
        .ai-text{
            margin-bottom: -26px;
        }
    }
}
/*===============================
        projectNone-box
================================*/

.projectNone {
    background: #272b34;
    width: 95%;
    margin: 0 auto;
    margin-top: 60px;
    border-radius: 10px;
    padding: 40px 50px;
    border: dashed 1px #646a76;

    .projectNone-title {
        text-align: center;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .projectNone-text {
        text-align: center;
        margin-bottom: 40px;
        font-size: 0.9rem;
        color: rgb(203, 203, 203);
    }

    .projectNone-btn {
        display: block;
        margin: 0 auto;
        background: #57a1f5;
        border: none;
        padding: 8px 20px;
        font-weight: 500;
        font-size: 1rem;
        border-radius: 8px;
        transition: all 0.3s;
        color: rgb(255, 255, 255);

        &:hover {
            transform: translateY(-5px);
            box-shadow: 2px ;
            box-shadow: 0 5px 10px #327ccf;
        }
    }
}

@media screen and (min-width: 700px) {
    .projectNone {
        width: 70%;
    }
}

/*==============================
    info for Ai/wheater project
===============================*/

.AiInfo-box,.weatherInfo-box {
    direction: rtl;
    margin-bottom: 140px;
    width: 90%;
    margin: 0 auto;


    .AiInfo-img,.weatherInfo-img {
        margin: 20px 0;
        width: 100%;
        border-radius: 10px;
    }

    .AiInfo-title,.weatherInfo-title {
        margin-bottom: 10px;
    }

    .AiInfo-text,.weatherInfo-text {
        color: rgb(203, 203, 203);
    }

    .AiInfo-infoBoxes-parent,.weatherInfo-infoBoxes-parent {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-top: 30px;

    }

    .AiInfo-infoBoxes,.weatherInfo-infoBoxes {
        padding: 8px 16px;
        background: #27334666;
        border: solid 1px #383f47;
        border-radius: 10px;
    }

    .Ai-border, .weather-border {
        width: 100%;
        height: 1px;
        background: #383f47;
        margin-top: 25px;
    }

    .AiInfo-infoBoxes-text1, .weatherInfo-infoBoxes-text1 {
        color: rgb(203, 203, 203);
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .AiInfo-infoBoxes-text2, .weatherInfo-infoBoxes-text2 {
        font-weight: 500;
    }

    .AI-downlaod, .weather-downlaod {
        background: #27334666;
        display: block;
        border-radius: 10px;
        color: #57a1f5;
        border: solid 1px #383f47;
        padding: 12px 16px;
        margin-top: 25px;
        transition: all 0.4s;

        &:hover {
            background: #0d1117;
            border-color: #57a1f5;
        }
    }

    .AI-back, .weather-back {
        background: #57a1f5;
        display: block;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 100px;
        box-shadow: 0 1px 8px #57a1f5;
        border-radius: 6px;
        padding: 10px;
        border: none;
        transition: transform 0.3s;
        color: white;

        &:active {
            transform: scale(0.96);
        }
    }
}

@media screen and (min-width: 1128px) {
    .AiInfo-box,.weatherInfo-box {
        display: flex;
        align-items: center;
        margin-top: 60px;

        .AiInfo-img,.weatherInfo-img {
            width: 430px;
            margin-left: 50px;
        }

        .AiInfo-infoBoxes-parent, .weatherInfo-infoBoxes-parent {
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-around;
            gap: 10px;
            width: 100%;
        }

        .AiInfo-infoBoxes,.weatherInfo-infoBoxes {
            width: 48%;
            margin: 0;   
        }

        .AiInfo-infoBoxes-text2,.weatherInfo-infoBoxes-text2 {
            font-size: 0.8rem;
        }
    }
}

@media screen and (min-width: 1400px) {
    .AiInfo-box .AiInfo-img,
    .weatherInfo-box .weatherInfo-img {
        width: 460px;
        margin-left: 60px;
    }
}
/* Student and teacher portal shortcuts */
.portal-shortcuts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px auto;
  padding: 0 16px;
}
.portal-shortcuts a {
  display: inline-block;
  background: #176db0;
  color: #fff;
  padding: 10px 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .2s, background .2s;
}
.portal-shortcuts a:hover { background: #12558c; transform: translateY(-2px); }


/* ===== Atomic School: unified navy visual refresh (presentation only) ===== */
:root {
  color-scheme: dark;
  --as-bg: #0b1020;
  --as-panel: #141b30;
  --as-panel-2: #192640;
  --as-border: #293957;
  --as-text: #edf3ff;
  --as-muted: #a8b7d0;
  --as-accent: #65a9ff;
  --as-accent-2: #8b9dff;
}
html { background: var(--as-bg); }
body {
  background: radial-gradient(ellipse at 75% -10%, #1b3154 0, transparent 42%), var(--as-bg);
  color: var(--as-text);
  overflow-x: hidden;
  user-select: text;
}
a { color: inherit; }
.Header {
  background: rgba(15, 24, 43, .96);
  border: 1px solid rgba(101,169,255,.14);
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}
.Header .navbar-title { color: var(--as-text); }
.Header .navbar-item::before { color: var(--as-text); }
.Header .header-active-img { background-image: linear-gradient(270deg, rgba(101,169,255,.22), transparent); }
.Header .header-active-img::after { background: var(--as-accent); box-shadow: 0 0 16px rgba(101,169,255,.35); }
.Header .navbar-item:hover img,
.Header .header-active-img img { background: rgba(101,169,255,.18); }
.main-title { color: var(--as-text); font-weight: 700; letter-spacing: -.3px; }
.main-up-text { color: var(--as-muted); }
.main-navbar .main-navbar-text {
  color: #dbe8ff; background: #141f35;
  border: 1px solid var(--as-border); border-radius: 12px;
}
.main-navbar .main-navbar-active {
  color: #fff; background: linear-gradient(135deg,#2869b4,#4c86d8);
  border-color: #5799ed; box-shadow: 0 6px 18px rgba(45,115,194,.22);
}
.main-navbar .main-navbar-hover:hover {
  color: #fff; background: #1b2b48; border-color: var(--as-accent);
  border-radius: 12px;
}
.project-container .ai-project,
.project-container .wheater-project {
  background: linear-gradient(160deg, #18243b, #111a2d);
  border: 1px solid var(--as-border);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  overflow: hidden;
}
.project-container .ai-project:hover,
.project-container .wheater-project:hover {
  background: #1a2944; border-color: #4d8ed8;
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  transform: translateY(-3px);
}
.project-container .ai-img,
.project-container .wheater-img { display:block; object-fit:cover; }
.project-container .ai-title,
.project-container .wheater-title { color: var(--as-text); }
.project-container .ai-text,
.project-container .wheater-text { color: var(--as-muted); line-height: 1.9; }
.project-container .ai-info,
.project-container .wheater-info { border-color: rgba(160,184,220,.18); }
.project-container .ai-lang,
.project-container .wheater-lang {
  color: #c9dcff; background: #101a2d; border-color: var(--as-border);
}
.project-container .ai-Surface,
.project-container .wheater-Surface {
  color: #8ee4c0; background: rgba(40,170,125,.14);
}
.project-container .ai-btn,
.project-container .wheater-btn {
  color: #fff; background: linear-gradient(135deg,#2869b4,#4c86d8);
  box-shadow: 0 6px 16px rgba(45,115,194,.2); border-radius: 10px;
}
.project-container .ai-btn:hover,
.project-container .wheater-btn:hover { filter: brightness(1.12); }
.projectNone {
  color: var(--as-text); background: #141b30;
  border-color: #344766;
}
.portal-shortcuts { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:24px auto; }
.portal-shortcuts a {
  display:inline-block; padding:12px 20px; border-radius:12px;
  background:#172640; border:1px solid #30496d; color:#eaf2ff;
  transition:.2s ease;
}
.portal-shortcuts a:hover { background:#20385b; border-color:#65a9ff; transform:translateY(-2px); }
@media (max-width:699px) {
  .Header { border-radius:16px 16px 0 0; }
}