/* General Body and RTL adjustments */
body {
    font-family: 'Arial', sans-serif; /* يمكنك تغيير الخط إلى خط عربي مناسب مثل Cairo, Noto Sans Arabic, إلخ. */
    direction: rtl;
    text-align: right;
    overflow-x: hidden; /* لمنع ظهور شريط التمرير الأفقي */
}

/* Custom Colors (Based on your images) */
:root {
    --primary-color: #f75d31; /* لون برتقالي/أحمر للأزرار والعناوين */
    --secondary-color: #e02f5a; /* لون وردي/أحمر ثانوي */
    --gradient-start: #ff7e5f; /* تدرج لوني فاتح (مثلاً لخلفية الهيرو) */
    --gradient-end: #feb47b; /* تدرج لوني غامق */
    --dark-bg: #2c3e50; /* لون خلفية غامق للتذييل أو أقسام أخرى */
    --light-bg: #f8f9fa; /* لون خلفية فاتح */
    --text-color: #333;
    --white-color: #fff;
    --gray-light: #f1f1f1;
    --gray-medium: #6c757d;
    --box-shadow-light: rgba(0, 0, 0, 0.1);
}

/* Global Styles */
.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 10px;
    display: inline-block; /* لتصغير عرض العنصر حول النص */
}

.section-title::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--gray-medium);
    margin-bottom: 2rem;
}

.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    padding: 10px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.btn-primary-custom:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-light-custom {
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--primary-color);
    padding: 10px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.btn-light-custom:hover {
    background-color: var(--gray-light);
    border-color: var(--gray-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 0.9rem;
}
.top-bar .btn-login,
.top-bar .btn-ticket {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    color: var(--white-color);
    font-size: 0.85rem;
    padding: 5px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
}
.top-bar .btn-login:hover,
.top-bar .btn-ticket:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.top-bar-social a {
    color: var(--white-color);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.top-bar-social a:hover {
    opacity: 1;
}
.language-selector {
    cursor: pointer;
}

/* Navbar */
.navbar {
    background-color: var(--white-color); /* يمكن تغييرها لتدرج أو صورة إذا أردت */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.navbar-brand .logo {
    height: 50px; /* Adjust as needed */
}
.navbar-nav .nav-link {
    color: var(--text-color);
    font-weight: 600;
    margin-right: 15px; /* Margin-right for RTL */
    transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-color);
}
.navbar-nav .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: none;
    text-align: right; /* Ensure dropdown items are right-aligned */
}
.navbar-nav .dropdown-item {
    color: var(--text-color);
    padding: 10px 20px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.navbar-nav .dropdown-item:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}
/* Nested Dropdowns (Sub-menus) for Navbar on Hover */
.navbar-nav .dropdown-submenu {
    position: relative;
}

.navbar-nav .dropdown-submenu > .dropdown-menu {
    top: 0;
    margin-right: -1px; /* Adjust for RTL positioning */
    left: auto; /* Override default left:0 */
    right: 100%; /* Position to the left (for RTL) of parent item */
    margin-top: -6px; /* Align with parent item */
    display: none; /* Hide by default */
}

/* Show the sub-menu on hover */
.navbar-nav .dropdown-submenu:hover > .dropdown-menu {
    display: block;
    animation: fadeIn 0.3s forwards; /* Simple fade-in animation */
}

/* Adjust position for LTR if needed (though we're using RTL) */
/* @media (min-width: 992px) {
    .navbar-nav .dropdown-submenu.dropleft > .dropdown-menu {
        margin-right: 0;
        margin-left: -1px;
        right: auto;
        left: 100%;
    }
} */

/* Ensure dropdown menu is visible on small screens and stacks vertically */
@media (max-width: 991.98px) {
    .navbar-nav .dropdown-submenu > .dropdown-menu {
        position: static; /* Make it flow normally */
        float: none;
        width: auto;
        margin-top: 0;
        margin-right: 0;
        background-color: transparent; /* Remove background */
        border: none; /* Remove border */
        box-shadow: none; /* Remove shadow */
        padding-top: 0;
        padding-bottom: 0;
        animation: none; /* Remove fade animation on mobile */
        display: block; /* Always visible on mobile when parent is open */
    }
    .navbar-nav .dropdown-submenu .dropdown-item {
        padding-right: 30px; /* Indent sub-items for clarity */
        font-size: 0.95rem; /* Slightly smaller font */
    }
    .navbar-nav .dropdown-submenu > a.dropdown-toggle::after {
        transform: rotate(0deg); /* Reset arrow rotation for mobile */
    }
}

/* Animation for fade-in (optional, for desktop hover effect) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Adjustments for the dropdown-toggle arrow for RTL */
.navbar-nav .dropdown-toggle::after {
    margin-left: 0.255em; /* Default Bootstrap LTR */
    margin-right: 0.255em; /* Adjust for RTL */
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent; /* For RTL */
    border-left: 0; /* No left border for RTL */
    border-bottom: 0;
}

/* For dropdown-submenu toggle, point right (for RTL) */
.navbar-nav .dropdown-submenu > a.dropdown-toggle::after {
    border-top: 0.3em solid transparent;
    border-left: 0; /* No left border */
    border-right: 0.3em solid; /* Point right for RTL */
    border-bottom: 0.3em solid transparent;
    vertical-align: middle;
    margin-left: 0; /* Remove default margin-left */
    margin-right: .255em; /* Add margin to the right */
}

/* Adjust dropdown item padding to align icons */
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
}
/* Adjust dropdown item padding to align icons */
.dropdown-menu .dropdown-item i {
    width: 20px; /* Fixed width for icons to align text */
    text-align: center;
    margin-left: 10px; /* أضف مسافة 10 بكسل إلى يسار الأيقونة (لأن الاتجاه RTL) */
    /* If you want to push the icon slightly more to the right to create more space: */
    /* margin-right: -5px; */ /* Consider adjusting this if needed to pull icon to the right */
}

/* Hero Section */
.hero-section {
    background: linear-gradient(to left, #ff7e5f, #feb47b); /* Keep your gradient/background */
    min-height: 550px; /* Adjust height as needed to accommodate content and image */
    display: flex; /* Ensure flexbox for vertical centering if needed */
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 100px;
}
.carousel-item .hero-content,
.carousel-item .hero-image {
    z-index: 2; /* Ensure content is above background waves */
}
.carousel-indicators [data-bs-target] {
    background-color: var(--white-color); /* White dots */
    opacity: 0.5;
    width: 10px; /* Make dots slightly larger */
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}
.carousel-indicators .active {
    opacity: 1;
    background-color: var(--secondary-color); /* Active dot color */
}
/* Customize Carousel Controls (arrows) */
.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Adjust width for click area */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%); /* Make icons white */
    width: 2rem; /* Size of the icon */
    height: 2rem;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/hero-wave-top.webp'); /* Replace with your wave SVG or PNG */
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    opacity: 0.2; /* Adjust opacity as needed */
}
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/hero-wave-bottom.svg'); /* Replace with your wave SVG or PNG */
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    opacity: 0.2; /* Adjust opacity as needed */
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.2;
}
.hero-content p {
    font-size: 1.3rem;
    opacity: 0.9;
}
.hero-image img {
    max-width: 450px; /* Adjust size as needed for your illustrations */
    height: auto;
    object-fit: contain; /* Ensure image fits without cropping */
}
.hero-slider-arrows {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}
.hero-slider-arrows .arrow-btn {
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    color: var(--white-color);
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
.hero-slider-arrows .arrow-btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Domain Selection Section */
.domain-selection-section {
    background-color: var(--light-bg);
    position: relative;
    padding-bottom: 150px; /* Space for the bottom wave if any */
}
.domain-search-bar .form-control {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 1px solid var(--gray-light);
    padding: 10px 20px;
    text-align: right;
}
.domain-search-bar .form-select {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border: 1px solid var(--gray-light);
    border-right: none; /* Remove right border next to input */
    max-width: 120px; /* Adjust width as needed */
}
.domain-search-bar .btn-primary-custom {
    border-radius: 0; /* Remove border-radius */
    border-top-left-radius: 50px; /* Add it back to left side of button */
    border-bottom-left-radius: 50px;
}
.domain-extensions {
    color: var(--gray-medium);
    font-size: 0.9rem;
}

/* Our Services Section */
.our-services-section {
    background: linear-gradient(to right, #fcebeb, #f0f8ff); /* Light gradient or light gray */
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}
.service-card {
    background-color: var(--white-color);
    border-radius: 15px;
    box-shadow: 0 5px 20px var(--box-shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.service-card img {
    width: 80px; /* Adjust icon size */
    height: 80px;
    object-fit: contain;
}

/* Hosting Plans Section */
.hosting-plans-section {
    background-color: var(--light-bg); /* Or a light gradient */
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}
.plan-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.plan-card.shared-hosting {
    background-image: linear-gradient(to bottom right, #4CAF50, #8BC34A); /* Greenish gradient */
}
.plan-card.company-hosting {
    background-image: linear-gradient(to bottom right, #E91E63, #FF4081); /* Pinkish/Reddish gradient */
}
.plan-card.email-hosting {
    background-image: linear-gradient(to bottom right, #2196F3, #64B5F6); /* Blueish gradient */
}
.plan-card img {
    margin-bottom: 15px;
}
.plan-card h4 {
    font-weight: bold;
    margin-bottom: 10px;
}
.plan-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.9;
}
.plan-card .btn-light-custom {
    background-color: var(--white-color);
    color: var(--primary-color);
}
.plan-card .btn-light-custom:hover {
    background-color: var(--gray-light);
}

/* Why Hyya Host Section */
.why-hyya-host-section {
    background: linear-gradient(to left, #fcebeb, #f0f8ff); /* Or light gray */
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}
.feature-card {
    background-color: var(--white-color);
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--box-shadow-light);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
}
.feature-icon.bg-purple { background-color: #9C27B0; } /* Example color */
.feature-icon.bg-aqua { background-color: #00BCD4; } /* Example color */
.feature-icon.bg-orange { background-color: #FF9800; } /* Example color */
.feature-icon.bg-blue { background-color: #3F51B5; } /* Example color */
.feature-icon img {
    filter: invert(100%); /* Make icons white if they are dark */
}
.feature-card h5 {
    color: var(--text-color);
}
.feature-card p {
    font-size: 0.85rem;
    color: var(--gray-medium);
}

/* Featured Offer Section */
.featured-offer-section {
    background: linear-gradient(to right, #ffebee, #f3e9f4); /* Light pastel gradient */
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden; /* To handle background shapes */
}
.featured-offer-section::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 204, 204, 0.5); /* Light pink circle */
    border-radius: 50%;
    z-index: 0;
}
.featured-offer-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background-color: rgba(204, 255, 204, 0.5); /* Light green circle */
    border-radius: 50%;
    z-index: 0;
}
.offer-image {
    position: relative;
    z-index: 1;
}
.offer-content .section-title {
    color: var(--primary-color);
}
.offer-content .section-subtitle {
    color: var(--gray-medium);
}

/* How We Work Section */
.how-we-work-section {
    background-color: var(--white-color);
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}
.how-we-work-steps .step-icon {
    width: 120px;
    height: 120px;
    background-color: var(--light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 15px var(--box-shadow-light);
    transition: transform 0.3s ease;
}
.how-we-work-steps .step-icon:hover {
    transform: translateY(-5px);
}
.how-we-work-steps .step-icon img {
    max-width: 70%;
    max-height: 70%;
}
.how-we-work-steps h5 {
    color: var(--text-color);
    font-weight: bold;
}
/* Connector lines (can be done with pseudo-elements or background images) */
.how-we-work-steps .col-md-3:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; /* Adjust for RTL */
    width: calc(100% - 140px); /* Adjust based on icon size and gap */
    height: 2px;
    background-color: var(--gray-light);
    transform: translateY(-50%);
    z-index: -1;
    display: none; /* Hide on small screens */
}
@media (min-width: 768px) {
    .how-we-work-steps .col-md-3:not(:last-child) {
        position: relative;
    }
    .how-we-work-steps .col-md-3:not(:last-child)::after {
        display: block;
        left: unset; /* Remove left for RTL */
        right: -webkit-calc(50% - 60px); /* Right for RTL, adjust based on icon half width */
        right: calc(50% - 60px);
        width: 120px; /* Example fixed width for connector */
    }
}


/* About Us Section */
.about-us-section {
    background: linear-gradient(to right, #ffebeb, #f3e9f4); /* Similar to featured offer */
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}
.about-us-content .section-title {
    color: var(--primary-color);
}
.about-us-content .section-subtitle {
    color: var(--gray-medium);
}
.about-us-content p {
    color: var(--text-color);
    line-height: 1.8;
}

/* Footer */
.footer {
    background-color: #b1003bcc;
    color: var(--white-color);
    position: relative;
    /* Optional: If you want the wave effect at the top of the footer */
    /*
    background-image: url('../img/footer-wave-top.svg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    padding-top: 80px;
    */
}
.footer-title {
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 1.5rem;
    position: relative;
}
.footer-title::after {
    content: '';
    position: absolute;
    right: 0; /* For RTL */
    bottom: -5px; /* Adjust position */
    width: 40px;
    height: 3px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}
.footer ul {
    padding-right: 0; /* Remove default padding for RTL */
}
.footer ul li a {
    color: var(--white-color);
    text-decoration: none;
    line-height: 2.2;
    font-size: 0.95rem;
    opacity: 0.8;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.footer ul li a:hover {
    opacity: 1;
    color: var(--primary-color);
}
.footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin-top: 30px;
    margin-bottom: 30px;
}
.footer-copyright {
    font-size: 0.85rem;
    opacity: 0.7;
}
.footer-social-bottom a {
    color: var(--white-color);
    opacity: 0.7;
    margin: 0 8px;
    font-size: 1.1rem;
    transition: opacity 0.3s ease;
}
.footer-social-bottom a:hover {
    opacity: 1;
}

/* Fixed Buttons */
.whatsapp-btn,
.sales-btn,
.scroll-to-top-btn {
    position: fixed;
    z-index: 1000;
    font-size: 1rem;
    padding: 10px 15px;
    border-radius: 30px;
    border: none;
    color: var(--white-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.whatsapp-btn {
    bottom: 20px;
    left: 20px; /* For RTL */
    background-color: #25D366; /* WhatsApp Green */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
}
.whatsapp-btn:hover {
    background-color: #1DA851;
    transform: scale(1.05);
}

.sales-btn {
    bottom: 20px;
    right: 20px; /* For RTL */
    background-color: #007bff; /* Bootstrap primary blue */
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    padding: 10px 20px;
}
.sales-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.scroll-to-top-btn {
    bottom: 80px; /* Adjust based on sales-btn position */
    right: 20px; /* For RTL */
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.2rem;
    opacity: 0; /* Initially hidden */
    visibility: hidden;
    pointer-events: none; /* Disable interaction when hidden */
}
.scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.scroll-to-top-btn:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .navbar-nav .nav-link {
        margin-right: 0;
        text-align: center;
    }
    .top-bar {
        text-align: center;
    }
    .top-bar-buttons, .top-bar-social {
        justify-content: center;
        width: 100%;
        margin-top: 10px;
    }
    .hero-content, .hero-image {
        text-align: center !important;
    }
    .hero-slider-arrows {
        display: none !important;
    }
    .domain-search-bar .form-control,
    .domain-search-bar .form-select,
    .domain-search-bar .btn-primary-custom {
        border-radius: 5px !important;
        margin-bottom: 10px; /* Stack on small screens */
    }
    .domain-search-bar .input-group > :not(:first-child):not(.dropdown-menu):not(.form-floating) {
        margin-right: 0; /* Reset margin for stacking */
    }
    .domain-search-bar .btn-primary-custom {
        width: 100%; /* Full width for button */
    }
    .how-we-work-steps .col-md-3:not(:last-child)::after {
        display: none; /* Hide connector on mobile */
    }
    .feature-card, .plan-card, .service-card {
        margin-bottom: 20px;
    }
    .about-us-image, .offer-image {
        order: 1; /* Puts image first on small screens if content is first */
    }
    .about-us-content, .offer-content {
        order: 2;
        text-align: center !important;
    }
}

/* Custom styles for waves/shapes as background.
   You'll need to create SVG files or use images for these.
   For example, you can use https://app.haikei.app/ to generate SVG waves.
*/
.hero-section::before,
.hero-section::after,
.domain-selection-section::after, /* If you add a wave at bottom of domain section */
.our-services-section::before, /* If you add a wave at top of services section */
.footer::before {
    /* These are placeholders. You'd need actual SVG files */
    /* Example: background-image: url('img/wave-shape-1.svg'); */
    /* Adjust width, height, position, and opacity based on your SVG and desired effect */
}
/* Clients Section */
.clients-section {
    background: var(--white-color); /* Or a very light gray if preferred */
    padding-bottom: 80px; /* Adjust as needed */
}
.clients-section img {
    max-width: 600px; /* Adjust max width for the illustration */
    height: auto;
}

/* Portfolio Section */
.portfolio-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--light-gray-bg); /* Use the light gray defined earlier */
}

/* Portfolio Filter Buttons */
.portfolio-section .btn-outline-primary-custom {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.portfolio-section .btn-outline-primary-custom:hover,
.portfolio-section .btn-outline-primary-custom.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow on active/hover */
}

/* Portfolio Card */
.col-lg-4.col-md-6.mb-4.portfolio-item.aos-init.aos-animate.show {
    width: 33.3%;
}
.portfolio-card {
    background-color: #f2f2f2;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    padding: 25px;
}

.portfolio-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.portfolio-card img {
    width: 100%;
    height: 250px; /* Fixed height for consistent look */
    object-fit: fill; /* Ensures image covers the area, crops if necessary */
    transition: transform 0.5s ease;
}

.portfolio-card:hover img {
    transform: scale(1.05); /* Slight zoom on image hover */
}

.portfolio-card .portfolio-info {
    background-color: var(--white-color);
    padding: 15px;
    text-align: center;
    color: var(--dark-text-color);
}

/* Hide portfolio items by default for filtering (JS will manage visibility) */
.portfolio-grid .portfolio-item {
    display: none; /* Hidden by default, JS will show them */
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s ease; /* Smooth transition for showing/hiding */
}

.portfolio-grid .portfolio-item.show {
    display: block;
    opacity: 1;
    transform: scale(1);
}
/* General Section Titles and Subtitles */
.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color); /* Or a dark color */
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: inline-block; /* To allow pseudo-elements to align */
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--accent-color); /* Or a complementary color */
    border-radius: 5px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--dark-text-color);
    margin-bottom: 40px;
    line-height: 1.6;
}

.section-subtitle-wide { /* For wider paragraphs */
    font-size: 1.1rem;
    color: var(--dark-text-color);
    margin-bottom: 40px;
    line-height: 1.8;
    max-width: 800px; /* Adjust as needed */
    margin-left: auto;
    margin-right: auto;
}

/* Hero Section (from 1.PNG for main page or services page) */
.hero-section {
    background: linear-gradient(to right, var(--primary-color), var(--accent-color)); /* Example gradient */
    min-height: 60vh; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    overflow: hidden; /* For any background elements */
    position: relative;
    border-bottom-left-radius: 50% 20%; /* Curved bottom-left as in image 1.PNG */
    border-bottom-right-radius: 50% 20%; /* Curved bottom-right */
}

.hero-title {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.hero-subtitle {
    font-size: 1.5rem;
    opacity: 0.9;
}

/* Domain Search Bar Section (from 2.PNG) */
.domain-search-section {
    background-color: var(--primary-light-bg); /* Or a light pink/red color */
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    clip-path: ellipse(100% 50% at 50% 50%); /* Example curve, adjust as needed */
    border-top-left-radius: 50% 20%; /* Curved top-left */
    border-top-right-radius: 50% 20%; /* Curved top-right */
}

.domain-search-section::before { /* For the background wave/shape */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/domain-bg-wave.svg') no-repeat center center / cover; /* Example background wave */
    opacity: 0.3;
    z-index: 0;
}

.domain-search-form {
    background-color: var(--white-color);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}

/* Services Overview Section (from 3.PNG) */
.services-overview-section {
    background-color: var(--white-color);
    padding-top: 80px;
    padding-bottom: 80px;
}

.service-card {
    background-color: var(--white-color);
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    padding: 30px;
    height: 180px; /* Fixed height for consistency */
    transition: all 0.3s ease;
    color: var(--dark-text-color);
    text-align: center;
    position: relative;
    overflow: hidden; /* For hover effects */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}

.service-card .service-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--light-gray-bg); /* Match the background of the icon circle */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    background-color: var(--primary-color); /* Change icon background on hover */
}

.service-card .service-icon img {
    max-width: 60%;
    height: auto;
}

.service-card .service-title {
    font-weight: bold;
    color: var(--dark-text-color);
    transition: color 0.3s ease;
}

.service-card:hover .service-title {
    color: var(--primary-color);
}

/* Why Us Section (from 5.PNG) */
.why-us-section {
    background-color: var(--white-color);
    padding-top: 80px;
    padding-bottom: 80px;
}

.why-us-card {
    background-color: var(--white-color);
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
    text-align: right; /* For RTL layout */
}

.why-us-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}

.why-us-card .icon-wrapper {
    width: 70px;
    height: 70px;
    min-width: 70px; /* Prevent shrinking */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px; /* For RTL spacing */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.why-us-card .icon-wrapper img {
    max-width: 50%;
    height: auto;
}

/* Background colors for icons (example) */
.why-us-card .bg-primary-light { background-color: #ffe0e6; } /* Light red */
.why-us-card .bg-success-light { background-color: #e0f7fa; } /* Light cyan */
.why-us-card .bg-info-light { background-color: #f3e5f5; } /* Light purple */
.why-us-card .bg-warning-light { background-color: #fffde7; } /* Light yellow */

/* How It Works Section (from 7.PNG) */
.how-it-works-section {
    background-color: var(--light-gray-bg); /* Or a light background similar to 7.PNG */
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    /* For the wave background */
    background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 40%, var(--light-gray-bg) 40%, var(--light-gray-bg) 100%);
    clip-path: ellipse(100% 50% at 50% 50%); /* Example curve similar to 7.PNG */
    border-top-left-radius: 50% 20%;
    border-top-right-radius: 50% 20%;
}

.how-it-works-item {
    padding: 20px;
}

.how-it-works-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.how-it-works-icon img {
    max-width: 70%;
    height: auto;
}

.step-separator {
    background-color: var(--primary-color);
    width: 80%;
    height: 2px;
    margin: 20px auto;
    position: relative;
}
.step-separator::after {
    content: '';
    position: absolute;
    right: 0;
    top: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

/* About Intro Section (from 8.PNG) */
.about-intro-section {
    background-color: var(--white-color);
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden; /* For the image */
}

.about-intro-image {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40%; /* Adjust as needed */
    z-index: 0;
}

.about-intro-image img {
    width: 100%;
    height: auto;
    max-width: 400px; /* Adjust max size */
    opacity: 0.8; /* Slight opacity as in the image */
}

/* Domain Specific Styles (from 1.PNG, 2.PNG, 3.PNG for domain pages) */
.domain-features-section {
    background-color: var(--white-color);
    padding-top: 80px;
    padding-bottom: 80px;
}
.domain-features-section img {
    max-width: 500px; /* Adjust as needed */
    height: auto;
}

.what-is-domain-section {
    background-color: var(--light-gray-bg);
    padding-top: 80px;
    padding-bottom: 80px;
}

.why-domain-list li {
    position: relative;
    padding-right: 25px; /* Space for bullet/icon */
    margin-bottom: 15px;
}

.why-domain-list li::before {
    content: "\f00c"; /* Font Awesome checkmark icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 0;
    color: var(--primary-color); /* Checkmark color */
    font-size: 1.2rem;
}

/* Accordion Customization (from 3.PNG domain accordion) */
.accordion-button {
    background-color: var(--white-color);
    color: var(--dark-text-color);
    font-weight: bold;
    text-align: right;
    direction: rtl; /* Ensure RTL alignment */
}

.accordion-button:not(.collapsed) {
    background-color: var(--primary-light-bg); /* Light background for active item */
    color: var(--primary-color);
}

.accordion-button .fas.fa-chevron-left {
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed) .fas.fa-chevron-left {
    transform: rotate(90deg); /* Rotate arrow when open */
}

.accordion-body {
    background-color: var(--white-color);
    color: var(--dark-text-color);
    text-align: right;
}

.bullet-list li {
    margin-bottom: 8px;
    position: relative;
    padding-right: 20px;
}

.bullet-list li::before {
    content: "\f111"; /* Circle icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 0;
    color: var(--primary-color);
    font-size: 0.7rem;
    top: 8px; /* Adjust alignment */
}

.inner-bullet-list li::before {
    content: "\f0da"; /* Right arrow icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color); /* Different color for inner list */
}

/* Hosting Section (from 4.jpg) */
.hosting-plans-section {
    background-color: var(--light-gray-bg);
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.hosting-card {
    background-color: var(--white-color);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Ensure cards are same height in a row */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hosting-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.hosting-card .card-header-bg {
    height: 120px; /* Height of the colored top part */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: -30px -30px 30px -30px; /* Negative margin to extend to card edges */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 30px; /* Space for the corner */
    position: relative;
    overflow: hidden; /* For the curve effect */
}

/* Specific background colors for hosting card headers */
.hosting-card .header-bg-blue { background-color: #6a1b9a; /* Dark violet */ }
.hosting-card .header-bg-purple { background-color: #d81b60; /* Pink-red */ }
.hosting-card .header-bg-green { background-color: #00897b; /* Teal */ }


.hosting-card .header-bg-blue::before,
.hosting-card .header-bg-purple::before,
.hosting-card .header-bg-green::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-bottom-left-radius: 100px; /* Adjust for curve */
    background-color: var(--white-color);
    width: 50px; /* Size of the cutout */
    height: 50px;
    box-shadow: 0 0 0 9999px currentColor; /* Trick to create the cutout effect */
    transform-origin: top right;
    transform: rotate(0deg);
}

.hosting-card .hosting-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -60px auto 20px auto; /* Pull icon up into the header bg */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 2; /* Bring to front */
    position: relative;
}

.hosting-card .hosting-icon img {
    max-width: 60%;
    height: auto;
}

.hosting-card .btn-primary-custom {
    margin-top: auto; /* Push button to bottom */
}

/* Footer specific styles (from 9.jpg) */
.footer-section {
    background-color: #333; /* Dark background */
    color: var(--white-color);
    padding-top: 60px;
    padding-bottom: 20px;
    position: relative;
    overflow: hidden;
    /* For the top wave effect */
    border-top-left-radius: 50% 20%;
    border-top-right-radius: 50% 20%;
    background: linear-gradient(to top, #333 0%, #333 60%, var(--accent-color-dark) 60%, var(--accent-color-dark) 100%);
}

.footer-section .footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    padding: 5px 0;
    display: block;
    transition: color 0.3s ease;
}

.footer-section .footer-links li a:hover {
    color: var(--primary-color);
}

.footer-section .footer-divider {
    border-color: rgba(255, 255, 255, 0.2);
}

.footer-section .social-icons a {
    font-size: 1.3rem;
    transition: color 0.3s ease;
}

.footer-section .social-icons a:hover {
    color: var(--primary-color) !important;
}

/* General Buttons */
.btn-primary-custom {
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    padding: 10px 25px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
    color: var(--white-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-secondary-custom {
    background-color: var(--accent-color);
    color: var(--white-color);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    padding: 10px 25px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-secondary-custom:hover {
    background-color: var(--accent-color-dark);
    border-color: var(--accent-color-dark);
    color: var(--white-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* --- Corporate Services Sections (from 1.jpg) --- */
.corporate-hero-section {
    background-color: #fcebeb; /* Light background color from image */
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.corporate-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%; /* Adjust as needed */
    height: 100%;
    background: linear-gradient(to left, #FE4F5E, #FA4089); /* Gradient from image */
    border-bottom-left-radius: 50% 100px; /* Curved bottom-left corner */
    z-index: 0;
}

.corporate-hero-section .container {
    position: relative;
    z-index: 1; /* Bring content to front of pseudo-element */
}

.corporate-hero-section .section-title {
    color: var(--danger-color); /* Assuming --danger-color is red/pink */
    text-align: right; /* For RTL */
    font-size: 2.8rem;
    padding-bottom: 10px; /* Adjust as needed */
}

.corporate-hero-section .section-title::after {
    left: auto; /* Override default center alignment */
    right: 0;
}

.corporate-hero-section .lead {
    font-size: 1.25rem;
    color: var(--dark-text-color);
    text-align: right; /* For RTL */
    line-height: 1.8;
}

.corporate-hero-section img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.1)); /* Add subtle shadow to illustration */
}

/* Corporate Details Section */
.corporate-details-section {
    background-color: var(--light-gray-bg);
    padding-top: 80px;
    padding-bottom: 80px;
}

.corporate-details-section .corporate-intro-text {
    line-height: 2;
    text-align: justify; /* Justify text as in the image */
    margin-bottom: 30px;
}

.corporate-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 20px;
    text-align: right; /* For RTL */
}

.corporate-features-grid .feature-item {
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 20px;
    border-right: 4px solid var(--primary-color); /* Right border for highlight */
}
.corporate-features-grid .feature-item.full-width {
    grid-column: 1 / -1; /* Make it span full width in the grid */
    text-align: center;
    border-right: none; /* Remove border for full-width item */
    border-bottom: 4px solid var(--primary-color); /* Add bottom border instead */
}

.corporate-features-grid .feature-item h4 {
    font-weight: bold;
    color: var(--primary-color); /* Use primary color for titles */
    margin-bottom: 5px;
}

.corporate-features-grid .feature-item p {
    font-size: 0.95rem;
    color: var(--dark-text-color);
    margin-bottom: 0;
}

.corporate-features-grid .feature-item .price-highlight {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--danger-color); /* Red color for price */
    margin-top: 15px;
    display: block;
}

/* Ensure your root variables are defined: */
:root {
    --primary-color: #E63946; /* Example: Red */
    --primary-dark-color: #D32F2F;
    --accent-color: #457B9D; /* Example: Blue */
    --accent-color-dark: #376380;
    --white-color: #ffffff;
    --dark-text-color: #333333;
    --light-gray-bg: #f8f8f8;
    --danger-color: #FE4F5E; /* Specific red for titles in corporate section */
}
/* --- Shared Hosting Hero Section --- */
.shared-hosting-hero {
    background-color: var(--primary-color); /* Orange/Red from image */
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
    color: var(--white-color);
    text-align: right; /* Adjust for RTL */
}

.shared-hosting-hero .section-title {
    color: var(--white-color);
    font-size: 3rem;
    font-weight: bold;
}

.shared-hosting-hero .lead {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

.shared-hosting-hero img {
    max-height: 450px; /* Adjust as needed */
    width: auto;
}

.shared-hosting-hero .btn-light-custom {
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 1px solid var(--white-color);
    padding: 12px 30px;
    font-size: 1.1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.shared-hosting-hero .btn-light-custom:hover {
    background-color: var(--primary-color-dark); /* A slightly darker shade of primary */
    color: var(--white-color);
    border-color: var(--white-color);
}


/* --- Shared Hosting Plans Section --- */
.shared-hosting-plans {
    background-color: var(--white-color);
    padding-top: 80px;
    padding-bottom: 80px;
}

.shared-hosting-plans .section-title {
    color: var(--danger-color);
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.shared-hosting-plans .lead {
    font-size: 1.1rem;
    line-height: 1.8;
}

.shared-hosting-plans .plan-card {
    background-color: var(--white-color);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 600px; /* Ensure consistent card height */
}

.shared-hosting-plans .plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.shared-hosting-plans .plan-card .plan-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--dark-text-color);
}

.shared-hosting-plans .plan-card .plan-duration {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.shared-hosting-plans .plan-card .plan-price {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color); /* Default, overridden by specific plan colors */
    margin-bottom: 25px;
}

.shared-hosting-plans .plan-card .price-currency {
    font-size: 1.2rem;
    font-weight: normal;
}

.shared-hosting-plans .plan-card .plan-features {
    text-align: right; /* RTL alignment */
    width: 100%;
    margin-bottom: 30px;
    flex-grow: 1; /* Allow features list to grow and push button to bottom */
}

.shared-hosting-plans .plan-card .plan-features li {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    position: relative;
    padding-right: 25px;
}

.shared-hosting-plans .plan-card .plan-features li i {
    position: absolute;
    right: 0;
    top: 5px;
}

.shared-hosting-plans .plan-card .btn {
    width: 80%;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--white-color);
    transition: all 0.3s ease;
}

/* Specific Plan Colors */
.shared-hosting-plans .starter-plan {
    background: linear-gradient(to bottom, #d4f7ed, var(--white-color) 40%);
}
.shared-hosting-plans .starter-plan .plan-price,
.shared-hosting-plans .starter-plan .btn-starter-custom {
    background-color: #4CAF50; /* Green from image */
    color: var(--white-color);
}

.shared-hosting-plans .unlimited-plan {
    background: linear-gradient(to bottom, #d2eaf7, var(--white-color) 40%);
}
.shared-hosting-plans .unlimited-plan .plan-price,
.shared-hosting-plans .unlimited-plan .btn-unlimited-custom {
    background-color: #2196F3; /* Blue from image */
    color: var(--white-color);
}

.shared-hosting-plans .unlimited-deluxe-plan {
    background: linear-gradient(to bottom, #f7d4e5, var(--white-color) 40%);
}
.shared-hosting-plans .unlimited-deluxe-plan .plan-price,
.shared-hosting-plans .unlimited-deluxe-plan .btn-unlimited-deluxe-custom {
    background-color: #E91E63; /* Pink/Purple from image */
    color: var(--white-color);
}

.shared-hosting-plans .unlimited-wordpress-plan {
    background: linear-gradient(to bottom, #ffeccb, var(--white-color) 40%);
}
.shared-hosting-plans .unlimited-wordpress-plan .plan-price,
.shared-hosting-plans .unlimited-wordpress-plan .btn-unlimited-wordpress-custom {
    background-color: #FFC107; /* Orange from image */
    color: var(--white-color);
}

/* Button Hover Effects for plans */
.shared-hosting-plans .btn-starter-custom:hover { background-color: #388E3C; }
.shared-hosting-plans .btn-unlimited-custom:hover { background-color: #1976D2; }
.shared-hosting-plans .btn-unlimited-deluxe-custom:hover { background-color: #C2185B; }
.shared-hosting-plans .btn-unlimited-wordpress-custom:hover { background-color: #FFA000; }


/* --- Shared Hosting Features Section --- */
.shared-hosting-features {
    background-color: var(--light-gray-bg);
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.shared-hosting-features .section-title {
    color: var(--danger-color);
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.shared-hosting-features .lead {
    font-size: 1.1rem;
    line-height: 1.8;
}

.shared-hosting-features .feature-item {
    background-color: var(--white-color);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 280px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.shared-hosting-features .feature-item:hover {
    transform: translateY(-7px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.shared-hosting-features .feature-item .feature-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
}

.shared-hosting-features .feature-item h4 {
    color: var(--dark-text-color);
    margin-bottom: 10px;
}

/* --- Shared Hosting FAQ Section --- */
.shared-hosting-faq {
    background-color: var(--white-color);
    padding-top: 80px;
    padding-bottom: 80px;
}

.shared-hosting-faq .section-title {
    color: var(--danger-color);
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.shared-hosting-faq .accordion-item {
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.shared-hosting-faq .accordion-button {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--dark-text-color);
    background-color: var(--white-color);
    padding: 18px 25px;
    text-align: right; /* RTL */
}

.shared-hosting-faq .accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: var(--light-gray-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
}

.shared-hosting-faq .accordion-button::after {
    margin-left: 0;
    margin-right: auto; /* Push arrow to the left for RTL */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054"; /* Angle right icon */
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
}

.shared-hosting-faq .accordion-button:not(.collapsed)::after {
    content: "\f078"; /* Angle down icon */
    transform: rotate(90deg); /* Adjust rotation for RTL */
}

.shared-hosting-faq .accordion-body {
    padding: 20px 25px;
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    text-align: right; /* RTL */
}

.shared-hosting-faq .accordion-flush .accordion-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.shared-hosting-faq .accordion-flush .accordion-item:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.shared-hosting-faq .accordion-flush .accordion-item:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* --- Shared Hosting Plans Section --- */
.shared-hosting-plans {
    background-color: var(--white-color);
    padding-top: 80px;
    padding-bottom: 80px;
}

.shared-hosting-plans .section-title {
    color: var(--danger-color); /* Assuming --danger-color is the red in your design */
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.shared-hosting-plans .lead {
    font-size: 1.1rem;
    line-height: 1.8;
}

.shared-hosting-plans .plan-card {
    background-color: var(--white-color);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color); /* Define --border-color if not already */
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 600px; /* Ensure consistent card height */
}

.shared-hosting-plans .plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.shared-hosting-plans .plan-card .plan-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--dark-text-color); /* Define --dark-text-color if not already */
}

.shared-hosting-plans .plan-card .plan-duration {
    font-size: 1rem;
    color: var(--text-muted); /* Define --text-muted if not already */
    margin-bottom: 20px;
}

.shared-hosting-plans .plan-card .plan-price {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color); /* Default, overridden by specific plan colors */
    margin-bottom: 25px;
}

.shared-hosting-plans .plan-card .price-currency {
    font-size: 1.2rem;
    font-weight: normal;
}

.shared-hosting-plans .plan-card .plan-features {
    text-align: right; /* RTL alignment */
    width: 100%;
    margin-bottom: 30px;
    flex-grow: 1; /* Allow features list to grow and push button to bottom */
}

.shared-hosting-plans .plan-card .plan-features li {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    position: relative;
    padding-right: 25px;
}

.shared-hosting-plans .plan-card .plan-features li i {
    position: absolute;
    right: 0;
    top: 5px;
}

.shared-hosting-plans .plan-card .btn {
    width: 80%;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--white-color);
    transition: all 0.3s ease;
}

/* Specific Plan Colors based on the image */
.shared-hosting-plans .starter-plan {
    background: linear-gradient(to bottom, #ade7de, var(--white-color) 40%); /* Light teal/green to white */
}
.shared-hosting-plans .starter-plan .plan-price, .shared-hosting-plans .starter-plan .btn-starter-custom {
    background-color: #00CC99;
    color: var(--white-color);
    border-radius: 50%;
    height: 60px;
}

.shared-hosting-plans .unlimited-plan {
    background: linear-gradient(to bottom, #e78ad6, var(--white-color) 40%); /* Light pink/purple to white */
}
.shared-hosting-plans .unlimited-plan .plan-price,
.shared-hosting-plans .unlimited-plan .btn-unlimited-custom {
    background-color: #F06292; /* Pink from Unlimited card */
    color: var(--white-color);
	border-radius: 50%;
    height: 60px;
}

.shared-hosting-plans .unlimited-deluxe-plan {
    background: linear-gradient(to bottom, #6097d8, var(--white-color) 40%); /* Light blue to white */
}
.shared-hosting-plans .unlimited-deluxe-plan .plan-price,
.shared-hosting-plans .unlimited-deluxe-plan .btn-unlimited-deluxe-custom {
    background-color: #3F51B5; /* Blue from Unlimited-deluxe card */
    color: var(--white-color);
	border-radius: 50%;
    height: 60px;
}

.shared-hosting-plans .unlimited-wordpress-plan {
    background: linear-gradient(to bottom, #ffd784, var(--white-color) 40%); /* Light orange to white */
}
.shared-hosting-plans .unlimited-wordpress-plan .plan-price,
.shared-hosting-plans .unlimited-wordpress-plan .btn-unlimited-wordpress-custom {
    background-color: #FFC107; /* Orange from Unlimited-Wordpress card */
    color: var(--white-color);
	border-radius: 50%;
    height: 60px;
}

/* Button Hover Effects for plans */
.shared-hosting-plans .btn-starter-custom:hover { background-color: #00A68A; }
.shared-hosting-plans .btn-unlimited-custom:hover { background-color: #D8436B; }
.shared-hosting-plans .btn-unlimited-deluxe-custom:hover { background-color: #303F9F; }
.shared-hosting-plans .btn-unlimited-wordpress-custom:hover { background-color: #FFA000; }

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .shared-hosting-plans .plan-card {
        min-height: auto; /* Remove fixed height on smaller screens */
    }
}
/* --- Technologies We Use Section --- */
.technologies-we-use {
    background-color: var(--white-color); /* Assuming a white or light background */
    padding-top: 80px;
    padding-bottom: 80px;
}

.technologies-we-use .section-title {
    font-size: 2.5rem;
    color: var(--dark-text-color); /* Adjust as per your primary text color */
    position: relative;
    padding-bottom: 15px;
}

.technologies-we-use .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary-color); /* Define --primary-color if not already */
}

.technologies-we-use .lead {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-muted); /* Light grey text */
}

.technologies-we-use .technology-logo {
    max-width: 200px; /* Adjust as needed */
    height: auto;
    filter: grayscale(100%) opacity(0.6); /* To match the greyed out look in the image */
    transition: filter 0.3s ease;
}

.technologies-we-use .technology-logo:hover {
    filter: grayscale(0%) opacity(1); /* Full color on hover */
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .technologies-we-use .technology-logo {
        max-width: 150px;
    }
}
/* --- Why Choose WordPress Hosting Section --- */
.why-choose-wordpress-hosting {
    background-color: #e66228; /* Deep orange background as in the image */
    padding-top: 80px;
    padding-bottom: 80px;
    color: var(--white-color); /* Ensure text is white */
}

.why-choose-wordpress-hosting .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--white-color);
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

.why-choose-wordpress-hosting .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--white-color); /* White line under title */
}

.why-choose-wordpress-hosting .large-icon {
    max-width: 250px; /* Adjust size as needed */
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); /* Optional: subtle shadow for depth */
}

.why-choose-wordpress-hosting .feature-block {
    margin-bottom: 30px;
    text-align: right; /* Align text to the right for RTL */
}

.why-choose-wordpress-hosting .feature-heading {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--white-color);
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 10px;
}

.why-choose-wordpress-hosting .feature-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0; /* Align line to the right */
    width: 40px;
    height: 2px;
    background-color: var(--white-color);
}

.why-choose-wordpress-hosting .feature-text {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9); /* Slightly transparent white for readability */
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .why-choose-wordpress-hosting .large-icon {
        max-width: 180px;
        margin-bottom: 30px;
    }
    .why-choose-wordpress-hosting .feature-block {
        text-align: center; /* Center align text on smaller screens */
    }
    .why-choose-wordpress-hosting .feature-heading::after {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .why-choose-wordpress-hosting .row:nth-child(2) .col-lg-8,
    .why-choose-wordpress-hosting .row:nth-child(3) .col-lg-8 {
        order: 2 !important; /* Ensure text comes after image on mobile */
    }
    .why-choose-wordpress-hosting .row:nth-child(2) .col-lg-4,
    .why-choose-wordpress-hosting .row:nth-child(3) .col-lg-4 {
        order: 1 !important; /* Ensure image comes before text on mobile */
    }
}
/* --- WordPress Features Section --- */
.wordpress-features {
    background-color: var(--white-color); /* Light background for the section */
    padding-top: 80px;
    padding-bottom: 80px;
}

.wordpress-features .section-title {
    font-size: 2.5rem;
    color: var(--dark-text-color);
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

.wordpress-features .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary-color); /* The red line in your design */
}

.wordpress-features .feature-card {
    background-color: var(--white-color);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 400px; /* Adjust as needed for consistency */
}

.wordpress-features .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.wordpress-features .feature-icon {
    max-width: 80px; /* Adjust size of icons */
    height: auto;
    margin-bottom: 20px;
}

.wordpress-features .feature-heading {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--dark-text-color);
    margin-bottom: 15px;
}

.wordpress-features .feature-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .wordpress-features .feature-card {
        min-height: auto; /* Allow height to adjust on smaller screens */
    }
}
/* ملف CSS الخاص بك */
.chat-window {
    display: none; /* مخفي بشكل افتراضي */
    position: fixed;
    bottom: 100px; /* أو أي موضع تريده */
    right: 20px;
    width: 350px; /* أو الحجم المناسب */
    height: 450px; /* أو الحجم المناسب */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000; /* تأكد أنه يظهر فوق العناصر الأخرى */
    flex-direction: column; /* لترتيب المحتوى داخله عمودياً */
    overflow: hidden; /* لإخفاء أي محتوى زائد */
}

/* بعض التنسيقات الإضافية للدردشة */
.chat-header {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

.close-chat-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.chat-messages {
    flex-grow: 1; /* لجعل منطقة الرسائل تأخذ المساحة المتاحة */
    padding: 15px;
    overflow-y: auto; /* لجعل الرسائل قابلة للتمرير */
    background-color: #f9f9f9;
}

.chat-input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #eee;
    background-color: #fff;
}

.chat-input-area input[type="text"] {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 8px;
}

.chat-input-area button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
}

.message {
    padding: 8px 12px;
    border-radius: 15px;
    margin-bottom: 10px;
    max-width: 80%;
    clear: both; /* لمنع تداخل الرسائل */
    word-wrap: break-word; /* لكسر الكلمات الطويلة */
}

.user-message {
    background-color: #dcf8c6;
    float: right;
    margin-left: 20%;
}

.agent-message {
    background-color: #e0e0e0;
    float: left;
    margin-right: 20%;
}

.system-message {
    text-align: center;
    font-style: italic;
    color: #777;
    font-size: 0.9em;
    margin: 5px 0;
    float: none; /* لمنع التعويم */
}

.message-meta {
    font-size: 0.7em;
    color: #666;
    margin-top: 5px;
    text-align: right;
}
.agent-message .message-meta {
    text-align: left;
}
.message.user-message {
    background-color: #dcf8c6; /* لون فقاعة الدردشة للمرسل (أنت) */
    float: right; /* تظهر على اليمين */
    margin-left: 20%; /* لترك مسافة من اليسار */
    border-bottom-right-radius: 0; /* لجعل الزاوية اليمنى السفلية حادة (اختياري، نمط WhatsApp) */
}
.user-message .message-meta {
    text-align: right; /* تاريخ ووقت الرسالة على اليمين */
}
.message.agent-message {
    background-color: #ffffff; /* لون فقاعة الدردشة للمستقبل (فريق الدعم) */
    float: left; /* تظهر على اليسار */
    margin-right: 20%; /* لترك مسافة من اليمين */
    border: 1px solid #e0e0e0; /* حدود خفيفة */
    border-bottom-left-radius: 0; /* لجعل الزاوية اليسرى السفلية حادة (اختياري) */
}
.agent-message .message-meta {
    text-align: left; /* تاريخ ووقت الرسالة على اليسار */
}
.message.system-message {
    text-align: center;
    font-style: italic;
    color: #777;
    font-size: 0.9em;
    margin: 5px auto; /* لتركيزها في المنتصف */
    float: none; /* مهم لإزالة float */
    width: fit-content; /* لجعل العرض مناسب للمحتوى */
    max-width: 80%;
    background-color: transparent; /* بدون خلفية */
    border: none; /* بدون حدود */
}

/* Clearfix للحفاظ على التخطيط عند استخدام float */
.chat-messages::after {
    content: "";
    display: table;
    clear: both;
}
/* ... (التنسيقات الموجودة) ... */

/* رسائل الوكيل (أنت) - تظهر على اليمين */
.message.user-message { /* أعد استخدام user-message كلاس لرسائل الوكيل */
    background-color: #dcf8c6; /* أخضر فاتح (نمط WhatsApp للمرسل) */
    float: right;
    margin-left: 20%;
    border-bottom-right-radius: 0;
}
.user-message .message-meta {
    text-align: right;
}

/* رسائل الضيف (العميل) - تظهر على اليسار */
.message.agent-message { /* أعد استخدام agent-message كلاس لرسائل الضيف */
    background-color: #ffffff; /* أبيض (نمط WhatsApp للمستقبل) */
    float: left;
    margin-right: 20%;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 0;
}
.agent-message .message-meta {
    text-align: left;
}

/* رسائل النظام - تظهر في المنتصف */
.message.system-message {
    text-align: center;
    font-style: italic;
    color: #777;
    font-size: 0.9em;
    margin: 5px auto;
    float: none;
    width: fit-content;
    max-width: 80%;
    background-color: transparent;
    border: none;
}

/* Clearfix للحفاظ على التخطيط عند استخدام float */
.chat-messages-agent::after { /* لاحظ أن هذا هو div الرسائل في واجهة الوكيل */
    content: "";
    display: table;
    clear: both;
}
/* تنسيقات عامة لمؤشر التقدم */
.progress-bar-container {
	width: 100px; /* عرض شريط التقدم */
	height: 10px;
	background-color: #e0e0e0;
	border-radius: 5px;
	overflow: hidden;
	margin-left: 10px; /* مسافة من زر الإرسال */
	display: flex; /* لعرض النص والمؤشر بجانبه */
	align-items: center;
	position: relative;
}

.progress-bar-fill {
	height: 100%;
	width: 0%;
	background-color: #007bff; /* لون التقدم */
	transition: width 0.1s ease-in-out; /* حركة سلسة */
}

.progress-text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.7em;
	color: #333;
	font-weight: bold;
}
.message-image {
	max-width: 100%; /* لضمان أن الصورة لا تتجاوز عرض فقاعة الرسالة */
	height: auto; /* للحفاظ على نسبة العرض إلى الارتفاع */
	display: block; /* لإزالة أي مسافة إضافية تحت الصورة */
	margin-top: 5px; /* مسافة من النص إذا كان هناك نص */
	border-radius: 5px; /* حواف دائرية للصورة */
}
.file-name-display {
    margin-right: 10px;
    position: absolute;
    padding: 5px 10px;
    background-color: #29629b;
    border-radius: 15px;
    font-size: 0.85em;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    bottom: 50px;
    height: 100px;
}
.file-name-display .fas {
    font-size: 4em;
    color: #e9ffe9;
}
.remove-file-btn {
	background-color: #dc3545; /* لون أحمر */
	color: white;
	border: none;
	border-radius: 50%; /* لجعله دائريًا */
	width: 25px; /* عرض ثابت */
	height: 25px; /* ارتفاع ثابت */
	font-size: 0.8em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0; /* إزالة المسافات الافتراضية */
	cursor: pointer;
	transition: background-color 0.2s ease;
	flex-shrink: 0; /* يمنع الزر من الانكماش في Flexbox */
}

.remove-file-btn:hover {
	background-color: #c82333;
	color: white; /* تأكد من بقاء لون النص أبيض عند التحويم */
}

.remove-file-btn i {
	margin: 0; /* إزالة أي هوامش افتراضية للأيقونة */
}
.options-container {
    display: flex;
    flex-direction: column; /* لجعل الأزرار تظهر تحت بعضها */
    gap: 10px; /* مسافة بين الأزرار */
    margin-top: 10px;
}

.chat-option-btn {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.95em;
    cursor: pointer;
    text-align: right; /* محاذاة النص لليمين */
    direction: rtl; /* لضمان اتجاه النص من اليمين لليسار */
}

/* يمكنك تخصيص الألوان والأحجام للأزرار بشكل أكبر */
.chat-option-btn.btn-info {
    background-color: #17a2b8; /* لون أزرق فاتح */
    border-color: #17a2b8;
    color: white;
}

.chat-option-btn.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

/* عندما يكون الزر معطلاً */
.chat-option-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* تحسين تنسيق رسائل النظام لتظهر الخيارات بوضوح */
.message.system-message .options-container {
    padding: 10px;
    background-color: #f0f0f0; /* خلفية خفيفة لمربع الخيارات */
    border-radius: 8px;
    margin-top: 5px;
}

/* للتأكد من أن النص والخيارات تتبع الاتجاه الصحيح */
.message.system-message p {
    text-align: right;
    direction: rtl;
}
.features-section {
    padding: 80px 0;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.features-grid {
    display: grid;
    /* 3 أعمدة على الشاشات الكبيرة، يمكنك تعديلها */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* المسافة بين المربعات */
}

.feature-item {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.feature-icon {
    margin-bottom: 20px;
}

.feature-icon img {
    width: 80px; /* حجم الأيقونة */
    height: 80px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(338deg) brightness(101%) contrast(101%); /* لتغيير لون الأيقونات البرتقالي إذا كانت الصورة بالأبيض والأسود */
}

.feature-title {
    font-size: 22px;
    color: #444;
    margin-bottom: 15px;
}

.feature-description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* --- About Section Styling --- */
.about-section {
    padding: 60px 0;
    background-color: #f9f9f9; /* الخلفية الفاتحة من الصورة */
    text-align: center;
}

.about-title {
    font-size: 36px;
    color: #e67e22; /* لون العنوان البرتقالي من الصورة */
    margin-bottom: 30px;
}

.about-description {
    font-size: 18px;
    color: #555;
    line-height: 1.8;
    max-width: 800px; /* لجعل النص لا يمتد كثيرًا */
    margin: 0 auto; /* لتوسيط النص */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr; /* عمود واحد على الشاشات الصغيرة */
    }

    .section-title,
    .about-title {
        font-size: 30px;
    }

    .feature-item {
        padding: 20px;
    }
}
.policy-goals-section {
    padding: 60px 0;
    background-color: #fff;
    text-align: center; /* لتوسيط محتوى السكشن بشكل عام */
}

.accordion {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    border: 0;
}

.accordion-item {
    border-bottom: 0;
}

.accordion-item:last-child {
    border-bottom: none; /* إزالة الحد السفلي من العنصر الأخير */
}

.accordion-header {
    color: #00ff18;
    padding: 18px 25px;
    cursor: pointer;
    font-size: 20px;
    display: flex
;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #e6e6e6;
}

.accordion-header .arrow {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.accordion-header.active .arrow {
    transform: rotate(-180deg); /* تدوير السهم عندما يكون المحتوى مفتوحًا */
}

.accordion-content {
    padding: 0 25px;
    background-color: #fff;
    max-height: 0; /* لإخفاء المحتوى مبدئيًا */
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* للتحريك السلس */
}

.accordion-content p {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    padding-bottom: 20px; /* مسافة داخلية أسفل النص */
    margin: 0; /* لإزالة الهامش الافتراضي للفقرة */
}

/* حالة الفتح بواسطة JavaScript */
.accordion-content.show {
    max-height: 500px; /* قيمة كبيرة بما يكفي لاستيعاب النص؛ يمكن تعديلها إذا كان النص أطول بكثير */
    padding-top: 15px;
    padding-bottom: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .accordion-header {
        font-size: 18px;
        padding: 15px 20px;
    }
    .accordion-content p {
        font-size: 15px;
        padding: 0 20px 15px;
    }
    .accordion-content.show {
        padding-top: 10px;
        padding-bottom: 15px;
    }
}
.Team-section {
    padding: 60px 0;
    background-color: #fff;
    text-align: center;
}
.team-section {
    padding: 80px 0;
    background-color: #f9f9f9; /* لون الخلفية من الصورة */
    text-align: center;
}

.team-grid {
    display: grid;
    /* تخطيط مرن: 3 أعمدة على الشاشات الكبيرة، تتكيف حسب العرض */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px; /* المسافة بين أعضاء الفريق */
    justify-content: center; /* لتوسيط الشبكة إذا لم تملأ العرض بالكامل */
    align-items: start; /* لمحاذاة العناصر من الأعلى */
    max-width: 1000px; /* يمكنك تعديل هذا العرض الأقصى إذا أردت تجميعهم أكثر */
    margin: 0 auto;
}

.team-member {
    background-color: #fff;
    padding: 25px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.member-photo {
    width: 120px; /* حجم الدائرة */
    height: 120px;
    border-radius: 50%; /* لجعل الصورة دائرية */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #ff914d; /* لون الخلفية البرتقالي للدائرة */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* لوضع الصورة الرمزية في الجزء السفلي من الدائرة */
}

.member-photo img {
    width: 100%; /* اجعل الصورة تملأ الدائرة */
    height: 100%;
    object-fit: contain; /* لاقتصاص الصورة إذا كانت أكبر من الدائرة مع الحفاظ على الأبعاد */
}

.member-name {
    font-size: 22px;
    color: #333;
    margin-bottom: 5px;
}

.member-role {
    font-size: 16px;
    color: #666;
    text-transform: uppercase; /* لتحويل النص إلى أحرف كبيرة كما في "SENIOR PHP DEVELOPER" */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* عمودين على الشاشات الأصغر */
    }

    .member-photo {
        width: 100px;
        height: 100px;
    }

    .member-name {
        font-size: 20px;
    }

    .member-role {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr; /* عمود واحد على أصغر الشاشات */
    }
}