.rectangle-border {
    width: 200px;
    height: 100px;
    border: 5px dotted black; /* الحدود الافتراضية منقطة */
    border-radius: 15px; /* الحواف الدائرية */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    position: relative;
    margin: auto;
}

.rectangle-border:hover {
    border: 5px solid var(--color-main); /* عند التحويم تصبح الحدود صلبة ولونها أساسي */
    transform: scale(1.1) rotate(5deg); /* تكبير ودوران عند التحويم */
    background-color: rgba(255, 255, 255, 0.1); /* خلفية خفيفة عند التحويم */
}

.single-block-desc h2 {
    margin: 0;
    font-size: 18px;
    color: rgb(0, 0, 0);
    text-align: center;
}

.single-block-desc a {
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.single-block-desc a:hover {
    color: var(--color-main); /* عند التحويم يتغير اللون */
}

.fa-solid {
    margin-bottom: 5px;
    font-size: 24px; /* حجم الأيقونة */
}

.hvr-grow-rotate {
    transition: all 0.3s ease-in-out;
}

.hvr-grow-rotate:hover {
    transform: scale(1.1) rotate(5deg); /* تأثير عند التحويم */
}