/* ======== RESPONSIVE FIXES FOR LAURA HALI VE KOLTUK YIKAMA ======== */

/* General responsive fixes for all sections */
@media (max-width: 768px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  .heading-text {
    margin-bottom: 20px;
  }
  
  .heading-text h2 {
    font-size: 24px;
  }
  
  .lead {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* ======== PORTFOLIO SECTION (TEMİZLEDİĞİMİZ ALANLAR) ======== */
/* ======== PORTFOLIO GRID MOBILE FIX ======== */
@media (max-width: 768px) {
  /* Fix for grid layout on mobile */
  .grid-layout.portfolio-3-columns {
    display: grid !important; /* Override any display: block that might be set */
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on tablets */
    gap: 10px !important; /* Reduce gap between items */
    margin: 0 !important;
  }
  
  /* Fix for portfolio items */
  .portfolio-item {
    margin: 0 !important; /* Remove margins completely */
    padding: 0 !important;
  }
  
  .portfolio-item-wrap {
    margin-bottom: 10px !important; /* Small margin at bottom only */
  }
  
  /* Make images uniform height */
  .portfolio-image {
    height: 150px !important; /* Fixed height for all portfolio images */
    overflow: hidden !important;
  }
  
  .portfolio-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Container adjustments */
  .portfolio .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
  }
}

/* Small mobile screens */
@media (max-width: 576px) {
  /* Switch to a tighter layout */
  .grid-layout.portfolio-3-columns {
    grid-template-columns: repeat(2, 1fr) !important; /* Keep 2 columns but tighter */
    gap: 5px !important; /* Even smaller gap */
  }
  
  /* Smaller image height on phones */
  .portfolio-image {
    height: 120px !important;
  }
  
  /* Adjust container padding */
  .portfolio .container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  
  /* Reduce section padding */
  #portfolio {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  
  /* Reduce heading spacing */
  #portfolio .heading-text {
    margin-bottom: 15px !important;
  }
}

/* Extra small screens */
@media (max-width: 375px) {
  .portfolio-image {
    height: 100px !important; /* Even smaller for tiny screens */
  }
}

/* ======== SERVICES SECTION (HİZMETLERİMİZ) ======== */
/* Tablet view */
@media (max-width: 992px) and (min-width: 769px) {
  .col-lg-4 {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    margin-bottom: 30px; /* Increased spacing between rows */
    padding: 0 10px; /* Better side padding */
  }
  
  .service-image {
    height: 180px; /* Slightly smaller height on tablets */
  }
}

/* Mobile view */
@media (max-width: 768px) {
  .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 25px;
    padding: 0 15px; /* More padding on mobile */
  }
  
  .service-card {
    max-width: 450px; /* Limit width on mobile */
    margin: 0 auto 25px auto; /* Center cards and add bottom margin */
  }
  
  .service-image {
    height: 200px; /* Controlled image height */
  }
  
  .service-image img {
    object-position: center; /* Center the image focus */
  }
  
  /* Reduce the hover animation on mobile */
  .service-card:hover {
    transform: translateY(-5px);
  }
}

/* ======== HAKKIMIZDA SECTION FIX ======== */
@media (max-width: 768px) {
  /* Fix for background images in About Us section */
  .image-block .col-lg-6[style*="height:500px"] {
    height: 250px !important; /* Reduced height on mobile */
    background-size: cover !important;
    background-position: center center !important;
    width: 100% !important; /* Ensure full width */
    margin: 0 !important; /* Remove margins */
    padding: 0 !important; /* Remove padding */
  }
  
  /* Structure changes for better mobile layout */
  .image-block .container-fluid {
    padding: 0 !important; /* Remove container padding */
  }
  
  .image-block .row {
    margin: 0 !important; /* Remove row margin */
    display: flex;
    flex-direction: column; /* Stack vertically */
  }
  
  /* Put image first, then text for first section */
  #about-us .row {
    flex-direction: column-reverse;
  }
  
  /* Fix for text sections */
  .image-block .col-lg-6:not([style*="height:500px"]) {
    padding: 15px !important;
  }
  
  /* Reduce padding in text sections */
  .heading-text.heading-section {
    padding: 15px !important;
  }
  
  /* Reduce font sizes */
  .heading-text h2 {
    font-size: 22px !important;
    margin-bottom: 15px !important;
  }
  
  .lead {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  
  /* Adjust list spacing */
  .list-icon li {
    margin-bottom: 8px !important;
    font-size: 14px !important;
  }
}

/* Extra adjustments for very small screens */
@media (max-width: 576px) {
  .image-block .col-lg-6[style*="height:500px"] {
    height: 280px !important; /* Even shorter on small screens */
  }
  
  .heading-text.heading-section {
    padding: 10px !important;
  }
  
  .heading-text h2 {
    font-size: 20px !important;
  }
  
  .lead {
    font-size: 14px !important;
  }
}

/* ======== SPECIFIC FIX FOR IMAGES TOO CLOSE TOGETHER ======== */
@media (max-width: 576px) {
  /* For service cards */
  .service-card {
    margin-bottom: 30px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* For portfolio items */
  .portfolio-item {
    margin-bottom: 30px !important;
  }
  
  /* Control image aspect ratios */
  .service-image, 
  .portfolio-image {
    position: relative;
    padding-top: 66%; /* 2:3 aspect ratio */
    overflow: hidden;
    height: auto !important;
  }
  
  .service-image img, 
  .portfolio-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Fix for grid layout on small screens */
  .grid-layout {
    display: block !important; /* Override grid display */
  }
  
  /* Additional spacing around sections */
  section {
    padding: 30px 0 !important;
  }
  
  /* Ensure proper spacing between stacked elements */
  .portfolio-item-wrap,
  .service-card {
    margin-bottom: 25px !important;
  }
}

/* ======== ADDITIONAL FIXES FOR VERY SMALL SCREENS ======== */
@media (max-width: 375px) {
  .service-image {
    height: 180px !important;
  }
  
  .portfolio-image img {
    max-height: 180px !important;
  }
  
  .heading-text h2 {
    font-size: 22px;
  }
  
  .lead {
    font-size: 14px;
  }
  
  .service-content h3 {
    font-size: 18px;
  }
  
  .service-content p {
    font-size: 14px;
  }
}

/* ======== FIX FOR SERVICE CARDS LAYOUT ======== */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-content p {
  flex: 1;
  margin-bottom: 15px;
}
/* ======== PARALLAX CONTAINER FIX ======== */
@media (max-width: 768px) {
  /* Fix for parallax container */
  .parallax-container {
    height: 40vh !important; /* Lower height to fit screen better */
    min-height: 250px !important; /* Reduced minimum height */
    max-height: 350px !important; /* Lower maximum height to ensure fitting */
    background-attachment: scroll !important; /* Disable parallax effect on mobile */
    background-position: center center !important;
    background-size: cover !important;
    margin: 0 !important; /* Remove any margins */
    padding: 0 !important; /* Remove any padding */
    width: 100% !important; /* Ensure full width */
    overflow: hidden !important; /* Prevent any overflow */
  }
  
  /* Reset any parallax movement on mobile */
  .parallax-container[style*="background"] {
    transform: none !important; /* Remove any transform */
    background-position: center center !important; /* Force center position */
    left: 0 !important; /* Ensure no horizontal offset */
    right: 0 !important;
  }
  
  /* For fullscreen section containing parallax */
  section.fullscreen {
    height: auto !important;
    min-height: 250px !important;
    max-height: 40vh !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
}

/* Smaller screens need even more compact sizing */
@media (max-width: 576px) {
  .parallax-container {
    height: 30vh !important; /* Further reduced for very small screens */
    min-height: 200px !important;
    max-height: 250px !important;
  }
  
  section.fullscreen {
    min-height: 200px !important;
    max-height: 30vh !important;
  }
}

/* Extra small screens (older phones) */
@media (max-width: 375px) {
  .parallax-container {
    height: 25vh !important; /* Smallest height for tiny screens */
    min-height: 180px !important;
    max-height: 200px !important;
  }
  
  section.fullscreen {
    min-height: 180px !important;
    max-height: 25vh !important;
  }
}