/**
 * FunnelCraftPro - Responsive Stylesheet
 * Media queries and responsive styling for different screen sizes
 */

/* Extra Small Devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  /* General Typography Adjustments */
  h1.main-heading {
    font-size: 2.2rem;
  }
  
  .section-heading h2 {
    font-size: 1.8rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  /* Hero Section */
  .hero-section {
    padding-top: 100px;
    padding-bottom: 60px;
    text-align: center;
  }
  
  .hero-content {
    padding-right: 0;
    margin-bottom: 2rem;
  }
  
  .hero-buttons .btn {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }
  
  .hero-buttons .btn + .btn {
    margin-left: 0;
  }
  
  .hero-features {
    justify-content: center;
  }
  
  .funnel-graphic {
    max-width: 280px;
    margin: 0 auto;
  }
  
  /* Services & Features */
  .service-card,
  .feature-box {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .service-features .features-image {
    margin-bottom: 2rem;
  }
  
  /* Portfolio */
  .filter-buttons,
  .price-filters {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .filter-btn,
  .price-btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
  }
  
  .portfolio-thumb {
    height: 180px;
  }
  
  /* New Testimonials Responsive */
@media (max-width: 768px) {
  .testimonials-title {
    font-size: 2.5rem;
  }
  

  
  .testimonial-card {
    padding: 1.5rem;
  }
  
  .trust-indicators {
    gap: 2rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-buttons .btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 576px) {
  .testimonials-title {
    font-size: 2rem;
  }
  
  .testimonials-subtitle {
    font-size: 1rem;
  }
  
  .testimonial-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .testimonial-footer {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .trust-indicators {
    gap: 1.5rem;
  }
  
  .trust-item {
    font-size: 0.9rem;
  }
}
  
  .client-info {
    flex-direction: column;
    text-align: center;
  }
  
  .client-image {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  /* FAQ */
  .accordion-button {
    font-size: 1rem;
    padding: 1rem;
  }
  
  /* Footer */
  .footer-section {
    text-align: center;
  }
  
  .footer-links h4::after,
  .footer-contact h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .social-links {
    justify-content: center;
  }
  
  .contact-info li {
    justify-content: center;
  }
  
  .contact-info li i {
    margin-right: 0.5rem;
  }
  
  .footer-bottom {
    text-align: center;
  }
  
  .language-selector-footer {
    justify-content: center;
    margin-top: 1rem;
  }

  /* Modal */
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .portfolio-detail-image {
    margin-bottom: 1rem;
  }
  
  .portfolio-detail-info {
    padding: 0;
  }
  
  /* Mobile Navigation */
  body {
    padding-bottom: 70px;
  }
  
  .mobile-navbar {
    display: flex;
  }
  
  .mobile-nav-item {
    padding: 0.5rem 0;
  }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* General Typography Adjustments */
  h1.main-heading {
    font-size: 2.5rem;
  }
  
  .section-heading h2 {
    font-size: 2rem;
  }
  
  /* Hero Section */
  .hero-section {
    padding-top: 120px;
    padding-bottom: 70px;
    text-align: center;
  }
  
  .hero-content {
    padding-right: 0;
    margin-bottom: 2rem;
  }
  
  /* Services & Features */
  .service-features .features-image {
    margin-bottom: 2rem;
  }
  
  /* Portfolio */
  .portfolio-thumb {
    height: 200px;
  }
  
  /* Mobile Navigation */
  body {
    padding-bottom: 70px;
  }
  
  .mobile-navbar {
    display: flex;
  }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* General Typography Adjustments */
  h1.main-heading {
    font-size: 2.8rem;
  }
  
  /* Hero Section */
  .hero-section {
    padding-top: 120px;
    padding-bottom: 80px;
  }
  
  .hero-content {
    padding-right: 1rem;
  }
  
  /* Services & Features */
  .service-features .features-image {
    margin-bottom: 2rem;
  }
  
  /* Portfolio */
  .portfolio-card {
    margin-bottom: 2rem;
  }
  
  /* Footer */
  .footer-links,
  .footer-contact {
    margin-top: 2rem;
  }
  
  /* Mobile Navigation */
  body {
    padding-bottom: 70px;
  }
  
  .mobile-navbar {
    display: flex;
  }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Hero Section */
  .hero-content {
    padding-right: 1rem;
  }
  
  /* Hide Mobile Navigation */
  .mobile-navbar {
    display: none;
  }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Hero Section */
  .main-heading {
    font-size: 4rem;
  }
  
  /* Hide Mobile Navigation */
  .mobile-navbar {
    display: none;
  }
}

/* RTL Support for Arabic and Urdu Languages */
html[dir="rtl"] {
  /* Text Alignment */
  .text-start {
    text-align: right !important;
  }
  
  .text-end {
    text-align: left !important;
  }
  
  /* Margins */
  .ms-1, .ms-2, .ms-3, .ms-4, .ms-5, .ms-auto {
    margin-left: 0 !important;
  }
  
  .ms-1 {
    margin-right: 0.25rem !important;
  }
  
  .ms-2 {
    margin-right: 0.5rem !important;
  }
  
  .ms-3 {
    margin-right: 1rem !important;
  }
  
  .ms-auto {
    margin-right: auto !important;
  }
  
  .me-1, .me-2, .me-3, .me-4, .me-5 {
    margin-right: 0 !important;
  }
  
  .me-1 {
    margin-left: 0.25rem !important;
  }
  
  .me-2 {
    margin-left: 0.5rem !important;
  }
  
  .me-3 {
    margin-left: 1rem !important;
  }
  
  /* Flex Direction */
  .flex-row {
    flex-direction: row-reverse !important;
  }
  
  /* Navigation */
  .navbar-nav {
    padding-right: 0;
  }
  
  .dropdown-menu {
    text-align: right;
  }
  
  /* Features */
  .feature-item i, 
  .step-number,
  .contact-info li i {
    margin-right: 0;
    margin-left: 1rem;
  }
  
  /* Footer */
  .footer-links h4::after, 
  .footer-contact h4::after {
    left: auto;
    right: 0;
  }
  
  .footer-links ul li a:hover {
    padding-left: 0;
    padding-right: 5px;
  }
  
  /* Language Selector */
  .language-selector-footer span {
    margin-right: 0;
    margin-left: 0.5rem;
  }
}

/* Custom Classes to Handle RTL Layout */
.rtl-flip {
  transform: scaleX(-1);
}

html[dir="rtl"] .rtl-swap-text-align {
  text-align: right;
}

html[dir="rtl"] .rtl-margin-swap {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}

/* Specific language adjustments */
html[lang="ar"], html[lang="ur"] {
  font-family: 'Tajawal', var(--body-font);
}

html[lang="zh"] {
  font-family: 'Noto Sans SC', var(--body-font);
}

/* Accessibility Focus Styles */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.btn:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  #header, 
  .mobile-navbar,
  .cta-section,
  .hero-buttons,
  .testimonial-controls,
  .filter-buttons,
  .price-filters,
  .search-box,
  .theme-toggle,
  .language-selector,
  footer,
  .btn:not(.btn-primary) {
    display: none !important;
  }
  
  body {
    padding: 0;
    font-size: 12pt;
    background-color: white !important;
    color: black !important;
  }
  
  .container {
    width: 100%;
    max-width: 100%;
  }
  
  section {
    padding: 20px 0;
    page-break-inside: avoid;
  }
  
  .portfolio-card,
  .service-card,
  .feature-box {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd;
  }
  
  a {
    text-decoration: none !important;
    color: black !important;
  }
  
  .btn-primary {
    border: 1px solid #333;
    background: none !important;
    color: black !important;
  }
}