/* --------------------- Responsive Navbar Section -------------------- */
@media (max-width: 1080px) {
  
  .nav-right {
    display: none; /* Hide the menu items */
  }

  .navbar .nav-left {
    width: fit-content;
    height: fit-content;
    font-size: 28px;
    margin-left: 20px;
  }

  .hamburger {
    display: inline-block;
    margin-right: 20px;
  }
}

/* --------------------- Responsive Hero Section -------------------- */

/* General styles for smaller screens */
@media (max-width: 1200px) {
  .hero-content h1 {
    font-size: 45px;
    line-height: 1.2;
  }

  .element span {
    font-size: 24px;
  }

  .hero-img {
    margin-right: 0;
    width: 60%;
    max-width: 340px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: auto;
    padding: 30px 15px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .hero-content {
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
  }
  .hero-content h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  .hero-content h3 {
    font-size: 20px;
  }

  .element span {
    font-size: 20px;
  }

  .hero-buttons {
    gap: 10px;
  }

  .hero-img {
    width: 100%;
    max-width: 300px;
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 32px;
    line-height: 1.1;
  }

  .hero-content h3 {
    font-size: 18px;
    margin-top: 18px;
  }

  .element span {
    font-size: 18px;
  }

  .hero-buttons .hireBtn,
  .contactBtn {
    font-size: 15px;
  }

  .hero-img {
    margin-top: 15px;
  }
}

@media (max-width: 380px) {
  .hero-content h1 {
    font-size: 28px;
  }
}

/* ----------------- Responsive expertise Section  ------------------ */

@media (max-width: 1300px) {
  .expertise-boxes {
    height: 150px;
  }
}

/* For medium screens (tablets and below) */
@media (max-width: 1065px) {
  .expertise-heading h1 {
    font-size: 2.5rem;
  }

  .expertise-para {
    width: 80%;
    font-size: 1rem;
  }

  .expertise-grid {
    flex-direction: column;
    gap: 2rem;
  }

  .expertise-boxes {
    width: 90%;
    max-width: 22rem;
    height: fit-content;
  }
  .expertise-grid-top,
  .expertise-grid-bottom {
    display: flex;
    flex-direction: column;
  }
  .expertise-boxes {
    width: 100%;
    max-width: 100%;
    height: fit-content;
    flex-direction: row;
    align-items: center;
  }
  .expertise-img {
    font-size: 3rem;
    width: 8rem;
  }

  .expertise-grid-text h1 {
    font-size: 1.25rem;
  }

  .expertise-grid-text p {
    font-size: 0.9rem;
  }
}

/* For small screens (phones) */
@media (max-width: 768px) {
  .expertise-heading h1 {
    font-size: 2rem;
  }

  .expertise-para {
    width: 90%;
    font-size: 0.9rem;
  }

  .expertise-grid {
    flex-direction: column;
    gap: 1.5rem;
  }

  .expertise-grid-top,
  .expertise-grid-bottom {
    display: flex;
    flex-direction: column;
  }
  .expertise-boxes {
    width: 100%;
    max-width: 120%;
    flex-direction: row;
    align-items: center;
  }

  .expertise-img {
    font-size: 2.5rem;
    width: 7rem;
  }

  .expertise-grid-text {
    padding: 0;
  }

  .expertise-grid-text h1 {
    font-size: 1.1rem;
  }

  .expertise-grid-text p {
    font-size: 0.8rem;
  }
}

/* For extra small screens (very small phones) */
@media (max-width: 480px) {


  .expertise-heading p {
    margin-top: 18px;
  }
  
  .expertise-heading h1 {
    font-size: 1.8rem;
  }

  .expertise-para {
    width: 95%;
    font-size: 0.8rem;
  }

  .expertise-grid-top,
  .expertise-grid-bottom {
    display: flex;
    flex-direction: column;
  }

  .expertise-boxes {
    width: 100%;
    flex-direction: row;
    align-items: center;
  }

  .expertise-img {
    font-size: 2rem;
    width: 6rem;
  }

  .grid-text-cont {
    padding: 0px 12px;
  }

  .expertise-grid-text h1 {
    font-size: 1rem;
  }

  .expertise-grid-text p {
    font-size: 0.7rem;
  }
}

/*Adding more smaller screens css*/
@media (max-width: 380px) {
  .expertise-boxes {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .expertise-img {
    font-size: 2rem;
    width: 100%;
    height: 6rem;
    border-radius: 8px;
  }

  .expertise-boxes:hover .expertise-img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  .grid-text-cont {
    height: fit-content;
    border-bottom-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0px;
    padding: 12px;
  }

  .expertise-grid-text h1 {
    font-size: 1.2rem;
  }

  .expertise-grid-text p {
    font-size: 0.9rem;
  }
}

/* ----------------- Responsive Experience Section  ------------------ */

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .experience-heading h1 {
    font-size: 35px; /* Smaller heading */
  }

  .experience-timeline {
    width: 90%; /* Increase width to better utilize smaller screens */
  }

  .timeline-item {
    flex-direction: column;
    align-items: flex-start; /* Stack icons and text vertically */
    gap: 15px;
  }

  .timeline-icon {
    font-size: 40px; /* Smaller icon size */
    width: 60px;
    height: 60px;
  }

  .timeline-content {
    width: 100%; /* Full width for content */
    padding: 15px;
  }

  .timeline-content h2 {
    font-size: 18px; /* Reduce the heading font size */
  }

  .timeline-content p {
    font-size: 14px; /* Smaller paragraph text */
  }
}

@media (max-width: 480px) {
  .experience-heading h1 {
    font-size: 28px; /* Even smaller heading */
  }

  .timeline-item {
    gap: 10px;
  }

  .timeline-icon {
    font-size: 30px; /* Even smaller icon size */
    width: 50px;
    height: 50px;
  }

  .timeline-content h2 {
    font-size: 16px; /* Even smaller heading */
  }

  .timeline-content p {
    font-size: 12px; /* Reduce paragraph font size */
  }
}

/* ----------------- Responsive Portfolio Section  ------------------ */

/* Responsive Styles for Smaller Screens */

@media (max-width: 768px) {
  .portfolio-heading h1 {
    font-size: 35px; /* Smaller heading */
  }

  .portfolio-heading p {
    font-size: 14px; /* Smaller subheading */
  }

  .portfolio-grid {
    width: 90%;
    gap: 20px; /* Reduced gap */
  }

  .portfolio-item {
    margin: 0; /* Remove margins */
  }

  .portfolio-overlay h2 {
    font-size: 20px; /* Smaller project name */
  }

  .portfolio-overlay a {
    font-size: 14px; /* Smaller button text */
  }
}

@media (max-width: 480px) {
  .portfolio-heading h1 {
    font-size: 28px; /* Even smaller heading */
  }

  .portfolio-heading p {
    font-size: 12px; /* Even smaller subheading */
  }

  .portfolio-grid {
    width: 90%;
    gap: 40px; /* Further reduce gap */
  }

  .portfolio-item {
    width: 100%; /* Full width items */
  }

  .portfolio-overlay h2 {
    font-size: 18px; /* Smaller project name */
  }

  .portfolio-overlay a {
    font-size: 12px; /* Smaller button text */
    padding: 6px 12px; /* Smaller button size */
  }
}

@media (max-width: 340px) {
  .portfolio-grid {
    width: 90%;
    gap: 30px;
  }
}

/* ----------------- Responsive Pricing Section  ------------------ */

@media (max-width: 480px) {
  .pricing-heading h1 {
    font-size: 28px;
  }
}

/* ----------------- Responsive Blog Section  ------------------ */

@media screen and (max-width: 1200px) {
  .blog-posts {
    justify-content: center;
    gap: 20px; /* Add spacing between posts */
  }
  .blog-post {
    width: 45%; /* Adjust width for medium screens */
  }
}

@media screen and (max-width: 768px) {
  .section-title {
    font-size: 36px;
  }
  .blog-posts {
    flex-direction: column;
    align-items: center; /* Center posts in smaller screens */
  }

  .blog-post {
    width: 100%; /* Full width for small screens */
    margin-bottom: 20px;
  }
}

@media (max-width: 576px) {
  .blog-section .section-title {
    font-size: 28px; /* Reduce section title size */
  }
  .blog-section .section-description {
    font-size: 14px; /* Reduce description font size */
  }
  .blog-post .post-title {
    font-size: 20px; /* Adjust blog post title size */
  }
  .blog-post .post-excerpt,
  .blog-post .post-full {
    font-size: 14px; /* Adjust text size */
  }
  .blog-post {
    padding: 15px; /* Reduce padding */
  }
}

/* Responsive Styles for Smaller Screens */

@media (max-width: 768px) {
  .reviews-slider {
    width: 90%; /* Full width slider on mobile */
    height: min-content;
  }

  .review-item .review-text {
    width: 80%; /* Ensure text is more compact */
  }

  .reviews-heading h1 {
    font-size: 35px; /* Adjust header size */
  }
}

@media (max-width: 480px) {
  .reviews-slider {
    width: 90%; /* Full width slider on mobile */
    height: min-content;
  }

  .review-item .review-text {
    width: 90%; /* Ensure text is compact */
  }

  .reviews-heading h1 {
    font-size: 28px; /* Smaller header on mobile */
  }

  .prev,
  .next {
    font-size: 16px; /* Smaller arrows on mobile */
  }
}


/* ----------------Responsive Contact Section---------------- */

@media (max-width: 768px) {
  .contact-section {
    flex-direction: column; /* Stack the elements vertically */
    align-items: center;
    justify-content: center;
  }

  .contact-form {
    width: 80%; /* Make the form take more space on smaller screens */
    padding-left: 0; /* Remove padding on smaller screens */
  }

  .contact-image {
    max-width: 70%;
    display: inline;
    align-items: center;
  }
  .contact-image img {
    max-width: 100%; /* Make the image responsive */
    margin-bottom: 20px; /* Add space below the image */
  }

  .contact-form h2 {
    font-size: 30px; /* Smaller font size on mobile */
  }

}

@media (max-width: 480px) {
  .contact-image {
    max-width: 90%;
    display: inline;
    align-items: center;
  }
  .contact-image img {
    max-width: 100%; /* Make the image responsive */
    margin-bottom: 20px; /* Add space below the image */
  }

  .contact-form h2 {
    font-size: 28px; /* Further reduce font size on very small screens */
  }

  .contact-form input,
  .contact-form textarea {
    padding: 8px; /* Reduce padding for smaller screens */
  }

  .contact-form button {
    width: 100%; /* Make the button take full width on mobile */
    font-size: 16px; /* Adjust font size for better readability */
  }
}

/* -------------------- Responsive Footer Section -------------------- */

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column-reverse; /* Stack elements vertically */
    gap: 20px; /* Adjust gap for smaller screens */
  }

  .social-icons a {
    font-size: 24px; /* Reduce icon size */
    padding: 8px; /* Adjust padding */
  }

  .footer-nav ul {
    gap: 8px; /* Reduce gap between links */
  }

  .footer-nav ul li {
    padding: 6px; /* Adjust padding for smaller screens */
  }

  .footer-end {
    font-size: 12px; /* Smaller font size for compact display */
  }
}

@media (max-width: 480px) {
  .social-icons a {
    font-size: 19px; /* Further reduce icon size */
    padding: 6px;
  }

  .footer-nav ul li {
    font-size: 14px; /* Adjust font size for links */
  }

  .footer-end {
    font-size: 10px; /* Further adjust font size for very small screens */
  }

  .social-icons a:hover .fa-brands {
    font-size: 32px; /* Reduce hover font size for smaller screens */
    color: white;
  }
  
  .social-icons a:hover {
    background-color: transparent;
    color: white;
    padding: 0;
    box-shadow: none;
  }
}