body {
min-width: 315px;
}
.navbar-nav .nav-link {
color: #333;
margin: 0 6px;
transition: 0.2s;
}
.navbar-nav .nav-link:hover {
color: #0d6efd;
}
@media (max-width: 991.98px) {
.button-top {
margin-bottom: 20px;
}
}
@media (max-width: 991.98px) {
.feature-image {
margin-bottom: 30px;
}
}
.grid-hosting {
display: grid;
grid-template-columns: repeat(1, 1fr);
margin-bottom: 10px;
direction: rtl;
text-align: right;
gap: 10px;
}
hr { 
border: 0; 
height: 1px; 
background-color: rgb(0, 0, 0);
margin: 20px 0;
}
.hosting-grids {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
justify-content: center;
align-items: center;
margin: auto;
max-width: 100%;
}
@media (min-width: 800px) {
.hosting-grids {
display: grid;
grid-template-columns: repeat(2, 1fr);
}}
@media (min-width: 1280px) {
.hosting-grids {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, 1fr);
}}
.faq-container {
max-width: 800px;
margin: auto;
background-color: #fff;
border-radius: 20px;
letter-spacing: 1px;
padding: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.26);
}
 details {
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 15px;
padding: 15px 10px;
background-color: #fafafa;
position: relative;
transition: background-color 0.3s ease;
}
details[open] {
background-color: #e0f0ff;
}
summary {
list-style: none;
font-size: 20px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
outline: none;
}
summary::-webkit-details-marker {
display: none;
}
summary .icon {
margin-left: 10px;
transition: transform 0.3s ease;
}
details p {
font-size: 20px;
margin-top: 12px;
color: #444;
line-height: 1.6;
}
.style-body {
font-family: "Cairo", sans-serif;
padding: 0.8em;
margin: auto;
margin-top: -20px;
margin-bottom: 10px;
direction: rtl;
}
.btn-orders {
font-size: 22px;
font-weight: bold;
letter-spacing: 1px;
font-family: times;
background-color: #fff;
color: hsl(217, 72%, 44%);
text-align: center;
padding: 8px;
margin: auto;
border: 1px solid hsl(217, 72%, 44%);
border-radius: 30px;
display: flex;
justify-content: center; /* توسيط أفقي */
align-items: center; /* توسيط عمودي */
}
.btn-orders:hover {
color: #fff;
background-color: hsl(217, 72%, 44%);
}