/* افکت هوور روی باکس‌های خدمات */
   /* هماهنگ‌سازی قد باکس‌ها در یک ردیف */
    .row-cols-md-2, .row-cols-lg-4 {
        display: flex;
        flex-wrap: wrap;
    }
    
    .col {
        display: flex;
        margin-bottom: 30px;
    }

    /* باکس اصلی خدمات */
.sbox-2 {
        background-color: #fcfaf8;
        padding: 50px 20px;
        border: 1px solid #d9d0c7;
        transition: all 0.3s ease;
        cursor: pointer;
        height: 100%; /* هم‌قد کردن باکس‌ها */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .sbox-2:hover {
        background-color: #f7f3f0;
        border-color: #705938;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }

    /* آیکون‌های صفحه اصلی (بزرگ) */
    .sbox-ico span:before {
        font-size: 80px !important; /* سایز بزرگ در صفحه */
        color: #705938 !important;
    }

    .sbox-2:hover .sbox-ico span {
        transform: scale(1.1); /* بزرگنمایی جزئی آیکون در حالت هوور */
    }
	
/* استایل تایتل */
    .h5-lg {
        font-size: 22px;
        color: #705938;
        margin-bottom: 0;
        font-family: serif;
    }
	
    /* استایل‌های مودال */
    .modal-overlay {
      display: none;
        position: fixed;
        z-index: 10000;
        left: 0; top: 0; width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.7);
        backdrop-filter: blur(5px);
    }
    .modal-dialog {
        display: flex; align-items: center; justify-content: center; height: 100vh;
    }
	
    .modal-content {
       background: #fcfaf8 !important;
        padding: 40px;
        width: 90%;
        max-width: 800px;
        max-height: 85vh;
        overflow-y: auto;
        position: relative;
        text-align: left; /* تراز چپ برای هلندی */
    }
    
    /* تنظیمات تایتل و آیکون در سمت چپ (برای سایت هلندی) */
    .modal-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* تراز کردن محتوا به سمت چپ */
        margin-bottom: 20px;
    }

/* ۳. حل مشکل سایز آیکون در مودال (اجبار به بزرگ شدن) */
    #modal-icon span:before {
        font-size: 100px !important; /* بسیار بزرگ در مودال */
        color: #705938 !important;
        display: block;
        margin-bottom: 20px;
    }
	
    #modal-title {
       color: #705938 !important;
        font-size: 32px !important;
        margin: 10px 0 20px 0 !important;
        font-family: serif;
    }

    /* نمایش قطعی آیکون */
    .modal-icon-wrapper span {
        font-family: "flaticon" !important;
        font-size: 90px !important;
        color: #705938 !important;
        display: block;
        margin-bottom: 10px;
    }

    .service-details p {
        color: #444 !important;
        line-height: 1.8;
        font-size: 16px;
        margin-bottom: 15px;
    }

   .close-button {
        position: absolute; right: 20px; top: 15px;
        font-size: 30px; cursor: pointer; color: #705938;
    }
    .btn-sluiten {
        background: transparent; border: 1px solid #705938;
        color: #705938; padding: 10px 40px; cursor: pointer;
        font-weight: bold; margin-top: 25px;
    }
    .btn-sluiten:hover { background: #705938; color: #fff; }