/* ===== GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== FULL PAGE BACKGROUND ===== */
/* Background color fills entire screen width */
html {
    background-color: #f1f4f5;
    scroll-behavior: smooth;
}

body.services-page {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    background-color: #f1f4f5;
}

/* ===== MAIN CONTENT CONTAINER ===== */
/* Limits content width to 1200px while background remains full width */
.services-main-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== MAIN CONTENT AREA ===== */
/* Ensures content fills available space */
.services-main-content {
    flex: 1;
    width: 100%;
}

/* ===== PAGE TITLE STYLES ===== */
.services-page-title {
    font-family: 'Inter', sans-serif;
    text-align: center;
    margin: 80px 0 60px 0;
    font-weight: 700;
    color: black;
    font-size: 2.5rem;
    padding: 0 20px;
}

/* ===== SERVICES GRID CONTAINER ===== */
.services-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    gap: 20px 25px; /* Row and column spacing */
    padding: 0 20px 50px 20px; /* Top, Right, Bottom, Left */
    width: 100%;
    box-sizing: border-box; /* Ensure padding is included in max-width calculation */
}

/* ===== INDIVIDUAL SERVICE ITEM ===== */
/* Container for each service (image + text) */
.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%; /* Ensure items don't exceed container width */
    margin-bottom: 20px;
}

/* ===== SCROLL ANIMATION EFFECTS ===== */
/* Fade-in animation on scroll */
.services-fade-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.services-fade-animation.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== SERVICE IMAGE STYLING ===== */
/* Container for service images with centered display */
.service-image-container {
    width: 100%;
    max-width: 100%; /* Ensure images don't exceed container width */
    height: 250px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f1f4f5;
    /* Center the image and maintain full display */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover effect for service images */
.service-image-container:hover {
    transform: translateY(-5px);
}

/* Image styling to maintain original size and full display */
.service-image-container img {
    width: auto; /* Maintain original width */
    height: auto; /* Maintain original height */
    max-width: 100%; /* Prevent overflow beyond container width */
    max-height: 100%; /* Prevent overflow beyond container height */
    object-fit: contain; /* Show complete image without cropping */
    display: block;
}

/* ===== SERVICE TEXT STYLING ===== */
.service-description {
    font-family: 'Inter', sans-serif;
    text-align: center;
    padding: 8px 10px 5px 10px;
    font-weight: 400;
    color: black;
    font-size: 1.1rem;
    line-height: 1.4;
    min-height: 50px; /* Ensures consistent height for text blocks */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    max-width: 100%; /* Ensure text doesn't exceed container width */
}

/* ===== LANDSCAPE MODE FIXES ===== */
/* Fix image distortion in landscape orientation on mobile devices */
@media (orientation: landscape) and (max-width: 1024px) {
    .service-image-container {
        height: auto;
        min-height: 200px;
        max-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .service-image-container img {
        object-fit: contain; /* Show full image without cropping */
        width: auto;
        max-width: 95%; /* Add small margin on sides */
        height: auto;
        max-height: 95%;
    }
    
    /* Additional optimization for small height landscape screens */
    @media (max-height: 500px) {
        .service-image-container {
            min-height: 160px;
            max-height: 200px;
        }
    }
    
    /* Optimization for mobile landscape with very small width */
    @media (max-width: 700px) and (orientation: landscape) {
        .services-grid-container {
            gap: 25px 20px;
        }
        
        .service-image-container {
            min-height: 180px;
            max-height: 220px;
        }
        
        .service-description {
            font-size: 1rem;
            min-height: 50px;
        }
    }
}

/* Desktop landscape - maintain full image display */
@media (orientation: landscape) and (min-width: 1025px) {
    .service-image-container img {
        object-fit: contain; /* Maintain full image display on desktop landscape */
    }
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet Devices (768px - 1024px) */
@media (max-width: 1024px) {
    .services-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
        gap: 20px 20px;
        padding: 0 20px 50px 20px;
    }
    
    .services-page-title {
        font-size: 2.2rem;
        margin: 60px 0 50px 0;
    }
    
    .service-image-container {
        height: 220px;
    }
    
    .service-description {
        font-size: 1rem;
        padding: 6px 10px 4px 10px;
        min-height: 45px;
        margin-top: 0;
    }
}

/* Mobile Devices (less than 768px) */
@media (max-width: 767px) {
    .services-grid-container {
        grid-template-columns: 1fr; /* 1 column on mobile */
        gap: 30px;
        padding: 0 15px 70px 15px;
        max-width: 100%; /* Ensure container doesn't exceed parent */
    }
    
    .services-page-title {
        font-size: 1.8rem;
        margin: 40px 0 100px 0;
        padding: 0 15px;
    }
    
    .service-image-container {
        height: 200px;
        max-width: 100%; /* Full width within container */
    }
    
    .service-description {
        font-size: 1rem;
        padding: 12px 10px;
        min-height: 50px;
        max-width: 100%; /* Full width within container */
        margin-top: 0;
    }
}

/* Small Mobile Devices (less than 480px) */
@media (max-width: 480px) {
    .services-grid-container {
        gap: 25px;
        padding: 0 15px 35px 15px;
    }
    
    .services-page-title {
        font-size: 1.6rem;
        margin: 30px 0 30px 0;
        padding: 0 15px;
    }
    
    .service-image-container {
        height: 180px;
    }
    
    .service-description {
        font-size: 0.95rem;
        padding: 10px 8px;
        min-height: 45px;
        margin-top: 0;
    }
}

/* Extra Large Screens (more than 1200px) */
@media (min-width: 1201px) {
    .services-main-container {
        /* Container already has max-width: 1200px */
    }
    
    /* Calculate exact max-width for grid items to fit 3 columns within 1200px */
    .services-grid-container {
        /* 1200px total width - 40px padding (20px left + 20px right) = 1160px */
        /* 1160px / 3 columns = 386.67px per column */
        /* Gap between columns: 30px between each, so 2 gaps = 60px */
        /* 1160px - 60px = 1100px / 3 = 366.67px per item */
    }
    
    .service-image-container {
        /* Ensure images respect the calculated grid column width */
        max-width: 366px; /* Approximate max width for 3 columns at 1200px */
    }
}

/* Additional safety measures to ensure 1200px limit */
@media (min-width: 1200px) {
    .services-grid-container {
        /* Force exact calculation for 1200px */
        max-width: 1200px;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===== ENHANCED RESPONSIVE DESIGN ADDITIONS ===== */

/* Medium Tablets (600px - 767px) */
@media (max-width: 767px) and (min-width: 600px) {
    .service-image-container {
        height: 220px; /* Slightly larger for medium tablets */
    }
    
    .service-description {
        font-size: 1.05rem;
    }
}

/* Large Mobile (480px - 599px) */
@media (max-width: 599px) and (min-width: 481px) {
    .service-image-container {
        height: 190px;
    }
}

/* Ultra Small Mobile (less than 360px) */
@media (max-width: 359px) {
    .services-grid-container {
        padding: 0 10px 30px 10px;
        gap: 20px;
    }
    
    .services-page-title {
        font-size: 1.4rem;
        margin: 20px 0 15px 0;
        padding: 0 10px;
    }
    
    .service-image-container {
        height: 160px;
    }
    
    .service-description {
        font-size: 0.9rem;
        padding: 8px 6px;
        min-height: 40px;
    }
}

/* Large Desktop Screens (more than 1400px) */
@media (min-width: 1400px) {
    .services-main-container {
        max-width: 1200px; /* Keep original max-width */
    }
}

/* Print Styles */
@media print {
    .service-image-container {
        height: 180px;
        break-inside: avoid;
    }
    
    .service-image-container img {
        object-fit: contain; /* Maintain full image display for printing */
    }
    
    .services-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .service-image-container:hover {
        transform: none;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .services-fade-animation {
        transition: none;
    }
    
    .service-image-container {
        transition: none;
    }
    
    .service-image-container:hover {
        transform: none;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .service-description {
        font-weight: 500;
    }
}

/* Dark Mode Support (maintain original color scheme) */
@media (prefers-color-scheme: dark) {
    /* Keep original colors but ensure readability */
    body.services-page {
        background-color: #f1f4f5; /* Keep original color */
    }
    
    .service-description {
        color: black; /* Keep original color */
    }
    
    .services-page-title {
        color: black; /* Keep original color */
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .service-image-container:hover {
        transform: none; /* Disable hover effects on touch devices */
    }
    
    .service-image-container {
        transition: transform 0.2s ease; /* Faster transition for touch */
    }
}

/* Very Tall Screens (Height optimization) */
@media (min-height: 1000px) and (max-width: 1024px) {
    .services-page-title {
        margin: 60px 0 45px 0;
    }
    
    .service-image-container {
        height: 250px;
    }
}

/* Short Screens (Height optimization) */
@media (max-height: 600px) and (orientation: landscape) {
    .services-page-title {
        margin: 20px 0 15px 0;
        font-size: 1.8rem;
    }
    
    .services-grid-container {
        padding-bottom: 20px;
    }
    
    .service-image-container {
        min-height: 150px;
        max-height: 180px;
    }
}

/* Additional image display optimization for all devices */
@media (max-width: 1024px) {
    .service-image-container img {
        object-fit: contain; /* Ensure full image display on all mobile/tablet devices */
    }
}