body {
    font-family: "Rubik", sans-serif;
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  
 }





/* Social Starting */

/* Sticky Social Container */
.sticky-social {
    position: fixed;
    top: 50%;
  
    transform: translateY(-50%);
    z-index: 9999999;
    
}

/* Social Icons List  */
.social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sociallinks{
    text-decoration: none;
}
.social-icon {
    width: 50px;
    height: 50px;
    position: relative;
    background: #e59500;
    margin: 10px 0;
    cursor: pointer;
    
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.social-icon .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #fff;
}

.social-icon.facebook {
    background: #3b5998;
}
.facebook{
    background: #3b5998 !important;
    border-radius: none !important;

}
.social-icon.twitter {
    background: #00aced;
}
.twitter{
    background: #00aced !important;
    border-radius: none !important;

}
.social-icon.instagram {
    background: #bc2a8d;
}
.instagram{
    background: #bc2a8d !important;
    border-radius: none !important;

}
.social-icon.google {
    background: #dd4b39;
}
.google{
    background: #dd4b39 !important;
    border-radius: none !important;

}
.social-icon.whatsapp {
    background: #4dc247;
}
.whatsapp{
    background: #4dc247 !important;
    border-radius: none !important;

}
/* Slider Effect */
.slider {
    content: "";
    position: absolute;
    top: 0;
    left: 50px;
    width: 0;
    height: 50px;

    transition: all 0.5s ease;
}

.slider p {
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    line-height: 50px;
    opacity: 0;
    transition: all 0.6s ease;
   
}

.social-icon:hover .slider {
    width: 180px;
}

.social-icon:hover .slider p {
    opacity: 1;
    transition: all 1s ease;
}

/* Social Ending */





/* Header Starting */
.home-header {
    background-image: url('https://images.squarespace-cdn.com/content/v1/6171a24361e8cf4b94d1914b/84226ddc-70cd-449c-b5b7-ae34ecffb4ce/Header+Background.png'); /* Replace with your background image */
    background-size: cover;
    background-position: center;
    height: 70vh; /* Reduced height */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 0 1rem;
}

.home-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
    z-index: 1;
}

.header-content {
    position: relative;
    z-index: 2;
    animation: fadeIn 1.5s ease-out;
}

.header-content h1 {
    font-size: 3rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    animation: slideInDown 1s ease-out;
}

.header-content h2 {
    font-size: 2rem;
    margin: 0 0 1rem 0;
    line-height: 1.2;
    animation: slideInDown 1.2s ease-out;
}

.header-content p {
    font-size: 1.5rem;
    margin: 0 0 2rem 0;
    animation: slideInDown 1.4s ease-out;
}

.cta-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: #0056b3;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: slideInUp 1.6s ease-out;
}

.cta-btn:hover {
    background-color: #003f8a;
    transform: translateY(-3px);
}

.header-image {
    max-width: 100%;
    height: auto;
    margin-top: 2rem;
    animation: fadeIn 2s ease-out;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.newbutton {
    padding: 15px 25px;
    border: unset;
    color: #212121;
    z-index: 1;
    background: #e8e8e8;
    position: relative;
    font-weight: 1000;
    font-size: 17px;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms;
    overflow: hidden;
   
}
@keyframes fadeInButton {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
.newbutton::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: #ff4747;
    z-index: -1;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms;
}
   .floatani{
    animation: fadeInButton 2s ease-out, float 3s ease-in-out infinite;

   }
.newbutton:hover {
    color: #e8e8e8;
}
   
.newbutton:hover::before {
    width: 100%;
}
/* Typing effect */
.typing-container {
    min-height: 2rem;
    display: inline-block;
}
/* Header Ending */


/* Introduction Section Starting */
.introduction {
    background-color: #000000; /* Black background */
    color: #eaeaea; /* Light text color for contrast */
    padding: 4rem 1rem;
    text-align: center;
}

.introduction h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #ffffff; /* White color for headings */
    animation: fadeInUp 1s ease-out;
}

.introduction p {
    font-size: 1.2rem;
    margin: 0 auto;
    max-width: 800px;
    line-height: 1.6;
    color: #d3d3d3; /* Light grey color for text */
    animation: fadeInUp 1.5s ease-out;
}

.formargin{
    margin-top: 20px;
}

.introduction .intro-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    opacity: 1 !important;
}

.introduction .intro-icons .icon {
    text-align: center;
    color: #ffffff; /* White color for icons and text */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for hover effects */
}

.introduction .intro-icons .icon:hover {
    opacity: 0.8; /* Slight fade effect on hover */
}

.introduction .intro-icons .icon i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease; /* Smooth transition for hover effects */
}

.introduction .intro-icons .icon.rocket i {
    font-size: 3rem;
    transition: transform 0.5s ease; /* Rocket specific animation */
}

.introduction .intro-icons .icon.rocket:hover i {
    transform: translateY(-10px) rotate(15deg); /* Rocket moves up and rotates slightly */
}

.introduction .intro-icons .icon.cogs:hover i {
    transform: rotate(360deg); /* Cogs rotate on hover */
}

.introduction .intro-icons .icon.users:hover i {
    transform: scale(1.1); /* Users icon scales up slightly on hover */
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .introduction h2 {
        font-size: 2rem;
    }

    .introduction p {
        font-size: 1rem;
    }

    .introduction .newbutton {
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
    }

    .introduction .intro-icons {
        flex-direction: column;
        gap: 1.5rem;
    }
}




/* Headings and Paragraphs */
.introduction h2,
.introduction p,
.introduction .newbutton,
.introduction .intro-icons {
    opacity: 0; /* Initial state for fade-in */
    transform: translateY(30px); /* Initial state for slide-in */
    transition: opacity 1s ease, transform 1s ease; /* Smooth transition */
}

/* Headings */
.introduction h2.fade-in {
    animation: fadeInUp 1s ease-out forwards; /* Apply animation */
}

/* Paragraphs */
.introduction p.fade-in {
    animation: fadeInUp 1.5s ease-out forwards; /* Apply animation */
}

/* Button */
.introduction .newbutton.fade-in {
    animation: fadeInUp 2s ease-out forwards; /* Apply animation */
}

/* Icons */
.introduction .intro-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}



/* Icon animation */
.introduction .intro-icons.fade-in .icon {
    animation: fadeInUp 1s ease-out forwards;
}

.introduction .intro-icons.fade-in .icon:nth-child(1) {
    animation: fadeInUp 1s ease-out 0.3s forwards; /* Staggered animation */
}

.introduction .intro-icons.fade-in .icon:nth-child(2) {
    animation: fadeInUp 1s ease-out 0.6s forwards; /* Staggered animation */
}

.introduction .intro-icons.fade-in .icon:nth-child(3) {
    animation: fadeInUp 1s ease-out 0.9s forwards; /* Staggered animation */
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .introduction h2 {
        font-size: 2rem;
    }

    .introduction p {
        font-size: 1rem;
    }

    .introduction .newbutton {
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
    }

    .introduction .intro-icons {
        flex-direction: column;
        gap: 1.5rem;
    }
}
/* Introduction Ending  */

/* Our Services Section Starting */
.our-services {
    background-color: #000000; /* Black background */
    color: #eaeaea; /* Light text color for contrast */
    padding: 4rem 1rem;
    text-align: center;
    position: relative; /* Ensures that pseudo-elements are positioned correctly */
    overflow: hidden; /* Prevents horizontal overflow */
}

.our-services h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #ffffff; /* White color for headings */
    animation: fadeInUp 1s ease-out;
}

.our-services .services-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjusted for better spacing */
    gap: 2rem;
    justify-content: center;
}

.our-services .service {
    background-color: #1c1c1c; /* Darker background for service boxes */
    border-radius: 10px;
    padding: 2rem; /* Increased padding for better spacing */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none; /* Initially hide all cards */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    position: relative; /* Ensures that pseudo-elements are positioned correctly */
    z-index: 1; /* Ensures the card is above the rotating border */
}

.our-services .service.visible {
    display: block; /* Display only the visible cards */
    opacity: 1;
    transform: translateY(0);
}

.our-services .service:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.our-services .service h3 {
    font-size: 1.8rem; /* Increased font size for headings */
    margin-bottom: 1rem;
    color: #ffffff; /* White color for service headings */
    border-bottom: 2px solid #ff4747; /* Red underline for distinction */
    padding-bottom: 0.5rem;
    position: relative;
    animation: underlineSlideIn 1s ease-out;
}

.our-services .service ul {
    list-style: none; /* Remove default list styling */
    padding: 0;
    text-align: left;
    margin-top: 1rem;
}

.our-services .service ul li {
    font-size: 1.1rem; /* Slightly larger font size */
    color: #d3d3d3; /* Light grey color for list items */
    margin: 0.5rem 0;
    padding-left: 1.5rem; /* Indentation for custom bullet */
    position: relative;
    animation: listItemFadeIn 0.5s ease-out;
}

.our-services .service ul li::before {
    content: "•"; /* Custom bullet point */
    position: absolute;
    left: 0;
    color: #ff4747; /* Red bullet point color */
    font-size: 1.2rem;
    line-height: 1;
}

/* Continuous Infinite Animation */
@keyframes continuousRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.our-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed rgba(255, 71, 71, 0.5);
    border-radius: 10px;
    z-index: 0; /* Ensures the rotating border stays behind the cards */
    animation: continuousRotate 20s linear infinite;
}

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

@keyframes underlineSlideIn {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes listItemFadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .our-services h2 {
        font-size: 2rem;
    }

    .our-services .service h3 {
        font-size: 1.4rem;
    }

    .our-services .service ul li {
        font-size: 1rem;
    }
}
/* Our Services Section Ending */

/* Testimonials Section Starting */
.testimonials {
    background-color: #1a1a1a; /* Dark background for contrast */
    color: #eaeaea; /* Light text color for readability */
    padding: 4rem 1rem;
    text-align: center;
    position: relative; /* For background animation */
    overflow: hidden; /* To prevent overflow issues */
}

.testimonials h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #ffffff; /* White color for headings */
}

.testimonials .testimonials-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    justify-content: center;
    position: relative;
    z-index: 1; /* Ensure testimonials are above the background animation */
}

/* Apply this class to all testimonial cards */
.testimonials .testimonial-card {
    background-color: #2c2c2c; /* Slightly lighter background for cards */
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Slightly darker shadow */
    display: flex;
    flex-direction: column; /* Column layout for better alignment */
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    position: relative;
    z-index: 1; /* Ensure card is above the blur effect */
    opacity: 0; /* Initially hide the card */
    transform: translateY(20px); /* Initially move the card down */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

/* Fade-in effect when card comes into view */
.testimonials .testimonial-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Hover effect for individual cards */
.testimonials .testimonial-card:hover {
    transform: translateY(-5px); /* Slightly lift effect */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Darker shadow on hover */
    background-color: #3a3a3a; /* Slightly lighter background on hover */
}

/* Apply blur effect to all cards except the hovered one */
.testimonials .testimonial-card.blur {
    filter: blur(4px); /* Apply blur effect */
    transition: filter 0.3s ease; /* Smooth transition */
}

/* Profile image and feedback styling remains unchanged */
.testimonials .testimonial-card .profile {
    margin-bottom: 1rem;
    position: relative; /* For profile image hover effect */
}

.testimonials .testimonial-card .profile img {
    border-radius: 50%;
    width: 100px; /* Slightly larger profile image */
    height: 100px;
    object-fit: cover;
    border: 4px solid #ff4747; /* Red border for emphasis */
    transition: transform 0.3s ease; /* Smooth scale effect */
}

.testimonials .testimonial-card .profile img:hover {
    transform: scale(1.1); /* Slight scale effect on hover */
}

.testimonials .testimonial-card .feedback {
    padding: 1rem;
    position: relative;
}

.testimonials .testimonial-card .feedback p {
    font-size: 1.1rem;
    color: #d3d3d3; /* Light grey for feedback text */
    margin-bottom: 1rem;
    font-style: italic; /* Italicize feedback for emphasis */
    line-height: 1.5;
    transition: color 0.3s ease; /* Smooth color transition */
}

.testimonials .testimonial-card .feedback h3 {
    font-size: 1.6rem; /* Slightly larger font size */
    color: #ffffff; /* White color for client names */
    margin-bottom: 0.5rem;
    font-weight: bold; /* Bold client names for emphasis */
}

.testimonials .testimonial-card .feedback p:last-of-type {
    font-size: 1.1rem;
    color: #b3b3b3; /* Slightly lighter grey for client position */
}
/* Testimonials Section Ending */



/* CTA Starting */
.cta {
    background-color: #1c1c1c; /* Dark background for contrast */
    color: #ffffff; /* White text for readability */
    padding: 4rem 1rem;
    text-align: center;

}

/* CTA Heading and Paragraph Styling */
.cta h2,
.cta p,
.cta-button {
    /* Transition for smooth hover effects */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* CTA Heading Styling */
.cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* CTA Paragraph Styling */
.cta p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.5; /* Improve readability */
}

/* CTA Button Styling */
.cta-button {
    display: inline-block;
    font-size: 1.1rem;
    color: #ffffff; /* White text color */
    background-color: #333333; /* Dark background for buttons */
    padding: 1rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    margin: 0.5rem;
    /* Smooth transition for hover effect */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* CTA Button Hover Effect */
.cta-button:hover {
    background-color: #ffffff; /* Light background on hover */
    color: #1c1c1c; /* Dark text color on hover */
    transform: translateY(-3px); /* Slight lift effect */
}

/* CTA ENDING */












/* Contact Us Starting */
.contact-us {
    background-image: url('https://images.squarespace-cdn.com/content/v1/5ecab68c4215f5026a719d3d/1618591143379-78PEE6TK3YHY4X7UDB9F/kickstart_scheme_bg.jpg'); /* Add your background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
    background-blend-mode: darken;
    padding: 4rem 1rem;
    display: flex;
    justify-content: center; /* Center the container horizontally */
    position: relative; /* For sticky effect */
    }

/* Container for contact section */
.container-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    width: 100%;
    max-width: 1200px; /* Increased max-width for larger screens */
    padding: 1rem;
    box-sizing: border-box; /* Ensure padding does not affect width */
    animation: fadeIn 1s ease-in-out; /* Fade-in animation */
}

/* Contact Us Heading Styling */
.contactusheading {
    color: #fff; /* White color for headings */
    text-align: center !important;
    margin-bottom: 2rem; /* Space below the heading */
    animation: fadeInDown 1s ease-in-out; /* Animation for heading */
    font-size: 2.5rem; /* Larger font size for heading */
    letter-spacing: 2px; /* Increased letter spacing for heading */
}

/* Flex container for contact info and form */
.contact-info {
    display: flex;
    justify-content: space-between; /* Distribute space between items */
    align-items: flex-start;
    width: 100%;
    max-width: 1200px; /* Same max-width for consistency */
    margin-bottom: 2rem; /* Space below the contact-info section */
    animation: fadeInUp 1s ease-in-out; /* Animation for contact-info */
}

/* Contact Details Styling */
.contact-details {
    color: #fff;
    width: 45%; /* Adjust width as needed */
    background-color: rgba(0, 0, 0, 0.7); /* Darker background for contrast */
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: slideInRight 1s ease-out; /* Animation for contact details */
}

.contact-details h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #fff; /* White color for headings */
    animation: fadeIn 1s ease-in-out; /* Animation for headings */
    border-bottom: 2px solid #ff4747; /* Border for heading */
    padding-bottom: 0.5rem; /* Padding below heading */
}

/* Contact Detail Items */
.contact-details p {
    margin: 0.5rem 0;
    font-size: 1rem;
}

.contact-details a {
    color: #ff4747; /* Updated color for links */
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth color transition */
}

.contact-details a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Social Media Icons */
.social-iconsnew {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.social-iconsnew a {
    color: #fff;
    margin: 0 0.5rem;
    font-size: 1.5rem; /* Increase icon size */
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-iconsnew a:hover {
    transform: scale(1.2); /* Enlarge icons on hover */
    color: #ff4747; /* Change icon color on hover */
}

/* Adjust form to be on the right side for larger screens */
.contact-form {
    width: 45%; /* Adjust width as needed */
    height: auto; /* Adjust height based on content */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2rem;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: slideInLeft 1s ease-out, pulse 2s infinite; /* Animation for contact form and pulsing effect */
    position: relative; /* Relative positioning */
}

/* Styling for form elements */
.contact-form h2 {
    margin-bottom: 1.5rem;
    color: #fff; /* White color for headings */
    animation: fadeIn 1s ease-in-out; /* Animation for headings */
    border-bottom: 2px solid #ff4747; /* Border for heading */
    padding-bottom: 0.5rem; /* Padding below heading */
    font-size: 2rem; /* Increase heading size */
}

.contact-form form {
    display: grid;
    gap: 1rem;
    height: 100%;
}

.contact-form label {
    font-weight: bold;
    color: #ddd; /* Lighter text color for labels */
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1rem; /* Increased padding */
    border: 1px solid #444; /* Darker border for inputs */
    border-radius: 5px;
    background-color: #222; /* Darker background for inputs */
    color: #fff; /* White text color */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth border color and shadow transition */
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #ff4747; /* Updated color for focus */
    box-shadow: 0 0 10px rgba(255, 71, 71, 0.3); /* Shadow on focus */
}

/* Fixed height and width for textarea */
.contact-form textarea {
    height: 150px; /* Fixed height for textarea */
    resize: none; /* Disable resizing */
}

.contact-form button {
    background-color: #ff4747; /* Bright button background */
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth background color and transform transition */
    font-size: 1rem; /* Increase button font size */
}

.contact-form button:hover {
    background-color: #e13c3c; /* Darker button color on hover */
    transform: scale(1.05); /* Slightly enlarge button on hover */
}

/* Animation for fading in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animation for sliding in from right */
@keyframes slideInRight {
    from {
        transform: translateX(10%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation for sliding in from left */
@keyframes slideInLeft {
    from {
        transform: translateX(-10%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation for pulsing effect */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 71, 71, 0.7);
    }
    70% {
        box-shadow: 0 0 10px 20px rgba(255, 71, 71, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 71, 71, 0);
    }
}

/* Animation for fading in downwards */
@keyframes fadeInDown {
    from {
        transform: translateY(-10%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animation for fading in upwards */
@keyframes fadeInUp {
    from {
        transform: translateY(10%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Additional styling for responsiveness */
@media (max-width: 1024px) {
    .contact-info {
        flex-direction: column; /* Stack items vertically */
        align-items: center;
    }

    .contact-details,
    .contact-form {
        width: 100%; /* Full width for smaller screens */
        margin-bottom: 2rem; /* Space between contact details and form */
    }
}

@media (max-width: 768px) {
    .container-left {
        padding: 1rem;
    }

    .contact-info {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: center;
    }

    .contact-form,
    .contact-details {
        width: 100%; /* Full width on smaller screens */
    }
}

/* Contact Us Ending */



/* FAQ Starting */

/* FAQ Section Styling */
.faq {
    background: #000; /* Solid black background */
    padding: 4rem 1rem;
    position: relative;
    overflow: hidden;
}

   
/* FAQ Heading Styling */
.faq-heading {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #ff4747; /* Orange color for headings */
    animation: fadeInDown 1s ease-in-out;
    position: relative;
    z-index: 1; /* Ensure heading is above the background */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Improved visibility */
}

/* FAQ Container Styling */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1; /* Ensure container is above the background */
}

/* FAQ Item Styling */
.faq-item {
    border-bottom: 1px solid #444; /* Darker border for separation */
}

.faq-item:last-child {
    border-bottom: none;
}

/* FAQ Question Styling */
.faq-question {
    background-color: #222; /* Dark background */
    color: #fff; /* White text */
    border: none;
    padding: 1rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative; /* For positioning the indicator */
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    color: #ff4747; /* Orange color for indicator */
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"]::after {
    content: '-';
    transform: translateY(-50%) rotate(180deg);
}

/* FAQ Answer Styling */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: #333; /* Dark background for answers */
    padding: 0 1rem;
}

.faq-answer p {
    margin: 1rem 0;
    color: #fff; /* White text */
}

.faq-answer ul {
    margin: 1rem 0;
    padding-left: 1rem;
}

.faq-answer li {
    margin: 0.5rem 0;
    color: #fff; /* White text */
}

/* Animation for fading in downwards */
@keyframes fadeInDown {
    from {
        transform: translateY(-10%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Additional styling for responsive design */
@media (max-width: 768px) {
    .faq-heading {
        font-size: 2rem;
    }

    .faq-question {
        font-size: 1rem;
    }
}

/* FAQ Ending */