@charset "utf-8";

        .hero {
            height: 600px;
            display: flex;
            justify-content: center; 
            align-items: center; 
            padding: 0 20px; 
            color: white;
            position: relative;
            overflow: hidden;
            background-color: #000; 
        }

        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 1000px;
            text-align: center; 
        }

        .hero-content h1 {
            font-family: 'Lora', serif;
            font-weight: 700;
            font-style: italic;
            font-size: clamp(2.2rem, 5vw, 3.5rem);
            line-height: 1.2;
            margin-bottom: 75px;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
            text-transform: capitalize;
        }

        .hero-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .slide.active { opacity: 1; }

        .slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
        }

        .hero-wave {
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            line-height: 0;
            z-index: 5;
        }

        .hero-wave svg {
            display: block;
            width: 100%;
            height: 270px; 
            fill: #e3e3db;
        }

        .services-detail-container {
            padding: 30px 0;
        }

        .service-row {
            display: flex;
            align-items: center;
            max-width: 1550px;
            margin: 0 auto 100px auto;
            gap: 0;
            opacity: 0;
            transform: translateY(50px);
            transition: 0.8s all ease;
        }

        .service-row.reveal-active { opacity: 1; transform: translateY(0); }
        .service-row.reverse { flex-direction: row-reverse; }

        .service-img { flex: 1.2; position: relative; }
        .service-img img { width: 100%; display: block; box-shadow: 10px 10px 30px rgba(0,0,0,0.1); }

        .service-text {
            flex: 1;
            background: rgba(227, 227, 219, 1); 
            padding: 50px;
            z-index: 2;
            margin-left: -60px; 
            box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
            text-align: center; 
            backdrop-filter: blur(5px);
        }

        .reverse .service-text { margin-left: 0; margin-right: -60px; }

        .service-text h2 { 
            font-family: 'Lora', serif; 
            font-weight: 700;
            font-style: italic;
            font-size: 38px; 
            line-height: 1.1;
            margin-bottom: 25px;
            display: flex;
            flex-direction: column;
            margin-left: -140px;
        }

        .line-1, .line-1a, .line-2, .line-2a, .line-3, .line-3a, .line-4, .line-4a, .line-5, .line-5a, .line-6, .line-6a {
            font-family: 'Lora', serif; font-weight: 700; font-style: italic;
        }

        .line-1 { padding-right: 20px; }
        .line-1a { padding-left: 220px; }
        .line-2 { padding-right: 50px; }
        .line-2a { padding-left: 160px; }
        .line-3 { padding-right: 5px; }
        .line-3a { padding-left: 320px; }
        .line-4 { padding-right: 50px; }
        .line-4a { padding-left: 280px; }
        .line-5 { padding-right: 80px; }
        .line-5a { padding-left: 260px; }
        .line-6 { padding-right: 110px; }
        .line-6a { padding-left: 200px; }

        #deep .line-2 { padding-left: 120px; }
        #office .line-2 { padding-left: 40px; }
        #glass .line-2 { padding-left: 60px; font-size: 2.2rem; }

        .service-text p { 
            font-family: 'Alegreya', serif;
            font-weight: 400;
            line-height: 1.6; 
            font-size: 19px; 
            color: black;
        }
        
        .extra-section { 
            text-align: center; 
            padding-bottom: 80px; 
        }
        
        .extra-section h2 { 
            font-family: 'Lora', serif; 
            font-weight: 700;
            font-style: italic; 
            font-size: 2.5rem; 
            margin-bottom: 30px; 
        }

        .ba-container {
            position: relative;
            width: 90%;
            max-width: 800px;
            height: 500px;
            margin: 0 auto 60px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            border-radius: 8px;
            cursor: ew-resize;
        }

        .ba-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
        }

        .ba-before {
            position: absolute; 
            top: 0;             
            left: 0;            
            z-index: 1;         
            width: 50%;         
            height: 100%;
            overflow: hidden; 
        }

        .ba-before img {
            width: 800px; 
            height: 500px; 
            object-fit: cover;
        }

        .ba-slider-handle {
            position: absolute;
            z-index: 2;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 4px;
            background: white;
            cursor: ew-resize;
            transform: translateX(-50%);
        }

        .ba-slider-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            font-size: 18px;
            color: #333;
        }

        .hygiene-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .flip-card {
            background-color: transparent;
            height: 450px;
            perspective: 1000px;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }

        .hygiene-front, .hygiene-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            border-radius: 4px;
        }

        .hygiene-front {
            background-color: #0f172a;
            color: white;
            font-family: 'Gentium Plus', serif;
            font-weight: 700;
            font-style: italic;
            font-size: 29px;
        }

        .hygiene-back {
            background-color: #36168F;
            color: white;
            transform: rotateY(180deg);
            flex-direction: column;
        }

        .hygiene-back p {
            font-family: 'Alegreya', serif;
            font-weight: 400;
            font-size: 1.2rem;
            line-height: 1.5;
        }

        .cta-btn {
            display: inline-block;
            margin-top: 40px;
            background: #36168F;
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease;
            font-family: 'Lora', serif;
            font-weight: 700;
            font-style: italic;
            border: 1px solid transparent; 
        }

        .cta-btn:hover {
            color:#36168F; background-color: #E3E3DB; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
        }

        @media (max-width: 768px) {
            .service-row, .service-row.reverse { flex-direction: column; text-align: center; margin-bottom: 50px; }
            .service-text { margin: -40px 20px 0 20px !important; padding: 30px; }
            .service-text h2 { margin-left: 0; font-size: 28px; }
            .hygiene-grid { grid-template-columns: 1fr; padding: 0 20px; }
            .ba-container { height: 350px; }
        }
        
        .amp-highlight {
            color: #CF1111;
            font-family: 'Lora', serif;
            font-size: 60px;
            font-weight: 700;
            font-style: italic;
            display: inline-block;
            padding: 0 5px;
            vertical-align: middle;
            line-height: 0;
        }



@media (max-width: 1024px) {
    .service-row { max-width: 90%; }
    
    .service-text h2 { margin-left: 0 !important; text-align: center; }
    .line-1, .line-1a, .line-2, .line-2a, .line-3, .line-3a, 
    .line-4, .line-4a, .line-5, .line-5a, .line-6, .line-6a {
        padding: 0 !important;
        display: block;
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .hero { height: 400px; }
    .hero-wave svg { height: 100px; }
    
    .service-row, .service-row.reverse { 
        flex-direction: column !important; 
        margin-bottom: 60px;
    }
    
    .service-text { 
        margin: -40px 15px 0 15px !important; 
        padding: 30px 20px; 
        width: auto;
    }

    .service-text p { font-size: 16px; }

    .ba-container { height: 300px; width: 95%; }
    .ba-before img { height: 300px; width: 100vw; }

    .hygiene-grid { 
        grid-template-columns: 1fr; 
        padding: 0 20px; 
        gap: 30px; 
    }
    
    .flip-card { height: 350px; }
    
    .amp-highlight { font-size: 40px; }
}