Update responsive.css

[Imran-imtiaz48]

description of the changes made to the CSS to improve responsiveness for tablet and mobile layouts: Description of CSS Changes for Responsive Design

1. Tablet Layout Adjustments (768px - 991px): o Custom Headings: Ensured .title is left-aligned for a consistent look. o Navigation:
    Adjusted padding for .block to enhance spacing.
    Positioned the navbar brand image with padding for better alignment. o Slider:
    Aligned slider headings to the left.
    Ensured images in the slider take 95% width and are centered for better visibility. o Blog Section:
    Center-aligned the block text.
    Applied padding to blog lists for visual separation.  Set blog list items to full width.
    Adjusted image widths to 50% and centered them within their containers.  Padding adjustments for content sections to ensure adequate spacing.  Centered "More Info" button and adjusted its margin and border-radius on hover. o Pricing Section:
    Applied top padding for paragraphs.
    Left-aligned the pricing list for better readability. o Contact Us Section:
    Applied top padding for the section.
    Center-aligned the block text but left-aligned the title for consistency.  Ensured contact buttons are centered and adequately padded. o Footer Section:
    Applied bottom padding for spacing.
    Adjusted heading padding for visual balance.
   o Footer Bottom Section:
    Centered navbar navigation and ensured proper text alignment.
2. Mobile Layout Adjustments (max-width: 767px): o Custom Headings:
    Center-aligned headings and adjusted font sizes for better readability. o Navigation:
    Ensured navigation block has proper padding and gradient background.  Adjusted padding for the navbar brand image.
    Applied consistent margin and padding for the navbar to maintain alignment.  Styled the navbar toggle button for better accessibility and user experience. o Slider:
    Applied padding to the slider block for consistent spacing.  Set slider images to 100% width and specific height to fit mobile screens. o About Us Section:
    Applied padding for better spacing.
   o Custom Titles:
    Adjusted font sizes for titles to fit within mobile viewports. o Blog Section:
    Applied bottom padding to blog lists for separation.  Set blog list items, images, and content sections to full width for better readability.  Centered and padded the "More Info" button for accessibility. o Pricing Section:
    Applied top padding for paragraphs.
    Left-aligned the pricing list and items for better readability.  Adjusted button padding and alignment for better user experience. o Subscribe Section:
    Adjusted font sizes for better visibility.
    Ensured form inputs take full width and are adequately padded. o Contact Us Section:
    Applied top padding for the section.
    Ensured contact buttons are centered and padded. o Footer Section:
    Applied bottom padding for spacing.
    Adjusted the layout for footer information and portfolio images. o Footer Bottom Section:
    Hid the navbar for cleaner layout.
    Center-aligned footer bottom text.
   These adjustments ensure that the website's layout and design remain consistent and user-friendly across different screen sizes, providing a better overall user experience.