@media screen and (max-width: 992px){
.title_bots a span {
    font-size: 18px;
    padding: 6px;
}
.title_hed {
    font-size: 17px;
}
.project_header {
    padding: 20px 0;
}
    .ph-flx,.pjc-flx {
        flex-direction: column;
        align-items: center;
    }
    .mobile-menu {
        width: 40px;
        height: 40px;
        background: var(--secondary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 21px;
        cursor: pointer;
        border-radius: 8px;
    }
    .menu {
        display: none;
    }
    .logo {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .developer-box .dcp-side-price {
        display: none;
    }
    .pb-flx {
        gap: 30px;
        flex-wrap: wrap;
    }
    form.prshorshort {
        flex-direction: column;
    }
    .ph-content {
        flex-grow: unset !important;
    }
    .footer_flex {
        grid-template-columns: 1fr;
    }
    .footer-bottom>.container {
        flex-direction: column;
        gap: 20px;
    }
    .flxcnter h1 {
        font-size: 20px;
    }
    img.logom {
        max-width: 90%;
        max-height: 90%;
    }
    .footer-bottom {
        padding-bottom: 100px;
    }
    .herosection .container,.herosection {
        min-height: 350px;
    }
    nav.nav_bar {
        display: none;
    }

    .title_bots {
        grid-template-columns: 1fr;
    }
    
.mobile-menu{
    display: flex;
}
.mobilemenu {
    position: absolute;
    width: 100%;
    z-index: 999;
    background: #f7f7fc;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0 10px;
    transition: all .3s;
    display: none;
    top: 75px;
}

.mobilemenu.active {
    display: block;
}
.mobilemenu ul {
    flex-direction: column;
    display: flex;
    font-size: 15px;
    color: #000;
}
.mobilemenu ul li {
    display: block;
    padding: 10px 5px;
    border-bottom: 1px solid var(--border);
}

.mobilemenu ul a {
    color: #000;
}

.mobilemenu .menu-item-has-children>a {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.mobilemenu .menu-item-has-children>a:after {
    content: "\276E";
    transform: rotate(90deg);
    transition: all .3s;
    color: var(--secondary-color);
}
.mobilemenu .menu-item-has-children.active>a:after {
    transform: rotate(-90deg);
}
.mobilemenu ul .sub-menu {
    display: none;
}

.mobilemenu ul.sub-menu.active {
    display: flex !important;
    transform: unset !important;
    gap: 0 !important;
    margin: 10px 0;
}


ul.sub-menu li a {
    display: block;
    width: 100%;
    padding: 10px !important;
    border-radius: 8px;
}
.mobilemenu ul.sub-menu li a {
    padding: 0 !important;
}

.project_facilities{
    grid-template-columns: repeat(2, 1fr);
}

}

/* International Phone Input Responsive Styles */

/* Tablet Styles */
@media screen and (max-width: 991px) {
    .arabic-international-form-container {
        max-width: 90%;
        margin: 30px auto;
        padding: 0 15px;
    }
    
    .form-wrapper {
        padding: 35px 30px;
    }
    
    .phone-input-wrapper {
        flex-direction: row;
    }
    
    .selected-country {
        min-width: 110px;
        padding: 12px 14px;
    }
    
    .country-dropdown {
        max-height: 250px;
    }
    
    .checkbox-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Mobile Large */
@media screen and (max-width: 767px) {
    .arabic-international-form-container {
        max-width: 95%;
        margin: 20px auto;
        padding: 0 10px;
    }
    
    .form-wrapper {
        padding: 30px 25px;
        border-radius: 12px;
    }
    
    .form-header h2 {
        font-size: 1.6rem;
    }
    
    .phone-input-wrapper, .phone-wrapper {
        flex-direction: column;
        border-radius: 12px;
    }
    
    .phone-input {
        order: 1;
        padding: 14px 16px !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .country-selector, .country-selector-simple {
        order: 2;
        border-top: 1px solid #e5e7eb;
    }
    
    .selected-country, .selected-country-simple {
        min-width: 100%;
        padding: 14px 16px;
        justify-content: center;
        background: #f8f9fa;
        border-radius: 0 0 12px 12px;
        border-left: none;
    }
    
    .country-flag, .country-flag-simple {
        font-size: 20px;
        margin-left: 10px;
    }
    
    .country-code, .country-code-simple {
        font-size: 16px;
        font-weight: 700;
    }
    
    .checkbox-group {
        flex-direction: column;
        gap: 14px;
    }
    
    .submit-btn {
        padding: 18px 32px;
        font-size: 18px;
        border-radius: 12px;
    }
    
    .country-dropdown, .country-dropdown-simple {
        max-height: 200px;
        border-radius: 12px;
    }
}

/* Mobile Small */
@media screen and (max-width: 575px) {
    .arabic-international-form-container {
        max-width: 100%;
        margin: 15px auto;
        padding: 0 8px;
    }
    
    .form-wrapper {
        padding: 25px 20px;
        margin: 10px 0;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }
    
    .form-header h2 {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    
    .form-control {
        padding: 16px 14px;
        font-size: 16px; /* Prevent zoom on iOS */
        border-radius: 12px;
    }
    
    .phone-input {
        padding: 16px 14px !important;
        font-size: 18px !important;
        letter-spacing: 1px !important;
        background: #fafafa !important;
    }
    
    .phone-input:focus {
        background: #ffffff !important;
        border-bottom-color: #C9A96E !important;
    }
    
    .selected-country, .selected-country-simple {
        padding: 16px 14px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
    
    .selected-country:active, .selected-country-simple:active {
        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        transform: scale(0.98);
    }
    
    .country-flag, .country-flag-simple {
        font-size: 24px;
        margin-left: 12px;
    }
    
    .country-code, .country-code-simple {
        font-size: 18px;
        font-weight: 700;
    }
    
    /* Mobile Dropdown Optimization */
    .country-dropdown, .country-dropdown-simple {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 400px;
        max-height: 70vh;
        border-radius: 20px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        z-index: 9999;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
    }
    
    .country-dropdown::before, .country-dropdown-simple::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
    
    .country-search, .country-search-simple {
        padding: 20px 16px 16px;
        border-bottom: 2px solid #f3f4f6;
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
    }
    
    .country-search input, .country-search-simple input {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 12px;
        border: 2px solid #e5e7eb;
        background: #fafafa;
    }
    
    .country-list, .country-list-simple {
        max-height: calc(70vh - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .country-item, .country-item-simple {
        padding: 18px 16px;
        border-bottom: 1px solid #f8f9fa;
        min-height: 44px;
    }
    
    .country-item:hover, .country-item:active,
    .country-item-simple:hover, .country-item-simple:active {
        background: #f8f9fa;
        transform: translateX(-2px);
    }
    
    .checkbox-item {
        padding: 8px 4px;
        font-size: 15px;
        min-height: 44px;
    }
    
    .checkmark {
        width: 24px;
        height: 24px;
        margin-left: 12px;
    }
    
    .submit-btn {
        padding: 20px 32px;
        font-size: 18px;
        font-weight: 700;
        border-radius: 16px;
        min-height: 60px;
        box-shadow: 0 8px 20px rgba(201, 169, 110, 0.3);
    }
    
    .submit-btn:active {
        transform: translateY(2px);
        box-shadow: 0 4px 12px rgba(201, 169, 110, 0.4);
    }
    
    .phone-format-hint, .phone-format-hint-simple {
        font-size: 12px;
        margin-top: 8px;
        padding: 8px 12px;
        background: rgba(201, 169, 110, 0.1);
        border-radius: 8px;
        border-right: 3px solid #C9A96E;
    }
}

/* Extra Small Mobile */
@media screen and (max-width: 360px) {
    .form-wrapper {
        padding: 20px 15px;
        margin: 5px 0;
    }
    
    .form-header h2 {
        font-size: 1.2rem;
    }
    
    .form-control {
        padding: 14px 12px;
    }
    
    .phone-input {
        padding: 14px 12px !important;
        font-size: 16px !important;
    }
    
    .selected-country, .selected-country-simple {
        padding: 14px 12px;
    }
    
    .country-flag, .country-flag-simple {
        font-size: 20px;
    }
    
    .country-code, .country-code-simple {
        font-size: 16px;
    }
    
    .submit-btn {
        padding: 18px 24px;
        font-size: 16px;
        min-height: 56px;
    }
    
    .country-dropdown, .country-dropdown-simple {
        width: 95vw;
        max-height: 80vh;
    }
}

/* Landscape Mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .form-wrapper {
        padding: 15px 20px;
        margin: 10px 0;
    }
    
    .form-header {
        margin-bottom: 15px;
    }
    
    .form-header h2 {
        font-size: 1.3rem;
        margin-bottom: 2px;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
    
    .country-dropdown, .country-dropdown-simple {
        max-height: 60vh;
        width: 70vw;
    }
    
    .phone-input-wrapper, .phone-wrapper {
        flex-direction: row;
    }
    
    .phone-input {
        order: 1 !important;
        border-bottom: none !important;
        border-left: 1px solid #e5e7eb !important;
        border-radius: 12px 0 0 12px !important;
    }
    
    .country-selector, .country-selector-simple {
        order: 2 !important;
    }
    
    .selected-country, .selected-country-simple {
        border-radius: 0 12px 12px 0 !important;
        min-width: 120px !important;
        justify-content: flex-start !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .form-control {
        min-height: 44px; /* iOS touch target */
    }
    
    .selected-country, .selected-country-simple {
        min-height: 44px;
    }
    
    .checkbox-item {
        min-height: 44px;
    }
    
    .submit-btn {
        min-height: 44px;
    }
    
    .country-item, .country-item-simple {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .submit-btn:hover {
        transform: none;
        box-shadow: 0 8px 25px rgba(201, 169, 110, 0.3);
    }
    
    .country-item:hover, .country-item-simple:hover {
        background: transparent;
        transform: none;
    }
}

/* Logo and Image Responsive Styles */

/* Logo Base Styles - Apply to all logo elements */
.logo img, 
.responsive-logo,
.site-logo,
.header-logo,
.logo-container img,
.logo a img,
header img[src*="logo"],
img[alt*="logo"],
img[alt*="شعار"] {
    max-width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease;
}

/* Desktop and Large Screens */
@media screen and (min-width: 1200px) {
    .logo img, 
    .responsive-logo,
    .site-logo,
    .header-logo,
    .logo-container img {
        max-width: 280px;
        max-height: 80px;
    }
}

/* Desktop */
@media screen and (max-width: 1199px) {
    .logo img, 
    .responsive-logo,
    .site-logo,
    .header-logo,
    .logo-container img {
        max-width: 250px;
        max-height: 70px;
    }
}

/* Tablet */
@media screen and (max-width: 991px) {
    .logo img, 
    .responsive-logo,
    .site-logo,
    .header-logo,
    .logo-container img {
        max-width: 200px;
        max-height: 60px;
    }
    
    .project-image img, .gallery-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    /* Center logo on tablet */
    .logo, .logo-container {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Mobile Large */
@media screen and (max-width: 767px) {
    .logo img, 
    .responsive-logo,
    .site-logo,
    .header-logo,
    .logo-container img {
        max-width: 160px;
        max-height: 50px;
    }
    
    .hero-image img, .banner-image img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    /* Ensure logo container is centered */
    .logo, 
    .logo-container,
    .site-branding {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0 auto;
    }
    
    /* Header adjustments for mobile */
    .header-content,
    .site-header,
    .main-navigation {
        flex-direction: column;
        align-items: center;
    }
}

/* Mobile Small */
@media screen and (max-width: 575px) {
    .logo img, 
    .responsive-logo,
    .site-logo,
    .header-logo,
    .logo-container img {
        max-width: 130px;
        max-height: 40px;
    }
    
    .hero-image img, .banner-image img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    
    .gallery-image img, .project-image img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
    
    /* Mobile logo container */
    .logo-container {
        padding: 10px 0;
        margin-bottom: 15px;
    }
}

/* Extra Small Mobile */
@media screen and (max-width: 360px) {
    .logo img, 
    .responsive-logo,
    .site-logo,
    .header-logo,
    .logo-container img {
        max-width: 110px;
        max-height: 35px;
    }
    
    .logo-container {
        padding: 8px 0;
        margin-bottom: 10px;
    }
}

/* Logo in specific contexts */
.project_header .logo img,
.site-header .logo img {
    max-width: inherit;
    max-height: inherit;
}

/* Ensure logos don't break layout */
.logo, .logo-container {
    overflow: hidden;
    flex-shrink: 0;
}

/* Logo link styling */
.logo a, .logo-container a {
    display: inline-block;
    line-height: 0;
}

/* Enhanced Text Responsiveness */

/* Text Base Styles */
h1, h2, h3, h4, h5, h6, .heading, .title {
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

body, p, .body-text, .content, .description {
    word-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.6 !important;
}

/* Desktop Text Sizes */
@media (min-width: 1200px) {
    h1, .h1 { font-size: 2.5rem !important; }
    h2, .h2 { font-size: 2rem !important; }
    h3, .h3 { font-size: 1.75rem !important; }
    h4, .h4 { font-size: 1.5rem !important; }
    h5, .h5 { font-size: 1.25rem !important; }
    h6, .h6 { font-size: 1rem !important; }
    
    body, p, .body-text, .content {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
}

/* Laptop Text Sizes */
@media (max-width: 1199px) and (min-width: 992px) {
    h1, .h1 { font-size: 2.25rem !important; }
    h2, .h2 { font-size: 1.875rem !important; }
    h3, .h3 { font-size: 1.625rem !important; }
    h4, .h4 { font-size: 1.375rem !important; }
    h5, .h5 { font-size: 1.125rem !important; }
    h6, .h6 { font-size: 1rem !important; }
    
    body, p, .body-text, .content {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* Tablet Text Sizes */
@media (max-width: 991px) and (min-width: 769px) {
    h1, .h1 { font-size: 2rem !important; }
    h2, .h2 { font-size: 1.75rem !important; }
    h3, .h3 { font-size: 1.5rem !important; }
    h4, .h4 { font-size: 1.25rem !important; }
    h5, .h5 { font-size: 1.125rem !important; }
    h6, .h6 { font-size: 1rem !important; }
    
    body, p, .body-text, .content {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    
    .text-center-tablet {
        text-align: center !important;
    }
}

/* Mobile Text Sizes */
@media (max-width: 768px) {
    h1, .h1 { font-size: 1.875rem !important; }
    h2, .h2 { font-size: 1.625rem !important; }
    h3, .h3 { font-size: 1.375rem !important; }
    h4, .h4 { font-size: 1.25rem !important; }
    h5, .h5 { font-size: 1.125rem !important; }
    h6, .h6 { font-size: 1rem !important; }
    
    body, p, .body-text, .content {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    
    /* Text alignment for mobile */
    .text-center-mobile {
        text-align: center !important;
    }
    
    /* Reduce margins on mobile */
    h1, h2, h3, h4, h5, h6, .heading, .title {
        margin-bottom: 10px !important;
    }
    
    p, .paragraph {
        margin-bottom: 12px !important;
    }
    
    /* Mobile readable text */
    .mobile-text {
        font-size: 16px !important;
        line-height: 1.8 !important;
        color: var(--mobile-text-color, #333) !important;
    }
}

/* Extra Small Mobile Text */
@media (max-width: 360px) {
    h1, .h1 { font-size: 1.75rem !important; }
    h2, .h2 { font-size: 1.5rem !important; }
    h3, .h3 { font-size: 1.25rem !important; }
    
    body, p, .body-text, .content {
        font-size: 13px !important;
    }
    
    .mobile-text {
        font-size: 14px !important;
    }
}

/* Enhanced Image and Photo Responsiveness */

/* All Images Base Styles */
img, .image, .photo, .picture, .wp-post-image,
.featured-image, .post-thumbnail, .gallery-item img,
.slider-image, .banner-image, .hero-image,
.project-image, .property-image {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Gallery and Image Grid Responsiveness */
.gallery, .image-grid, .photo-grid, .property-gallery {
    display: grid !important;
    gap: 15px !important;
    margin: 20px 0 !important;
}

@media (min-width: 1200px) {
    .gallery, .image-grid, .photo-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .gallery, .image-grid, .photo-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 991px) and (min-width: 769px) {
    .gallery, .image-grid, .photo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

@media (max-width: 768px) {
    .gallery, .image-grid, .photo-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Mobile image optimization */
    .hero-image, .banner-image, .featured-image {
        border-radius: 12px !important;
        margin: 15px 0 !important;
    }
    
    .property-image, .project-image {
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Image hover effects for desktop only */
@media (hover: hover) and (pointer: fine) {
    .gallery img:hover, 
    .image-grid img:hover,
    .property-image:hover {
        transform: scale(1.02) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .gallery img:hover, 
    .image-grid img:hover,
    .property-image:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Lazy loading optimization */
img[loading="lazy"] {
    transition: opacity 0.3s ease !important;
}

img[loading="lazy"]:not([src]) {
    opacity: 0 !important;
}

/* Image aspect ratios for consistency */
.hero-image, .banner-image {
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
}

.property-image, .project-image {
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
}

.gallery-image {
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
}

@media (max-width: 768px) {
    .hero-image, .banner-image {
        aspect-ratio: 16/10 !important;
        min-height: 200px !important;
    }
    
    .property-image, .project-image {
        aspect-ratio: 16/12 !important;
        min-height: 180px !important;
    }
}

/* High DPI Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .form-wrapper {
        border-width: 0.5px;
    }
    
    .form-control {
        border-width: 1px;
    }
    
    .phone-input-wrapper, .phone-wrapper {
        border-width: 1px;
    }
    
    /* High DPI image optimization */
    img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Print Styles */
@media print {
    .logo img, .site-logo {
        max-width: 200px !important;
        max-height: 60px !important;
    }
    
    .gallery, .image-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid !important;
    }
    
    img {
        page-break-inside: avoid !important;
    }
}