/* 

  © 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 Reset  
|||||||||||||||||||||||||||||||||||||||||||||||||||| */

@import url('https://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
    padding: 0;
    margin: 0;
    /* box-sizing: border-box; */

}

body {
    font-family: 'Raleway', sans-serif;
}


section {
    padding-top: 100px; /* Add some extra padding if needed */
    /* box-shadow: 0 0 15px rgba(124, 0, 115, 0.983); */
}



/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 
                 Spinner Styles  
|||||||||||||||||||||||||||||||||||||||||||||||||||| */

.spinner-overlay {
    display: none; /* Hidden by default, toggle visibility with JavaScript */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 
                    Header Styles
|||||||||||||||||||||||||||||||||||||||||||||||||||| */

#wel {
    margin-top: 100px;
    font-size: 50px;
    padding-left: 15%;
    font-family: 'Oleo Script Swash Caps', cursive;
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 20px 0;
    flex-direction: column;
    width: 100%;
}

.header-content {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-content {
    padding: 10px;
    /* width: 100%; */
    /* text-align: center; */
}

.text-content h3 {
    margin: 15px 0;
    line-height: 40px;
    text-align: justify;
}


/* General Carousel Styles */
.carousel {
    width: 98vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.carousel-images {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
}

.carousel-item {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    position: relative;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s ease, transform 1s ease;
}

/* Ensure images cover the screen properly */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: imageZoom 5s linear infinite alternate;
}

/* Text Overlay */
.carousel-text {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    max-width: 800px;
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
    background-color: #ffc10773;
}

.carousel-text:hover {
    background-color: #ffffff;
}

/* Title */
.carousel-text h1 {
    color: #1a1d23;
    font-size: 2.5rem;
    font-weight: bold;
    opacity: 0;
    margin: 20px;
    padding: 0;
    line-height: 1.2;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards 0.5s;
}

/* Description */
.carousel-text p {
    color: #032b44;
    font-size: 1.2rem;
    font-weight: 800;
    opacity: 0;
    margin-bottom: 20px;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards 1s;
}

/* Contact Button (Only on Last Slide) */
.carousel-text .contact-btn {
    display: none;
    margin: 20px 0px;
    padding: 12px 24px;
    background-color: #ff6600;
    color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.carousel-text .contact-btn:hover {
    background-color: #e55d00;
}

/* Show text when active */
.carousel-item.active {
    opacity: 1;
    transform: scale(1);
}

.carousel-item.active .carousel-text {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* Show button only on last slide */
.carousel-item:last-child .contact-btn {
    display: inline-block;
}

/* Keyframe Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes imageZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.25);
    }
}

/* Dots Navigation */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background: #bbb;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: #ffc107;
}

.dot.hover {
    background: #8bc34a;
}



/* Pause animation on hover */
/* .carousel-images: {
    animation-play-state: paused;
} */

/* General Styles */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90%;
    /* max-width: 1300px; */
    margin: auto;
    padding: 20px;
    text-align: justify;
}

.container p {
    font-size: 1.2rem;
    color: #00977a;
    line-height: 1.8;
}

/* Introduction Section */
#introduction {
    text-align: center;
    padding: 50px 20px;
    overflow-x: hidden;
    line-height: 30px;
}

.section-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #964b00;
    font-weight: bold;
    margin-bottom: 30px;
    /* max-width: 800px;
    margin: 0 auto 40px; */
}

/* Cards Container */
.cards-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Info Boxes */
.info-box {
    width: 100%;
    /* max-width: 750px; */
    max-width: 85%;
    padding: 20px;
    border-radius: 10px;
    opacity: 0;
    position: relative;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* Alternating Colors */
.info-box:nth-child(odd) {
    margin-right: 10%;
    color: #ffc107;
    background-color: #032b44;
    transform: translateX(-100%); /* Start off-screen on the left */
}
.info-box:nth-child(even) {
    margin-left: 10%;
    background-color: #FFA07A;
    transform: translateX(100%); /* Start off-screen on the right */
}

.info-box h3 {
    font-size: 1.5rem;
    /* color: #032b44; */
}

.info-box p {
    font-size: 1rem;
    /* color: ; */
    letter-spacing: 3px;
}

/* Active Animation */
.info-box.active {
    opacity: 1;
    transform: translateX(0); /* Moves into position */
}

@media screen and (max-width: 991px) {
        
    .info-box h3 {
        font-size: 1.3rem;
    }

    .info-box p {
        font-size: 1rem;
    }

}




/* Key Services Section */
#key-services {
    background: linear-gradient(45deg, #ff7eb3, #ff758c, #ff7e67, #ffbf47, #6a0572);
    padding: 40px 20px;
    border-radius: 15px;
    margin: 30px 0px;
}

.service-item {
    padding: 10px;
}



#key-services-title {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: left;
}

.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particles-container div {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.7;
    animation: moveParticles linear infinite;
}



@keyframes moveParticles {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-30px) translateX(20px);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-60px) translateX(-20px);
        opacity: 0;
    }
}


.service-item:hover {
    transform: translateY(-8px);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.service-item h3 {
    color: #333333;
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.service-item p {
    color: #808080;
    font-size: 1.1rem;
}


.service-btn {
    padding: 20px;
    border-radius: 20%;
    color: #ffc107;
    background-color: #1a1d23;
    font-weight: bolder;
    margin: 20px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Highlights */

.highlights {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    transition: 0.25s;
    color: white;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
  }

  .heading {
    font-size: 32px;
    font-weight: bold;
    color: #1e3c72;
    text-align: center; /* Optional */
    margin-bottom: 20px;
    margin-top: -50px;
    flex-basis: 100%;
}

  .credit {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: inherit;
  }
  
  .options {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    min-width: 600px;
    max-width: 900px;
    width: calc(100% - 100px);
    height: 400px;
  }

  .sub-box {
    display: none;
    width: 90%; /* Match the width of the option but keep a little padding */
    max-width: 500px; /* Prevent it from being too wide */
    background-color: #ffc107;
    color: #1a1d23;
    padding: 10px;
    border-radius: 10px;
    margin: 8px auto 0; /* Center below the card */
    text-align: center;
    transition: all 0.3s ease-in-out;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.sub-box.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

/* Smooth Fade-In Effect */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
  
  .option {
    position: relative;
    overflow: hidden;
    min-width: 60px;
    margin: 10px;
    background: var(--optionBackground, var(--defaultBackground));
    background-repeat: no-repeat;
    background-size: auto 120%;
    background-position: center;
    cursor: pointer;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
    border-radius: 30px;
    flex-grow: 1;
  }
  
  .option .icon:nth-child(1) { --defaultBackground: #ED5565; }
  .option .icon:nth-child(2) { --defaultBackground: #FC6E51; }
  .option .icon:nth-child(3) { --defaultBackground: #FFCE54; }
  .option .icon:nth-child(4) { --defaultBackground: #2ECC71; }
  .option .icon:nth-child(5) { --defaultBackground: #5D9CEC; }
  .option .icon:nth-child(6) { --defaultBackground: #AC92EC; }
  
  .option {
    background-color: #ffa07a;
  } 

  .option.active {
    flex-grow: 10000;
    transform: scale(1);
    max-width: 600px;
    margin: 0px;
    border-radius: 40px;
    background-size: auto 100%;
  }
  
  .option.active .shadow {
    box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
  }
  
  .option.active .label {
    bottom: 20px;
    left: 20px;
  }
  
  .option.active .label .info > div {
    left: 0px;
    opacity: 1;
  }
  
  .option:not(.active) {
    flex-grow: 1;
    border-radius: 30px;
  }
  
  .option:not(.active) .shadow {
    bottom: -40px;
    box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
  }
  
  .option:not(.active) .label {
    bottom: 10px;
    left: 10px;
  }
  
  .option:not(.active) .label .info > div {
    left: 20px;
    opacity: 0;
  }
  
  .shadow {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 120px;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  }
  
  .label {
    display: flex;
    position: absolute;
    right: 0px;
    height: 40px;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  }
  
  .icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: white;
    color: var(--defaultBackground);
  }
  
  .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    color: white;
    white-space: pre;
  }
  
  .info > div {
    position: relative;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
  }
  
  .main {
    font-weight: bold;
    font-size: 1.2rem;
  }
  
  .sub {
    transition-delay: 0.1s;
  }
  
  hr {
    margin-bottom: 3px;
  }
 
/* Mobile Styles */
@media (max-width: 768px) {

    /* Header */

    .text-content {
        width: 90%;
    }

    .text-content p {
        margin: 15px;
        line-height: 36px;
    }

    .carousel {
        height: 500px;
    }

    .carousel-item {
        height: 500px;
    }
 
    .header-content {
        display: flex;
        flex-direction: column-reverse;
        /* justify-content: space-between; */
        width: 80%;
        padding: 10px;
    }

    #wel {
        padding: 30px 15px 0px;
        font-size: 35px;
    }

    .carousel-text h1 {
        font-size: 1.5rem;
        margin: 5px;
    }
    .carousel-text p {
        font-size: 0.8rem;
        margin-bottom: 5px;
    }
    .carousel-text .contact-btn {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    
    .carousel-text {
        background-color: #ffffff;
    }


    .options {
        flex-direction: column;
        height: 600px;
        min-width: 350px;
      }
    
    .option {
        height: 70px; /* Smaller height in mobile */
        background-size: 120%;
    }

    .option.active {
        height: 220px; /* Expand vertically in mobile */
    }

}

/* Responsive Adjustments */
@media screen and (max-width: 991px) {
    .sub-box {
        width: 95%;
        max-width: none;
        position: relative;
        left: auto;
        transform: none;
        margin-top: 5px;
    }
}

/* Unique Key Features CSS */
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

.all-features {
	/* background-image: linear-gradient(45deg, #7175da, #9790F2); */
	font-family: 'Muli', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: max-content;
	margin: 0;
    overflow-x: hidden;
}

.features-container {
    display: flex;
    flex-direction: row;
	justify-content: center;
    padding: 12px 0px;
    align-items: center;
}

.feature {
	/* background-color: #b00202; */
	border-radius: 10px;
	/* box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); */
	display: flex;
	/* max-width: 100%; */
	margin: 20px;
	overflow: hidden;
	width: 100%;
    align-items: center;
    height: 300px;
}

.left-img img, .right-img img {
    width: 100%;
    height: max-content;
}

.feature h6 {
	opacity: 0.6;
	margin: 0;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.feature-preview h2, .feature-preview p {
    text-align: center;
}

.feature h3 {
	letter-spacing: 1px;
	margin: 10px 0;
    font-size: 20px;
    line-height: 30px;
}

.feature-preview {
	background-color: #1a1d23;
	color: #fff;
	padding: 30px 40px;
	width: 30%;
    line-height: 40px;
    height: 68%;
}

.feature-preview a {
	color: #fff;
	display: inline-block;
	font-size: 12px;
	opacity: 0.6;
	margin-top: 30px;
	text-decoration: none;
}

.feature-info {
	padding: 30px;
	position: relative;
	width: 70%;
    text-align: justify;
    /* background-color: #ffffff; */
}

.progress-container {
	position: absolute;
	top: 30px;
	right: 30px;
	text-align: right;
	width: 150px;
}

.progress {
	background-color: #ddd;
	border-radius: 3px;
	height: 5px;
	width: 100%;
}

.progress::after {
	border-radius: 3px;
	background-color: #1a1d23;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 5px;
}


/* Increase width by 10% for each feature */
.features-container:nth-of-type(1) .progress::after { width: 10%; }
.features-container:nth-of-type(2) .progress::after { width: 20%; }
.features-container:nth-of-type(3) .progress::after { width: 30%; }
.features-container:nth-of-type(4) .progress::after { width: 40%; }
.features-container:nth-of-type(5) .progress::after { width: 50%; }
.features-container:nth-of-type(6) .progress::after { width: 60%; }
.features-container:nth-of-type(7) .progress::after { width: 70%; }
.features-container:nth-of-type(8) .progress::after { width: 80%; }
.features-container:nth-of-type(9) .progress::after { width: 90%; }
.features-container:nth-of-type(10) .progress::after { width: 100%; }

.progress-text {
	font-size: 10px;
	opacity: 0.6;
	letter-spacing: 1px;
}

.ctn-btn {
	background-color: #1a1d23;
	border: 0;
	border-radius: 50px;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
	color: #fff;
	font-size: 16px;
	padding: 12px 25px;
	/* position: absolute; */
	bottom: 30px;
	letter-spacing: 1px;
}

.right {
    margin-right: 60%;
}

.left {
    margin-left: 60%;
}

/* SOCIAL PANEL CSS */
.social-panel-container {
	position: fixed;
	bottom: 10px;
	left: 0px;
	transform: translateX(-100%);
	transition: transform 0.4s ease-in-out;
    /* background-color: #ffffff; */
    z-index: 1000;
}

.social-panel-container.visible {
	transform: translateX(10px);
}

.social-panel {	
	background-color: #fff;
	border-radius: 16px;
	/* border-radius: 16px 16px 30% 30%; */
    /* border-radius: 30%; */
	box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
	border: 5px solid #03153B;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Muli';
	position: relative;
	height: 169px;	
	width: 300px;
	max-width: calc(100% - 10px);
}

.social-panel button.close-btn {
	border: 0;
	color: red;
	cursor: pointer;
	font-size: 25px;
	position: absolute;
	top: 2px;
	right: 5px;
    background-color: transparent;
}

.social-panel button.close-btn:focus {
	outline: none;
}

.social-panel p {
	background-color: #03153B;
	border-radius: 0 0 50% 50%;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	padding: 2px 17px 6px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	width: 80px;
}

.social-panel p i {
	margin: 0 5px;
}

.social-panel p a {
	color: #FF7500;
	text-decoration: none;
}

.social-panel h4 {
	margin: 10px 0;
	color: #333333;	
	font-family: 'Muli';	
	font-size: 14px;	
	line-height: 18px;
	text-transform: uppercase;
}

.social-panel ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.social-panel ul li {
	margin: 0 10px;
}

.social-panel ul li a {
	border: 1px solid #DCE1F2;
	border-radius: 50%;
	color: #03153B;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	text-decoration: none;
}

.social-panel ul li a:hover {
	border-color: #FF6A00;
	box-shadow: 0 9px 12px -9px #FF6A00;
}

.social-panel ul li a img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.floating-btn {
    width: 50px;
    height: 50px;
	border-radius: 50%;
	background-color: #03153B;
	border: 1px solid #03153B;
	box-shadow: 0 16px 22px -17px #03153B;
	color: #fff;
	cursor: pointer;
	font-size: 25px;
	line-height: 20px;
	padding: 10px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}

.floating-btn:hover {
	background-color: #ffffff;
	color: #03153B;
}

.floating-btn:focus {
	outline: none;
}

.floating-text {
	background-color: #03153B;
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-family: 'Muli';
	padding: 7px 15px;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 998;
}

.floating-text a {
	color: #FF7500;
	text-decoration: none;
}

@media (max-width: 991px) {

}


@media (max-width: 774px) {
    .left-img img, .right-img img {
        display: none;
    }

    .feature {
        height: 400px;
    }

    .feature-preview {
        width: 60%;
    }

    .feature-preview h2 {
        font-size: 20px;
    }

    .feature-info {
        margin: 5px;
        padding: 10px;
        width: 60%;
        text-align: left;
    }
    
    .feature-info h3{
        font-size: 12px;
        letter-spacing: 0px;
        /* line-height: 25px; */
    }

        
    .right {
        margin-right: 20%;
    }

    .left {
        margin-left: 5%;
    }

    
.progress {
	background-color: #ddd;
	border-radius: 3px;
	height: 5px;
	width: 50%;
    margin-top: 10px;
    margin-left: 50%;
}

.progress::after {
	border-radius: 3px;
	background-color: #1a1d23;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
    margin-top: 10px;
    margin-left: 50%;
	height: 5px;
}


/* Increase width by 10% for each feature */
.features-container:nth-of-type(1) .progress::after { width: 5%; }
.features-container:nth-of-type(2) .progress::after { width: 10%; }
.features-container:nth-of-type(3) .progress::after { width: 15%; }
.features-container:nth-of-type(4) .progress::after { width: 20%; }
.features-container:nth-of-type(5) .progress::after { width: 25%; }
.features-container:nth-of-type(6) .progress::after { width: 30%; }
.features-container:nth-of-type(7) .progress::after { width: 35%; }
.features-container:nth-of-type(8) .progress::after { width: 40%; }
.features-container:nth-of-type(9) .progress::after { width: 45%; }
.features-container:nth-of-type(10) .progress::after { width: 50%; }



    
}
    
    @keyframes waveLeft {
        0% {
            opacity: 0;
            transform: translateX(-100%) translateY(20px);
        }
        50% {
            opacity: 1;
            transform: translateX(10%) translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: translateX(0) translateY(0);
        }
    }
    
    @keyframes waveRight {
        0% {
            opacity: 0;
            transform: translateX(100%) translateY(-20px);
        }
        50% {
            opacity: 1;
            transform: translateX(-10%) translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateX(0) translateY(0);
        }
    }
    
    .features-container {
        opacity: 0;
        transition: opacity 0.8s ease-out;
    }
    
    .features-container.info-left {
        transform: translateX(-100%);
    }
    
    .features-container.info-right {
        transform: translateX(100%);
    }
    
    .features-container.visible.info-left {
        animation: waveLeft 1s ease-out forwards;
    }
    
    .features-container.visible.info-right {
        animation: waveRight 1s ease-out forwards;
    }
    
/* 

  © 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.

*/