/********** Template CSS **********/
:root {
    --primary: #081424;
    --secondary: #0d1c22;
    --light: #F4F7FE;
    --dark: #0a0b11;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Heading ***/
h1,
h2,
h3,
.fw-bold {
    font-weight: 700 !important;
}

h4,
h5,
h6,
.fw-medium {
    font-weight: 500 !important;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}


/*** Navbar ***/
.sticky-top {
    top: -150px;
    transition: .5s;
    background-color: #000000;
}

.navbar {
    padding: 11px 0 !important;
    height: 75px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 0;
    color: rgba(255, 255, 255, .7);
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: rgba(255, 255, 255, 1);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
    color: #fff;
}
.navbar-toggler-icon {
    background-image: none; /* Remove the default background image */
    
}

.navbar-toggler-icon::before {
    content: "\2630"; /* Unicode for a hamburger icon (optional) */
    color: #fff; /* Replace this with your desired color */
    font-size: 1.5rem; /* Adjust size as needed */
}

.navbar-toggler{
    color: #fff;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        padding: 0 15px;
        background: black;
    }

    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }
    iframe{
        width: 270px;
        height: 200px;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

/* ***bubble animation**** */
@keyframes bubble {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px);
        opacity: 0;
    }
}

.bubble {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    animation: bubble 4s infinite;
}

.bubble:nth-child(1) {
    width: 30px;
    height: 30px;
    left: 10%;
    animation-delay: 0s;
}

.bubble:nth-child(2) {
    width: 40px;
    height: 40px;
    left: 30%;
    animation-delay: 1s;
}

.bubble:nth-child(3) {
    width: 20px;
    height: 20px;
    left: 50%;
    animation-delay: 2s;
}

.bubble:nth-child(4) {
    width: 25px;
    height: 25px;
    left: 70%;
    animation-delay: 3s;
}

.bubble:nth-child(5) {
    width: 35px;
    height: 35px;
    left: 85%;
    animation-delay: 0.5s;
}

/* upcoming page */
/* Wave Animation */
@keyframes wave {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
  }
  
  /* Styling for the section */
  .ai-animation-section {
    padding: 60px 0;
    background: #f0f8ff; /* Light background color */
  }
  
  .section-title, .section-text {
    animation: wave 2s infinite ease-in-out;
  }
  
  .section-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
  }
  
  .section-text {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 30px;
  }
  


/*** Hero Header ***/
.hero-header {
    position: relative;
    overflow: hidden;
}

.hero-header video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0.7)); /* Adjust the rgba values for transparency */
    z-index: 0;
}


/* move right */
@keyframes moveRight {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(20px); /* Adjust the distance as needed */
        opacity: 1;
    }
}

.move-right {
    animation: moveRight 1s ease forwards; /* Duration and easing function can be adjusted */
}



/*** Section Title ***/
.section-title::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 4px;
    bottom: 0;
    left: 0;
    background: black;
}

.section-title::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    bottom: 0;
    left: 50px;
    background: black;
}

.section-title.text-center::before {
    left: 50%;
    margin-left: -25px;
}

.section-title.text-center::after {
    left: 50%;
    margin-left: 25px;
}

.section-title h6::before,
.section-title h6::after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    top: 2px;
    left: 0;
    background: rgba(11, 15, 29, 0.5);
}

.section-title h6::after {
    top: 5px;
    left: 3px;
}


/*** About ***/
.about-img {
    position: relative;
    overflow: hidden;
}

.about-img::before {
    position: absolute;
    content: "";
    width: 200%;  /* Adjust the size as needed */
    height: 200%; /* Adjust the size as needed */
    top: -50%; /* Center the circle */
    left: -50%; /* Center the circle */
    background: url(../img/bg-about-img.png) top left no-repeat;
    background-size: contain;
    border-radius: 50%; /* Make it a circle */
    animation: rotate 20s linear infinite; /* Adjust duration for speed */
    z-index: 0; /* Ensure it stays behind other content */
}

.about-img img {
    position: relative;
    z-index: 1; /* Ensure the image is above the rotating background */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* bg animation */
.img-fluid {
    width: 100%;
    transition: transform 0.3s ease-in-out; /* Smooth transition for scaling */
}

.case-item:hover .img-fluid {
    transform: scale(1.1); /* Scale the video slightly on hover */
}

/* form animation */
.form {
    width: 100%; /* You can keep this if you want the container to be full-width */
}

.left-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-image img {
    width: 100%; /* Fixed width for the image */
    height: auto;
    opacity: 0; /* Start invisible */
    animation: fadeIn 1s forwards; /* Animation */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

h2 {
    margin-bottom: 20px;
    font-weight: bold; /* Bold title */
    color: #333; /* Darker text color for better readability */
}

form {
    background-color: #ffffff; /* White background for the form */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.form-group {
    margin-bottom: 20px; /* Spacing between form groups */
}

input[type="text"],
input[type="email"],
textarea {
    border-radius: 5px; /* Rounded corners for input fields */
    border: 1px solid #ced4da; /* Light border */
    transition: border-color 0.3s; /* Transition for border color */
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #80bdff; /* Change border color on focus */
    outline: none; /* Remove default outline */
}

button {
    border-radius: 5px; /* Rounded corners for buttons */
    transition: background-color 0.3s; /* Transition for background color */
}

button:hover {
    background-color: #0056b3; /* Darker background on hover */
}

.animated {
    animation: slideIn 0.5s ease forwards; /* Slide-in animation */
}

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



/*** Service ***/
.service-item {
    position: relative;
    padding: 45px 30px;
    background: #FFFFFF;
    transition: .5s;
}

.service-item:hover {
    background: black;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.service-item .service-icon {
    margin: 0 auto 20px auto;
    width: 90px;
    height: 90px;
    color: black;
    background: black;
    transition: .5s;
}

.service-item:hover .service-icon {
    background: #FFFFFF;
}

.service-item h5,
.service-item p {
    transition: .5s;
}

.service-item:hover h5,
.service-item:hover p {
    color: #FFFFFF;
}

.service-item a.btn {
    position: relative;
    display: flex;
    color: black;
    transition: .5s;
    z-index: 1;
}

.service-item:hover a.btn {
    color: black;
}

.service-item a.btn::before {
    position: absolute;
    content: "";
    width: 35px;
    height: 35px;
    top: 0;
    left: 0;
    border-radius: 35px;
    background: var(--light);
    transition: .5s;
    z-index: -1;
}

.service-item:hover a.btn::before {
    width: 100%;
    background: var(--light);
}

/* service section card */
/* General Styling */
#timeline {
    padding: 50px 0;
    background-color: #f0f0f5;
    text-align: center;
    font-family: Arial, sans-serif;
}

#timeline h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #333;
}

#timeline p.leader {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 40px;
}

.demo-card-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.demo-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
    flex: 1 1 calc(33.333% - 20px); /* 3 cards per row on large screens */
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.demo-card:hover {
    transform: scale(1.08); /* More pronounced scaling */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Increased shadow */
    background-color: #f9f9fc; /* Subtle background color change */
}

/* Head Section Styling */
.demo-card .head1 {
    background-color: #0d6efd;
    padding: 20px;
    color: white;
    transition: background-color 0.4s ease; /* Smooth color transition */
}

.demo-card:hover .head1 {
    background-color: rgb(20, 20, 131); /* Slightly darker on hover */
}

.demo-card .number-box {
    font-size: 1.5em;
    margin-bottom: 10px;
    border: 2px solid white;
    border-radius: 50%;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    transition: background-color 0.4s ease, transform 0.4s ease; /* Animating the number box */
}

.demo-card:hover .number-box {
    background-color: #8a42ff;
    transform: rotate(360deg); /* Rotating the number box */
}

.demo-card h2 {
    margin: 0;
    font-size: 1.5em;
    transition: color 0.4s ease;
}

.demo-card:hover h2 {
    color: #777781; /* Change text color on hover */
}

.demo-card h2 .small {
    display: block;
    font-size: 0.75em;
    color: #ddd;
}

/* Body Section Styling */
.demo-card .body1 {
    padding: 20px;
    color: #555;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    transition: color 0.4s ease;
}

.demo-card:hover .body1 {
    color: #c2b7b7; /* Darken text slightly on hover */
}

.demo-card .body1 p {
    margin: 0 0 20px;
    flex-grow: 1;
}

.demo-card .body1 img {
    max-width: 100%;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.4s ease; /* Smooth image zoom */
}

.demo-card:hover .body1 img {
    transform: scale(1.05); /* Image zoom on hover */
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/* Additional Animations */
.demo-card {
    position: relative;
}

.demo-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    transition: width 0.5s ease; /* Animation for background gradient */
}

.demo-card:hover::after {
    width: 100%; /* Expanding gradient on hover */
}

/* Responsive Design */
@media (max-width: 992px) {
    .demo-card {
        flex: 1 1 calc(50% - 20px); /* 2 cards per row on medium screens */
    }
}

@media (max-width: 768px) {
    .demo-card {
        flex: 1 1 100%; /* 1 card per row on small screens */
    }
}

/* project page animation */
/* Styling for the section */
.project-animation-section {
    padding: 60px 0;
    background: #f9f9f9; /* Light background color */
  }
  
  /* Project card styling */
  .project-card {
    text-align: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
    margin-bottom: 30px; /* Spacing between cards */
    padding: 20px;
    overflow: hidden; /* Hide overflow for image scaling effect */
    position: relative; /* For pseudo-element */
  }
  
  /* Scale and shadow effect on hover */
  .project-card:hover {
    transform: translateY(-10px) scale(1.05); /* Lift and scale effect */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
  
  /* Image styling */
  .project-card img {
    transition: transform 0.5s ease; /* Smooth scaling */
  }
  
  /* Scale effect on image hover */
  .project-card:hover img {
    transform: scale(1.1); /* Slightly enlarge image on hover */
  }
  
  /* Project title styling */
  .project-title {
    font-size: 1.5rem;
    margin: 15px 0 10px;
    color: #333;
  }
  
  /* Project description styling */
  .project-description {
    color: #666;
  }
  
  /* Animation on section load */
  .project-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
  }
  
  /* Keyframes for fade-in animation */
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Animation delay for each project card */
  .project-card:nth-child(1) {
    animation-delay: 0.2s;
  }
  
  .project-card:nth-child(2) {
    animation-delay: 0.4s;
  }
  
  .project-card:nth-child(3) {
    animation-delay: 0.6s;
  }
  
  /* Additional styling for transitions */
  .project-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1); /* Light overlay */
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 0; /* Behind content */
  }
  
  .project-card:hover:before {
    opacity: 1; /* Show overlay on hover */
  }
  
  .project-card h3,
  .project-card p {
    position: relative; /* To show on top of overlay */
    z-index: 1; /* Ensure text is above overlay */
  }
  


/*** Feature ***/
.feature {
    position: relative;
    z-index: 1;
    padding: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-hero.png) center center no-repeat;
    background-size: cover;
    overflow: hidden;
}

#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.feature .container {
    position: relative;
    z-index: 2;
}

.feature .col-lg-6 {
    z-index: 3;
}

/* animate bg */



/*** Newsletter ***/
.newsletter {
    background: url(../img/bg-hero.png) center center no-repeat;
    background-size: cover;
}

@media (min-width: 992px) {
    .newsletter .container {
        max-width: 100% !important;
    }

    .newsletter .newsletter-text  {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .newsletter .newsletter-text  {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .newsletter .newsletter-text  {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Case Study ***/
.case-item img {
    transition: .5s;
}
  
.case-item:hover img {
    transform: scale(1.2);
}
  
.case-overlay {
    position: absolute;
    padding: 30px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background: linear-gradient(rgba(20, 24, 62, 0), var(--dark));
    z-index: 1;
}

.case-overlay small {
    display: inline-block;
    padding: 3px 15px;
    color: #FFFFFF;
    background: rgba(20, 24, 62, .7);
    border-radius: 25px;
    margin-bottom: 15px;
}

.case-overlay span.btn:hover {
    color: black;
    background: #FFFFFF;
    border-color: #FFFFFF;
}


/*** FAQs ***/
.accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
}

.accordion .accordion-button {
    background: var(--light);
    border-radius: 2px;
}

.accordion .accordion-button:not(.collapsed) {
    color: #FFFFFF;
    background: black;
    box-shadow: none;
}

.accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion .accordion-body {
    padding: 15px 0 0 0;
}


/*** Testimonial ***/
.testimonial-carousel {
    position: relative;
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 40px;
    height: 100%;
    top: calc(50% - 50px);
    left: -21px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin: 5px 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    background: #FFFFFF;
    border: 1px solid black;
    border-radius: 40px;
    font-size: 18px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: black;
    color: #FFFFFF;
}

.testimonial-carousel .owl-dots {
    margin-top: 35px;
    margin-left: 3rem;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 15px;
    height: 15px;
    background: #FFFFFF;
    border: 1px solid black;
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: black;
}


/*** Team ***/
.team-item {
    transition: .5s;
    border: 1px solid transparent;
    transition: .5s;
}

.team-item:hover {

    border-color: black;
}


/*** Footer ***/
.footer {
    background-color: #080808;
    /* background: url(../img/footer.png) center center no-repeat; */
    background-size: contain;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.5);
    border: 1px solid rgba(256, 256, 256, .1);
    border-radius: 40px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: black;
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
    color: rgba(255,255,255,.5);
    font-weight: normal;
    transition: .3s;
}

.footer .btn.btn-link:hover {
    color: #FFFFFF;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 14px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: rgba(255,255,255,.5);
}

.footer .copyright a:hover {
    color: #FFFFFF;
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}



/* chat support */
.new {
    position: fixed;
    display: block; /* Change to block or flex if you want it visible */
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

.btn {
    margin: 20px;
}

/* WhatsApp Chat Popup Styles */
.chat-popup {
    color: #f3eeee;
    border: 1px solid #fff;
    display: none; /* Hidden by default */
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 350px;
    height: 500px;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    background-color: #4d4545;
    z-index: 1000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.popup-content {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Header */
.popup-header {
    background: #000;
    padding: 10px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px 10px 0 0;
}

.popup-header h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.popup-header .close {
    cursor: pointer;
    font-size: 24px;
}

/* Chat Messages Area */
#chatMessages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background-image: url('https://hellofuture.orange.com/app/uploads/2018/01/Intro-HELLO-FUTURE-1920x1080_v2.gif');
    background-size: cover; /* Ensure the image covers the entire container */
    background-position: center; /* Center the image */
    border-bottom: 1px solid #ccc;
    animation: slideIn 0.5s ease-out; /* Slide-in animation for the container */
    position: relative;
}

/* Chat Message Bubbles */
.chat-message {
    padding: 10px;
    background-color: #fff; /* Semi-transparent message background */
    border-radius: 1px;
    margin-bottom: 10px;
    max-width: 80%;
    word-wrap: break-word;
    animation: fadeInMessage 0.4s ease-in; /* Fade-in animation for new messages */
}

/* Fade-in animation for each new message */
@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(10px); /* Slight upward movement */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide-in animation for the chat container */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(100px); /* Slide up */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sent-message {
    background-color: #dcf8c6;
    align-self: flex-end;
}

.received-message {
    background-color: #fff;
    border: 1px solid #ccc;
    align-self: flex-start;
}

/* Chat Form */
#chatForm {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f0f0f0;
}

#chatMessage {
    flex: 1;
    height: 40px;
    padding: 10px;
    border: none;
    border-radius: 10px;
    outline: none;
    font-size: 14px;
    background-color: #fff;
    margin-right: 10px;
}

button {
    background-color: #0d6efd;
    border: none;
    padding: 10px;
    border-radius: 3px;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #128c7e;
}