/* General Styles */
      body {
        font-family: Arial, sans-serif;
        background-color: #f7f8fa;  /* Soft light background color */
        color: #333;  /* Dark text for readability */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    
    /* Custom Container Class */
.container {
    max-width: 100%; /* Remove the default max-width to use the full width */
    margin: 0 auto;  /* Center the content */
    padding-left: 15px;  /* Custom left padding */
    padding-right: 15px; /* Custom right padding */
}

/* Optional: For mobile screens, ensure there's no extra padding */
@media (max-width: 767px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

    
/* General Navbar Styling */
nav {
    background-color: #333;  /* Darker background for better contrast */
    padding: 8px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 10px;
}

/* Navbar Brand */
.navbar-brand {
    font-size: 1.5rem; /* Smaller font for compact design */
    color: #00ffcc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.navbar-brand:hover {
    color: #fff;
    transform: scale(1.1);
}

/* Navbar Links */
.navbar-nav .nav-link {
    color: #fff;  /* White text for visibility on dark background */
    font-size: 0.9rem; /* Smaller font for links */
    text-transform: capitalize;
    padding: 5px 8px; /* Reduce padding for compact spacing */
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #00ffcc;
    transform: translateY(-3px);
    border-bottom: 2px solid #00ffcc;
}

/* Call Button */
.call-btn {
    padding: 6px 15px; /* Compact padding for call button */
    font-size: 0.9rem;
    border-radius: 20px;
    background-color: #00ffcc;
    border: 2px solid #00ffcc;
    color: #000;
    font-weight: bold;
    transition: all 0.3s ease;
}

.call-btn:hover {
    background-color: transparent;
    color: #00ffcc;
    border: 2px solid #00ffcc;
}


/* Hover effect */
.navbar-brand:hover {
    color: #00ffcc; /* Change text color to the highlight color */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); /* Stronger shadow on hover */
}

.active {
    color: #00ffcc;
    transform: translateY(-3px);
    border-bottom: 2px solid #00ffcc;
}

@media (max-width: 768px) {
    .navbar {
        position: fixed; /* Keep navbar fixed */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000; /* Ensure it's above other elements */
        border-radius: 0; /* Remove border-radius for a clean look */
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .navbar {
        position: fixed; /* Keep navbar fixed */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000; /* Ensure it's above other elements */
        border-radius: 0; /* Remove border-radius for a clean look */
        margin-top: 0;
    }
}


 /* WhatsApp Button Styling */
.whatsapp-btn {
    position: fixed;
    bottom: 20px; /* Distance from the bottom */
    right: 20px; /* Distance from the right */
    background: linear-gradient(45deg, #25d366, #128c7e); /* Gradient for depth */
    color: white;
    padding: 15px;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    animation: bounce 1.5s infinite alternate; /* Animation to make the button bounce */
    text-decoration: none;
}

.whatsapp-btn:hover {
    transform: scale(1.2); /* Slight zoom effect on hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); /* Darker shadow on hover */
    opacity: 0.8; /* Slight opacity change on hover */
}

.whatsapp-btn i {
    margin: 0;
    transition: transform 0.3s ease;
}

.whatsapp-btn:hover i {
    transform: rotate(360deg); /* Rotate the icon on hover */
}

/* Keyframe Animation: Bounce effect */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Bounce effect */
    }
    100% {
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .whatsapp-btn {
        bottom: 15px; /* Adjust position on smaller screens */
        right: 15px;
    }
    .whatsapp-btn i {
        font-size: 28px;
    }
}




/* Hero Section Styles */
.hero {
position: relative;
height: 100vh;
overflow: hidden;
}

.carousel-item {
position: relative;
height: 100vh;
background-size: cover;
background-position: center;
}

/* Dark Overlay */
.carousel-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}

/* Center the text in the carousel */
.carousel-caption {
z-index: 2;
color: #fff;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* Text styling */
.carousel-caption h1 {
font-size: 3rem;
font-weight: bold;
}

.carousel-caption h2 {
font-size: 1.5rem;
}

.carousel-caption .btn-primary {
padding: 15px 35px;
font-size: 1.1rem;
background-color: #00ffcc;
border: none;
}

.carousel-caption .btn-primary:hover {
background-color: #00cc99;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.carousel-caption h1 {
    font-size: 2.5rem;
}

.carousel-caption h2 {
    font-size: 1.2rem;
}

.carousel-caption .btn-primary {
    padding: 12px 30px;
    font-size: 1rem;
}

.carousel-caption {
    display: none;  /* Hide the text */
}

.hero {
height: 33vh;
margin-top: 55px;
}
}

/* Hide text on mobile screens (below 480px) */
@media (max-width: 480px) {
.carousel-caption {
    display: none;  /* Hide the text */
}
.hero {
height: 30vh;
}
}



 

    
    
    /* Section Styling */
    .features,
    .services,
    .faq,
    .testimonials,
    .contact {
        padding: 60px 0;
    }
    
/* General Section Styling */
.highlighted-section {
    color: #fff;
    padding: 60px 0;
    background-color: #111;
}

/* Section Title Styling */
.section-title {
    font-size: 2.2rem;  /* Slightly smaller title */
    font-weight: bold;
    margin-bottom: 40px;
    color: #00ffcc;  /* Neon color for emphasis */
    text-shadow: 0 3px 8px rgba(0, 255, 204, 0.7);  /* Soft neon-like shadow for glowing effect */
    text-align: center;  /* Center the title */
    text-transform: uppercase;  /* Uppercase for a bold, modern style */
    letter-spacing: 1px;  /* Slight space between the letters for sharp look */
    font-family: 'Roboto', sans-serif;  /* Modern sans-serif font */
    transition: color 0.3s ease;  /* Smooth transition for hover effect */
}

/* Hover effect on the title */
.section-title:hover {
    color: #ff7f50;  /* Change color on hover for interactivity */
    text-shadow: 0 3px 12px rgba(255, 127, 80, 0.8);  /* Increase shadow intensity on hover */
}

/* Optional: Highlighted Text Styling */
.highlight-text {
    color: #ff7f50;  /* Contrasting color for specific emphasis */
    font-style: italic;  /* Italicize for emphasis */
    text-decoration: underline;  /* Underline to make it stand out */
    text-shadow: 0 2px 5px rgba(255, 127, 80, 0.5);  /* Soft glow effect on highlighted text */
}


/* Carousel Styling */
#hiluxCarousel {
    position: relative;
    display: flex;
    overflow: hidden;
    height: 450px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #0d0d0d, #222);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

/* Car Card Styling */
.car-card {
    position: absolute;
    width: 300px;
    height: 420px;
    margin: 0 10px;
    transition: transform 0.8s ease, opacity 0.8s ease;
    text-align: center;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    background-color: #111;
    border-radius: 10px;
}

/* Active card styling */
.car-card.active {
    display: block;
}

/* Image Styling */
.car-card img {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    border: 3px solid #00ffcc;
    object-fit: cover;
    display: block;
}

/* Title and description inside car cards */
.car-card h5 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ff7f50;
    margin: 10px 0;
}

.car-card p {
    font-size: 1rem;
    color: #ddd;
    margin: 0;
    text-align: center;
}

/* Active state for center card */
.car-card:nth-child(2) {
    opacity: 1;
}



/* Default (Dark Mode) */
.highlighted-section {
    color: #fff;
    background-color: #111;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.section-title {
    color: #00ffcc;
    text-shadow: 0 3px 8px rgba(0, 255, 204, 0.7);
}

/* Light Mode */
.light-mode .highlighted-section {
    background-color: #f9f9f9;
    color: #111;
}

.light-mode .section-title {
    color: #007bff;
    text-shadow: none;
}

.light-mode .car-card {
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.light-mode .car-card h5 {
    color: #007bff;
}

.light-mode .car-card p {
    color: #333;
}

.light-mode .car-card img {
    border-color: #007bff;
}

.light-mode #hiluxCarousel {
    background: linear-gradient(45deg, #e3e3e3, #ffffff);
}


  

    
    
    /* Section Styling */
#components {
    background: linear-gradient(135deg, #0d0d0d, #1c1c1c);
    color: #fff;
    padding: 60px 0;
    opacity: 0; /* Hidden before scroll */
    transform: translateY(50px); /* Slight downward shift for animation */
    transition: all 0.5s ease;
}

#components.scrolled {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Reset position */
}

#components .section-title {
    font-size: 2.2rem; /* Slightly smaller title */
    font-weight: bold;
    margin-bottom: 40px;
    color: #00ffcc;
    text-shadow: 0 3px 8px rgba(0, 255, 204, 0.7);
}

/* Component Card Styling */
.component-card {
    background: #111;
    border: 2px solid #00ffcc;
    border-radius: 15px;
    text-align: center;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transform: translateY(50px); /* Initially moved down */
    opacity: 0; /* Initially invisible */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.component-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.component-card h5 {
    font-size: 1.2rem;
    color: #ff7f50;
    margin: 8px 0;
}

.component-card p {
    font-size: 0.8rem;
    color: #ddd;
    margin-bottom: 0;
}

/* Hover Effect */
.component-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 255, 204, 0.5);
}


/* Responsive Design */
@media (max-width: 768px) {
    #components .section-title {
        font-size: 1.8rem;
    }

    .component-card img {
        height: 150px; /* Reduced for smaller screens */
    }

    .component-card h5 {
        font-size: 1rem;
    }

    .component-card p {
        font-size: 0.7rem;
    }
}
/*================================================================================================================================  */
/* about section */
/*================================================================================================================================  */
.highlighted-section {
    padding: 50px 0;
    background-color: #f8f9fa; /* Light background for a clean look */
}

.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 30px;
    color: #333;
}

.about-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.about-card:hover {
    transform: translateY(-5px); /* Hover effect */
}

.about-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.about-card h5 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #007bff; /* Highlighted color */
}

.about-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

/*==================================================================================  */
/* feature section */
/*==================================================================================  */

/* Features Section Styling */
#features {
    background: linear-gradient(135deg, #1c1c1c, #0d0d0d); /* Gradient background */
    color: #fff;
    padding: 60px 0;
}

#features h2 {
    font-size: 2.5rem; /* Larger and bold title */
    font-weight: bold;
    margin-bottom: 40px;
    color: #00ffcc; /* Highlighted color */
    text-shadow: 0 3px 8px rgba(0, 255, 204, 0.7); /* Glow effect */
}

.feature-item {
    background: #111; /* Dark card background */
    border: 2px solid #00ffcc; /* Matching border */
    border-radius: 15px; /* Rounded corners */
    text-align: center;
    padding: 25px; /* More space for content */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transitions */
}

.feature-item:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 255, 204, 0.5); /* Glow on hover */
}

.feature-item i {
    color: #ff7f50; /* Icon color */
    margin-bottom: 15px;
    transition: color 0.3s; /* Smooth icon color transition */
}

.feature-item:hover i {
    color: #00ffcc; /* Change color on hover */
}

.feature-item h5 {
    font-size: 1.4rem; /* Slightly larger font */
    color: #ff7f50; /* Match icon color */
    margin: 15px 0 10px;
}

.feature-item p {
    font-size: 0.9rem; /* Adjust text size */
    color: #ddd;
}

/* Responsive Design */
@media (max-width: 768px) {
    #features h2 {
        font-size: 2rem; /* Smaller title for smaller screens */
    }

    .feature-item {
        padding: 20px; /* Adjust spacing */
    }

    .feature-item h5 {
        font-size: 1.2rem; /* Adjust heading size */
    }

    .feature-item p {
        font-size: 0.8rem; /* Adjust paragraph size */
    }
}



/* ------------------------------------------------------------------------------------------------------ */
/* services section */
/* -------------------------------------------------------------------------------------------------------- */
/* Services Section Styling */
#services {
    background: linear-gradient(135deg, #1a1a1a, #333); /* Gradient with smooth transition */
    color: #fff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

#services h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 50px;
    color: #ff7f50; /* Highlighted text color */
    text-shadow: 0 3px 8px rgba(255, 127, 80, 0.7); /* Glow effect */
    position: relative;
    z-index: 2;
}

.service-item {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent card */
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Soft shadow */
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 127, 80, 0.15), rgba(0, 0, 0, 0));
    transition: left 0.3s;
    z-index: 1;
}

.service-item:hover {
    transform: translateY(-10px); /* Lift effect */
    box-shadow: 0 12px 30px rgba(255, 127, 80, 0.4); /* Glow shadow */
    background: rgba(255, 127, 80, 0.1); /* Slight color tint */
}

.service-item:hover::before {
    left: 0; /* Activate radial glow effect */
}

.service-item h5 {
    font-size: 1.5rem; /* Larger title */
    font-weight: bold;
    margin-bottom: 10px;
    color: #00ffcc;
    z-index: 2;
    position: relative;
}

.service-item p {
    font-size: 1rem; /* Adjusted text size */
    color: #ddd;
    z-index: 2;
    position: relative;
}

/* Section Background Decoration */
#services::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 127, 80, 0.2), rgba(0, 0, 0, 0));
    z-index: 0;
}

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

    .service-item {
        padding: 15px;
    }

    .service-item h5 {
        font-size: 1.3rem;
    }

    .service-item p {
        font-size: 0.9rem;
    }
}


/* ----------------------------------------------------------------------------------------- */
/* faq section */
/* ----------------------------------------------------------------------------------------- */
/* FAQ Section Styling */
#faq {
    background: linear-gradient(135deg, #0d0d0d, #292929);
    color: #fff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

#faq h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #00ffcc;
    text-shadow: 0 3px 8px rgba(0, 255, 204, 0.7);
}

.faq-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    background: #111;
    border: 1px solid #00ffcc;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 15px 20px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.faq-item.active {
    background: rgba(0, 255, 204, 0.1);
    border-color: #00ffcc;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-question h5 {
    font-size: 1.2rem;
    margin: 0;
    color: #ff7f50;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-top: 10px;
    font-size: 0.9rem;
    color: #ddd;
}

.faq-item.active .faq-answer {
    max-height: 100px; /* Expand to show the answer */
}

.faq-item i {
    transition: transform 0.3s;
}

.faq-item.active i {
    transform: rotate(180deg);
}

/* Scroll Animation */
.faq-item.visible {
    opacity: 1;
    transform: translateY(0);
}

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

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


/* ------------------------------------------------------------------------------------------------ */
/* testimonials section */
/* ---------------------------------------- */
/* Testimonial Section Styling */
#testimonials {
    background: linear-gradient(135deg, #292929, #0d0d0d);
    color: #fff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

#testimonials h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #00ffcc;
    text-shadow: 0 3px 8px rgba(0, 255, 204, 0.7);
}

.testimonials-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.testimonial-item {
    background: #111;
    border: 2px solid #00ffcc;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    padding: 20px;
    max-width: 300px;
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.testimonial-item.visible {
    opacity: 1;
    transform: scale(1);
}

.testimonial-item p {
    font-size: 0.9rem;
    color: #ddd;
    margin-bottom: 15px;
    font-style: italic;
    line-height: 1.5;
}

.testimonial-item h5 {
    font-size: 1.2rem;
    color: #ff7f50;
    margin: 8px 0;
}

.testimonial-item span {
    font-size: 0.9rem;
    color: #bbb;
    font-style: italic;
}

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

    .testimonials-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .testimonial-item {
        max-width: 90%;
    }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* contact section */
/* ----------------------------------------- */
/* Contact Form Styling */
.contact-form {
    background: #111;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 600px;
    margin: auto;
}

.contact-form .form-label {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 10px;
}

.contact-form .form-control {
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 12px;
    font-size: 1rem;
    width: 100%;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: #ff7f50;
    box-shadow: 0 0 8px rgba(255, 127, 80, 0.8);
}

.contact-form .form-control::placeholder {
    color: #bbb;
}

/* Send Message Button Styling */
.contact-form .btn-send {
    background-color: #ff7f50; /* Bright, attention-grabbing color */
    color: #fff; /* White text */
    padding: 15px 30px;
    font-size: 1.2rem; /* Slightly larger font for prominence */
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50px; /* Rounded button edges for a modern look */
    border: none;
    width: 100%;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */
    letter-spacing: 2px; /* Slightly increased letter spacing */
}

/* Hover Effect */
.contact-form .btn-send:hover {
    background-color: #ff6a33; /* Slightly darker shade on hover */
    cursor: pointer;
    transform: translateY(-3px); /* Button lift effect */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}

/* Active Effect (when button is clicked) */
.contact-form .btn-send:active {
    transform: translateY(1px); /* Slight indentation on click */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow when pressed */
}

/* Disabled State */
.contact-form .btn-send:disabled {
    background-color: #777;
    cursor: not-allowed;
    box-shadow: none;
}


/* Responsive Design */
@media (max-width: 768px) {
    .contact-form {
        padding: 30px;
    }

    .contact-form .form-label {
        font-size: 0.9rem;
    }

    .contact-form .form-control {
        font-size: 0.95rem;
    }

    .contact-form .btn-submit {
        font-size: 0.95rem;
    }
}

    
    /* Footer Styling */
footer {
    background: #292929; /* Dark background for the footer */
    color: #fff;
    padding-top: 50px;
    padding-bottom: 30px;
    font-size: 1rem;
}

footer h4 {
    font-size: 1.4rem;
    color: #00ffcc; /* Accent color */
    margin-bottom: 15px;
    font-weight: bold;
}

footer p, footer ul li {
    font-size: 0.9rem;
    line-height: 1.6;
}

footer a {
    text-decoration: none;
    color: #ddd;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #00ffcc; /* Hover color */
}

.social-icons a {
    font-size: 1.6rem;
    color: #ddd;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #00ffcc;
}

footer .container {
    max-width: 1200px;
}

footer .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

footer .col-md-4 {
    flex: 1;
}

footer .text-center {
    text-align: center;
    margin-top: 20px;
}

/* Footer Bottom Styling */
footer .text-center p {
    font-size: 0.8rem;
    color: #aaa;
}

@media (max-width: 768px) {
    footer .row {
        flex-direction: column;
        text-align: center;
    }

    footer .col-md-4 {
        margin-bottom: 20px;
    }

    footer .social-icons a {
        font-size: 1.4rem;
    }
}