/* ----------------------------
   Font – WSLotus
----------------------------- */
@font-face {
    font-family: 'WSLotus';
    src: url('/fonts/lotus.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'WSLotus';
    src: url('/fonts/lotusbold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


/* ----------------------------
   Footer Base
----------------------------- */
footer {
    font-family: 'WSLotus', sans-serif;
    background: #121212;
    color: #ffffff;
    padding: 40px 0;
}

/* ----------------------------
   Title – Center Align
----------------------------- */

.color.gray{
    color: #b0b0b0;
}
.title {

    margin-bottom: 2px;
    font-size: 40px;
    text-align: right;
    font-weight: bold;
    font-family: 'WSLotus', sans-serif;
}
.intro {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.product-box {
    background: #fafafa;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 8px;
}

.product-name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.product-desc {
    font-size: 24px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 25px;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.top {
    display: flex;
    flex-direction: row;
    align-items: center;      /* وسط‌چین عمودی */
    justify-content: flex-start;

    gap: 8px;
    background: #0077c8;
    color: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.2s;


   direction: rtl;
    text-align: right;
}



.top:hover {
    background: #005da2;
}
.production-container {
    direction: rtl;
    padding: 10px 10px;
    font-family: 'WSLotus', sans-serif;
    background: #ffffff;
    /*max-width: 800px;*/
    margin: auto;
}
.title-center {

    margin-bottom: 2px;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    font-family: 'WSLotus', sans-serif;
}
.description {

    margin-bottom: 2px;
    font-size: 30px;
    font-weight: bold;
    font-family: 'WSLotus', sans-serif;
    text-align: justify;     /* متن دو طرف تراز */
    text-justify: inter-word; /* بهبود فاصله بین کلمات */
    direction: rtl;          /* چون فارسی است */
    line-height: 1.8;
}

.icon-mask {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.header-title {
    text-align: right;
    font-size: 36px;
    font-family: 'WSLotus', sans-serif;
    justify-content: right;

}
.app-wrapper {
    min-height: 100vh;        /* کل صفحه */
    display: flex;
    flex-direction: column;
    /*background: #e2dfdf;*/
}

.page-content {
    flex: 1;                  /* پر شدن فضای بین هدر و فوتر */
    min-height: 60vh;         /* حداقل 80 درصد صفحه */
    padding: 24px;
}

/* ----------------------------
   White Divider Line
----------------------------- */
.footer-divider {
    width: 100%;
    border: none;
    border-top: 1px solid white;
    opacity: 0.8;
    margin: 10px 0 25px 0;
}

/* ----------------------------
   Grid Layout of Footer Columns
----------------------------- */
.rowThree {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    max-width: 1200px;
    margin: auto;
}
.row {
    display: flex;
    justify-content: center; /* وسط چین افقی */
    /*align-items: center;     !* وسط چین عمودی *!*/
    /*gap: 16px;               !* فاصله بین دو آیتم *!*/
    width: 80%;              /* عرض کل ردیف */
    max-width: 1200px;       /* حداکثر عرض */
    margin: 0 auto;          /* وسط چین کردن ردیف در صفحه */
    /*height: 100vh;           !* اگر می‌خواهید وسط صفحه قرار گیرد *!*/
}


.rowTen {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    max-width: 600px;
    margin: auto;

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

    row-gap: 20px; /* 🔥 فاصله بین دو ردیف */
}


.submit-btn {
    width: 100%;
    max-width: 360px;
    margin: 20px auto 20px;
    display: block;
    padding: 5px 0;
    font-size: 36px;
    font-family: 'WSLotus', sans-serif;
    color: white;
    background: #0A84FF; /* رنگ SMS */
    border: none;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: 0.25s;
}

/* حالت غیرفعال */
.submit-btn:disabled {
    background: #9fc7ff;   /* رنگ روشن‌تر */
    cursor: not-allowed;
    opacity: 0.6;
}



.column {
    display: flex;
    flex-direction: column;

}
.contact-container {
    direction: rtl;
    padding: 40px 20px;
    text-align: center;
    font-family: sans-serif;
}
/* ----------------------------
   Each Item: Icon + Text
----------------------------- */
.footer-item {

    display: flex;
    align-items: center;
    margin: 5px ;
    gap: 12px;
    min-height: 32px;
    font-family: 'WSLotus', serif;


}
.gray-box {

    display: flex;
    align-items: center;
    margin: 5px ;
    gap: 12px;
    min-height: 32px;
    font-family: 'WSLotus', serif;
    background: #e3e3e3;

}
   .white-line {
               border: none;
             border-top: 1px solid #fff;
             margin: 5px 0;
               opacity: 0.8;
           }
.gold-line {
               border: none;
             border-top: 1px solid #ffd700;
             margin: 5px 0;
               opacity: 0.8;
           }

/* icon */
.footer-item svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* ----------------------------
   Text links – Gold Hover
----------------------------- */
.linkLight {
    color: #ffffff;
    text-decoration: none;
    font-size: 36px;
    transition: 0.3s;
    text-align: center;
}
.linkDark {
    color: #000000;
    text-decoration: none;
    font-size:36px;
    transition: 0.3s;
    text-align: center;
    font-family: 'WSLotus', serif;
}

.linkDark:hover {
    color: #ffd700;
    transform: scale(1.05);
}
.linkLight:hover {
    color: #ffd700;
    transform: scale(1.05);
}

/* ----------------------------
   Responsive
----------------------------- */
@media (max-width: 960px) {
    .rowThree {
        grid-template-columns: repeat(1, 1fr);
        text-align: center;
    }

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