/* Base mobile-first approach - applies to all devices */
body {
  overflow-x: hidden; /* Prevents horizontal scrolling globally */
/*   overflow-y: auto;   */ 
}

/* Small devices (mobile phones, up to 480px) */
@media (max-width: 480px) {
  .swiper {
    max-width: 100%;
    padding: 0.5rem 0;
  }
  
  .swiper-slide {
    padding: 0.5rem;
  }
}

/* Extra small devices (mobile phones, up to 600px) */
@media (max-width: 600px) {
  .service-content {
    grid-template-columns: 1fr;
    margin-left: 1.6rem;
  }

  .service-info {
    font: 200 clamp(1rem, 6vw, 1.1rem) var(--FONT-FAMILY);
    padding: 0 1rem;
  }

  figure {
    padding-bottom: 1rem;
  }

  .service-content img {
    padding: 1rem;
    margin: 0.5rem;
  }

  figcaption h4 {
    font: 250 1rem var(--FONT-FAMILY);
  }

  figcaption p {
    font: 250 0.8rem var(--FONT-FAMILY);
  }
  
  input,
  textarea {
    padding: 1rem;
    font-size: 14px;
  }
  
  .faq-intro {
    white-space: normal;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .Contact-info > h3 {
    font-size: 1.2rem;
  }

  .Contact-info > pre {
    font-size: 1rem;
  }

  label {
    font-size: 1rem;
  }

  .submit-button {
    padding: 10px 20px;
  }
}

/* Mobile devices (portrait tablets and large phones, up to 768px) */
@media (max-width: 768px) {
  .navigation-menu {
    display: none;
  }

  .menu-toggle {
    display: flex;
    right: 1rem;
  }
   .info-0,
   .info-1{
     transform: translateY(2.4px);
   }
   .text-0,
   .text-1{
    transform: translateY(3px);
   }
  button {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.95rem;
    transition: none;
    width: 75%;
    margin-bottom: 1.5rem;
  }
  
  /* Hero section */
  .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .hero--image-container {
    margin: 2rem auto;
    width: 300px;
  }
  
  .hero--image {
    width: 300px;
    display: flex;
  }
  
  /* About section */
  .about > h2 {
    font-size: 1.4rem;
    transform: translateX(0);
    text-align: center;
    margin: auto;
  }
  
  .introduction {
    font-size: 1rem;
    margin-bottom: 4rem;
  }
  
  .about--container {
    flex-direction: column;
    gap: 3rem;
  }
  
  .about-content,
  .about--image {
    width: 90%;
    margin: 0 auto;
  }
  
  /* Article section */
  .article-container {
    font-size: 1rem;
  }
  
  .article-container > h3 {
    font-size: 1.2rem;
  }
  
  /* Image section */
  .image img {
    width: 80%; 
  }
  
  /* Social and details */
  .social > a,
  .service-description,
  .details > h3 {
    font-size: 1rem;
  }
  
  .details > p {
    font-size: 0.9rem;
  }
  
  .details {
    transform: translateY(-250px);
  }
  
  /* Service section */
  .service-info {
    font-size: 1rem;
  }
  
  .service-content {
    grid-template-columns: 1fr;
  }
  
  /* Other elements */
  .statement {
    width: 200px;
    display: none;
  }
  .filmography {
    flex-direction: column;
  }
  
  .conclusion-content {
    font-size: 1rem;
  }
  
  /* Menu elements */
  .menu {
    width: 100%;
    right: -100%;
  }
  
  .menu.active {
    right: 0;
  }
  
  .logo {
    justify-content: space-between;
    padding: 1rem;
  }
  
  .btn {
    width: 75%;
  }
  
  /* Footer elements */
  .footer-img {
    height: 50%;
    margin-left: 1.3rem;
    width: fit-content;
  }
  
  .ft-image {
    width: 250px;
    margin-left: 0.2rem;
  }
  
  .footer-container {
    flex-direction: column;
    margin-left: 2rem;
  }
  
  .footer-bottom {
    font-size: 1rem;
  }
  
  .content {
    font-size: 1rem;
  }
  
  /* Service table responsive design */
  .service-table thead {
    display: none;
  }
  
  .service-table tr {
    display: block;
    margin-bottom: 1rem;
    background-color: #111;
    border: 1px solid #333;
  }
  
  .service-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: none;
    border-bottom: 1px solid #444;
    font-size: 0.9rem;
    position: relative;
  }
  
  .service-table td::before {
    content: attr(data-label);
    flex: 1;
    font-weight: bold;
    color: #519191;
    text-align: left;
    padding-right: 1rem;
  }
  
  .service-table td:last-child {
    border-bottom: none;
  }
  
  /* Swiper adjustments */
  .swiper {
    max-width: 500px;
    padding: 1rem 0;
  }
  
  .swiper-slide {
    padding: 1rem;
  }
}

/* Medium devices (tablets, between 769px and 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .navigation-menu {
    margin-left: 20em;
  }
  
  .logo {
    justify-content: space-between;
    padding: 1rem;
  }
  
  button {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.95rem;
    transition: none;
    width: 75%;
    margin-bottom: 1.5rem;
  }
  
  /* Hero section */
  .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .hero--image-container {
    margin: 2rem auto 0;
    width: 300px;
  }
  
  .hero--image {
    width: 300px;
    display: flex;
  }
  
  /* About section */
  .about > h2 {
    font-size: 1.4rem;
    transform: translateX(0);
    text-align: center;
    margin: auto;
  }
  
  .introduction {
    font-size: 1rem;
    margin-bottom: 4rem;
  }
  
  .about--container {
    flex-direction: column;
    gap: 4rem;
  }
  
  .about-content,
  .about--image {
    width: 90%;
    margin: 0 auto;
  }
  
  /* Article section */
  .article-container > h3 {
    font-size: 1rem;
  }
  
  /* Image and conclusion */
  .image img {
    width: 60%;
  }
  
  .conclusion-content {
    font-size: 1rem;
    margin-left: 2rem;
  }
  
  /* Social and footer */
  .social > a {
    font-size: 1rem;
  }
  
  .footer-img {
    height: 50%;
    margin-left: 1.3rem;
  }
  
  .ft-image {
    width: 200px;
    margin-left: 1.5rem;
  }
  
  .footer-container {
    flex-direction: column;
    margin-left: 2rem;
  }
  
  .footer-bottom {
    font-size: 1.2rem;
  }
  
  /* Service table responsive design */
  .service-table thead {
    display: none;
  }
  
  .service-table tr {
    display: block;
    margin-bottom: 1rem;
    background-color: #111;
    border: 1px solid #333;
  }
  
  .service-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: none;
    border-bottom: 1px solid #444;
    font-size: 0.9rem;
    position: relative;
  }
  
  .service-table td::before {
    content: attr(data-label);
    flex: 1;
    font-weight: bold;
    color: #519191;
    text-align: left;
    padding-right: 1rem;
  }
  
  .service-table td:last-child {
    border-bottom: none;
  }
  .service-content{
    transform: translateX(60px);
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Swiper adjustments */
  .swiper {
    max-width: 700px;
    padding: 1.5rem 0;
  }
 
    .ft-image{
    width: 250px ;
     transform : translateX(-10px);
  }
  input{
    margin-top: 1rem;
    width: 100%;
    max-width: 1200px;
  }
  textarea{
    width: 100%;
    max-width: 1200px;
    margin-left: 2.5rem;
  }
}

/* Large devices (desktops, between 1025px and 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .navigation-menu {
    margin-left: 35em;
  }
  
  button {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.95rem;
    transition: none;
    width: 75%;
    margin-bottom: 1.5rem;
  }
  
  .about--container {
    gap: 5rem;
  }
  
  .hero--image-container {
    width: 300px;
    margin-left: 20em;
  }
  
  .hero--image {
    width: 300px;
    display: flex;
  }
  
  .about > h2 {
    font-size: 1.4rem;
  }
  
  .conclusion-content {
    font-size: 1rem;
    margin-left: 2rem;
  }
  
  .social > a {
    font-size: 1rem;
  }
  
  .footer-img {
    height: 50%;
    margin-left: 1.3rem;
  }
  
  .ft-image {
    width: 250px;
     transform: translateX(-1.5px);
     border-radius: 20px;
  }
  
  /* Service table responsive design */
  .service-table thead {
    display: none;
  }
  
  .service-table tr {
    display: block;
    margin-bottom: 1rem;
    background-color: #111;
    border: 1px solid #333;
  }
  
  .service-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: none;
    border-bottom: 1px solid #444;
    font-size: 0.9rem;
    position: relative;
  }
  
  .service-table td::before {
    content: attr(data-label);
    flex: 1;
    font-weight: bold;
    color: #519191;
    text-align: left;
    padding-right: 1rem;
  }
  
  .service-table td:last-child {
    border-bottom: none;
  }
}

/* Medium tablets and desktops (max-width: 992px) */
@media (max-width: 992px) {
  fieldset {
    flex-direction: column;
     transform : translateX(20px);
  }
  
  .Contact-info > h3,
  .Contact-info > pre {
    margin-left: 0;
    transform: translateY(0);
    text-align: center;
    padding: 0 1rem;
  }
  

  input{
    width: 40%;
    max-width: 90%;
  }
  textarea{
    width: 80%;
    max-width: 90%;
    transform: translateX(15px);
  }
  .submit-container {
    text-align: center;
  }
  
  .submit-button {
    width: 15%;
    max-width: 300px;
    font-size: 1rem;
    transform : translateX(30px);
  }
}