/* General Styles */
/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} */

/* Parallax Background */
/* .parallax {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('img/back.png') no-repeat center center;
    background-size: cover;
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-attachment: fixed;
} */




.just-txt {
    text-align: justify;
}
.txt-header {
    text-align: center;
    font-weight: bolder;
    margin-top: 40px;
}


/*---------------------------------------------- */
/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* جلوگیری از تغییر سایز صفحه در موبایل */
html, body {
    overflow-x: hidden;
    height: 100%;
}

/* Parallax Background */
.parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* جلوگیری از تغییر مقیاس پس‌زمینه */
    background: url('img/back.png') no-repeat center center;
    background-size: cover;
    will-change: transform;
    z-index: -1; /* قرار دادن پس‌زمینه در زیر سایر محتوا */
}

/* حل مشکل در موبایل */
@media (max-width: 768px) {
    .parallax {
        background-attachment: scroll; /* جلوگیری از پرش در موبایل */
        transform: translateZ(0);
    }
}



/*---------------------------------------------- */






/* Fixed Top Bar */
.top-bar {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    /* background: rgb(229 248 255); */ /* Dark overlay for the bar */
    padding: 5px 0;
    text-align: center;
    z-index: 10;
}

.top-bar .logo {
    max-width: 300px;
}


/* Responsive Styles */
@media (max-width: 768px) {
    .top-bar .logo {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .top-bar .logo {
        max-width: 200px;
    }
}

/* ------------------------  */
.logo {
    position: absolute; /* یا fixed اگر می‌خواهی همیشه در صفحه ثابت بماند */
    top: 10px; /* فاصله از بالا */
    left: 50%;
    transform: translateX(-50%);
    max-width: 300px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .logo {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .logo {
        max-width: 200px;
    }
}


/* ------------------------  */

/* Container for the Table */
.container {
    margin-top: 150px; /* Offset for fixed bar */
    margin-bottom: 190px;
    /* padding: 0 10px; */
}
.container-welcome {
    margin-top: 60px; /* Offset for fixed bar */
    margin-bottom: 190px;
    /* padding: 0 10px; */
}


/* Responsive Styles */
@media (max-width: 768px) {
    .container {
        margin-top: 70px; /* Offset for fixed bar */
        margin-bottom: 160px;
        /* padding: 0 10px; */
    }
}

@media (max-width: 480px) {
    .container {
        margin-top: 110px; /* Offset for fixed bar */
        margin-bottom: 140px;
        /* padding: 0 10px; */
    }
}
/* -----------------  */

/* Table Styling */
/* Table Styling */
table {
    width: 350px;
    /* max-width: 700px; */
    margin: 0px auto 0px auto;
    /* border-collapse: separate; */ /* این برای جلوگیری از فشردگی حاشیه‌ها */
    border-spacing: 0; /* حذف فاصله بین سلول‌ها */
    /* background: #0b699421; */ /* رنگ پس زمینه جدول */
    /* border: 5px solid #0b6994; */ /* حاشیه جدول */
    /* border-radius: 10px; */
    /* overflow: hidden; */
}

td {
    /* padding: 20px; */
    text-align: center;
    /* border: 3px solid #0b6994; */ /* حاشیه تمام طرف‌های سلول */
    /* background-color: #ffffff85; */ /* رنگ پس زمینه سلول */
}


/* Remove border from the last row */
tr:last-child td {
    border-bottom: none;
}

/* Cell Content Styles */
.cell-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 12px; */
}

/* Title Styling */
.title {
    font-size: 1.2rem;
    color: #333; /* رنگ متن عنوان */
    margin-bottom: 10px;
}

/* Top Icon Styling */
.icon-top img {
    width: 700px;
    height: auto;
    margin-bottom: 20px;
    margin-top: 20px;
}
.icon-top2 img {
    width: auto;
    height: 200px;
    margin-bottom: 20px;
}

/* Bottom Icons Styling */
.icons-bottom {
    display: flex;
    justify-content: center; /* دکمه‌ها در وسط قرار می‌گیرند */
    gap: 10px; /* فاصله 10 پیکسل بین دکمه‌ها */
    width: 100%;
    margin-top: 10px; /* فاصله از آیکن‌های بالایی */

}

.txt-title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
}

.icons-bottom img {
    width: auto;  /* اندازه آیکن‌ها */
    height: 70px;
    z-index: 9999;
    user-select: none; /* جلوگیری از انتخاب متن یا آیکن */
    outline: none; /* حذف کادر انتخاب از روی آیکن */
    
}


/* Responsive Styles */
@media (max-width: 768px) {
    .top-bar .logo {
        max-width: 250px;
    }

    td {
        /* padding: 10px; */
    }

    .icon-top img {
        width: 530px;
        height: auto;
    }
    .icon-top2 img {
        width: auto;
        height: 100px;
    }

    .icons-bottom img {
        width: auto;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .top-bar .logo {
        max-width: 230px;
    }

    td {
        /* padding: 5px; */
    }

    .icon-top img {
        height: auto;
        width: 350px;
    }
    .icon-top2 img {
        height: 130px;
        width: auto;
    }

    .icons-bottom img {
        height: 45px;
        width: auto;
    }
}



/* Default HR (Desktop) */
hr {
    width: 60%;  /* عرض در دسکتاپ */
    height: 6px; /* ضخامت در دسکتاپ */
    background-color: #0b6994; /* رنگ در دسکتاپ */
    border: none; /* حذف حاشیه پیش‌فرض */
    margin: 20px auto; /* وسط چین کردن */
}

/* HR for Tablet */
@media (max-width: 768px) {
    hr {
        width: 60%;  /* عرض در تبلت */
        height: 5px; /* ضخامت در تبلت */
        background-color: #0b6994; /* رنگ در تبلت */
    }
}

/* HR for Mobile */
@media (max-width: 480px) {
    hr {
        width: 60%;  /* عرض در موبایل */
        height: 4px; /* ضخامت در موبایل */
        background-color: #0b6994; /* رنگ در موبایل */
    }
}
/* Default HR (Desktop) */
.def {
    width: 400px;  /* عرض در دسکتاپ */
    height: 2px; /* ضخامت در دسکتاپ */
    background-color: #000000; /* رنگ در دسکتاپ */
    border: none; /* حذف حاشیه پیش‌فرض */
    margin: 20px auto; /* وسط چین کردن */
}

/* HR for Tablet */
@media (max-width: 768px) {
    .def {
        width: 300px;  /* عرض در تبلت */
        height: 2px; /* ضخامت در تبلت */
        background-color: #000000; /* رنگ در تبلت */
    }
}

/* HR for Mobile */
@media (max-width: 480px) {
    .def {
        width: 350px;  /* عرض در موبایل */
        height: 2px; /* ضخامت در موبایل */
        background-color: #000000; /* رنگ در موبایل */
    }
}



/* ------------------------------------------------------------------  */
/* ---- Top Icons (زیر لوگو) ---- */
.top-icons {
    position: fixed;
    top: 125px; /* فاصله از نوار بالا */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* فاصله بین آیکن‌ها */
    padding: 10px 0;
    background: rgb(229 248 255); /* پس‌زمینه نیمه‌شفاف */
    z-index: 9;
}

@media (max-width: 768px) {
    .top-icons {
        position: fixed;
        top: 65px; /* فاصله از نوار بالا */
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px; /* فاصله بین آیکن‌ها */
        padding: 10px 0;
        background: rgb(229 248 255); /* پس‌زمینه نیمه‌شفاف */
        z-index: 9;
    }
}

/* HR for Mobile */
@media (max-width: 480px) {
    .top-icons {
        position: fixed;
        top: 105px; /* فاصله از نوار بالا */
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px; /* فاصله بین آیکن‌ها */
        padding: 10px 0;
        background: rgb(229 248 255); /* پس‌زمینه نیمه‌شفاف */
        z-index: 9;
    }
}
/* -------------------  */
/* ---- Footer Icons (پایین صفحه، فیکس شده) ---- */
.footer-icons {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* فاصله بین آیکن‌ها */
    padding: 10px 0;
    background: rgb(229 248 255); /* پس‌زمینه کمی تیره */
}


/* ---- Icon Styles ---- */
.top-icons img,
.footer-icons img {
    width: auto;
    height: 80px;
}

/* ----- Responsive (موبایل و تبلت) ----- */
@media (max-width: 768px) {
    .top-icons img,
    .footer-icons img {
        height: 60px; /* کوچکتر در تبلت */
    }
}

@media (max-width: 480px) {
    .top-icons img,
    .footer-icons img {
        height: 50px; /* کوچکتر در موبایل */
    }
}

.footer-icons img {
    transition: opacity 0.3s ease-in-out;
    user-select: none; /* جلوگیری از انتخاب متن یا آیکن */
    outline: none; /* حذف کادر انتخاب از روی آیکن */
}



/* ------------------------------------------------------------------  */

.footer-icons2 {
    position: fixed;
    bottom: 0;
    left: 0;
    /* width: 90%; */
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* فاصله بین آیکن‌ها */
    padding: 10px 0;
    background: #e89bfff0; /* پس‌زمینه کمی تیره */
    left: 0;
    right: 0;
    /* border-radius: 60px 60px 0 0; */ /* اختیاری: کمی گوشه‌ها گرد بشن */
    /* border: 2px solid #423d98; اگه بخوای یه حاشیه مشکی هم داشته باشه */
}
/* ---- Icon Styles ---- */
.top-icons img,
.footer-icons2 img {
    width: auto;
    height: 100px;
}

/* ----- Responsive (موبایل و تبلت) ----- */
@media (max-width: 768px) {
    .top-icons img,
    .footer-icons2 img {
        height: 100px; /* کوچکتر در تبلت */
    }
}

@media (max-width: 480px) {
    .top-icons img,
    .footer-icons2 img {
        height: 75px; /* کوچکتر در موبایل */
    }
}

.footer-icons2 img {
    transition: opacity 0.3s ease-in-out;
    user-select: none; /* جلوگیری از انتخاب متن یا آیکن */
    outline: none; /* حذف کادر انتخاب از روی آیکن */
}

/* ----------------------------------------------------  */

.txt-end {
    text-align: center;
    font-size: 35px;
    font-weight: 800;
    color: #086474;
}

/* ----- Responsive (موبایل و تبلت) ----- */
@media (max-width: 768px) {
    .txt-end {
        text-align: center;
        font-size: 25px;
        font-weight: 800;
        color: #086474;
    }
}

@media (max-width: 480px) {
    .txt-end {
        text-align: center;
        font-size: 25px;
        font-weight: 800;
        color: #086474;
    }
}



/* حذف outline و highlight */
.hover-btn:focus {
    outline: none;
}

.hover-btn {
    -webkit-tap-highlight-color: transparent;
}