/* Responsive Styles for HydraFacial Page */

/* Base Styles */
body {
    overflow-x: hidden;
}

/* Page Header */
.page-header {
    padding: 100px 0 60px !important;
}

.page-header h1 {
    font-size: 2.5rem !important;
    margin-bottom: 15px !important;
}

.page-header p {
    font-size: 1rem !important;
    max-width: 100% !important;
    padding: 0 15px;
}

/* Service Content */
.service-detail {
    padding: 100px 0 !important;
}

.service-content {
    padding: 20px !important;
}

/* Benefits Section */
.benefits {
    margin: 30px 0 !important;
    padding: 20px 0 !important;
}

.benefits > div > div {
    padding: 20px !important;
    min-width: 100% !important;
}

.benefits img {
    height: 350px !important;
    margin-top: 20px;
}

/* Process Section */
.process {
    margin: 40px 0 30px !important;
}

.process h2 {
    font-size: 24px !important;
    padding: 0 15px 10px !important;
}

.process-carousel-container {
    padding: 0 15px !important;
}

.process-step {
    padding: 10px !important;
}

/* Benefits Grid */
[style*="background:#f8f9fa"] {
    padding: 25px 15px !important;
    margin: 25px 0 !important;
}

[style*="background:#f8f9fa"] h3,
[style*="background:linear-gradient(135deg, #f9f5eb"] h3,
[style*="background:linear-gradient(135deg, #054d35"] h3 {
    font-size: 24px !important;
    padding: 0 15px 15px !important;
    margin-bottom: 20px !important;
}

/* Who Is It For Section */
[style*="background:linear-gradient(135deg, #f9f5eb"] {
    padding: 30px 15px !important;
    margin: 40px 0 !important;
}

/* Why Kamya Section */
[style*="background:linear-gradient(135deg, #054d35"] {
    padding: 30px 15px !important;
    margin: 40px 0 !important;
}

/* CTA Section */
[style*="text-align:center; margin:60px 0 10px;"] {
    padding: 0 15px;
}

[style*="text-align:center; margin:60px 0 10px;"] h2 {
    font-size: 26px !important;
}

/* Buttons */
.btn, .btn-outline {
    display: block !important;
    width: 100%;
    margin: 10px 0 !important;
    padding: 12px 20px !important;
}

/* Owl Carousel Adjustments */
.owl-nav {
    display: none !important;
}

/* Media Queries */
@media (min-width: 576px) {
    .page-header h1 {
        font-size: 2.8rem !important;
    }
    
    .btn, .btn-outline {
        display: inline-block !important;
        width: auto;
        margin: 10px !important;
    }
        .benefits > div > div::nth-child(2){
      padding: 25px!important;
    }
}

@media (min-width: 768px) {
    .page-header {
        padding: 120px 0 80px !important;
    }
    
    .page-header h1 {
        font-size: 3rem !important;
    }
    
    .page-header p {
        font-size: 1.15rem !important;
        max-width: 980px !important;
    }
    
    .service-content {
        padding: 40px !important;
    }
    
    .benefits > div > div {
        min-width: 50% !important;
        padding: 40px 30px 40px 50px !important;
    }
    
    .benefits img {
        margin-top: 0;
    }
    
    [style*="background:#f8f9fa"],
    [style*="background:linear-gradient(135deg, #f9f5eb"],
    [style*="background:linear-gradient(135deg, #054d35"] {
        padding: 40px !important;
        margin: 40px 0 !important;
    }
    
    .owl-nav {
        display: flex !important;
    }
    .benefits > div > div::nth-child(2){
      padding: 25px!important;
    }
}

/* Grid adjustments */
[style*="grid-template-columns:repeat(auto-fit, minmax(250px,1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
}

@media (min-width: 576px) {
    [style*="grid-template-columns:repeat(auto-fit, minmax(250px,1fc))"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 992px) {
    [style*="grid-template-columns:repeat(auto-fit, minmax(250px,1fr))"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}