.carousel-3D-swiper-section {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    min-height: 500px;
}

.carousel-3D-swiper-title {
    text-align: center;
    font-size: 2rem;
    color: rgb(0, 0, 0);
}

.carousel-3D-swiper .swiper-slide {
    position: relative;
}

.carousel-3D-swiper .image-wrapper {
    overflow: hidden;
    /* //@apply aspect-video; */
    max-height: 225px;
}

.carousel-3D-swiper .image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 225px;
    -o-object-fit: cover;
    object-fit: cover;
    /* border-radius: 8px; */
    -webkit-box-reflect: below 5px -webkit-linear-gradient(bottom, rgba( 255, 0, 0,	0.1 ) 0%, transparent 32px, transparent 100%);
}
.absolute.bottom-0.left-0.right-0{
    /*transform: scaleX(-1);*/
}

.absolute.inset-0.bg-cover.bg-center{
background-position: bottom;
}
.details {
    padding: 25px 20px;
    font-weight: 600;
    text-align: center;
    background-color: #fff;
}

.details span {
    display: block;
    font-size: 16px;
    color: #f44336;
}

.details h3 {
    margin: 0;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.8rem;
}

.details p {
    margin: 8px 0 0;
    opacity: 0.65;
    font-size: 14px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.carousel-3D-swiper-section .swiper-pagination-bullet {
    margin: 0 4px;
  width: 16px;
  height: 16px;
    z-index: 50;
}

.carousel-3D-swiper-section .swiper-pagination-bullet-active {
    opacity: 1;
    background: orange;
}

.element-class {
    background-color: #003333;
}
.element-class:hover {
    background-color: #014b4b;
}

.custom-one {
    background-color: #003333;
}
.custom-tow {
    color: #003333;
}

.tab-button {
    color: #003333;
}

.tab-button:hover {
    color: #003333;
}

.active-tab {
    color: #003333;
    border-bottom: 2px solid #003333;
}

.tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.menu-item {
    position: relative;
    transition: color 0.3s ease;
}

.menu-item::after {
    content: "";
    position: absolute;
    bottom: -3px;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #003333;
    transition: width 0.3s ease;
}

.menu-item:hover::after {
    width: 100%;
    left: 0;
}

.menu-item-f {
    position: relative;
}

.menu-item-f::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #d3d3d3;
    transition: width 0.3s ease;
}

.menu-item-f:hover::after {
    width: 100%;
    left: 0;
}

.menu-item.active::after {
    width: 100%;
    left: 0;
    background-color: #003333;
}

.text-justify p,.text-justify a, .text-justify p span, .text-justify a span,
.product-text-content {
    font-family: 'Vazir', sans-serif !important;
}
.text-justify a, .text-justify a span{
    color:#3498db!important;
    text-decoration: underline;
    font-weight:600;
}



@media (max-width: 1024px) {
    .swiper-slide {
        width: calc(50% - 10px);
    }
}
@media (max-width: 640px) {
    /*product list style in mobile*/
    #Projects{
        padding:0;
    }
    .w-full.p-8.object-cover.rounded-t-xl{
        padding:0!important;
    }
    .text-gray-400.mr-3.uppercase.text-xs{
        display:none;
    }
    .px-4.py-3.w-72.rounded-b-xl.border-t{
        width:100%;
    }
    .text-lg.font-bold.text-black.block.capitalize{
        font-size:.9rem;
    }
    .swiper-slide {
        width: 100%;
    }
    /*Mobile main banner*/
    .absolute.inset-0.bg-cover.bg-center{
        background-size:cover;
    }
    .w-full.mb-12 div{
        margin:0;
    }

    .mobile-align-right {
        /* از flex برای راست چین کردن استفاده می‌کنیم */
        display: flex;
        /* محتوای داخلی (دکمه) را به سمت راست منتقل می‌کنیم */
        justify-content: flex-end;
        /* این خط اختیاری است و برای جلوگیری از تداخل با marginهای بالا و پایین Tailwind است */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* خود دکمه را هدف قرار می‌دهیم تا مطمئن شویم تمام عرض را نمی‌گیرد */
    .mobile-align-right a {
        /* عرض را به اندازه محتوای داخلی محدود می‌کند */
        display: inline-block;
        /* اطمینان از حذف هر گونه flex-grow یا block اضافی از Tailwind در موبایل */
        width: auto !important;
    }
    .see-more{
        max-width:165px;
        font-size:.8rem!important;
        font-weight:400!important;
        padding:10px!important;
        
    }
}

.button-hover-effect {
    background: linear-gradient(to left, rgba(241, 241, 241, 0.6) 50%, rgb(0, 51, 51) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background-position 0.3s ease;
    color: black;
    text-align: center;
    padding: 1rem;
    border-radius: 9999px;
    font-weight: bold;
}

.button-hover-effect:hover {
    background-position: left bottom;
    color: white;
}

.product-text-content {
    overflow: hidden;
    position: relative;
    max-height: 100px;
    line-height: 1.8rem;
    transition: max-height 0.3s ease;
}
.product-text-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.product-description-section.expanded .product-text-content {
    max-height: none;
}
.product-description-section.expanded .product-text-content::after {
    display: none;
}

.swiper-pagination-bullet-active {
    background-color: #003333 !important;
}

.swiper-pagination-bullet {
    background-color: #003333 !important;
}

@media (min-width: 600px){
.product-description-section ._tableWrapper_1rjym_13 {
  margin-left: auto;
  margin-right: auto;
  width: max-content; /* یا حتی می‌تونی بزاری 100% بسته به نیاز */
}


    span img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: 500px !important;
    width: auto!important;
    margin:30px 0px;
    }

    p img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-height: 500px !important;
        width: auto!important;
        margin:30px 0px;
    }
    
    .product-description-section{
        max-width: 1100px;
      box-shadow: 0 0 50px 0px #e0e0e0;
      border-radius: 30px;
    }
    .product-description-section h2,.product-description-section h3{
        margin:10px 0px 5px 0;
        font-size:20pt!important;
        color:#003333;
        font-weight:500;
    }
    
    .product-description-section p,.product-description-section ul, .product-description-section ol {
    
        line-height:3rem;
    }
}

@media (max-width: 600px){
    table {
        width: auto !important;
        max-width: 100% !important;
        table-layout: auto !important;
        
    }
    table span{font-size:12px!important;}
    
    span img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    height: auto;
    margin:30px 0px;
    }

    p img, span img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto!important;
        /*margin:30px 0px;*/
    }
    
    .product-description-section{
        
      box-shadow: 0 0 50px 0px #e0e0e0;
      border-radius: 30px;
    }
    .product-description-section h2,.product-description-section h2 span strong, .product-description-section h2 span, .product-description-section h3, .product-description-section h3 strong{
        font-size:18px;
        margin:20px 0px 10px 0;
        line-height:1.6rem;
        color:#003333;
        font-weight:700;
    }
    
    .product-description-section p, .product-description-section p span, .product-description-section p span span,.product-description-section p span span span, .product-description-section ul li, .product-description-section ol li{
        font-size: 14px!important;
        line-height:1.6rem;
        margin:5px 0 5px 0;
    }
    .product-description-section p, .product-description-section li{
        margin:15px 0px;
    }
}

/* --- لیست‌ها (بولت پوینت‌ها) --- */
.product-description-section ul {
    list-style-type: disc;
    padding-right: 25px;
    margin: 15px 0;
    font-family: 'Vazir', sans-serif !important;
}
.product-description-section ul li {
    margin: 8px 0;
    line-height: 1.8rem;
    font-family: 'Vazir', sans-serif !important;
}

.product-description-section ul li span{
    font-family: 'Vazir', sans-serif !important;
}
.product-description-section ol {
    list-style-type: decimal;
    padding-left: 25px;
    margin: 15px 0;
    font-family: 'Vazir', sans-serif !important;
}
.product-description-section ol li {
    margin: 8px 0;
    line-height: 1.8rem;
    font-family: 'Vazir', sans-serif !important;
}

.cta-link-wrapper {
    display: block; /* برای اینکه به عنوان یک بلوک عمل کند */
    padding: 1rem 1.5rem; /* فاصله داخلی */
    background-color: #f9fafb; /* رنگ پس‌زمینه بسیار روشن */
    border-radius: 0.75rem; /* گوشه‌های گرد */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* سایه لطیف */
    border-right: 4px solid #033232; /* خط عمودی با رنگ دلخواه */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: right;
    direction: rtl;
}

.cta-link-wrapper a {
    color: #033232 !important;
    text-decoration: underline !important;
    font-weight: bold;
}

@media (max-width: 768px) {
    .cta-link-wrapper {
        padding: 1rem;
    }
}

/* ===========================
   استایل کامل جدول‌ها داخل product-description-section
   =========================== */

/* پایه: همه جدول‌ها در هر عمقی داخل سکشن */
.product-description-section :where(table) {
  margin: 30px auto;
  border-collapse: collapse;
  width: 100% !important;        /* خنثی‌سازی w-fit و عرض‌های محدودکننده */
  max-width: 100% !important;
  min-width: 0 !important;       /* خنثی‌سازی min-w-(--thread-content-width) */
  height:100;
  table-layout: auto;
  text-align: center;
  font-family: 'Vazir', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* سلول‌ها */
.product-description-section :is(th, td) {
  border: 1px solid #ccc;
  padding: 10px 5px;
  text-align: center;
  vertical-align: middle;
  font-family: 'Vazir', sans-serif;
  word-break: break-word;
}

/* هدر جدول */
.product-description-section thead th {
  background-color: #f5f5f5;
  font-weight: 600;
}

/* اگر جدول داخل این کانتینرهای خاص (CSS Modules) است */
.product-description-section ._tableContainer_1rjym_1 ._tableWrapper_1rjym_13 table {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* رفع محدودیت‌های احتمالی والد برای اسکرول افقی در موبایل */
.product-description-section ._tableContainer_1rjym_1,
.product-description-section ._tableWrapper_1rjym_13 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ریسپانسیو: تبلت و موبایل */
@media (max-width: 768px) {
  .product-description-section :where(table) {
    font-size: 14px;             /* کوچک‌تر شدن فونت */
  }
  .product-description-section :is(th, td) {
    padding: 8px 4px;            /* کاهش فاصله داخلی سلول‌ها */
  }
}

/* ریسپانسیو: موبایل‌های کوچک */
@media (max-width: 480px) {
  .product-description-section :where(table) {
    display: block;              /* اجازه اسکرول افقی برای جدول‌های پهن */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }
  .product-description-section :is(th, td) {
    padding: 6px 3px;
    white-space: nowrap;         /* جلوگیری از شکست خطوط بسیار طولانی */
  }
}

/* حالت‌های کمکی اختیاری: زیباسازی ردیف‌های راه‌راه و هاور */
.product-description-section tbody tr:nth-child(odd) td {
  background-color: #fafafa;
}
.product-description-section tbody tr:hover td {
  background-color: #f0f0f0;
}

/* در صورت وجود قوانین رقابتیِ !important در استایل‌های دیگر،
   فقط همین خواص را با !important نگه داریم تا حداقل تداخل ایجاد شود */
.product-description-section :where(table) {
  border: 1px solid #ddd !important; /* قاب کلی جدول */
}



/* --- لیست‌ها (بولت پوینت‌ها) --- */
.product-description-section ul {
    list-style-type: disc;
    padding-right: 25px;
    margin: 15px 0;
    font-family: 'Vazir', sans-serif !important;
}
.product-description-section ul li {
    margin: 8px 0;
    line-height: 1.8rem;
    font-family: 'Vazir', sans-serif !important;
}

.product-description-section ul li span{
    font-family: 'Vazir', sans-serif !important;
}
.product-description-section ol {
    list-style-type: decimal;
    padding-left: 25px;
    margin: 15px 0;
    font-family: 'Vazir', sans-serif !important;
}
.product-description-section ol li {
    margin: 8px 0;
    line-height: 1.8rem;
    font-family: 'Vazir', sans-serif !important;
}