/* 
  © 2025 RR Group. All Rights Reserved.
  This website, including its design, content, and code, is developed and maintained by
  VIHAN IT PROFESSIONALS (https://vihanitprofessionals.com).

  Unauthorized copying, reproduction, redistribution, or use of any part of this website
  without express written permission is strictly prohibited and may result in legal action 
  under applicable intellectual property laws.

  If you believe this work has been copied or misused in any way, please contact us immediately.

 */
/* General Styles */
* {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 50px 0;
    text-align: center;
}

.services-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Section Title */
.section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 15px;

}

.section-description {
    font-size: 1rem;
    color: #555;
    /* max-width: 800px; */
    margin: auto;
    line-height: 1.6;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    padding: 20px 0;
}

/* Service Card */
.service-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: left;
    border-left: 6px solid #3498db;
    transition: all 0.5s ease-in-out;
    position: relative;
    overflow: hidden;
    height: 350px;
    margin-top: 20px;
}

.service-card:hover {
    border-left: 6px solid #2c3e50;
}

/* Add styles for images */
.service-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-right: 6px solid #2c3e50;
}

.service-image:hover {
    border-right: 6px solid #3498db;

}

.service-card h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.service-card p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.5;
}

.service-card ul {
    list-style: none;
    padding-left: 0;
}

.service-card ul li {
    font-size: 0.95rem;
    color: #444;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.pmList ul li {
    font-size: 0.95rem;
    color: #444;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.service-card ul li:last-child {
    border-bottom: none;
}

.full-width {
    width: 100%;
    height: 600px;
}

.pmList {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

/* Initially Hidden Content */
.service-description,
.service-card ul {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-in-out, transform 1s ease-in-out;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}


/* Initially Hidden Content */
.service-description,
.service-card ul {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-in-out, transform 1s ease-in-out;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* Adjust height smoothly when active */
.service-card:hover {
    height: 520px;
    /* Similar to .full-width */
    transition: height 1s ease-in-out;
}

/* Transition for description and list in service-card */
.service-card .service-description,
.service-card:hover ul {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    height: auto;
    transition: opacity 1s ease-in-out, transform 0.5s ease-in-out, visibility 0s linear;
}

/* Scale effect on image */
.service-card.active .service-image {
    transform: scale(1.0);
    transition: transform 1s ease-in-out;
}

/* Border effect when clicked */
.service-card:active {
    /* border-right: 6px solid #3498db; */
    transition: border 1s ease-in-out;
}

/* Full-width section effects */
.full-width.active .service-image {
    transform: scale(1.0);
    transition: transform 1s ease-in-out;
}

/* Adjust height smoothly when active */
.full-width:first-child:hover {
    height: 850px;
    transition: height 1s ease-in-out;
}

/* Transition for description and list in full-width */
.full-width.active .service-description,
.full-width.active ul {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    height: auto;
    transition: opacity 1s ease-in-out, transform 0.5s ease-in-out, visibility 0s linear;
}

/* Border effect when clicked */
.service-image:active {
    border-right: 6px solid #3498db;
    transition: border 1s ease-in-out;
}

.service-card:hover .service-image {
    border-right: 6px solid #3498db;

}

.full-width:active {
    /* border-right: 6px solid #3498db; */
    transition: border 1s ease-in-out;
}

/* Final Note */
.final-note {
    font-size: 1.2rem;
    color: #00977a;
    line-height: 1.8;
    font-weight: 600;
    margin-top: 40px;
    padding: 20px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 991px) {
    .container {
        padding: 20px;
    }

    .section-title {
        font-size: 2rem;
    }

    /* .section-description {
        font-size: 0.9rem;
    } */

    .full-width {
        height: 620px;
    }

    .service-card h2 {
        font-size: 1.3rem;
    }

    .service-card p,
    .service-card ul li {
        font-size: 0.95rem;
    }
}