body { font-family: 'Arial', sans-serif; direction: rtl; }
#calendar-container { display: flex; flex-direction: column; align-items: center; height: 100vh; } 
.calendar, .calendar-zodiac {border: 1px solid #000; max-width: 500px; width: 100%; border-collapse: collapse; margin-top: 0px; }
table.prayer-times {border: 1px solid #000; max-width: 500px; width: 100%; border-collapse: collapse; margin-top: 0px; }
.calendar-zodiac { border: 1px solid #000; padding: 0px; text-align: center; width: 180px;vertical-align:middle;}
.date-info {border: 1px solid #000; font-size: 20px; font-weight: 900; text-align: center; font-family: arial;width: 150px;}
.gregorian-date {border: 1px solid #000; font-size: 20px; font-weight: 900; text-align: center; font-family: arial;width: 140px;}
.hijri-month-ar {font-size: 20; font-family: Arial;font-weight: 900;}
.calendar-zodiac .zodiac-sign {border: 1px solid #000;white-space: nowrap;border-left: 0; background-color: #fff; font-size: 20px;width: 66px;padding: 0 6px 0 0;}
.calendar-zodiac .solar-year {border-right: 0;background-color: #fff;font-size: 20px;padding: 0 22px 0 10px;width: 5px;}
.calendar-zodiac .farmer-day {border: 1px solid #000;white-space: wrap;background-color: #fff; font-size: 20px; padding: 0 28px;width: 10px;}
.calendar-zodiac .moon-house {border: 1px solid #000;white-space: wrap;background-color: #fff; font-size: 20px;padding: 0 20px;width: 58px;white-space: pre;}
white-space: pre-wrap; /* Ensures the text wraps */
.calendar .day-name { font-size: 50px; font-weight: bold; width:120px;font-family: arial;}
th { background-color: #d9f9e4; color: #000; font-size: .8em; padding:6px;}
tr:nth-child(odd) { background-color: #d9f9e4; font-size: 1.2em; padding:6px;}
tr:nth-child(even) { background-color: #fff; font-size: 1.2em; padding:6px;}
h2 { text-align: center; color: #007bff; }
header { text-align: center; margin-top: 10px; }
.hijri-year {direction:ltr;display: inline-flex;}
.hijri-month {font-size: 20px;}
.day-number {font-size: 1.5em;font-weight: bold;}
.day-number-eng {font-size: 1.2em;font-weight: bold; margin-right:35px;}
img {width: 125px; height: 125px; vertical-align: middle; object-fit: contain; /* يحافظ على نسبة أبعاد الصورة */}
@media (max-width: 768px) {
/* Adjustments for smaller screens */
.date-info, .gregorian-date { font-size: 24px; font-weight: 900; text-align: center; font-family: arial}
.calendar .day-name { font-size: 30px; width:120px; }
.calendar-zodiac .zodiac-sign  { font-size: 18px; }
.calendar-zodiac .solar-year,.calendar-zodiac .farmer-day, .calendar-zodiac .moon-house { font-size: 18px; } 
th { font-size: 1.2em; }
tr:nth-child(odd), tr:nth-child(even) { font-size: 1.2em; padding: 6px; }

/* Larger font size for city names and prayer times */
.prayer-times td {
font-size: 20px; /* Adjust the size as needed */
white-space: nowrap;
}
.prayer-times th {
    font-size: 20px; /* Adjust the size as needed */
    white-space: nowrap;
    width: 50px;
    }
/* Ensure the calendar maintains its width */
.calendar, .calendar-zodiac, table.prayer-times {
max-width: 500px;
width: 100%;
}
.big-font {
    font-size: 14px; /* Adjust the font size as needed */
    /* Add other styles here if necessary */
    } 
}

td.day-name {
    width: 110px;
    height: 110px;
    padding: 0; /* لإزالة أي فراغ داخلي */
    text-align: center;
    vertical-align: middle;
  }

  .left-column, .right-column {
    flex: 1;
}

@media (max-width: 480px) {
/* Further adjustments for very small screens */
.date-info, .gregorian-date { font-size: 19px; font-weight: 900; text-align: center; font-family: arial;width: 150px;}
.calendar .day-name {padding: 0;font-size: 50px; font-weight: bold; width: 120px;text-align: center;vertical-align: middle;}
.calendar-zodiac .zodiac-sign {
        white-space: nowrap;
        border-left: 0;
        background-color: #fff;
        font-size: 20px;
        width: 36px;}
        .calendar-zodiac .solar-year {
        border-right: 0;
        background-color: #fff;
        font-size: 20px;
        padding: 0 16px;
        width: 17px;
    }
    .left-column, .right-column {
        flex: 0;
    }
    .calendar-zodiac .moon-house {
        white-space: wrap;
        background-color: #fff;
        font-size: 20px;
        padding: 0 24px;
        width: 200px;
        white-space:pre;
    }
    .calendar-zodiac .farmer-day {
        white-space: wrap;
        background-color: #fff;
        font-size: 20px;
        padding: 0 25px;
        width: 106px;
    }
white-space: pre-wrap; /* Ensures the text wraps */
word-break: break-word; /* Breaks the text at word boundaries */}
th { font-size: .8em; }
tr:nth-child(odd), tr:nth-child(even) { font-size: .8em; padding: 6px; }
img {width: 125px; height: 125px;vertical-align: middle; object-fit: contain; /* يحافظ على نسبة أبعاد الصورة */}
/* Larger font size for city names and prayer times */
.prayer-times td {
font-size: 18px; /* Adjust the size as needed */
white-space: nowrap;
border: 1px solid #000;
}
.prayer-times th {
font-size: 16px; /* Adjust the size as needed */
white-space: nowrap;
border: 1px solid #000;
width: 50px;
}
.prayer-times td {
font-size: 18px; /* Adjust the size as needed */
white-space: nowrap;
border: 1px solid #000;
}
.hijri-month {font-size:16px;}
/* Retain the calendar width */
.calendar, .calendar-zodiac, table.prayer-times {
max-width: 420px;
width: 100%;
text-align:  center;
}

/* New styles for the three-column layout */
.container {
display: flex;
justify-content: space-between;
}
.main-content {
flex: 2;
direction:rtl;
/* Your main page content styles */
}
.footer {
background: #333;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
.footer-menu {
list-style: none;
padding: 0;
}
.footer-menu li {
display: inline;
margin-right: 20px;
}
.footer {
color: white;
background: linear-gradient(to right, gray, darkgreen);
margin-top: 120px;
}
.footer a {
color: white;
}
.big-font {
font-size: 14px; /* Adjust the font size as needed */
/* Add other styles here if necessary */
}