body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: auto !important;
    cursor: none;
}


::selection {
    background-color: rgb(1, 19, 51);
    color: #ffffff;
}

:root {
    --text1: #36D8E2;
    --background1: #D0EFFC;
    --bgdark: #b6f1f5;
    --h1: #040b49;
}

:root {
    --text2: rgb(31, 31, 31);
    --primary: #005ee2;
    --secondary: #36D8E2;
    --dark: #002b5c;
    --light-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.08);
    --accent: #ce0aff;
    --dark2: #0a0a1a;
    --lightdark: #111827;
    --textlight: #cbd5e1;
    --linear-gradient: (to left, #005ee2fb, #9100f1, #ce0aff)
}






.bubble {
    max-width: 75%;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.4;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
}

.bot {
    background: #eeeeee;
    align-self: flex-start;
    border-bottom-left-radius: 0;
}

.user {
    background-image: linear-gradient(to right, #005ee2, #9100f1, #ce0aff);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 0;
}

.options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.options button {
    background: #ffffff;
    border: 2px solid #007bff;
    color: #007bff;
    border-radius: 25px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.options button:hover {
    background: #007bff;
    color: white;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@media (max-width: 600px) {
    .chat-container {
        height: 90vh;
        border-radius: 10px;
    }

    .bubble {
        font-size: 14px;
    }
}


.chat-box-btn {
    position: fixed;
    bottom: 70px;
    right: 20px;
    border-radius: 10px;
    padding: 0px 12px;
    z-index: +999;
    font-size: 30px;
}
.chat-box-btn i{
    color: rgb(255, 255, 255);
    font-size:20px;
}






.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: +999;
    background-color: white;
}
.img-fluid-logo,.img-fluid2{
    filter: brightness(150%) !important;
}

.navbar-nav li a {
    position: relative;
    /* text-shadow: 0 8px 16px rgb(156, 99, 206); */

    font-weight: 500;
    transition: .5s;
    padding: 0px 20px !important;

    &:hover {
        background: linear-gradient(to right, #005ee2, #9100f1, #ce0aff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        /* for firefox  */
        color: transparent;
        transform: scale(1.01);
    }
}

.navbar-nav li a::before {
    position: absolute;
    content: '';
    height: 2px;
    width: 0%;
    bottom: 0;
    left: 0;
    background-color: var(--color-accent-glow);
    transition: .5s linear;
    margin: 0px 0px -10px 0px;
    display: inline-block;
}

.navbar-nav li a:hover:before {
    width: 100%;
}

@media (max-width:768px) {
    .navbar-nav li a::before {
        position: absolute;
        content: '';
        height: 2px;
        width: 0%;
        bottom: 0;
        left: 0;
        background-color: var(--color-accent-glow);
        transition: .5s linear;
        margin: 0px 0px -1px 0px;
        display: inline-block;
    }

    .navbar-nav li a:hover:before {
        width: 30%;
    }
}

.dropdown-menu {
    border-radius: 0px !important;
    border: 2px solid rgba(134, 134, 245, 0.151) !important;
}

.dropdown-menu li {
    padding: 0px 0px 15px 0px;

}

.dropdown-menu li a {
    text-decoration: none;
    
    &:hover {
        background-color: rgba(245, 239, 255, 0.384);
    }
}




.nav-btn {
    border-radius: 5px;
    padding: 5px;
}

@media (max-width:768px) {
    .nav-btn {
        margin-bottom: 20px;
    }

    .nav-item {
        margin: 10px 0px !important;

    }

}


@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    .navbar .dropdown .dropdown-menu {
        display: none;
        transition: display 0.5s ease-in-out;
    }


    .navbar .dropdown:hover .dropdown-toggle::after {
        transform: rotate(-180deg);
        transition: transform 0.5s;
    }
}


.sitehead {
    font-size: 50px;
    font-weight: 700;
    font-family: sans-serif;
    text-align: center;
    background: linear-gradient(90deg, #005ee2, #9100f1, #ce0aff, #005ee2);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
}

@keyframes shine {
    0% {
        background-position: 0%
    }

    100% {
        background-position: 200%
    }
}

.navbar-expand-lg {
    background-color: white;
}

@media (max-width:1024px) {
    .sitehead {
        font-size: 30px;
    }
}

button {
    background-image: linear-gradient(to left, #005ee2fb, rgb(145, 0, 241), #ce0aff);
    /* color: rgb(42, 79, 199); */
    border: none;
    /* padding: 10px 20px; */
    border-radius: 6px;
    background-size: 200% auto;
    /* important for animation */
    transition: all 1s ease;
    /* smooth transition */
}

button:hover {
    background-position: right center;
    /* color: rgb(12, 80, 134); */
}

/* Home start */
.home-content {
    margin-top: 60px;
    padding: 100px 20px;
    background: linear-gradient(135deg, #f6fbff, #eaf7ff);
    text-align: center;
}



@keyframes sine {
    0% {
        filter: brightness(100%);
    }

    50% {
        filter: brightness(0%);
    }

    0% {
        filter: brightness(100%);
    }
}

.home-content-box span {
    color: var(--primary);
    font-size: 14px;
    letter-spacing: 1px;
    padding: 6px 15px;
    border-radius: 20px;
    background: var(--background1);
    display: inline-block;
    margin-bottom: 15px;
    margin-top: 50px;
}

@media (max-width:1024px) {
    .home-content-box span {
        margin-top: -10px;
    }
}

#typingTarget {
    font-size: clamp(28px, 6vw, 60px);
    font-weight: 800;
    background: linear-gradient(90deg, #7700ff, #007BFF, #cd03ff, #7700ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientFlow 4s linear infinite;
    white-space: wrap;
    margin: 0;
}

/* blinking caret */
#typingTarget::after {
    content: '|';
    margin-left: 6px;
    opacity: 1;
    animation: blink 1s steps(1) infinite;
    color: white;
    /* caret color */
    font-weight: 700;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes blink {

    0%,
    49% {
        opacity: 1
    }

    50%,
    100% {
        opacity: 0
    }
}

.home-content-box p {
    font-size: 18px;
    color: var(--text-dark);
    max-width: 700px;
    margin: 20px auto;
    line-height: 1.6;
}

@media (max-width:768px) {
    .home-content-box p {
        font-size: 14px;
        padding: 0px 20px;
    }
}

.home-btn button {
    padding: 10px 25px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: none;
    margin: 10px;
    transition: all .5s ease;
}

.home-btn button:nth-child(1) {
    /* background: var(--primary); */
    color: var(--background-light);
}
.home-btn button:nth-child(1) a {
    /* background: var(--primary); */
    text-decoration: none;
    color: white;
}

.home-btn button:nth-child(1):hover {
    /* background: white; */
    /* color: var(--primary); */
    box-shadow: 0px 0px 15px var(--shadow);
}

.home-btn button:nth-child(2) {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
}
.home-btn button:nth-child(2) a{
    text-decoration: none;
    color: var(--primary);
}
.home-btn button:nth-child(2):hover a{
    text-decoration: none;
    color: white;
}

.home-btn button:nth-child(2):hover {
    background: var(--primary);
    color: white;
}


/* Home end */


.imgcard {
    background-color: #ffffff00;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    /* padding-top: 190px;
    padding-bottom: 190px; */
    transition: transform 0.3s, box-shadow 0.3s;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
}

.imgcard img {
    width: 100%;
    height: 100%;
    /* object-fit: cover;       */
    object-position: center;
    border-radius: 10px;
    filter: brightness(110%);
}



.imgcard:hover {
    /* transform: scale(1.01);
    box-shadow: 0 5px 15px var(--dark2); */
    filter: brightness(90%);
}

.aboutit {
    padding: 20px;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
}

.aboutit2 {
    background-color: var(--background-light);
    padding: 10px;
    border-left: 4px solid var(--color-accent-glow);
    border-radius: 5px;
    opacity: 0;
    transition: 1s;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
}


.aboutit.animate,
.aboutit2.animate,
.imgcard.animate {
    opacity: 1;
    transform: translateX(0);
}

.aboutit2:hover {
    background-color: #7999c93a;
    transform: translateX(15px);
}


.k1 {
    font-size: 15px;
}

.k1 p i {
    padding: 5px 5px;
}

.k1 p span {
    padding: 0px 10px;
}





.service-head {
    font-family: sans-serif;
    font-weight: 700;
    white-space: normal;
    word-wrap: break-word;
    padding-top: 20px;
}




.service-card.animate {
    opacity: 1;
    transform: translateY(0px);
}



.icon-wrapper {

    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: white;
    margin-bottom: 1rem;
}

.icon-wrapper i {
    font-size: 25px;
    transition: 1s;
}

.service-card:hover .icon-wrapper {
    transform: rotate(360deg) ;
    transition: 1s;
}


.card-1 .icon-wrapper,
.card-6 .icon-wrapper,
.card-11 .icon-wrapper {
    background-color: #1a73e8;
}

.card-2 .icon-wrapper,
.card-7 .icon-wrapper {
    background-color: #fb7185;
}

.card-3 .icon-wrapper,
.card-8 .icon-wrapper {
    background-color: #6bda6f;
}

.card-4 .icon-wrapper,
.card-9 .icon-wrapper {
    background-color: #ff9800;
}

.card-5 .icon-wrapper,
.card-10 .icon-wrapper {
    background-color: #673ab7;
}

.see-how-it-works {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a73e8;
    text-decoration: none;
}



.service-card {
    transition: all 0.5s ease;
    border: 1px solid rgb(225, 246, 255) !important;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 6px 15px rgba(209, 209, 209, 0.39);
    position: relative;
    color: var(--lightdark);
    height: 100%;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
    
}
.service-card h5 span{
    font-size: 15px !important;
}

.service-col-card {
    padding: 0px;
}

@media (max-width:768px) {

    .service-col-card,
    .project-col-card {
        padding: 0px 30px !important;
    }
}

/* 2. Hover State (Exact Glass Morphism Look) */
.service-card:hover {
    transform: translateY(-8px);
    color: #1a1a1a;
}

.service-card1:hover,
.service-card6:hover,
.service-card11:hover {
    background: linear-gradient(135deg,
            rgba(176, 213, 247, 0.295),
            rgba(165, 237, 255, 0.616));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px 0 rgba(100, 180, 255, 0.322);
}

.service-card2:hover,
.service-card7:hover {
    background: linear-gradient(135deg,
            rgba(255, 208, 208, 0.5),
            rgb(250, 190, 255));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px 0 rgba(237, 100, 255, 0.315);
}

.service-card3:hover,
.service-card8:hover {
    background: linear-gradient(135deg,
            rgba(208, 255, 189, 0.5),
            rgb(143, 255, 227));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px 0 rgba(105, 255, 100, 0.308);
}

.service-card4:hover,
.service-card9:hover {
    background: linear-gradient(135deg,
            rgba(255, 245, 213, 0.5),
            rgb(255, 242, 182));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px 0 rgba(255, 188, 100, 0.178);
}

.service-card5:hover,
.service-card10:hover {
    background: linear-gradient(135deg,
            rgba(248, 212, 255, 0.5),
            rgba(236, 161, 255, 0.76));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px 0 rgba(172, 100, 255, 0.25);
}


/* .service-card:hover .card-text {
    color: #444 !important;
} */


.service-card:hover .see-how-it-works {
    color: var(--color-accent-neon);
    font-weight: 600;
}



.icon-wrapper {

    background: var(--color-accent-neon);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: white;
    margin-bottom: 1rem;
    transition: all 0.5s ease;
}






/* Left and right hidden states */
.from-left {
    transform: translateX(-150px);
}

.from-right {
    transform: translateX(150px);
}

/* Active (visible) state */
.visible {
    transform: translateX(0);
    opacity: 1;
}


.servicepara {
    font-size: 17px;
    font-weight: 500;
    animation: service-para 2s ease-in-out reverse;
}

@media (max-width:768px) {
    .servicepara {
        padding: 0px 20px;
    }
}

@keyframes service-para {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-100px);
        opacity: 0;
    }
}

.servicecard {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 10px 8px;
    color: var(--h1);
}

.servicetick {
    font-size: .9rem;
    font-weight: 500;
    margin: 6px 0 0 6px;
    line-height: 2;
}


/* founder */
.meat-out-founder h2 {
    font-weight: 700;
}

.founder-img div {
    height: 100%;
    width: 100%;
    /* border: 15px solid rgba(135, 207, 235, 0.315); */
    /* box-shadow: 0px 0px 10px 0px var(--text1); */
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
    
}

.founder-img img {
    height: 100%;
    width: 100%;
    background-size: cover;
    transition: 1s;
    filter: brightness(98%);
    &:hover {
        background-size: cover;
    }
}


.founder-content h4 {
    color: var(--h1);
    font-weight: 700;
    font-size: 30px;
    padding: 70px 0px 0px 10px;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
}

@media (max-width:768px) {
    .founder-content h4 {
        padding: 10px 0px 0px 10px;
    }
}

.founder-content h6 {
    color: var(--h1);
    font-weight: 700;
    font-size: 20px;
    padding: 0px 0px 20px 10px;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
}

.founder-content h4 span {
    color: var(--text1);
}

.founder-content p {
    color: rgb(80, 78, 78);
    font-weight: 500;
    text-align: justify;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
}

.founder-content button {
    text-decoration: none;
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
    padding: 3px;
    border-radius: 5px;
    color: white;
}

.founder-content button a {
    font-weight: 600;
    color: white;
}

.founder-img div.animate,
.founder-content h6.animate,
.founder-content h4.animate,
.founder-content p.animate {
    opacity: 1;
    transform: translateX(0);
}

.founder-content button.animate {
    opacity: 1;
    transform: translateX(0);
}


.founder-content a::after {
    content: '→';
    padding: 0px 10px;
    transition: .5s;
    color: white;
    margin-top: 10px !important;
}

.founder-content a:hover::after {
    padding: 0px 10px;
    color: white;
}



/*  */
:root {
    --primary-purple: #7a37e1;
    --secondary-pink: #e45183;
    --background-light: #f8f8ff;
    /* A slight off-white for the background */
    --text-dark: #333;
}



/* ----------------------------------
    HERO SECTION STYLING
-------------------------------------*/
.hero-section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    /* Create the subtle gradient background visible in the image */
    background: linear-gradient(180deg, #ffffff 0%, #f0f3ff 100%);
}

.text-malhotra {
    background: linear-gradient(to right, #005ee2, #9100f1, #ce0aff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* for firefox */
    color: transparent;
}

.text-it {
    color: var(--secondary-pink);
}

/* Feature List */
.feature-list li {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
@media (max-width:768px) {
    .feature-list li{
        margin-left: 20px;
    }
}

.check-icon {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    /* The SVG fill color is set inline in the HTML to match the specific color for each checkmark */
}


/* Image Container Styling (The key to the floating/glowing effect) */
.image-container {
    position: relative;
    padding: 10px;
    /* Space for the shadow/glow */
    border-radius: 20px;
    /* Custom Box Shadow to mimic the glowing purple/blue/pink effect */
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        /* Standard shadow for depth */
        0 2px 4px -2px rgba(0, 0, 0, 0.1),
        0 0 20px 5px rgba(122, 55, 225, 0.3),
        /* Purple glow */
        0 0 30px 10px rgba(228, 81, 131, 0.2);
    /* Pink glow */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
    /* Slight background for the "container" */
}

.team-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    /* Slightly smaller radius than container */
    display: block;
}

/* ----------------------------------
    RESPONSIVENESS ADJUSTMENTS
-------------------------------------*/

/* Adjust spacing for smaller screens */
@media (max-width: 991px) {
    .text-lg-start {
        text-align: center !important;
    }

    .display-5 {
        font-size: 2.5rem;
        /* Smaller title on mobile */
    }

    .feature-list {
        text-align: left;
        /* Keep bullet points left-aligned */
        padding-left: 20px;
    }
}






/* project section */
.projects-achieve {
    font-weight: 700;
    font-family: sans-serif;
    text-align: center;
}

/* @media (max-width:768px) {
    .projects-achieve{
        font-size: 30px;
    }
} */


.projects-para {
    font-size: 16px;
    font-family: sans-serif;
    text-align: center;
    color: var(--h1);
    margin-bottom: 40px;
}

.project-card {
    background: #ffffff;
    border: 1px solid;
    border-image: linear-gradient(to right, #005ee2, #9100f1, #ce0aff) 1;
    text-align: center;
    padding: 25px 20px;
    transition: all 0.4s ease-in-out;
    height: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    cursor: none;
    opacity: 0;
    /* transform: translateY(100px); */
    transform: scale(.1);
}

.pc1 {
    transition: all .5s ease-in-out;
}

.pc2 {
    transition: all .8s ease-in-out;
}

.pc3 {
    transition: all 1.1s ease-in-out;
}

.pc4 {
    transition: all 1.4s ease-in-out;
}



.project-card.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Hover effect */
.project-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 8px 20px rgba(49, 109, 197, 0.35);
}

/* Icon */
.project-card i {
    font-size: 40px;
    color: #6373ff;
    margin-bottom: 15px;
}

/* Heading */
.project-card h5 {
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--h1);
    font-size: 18px;
}

/* Description */
.project-card p {
    font-size: 14px;
    color: rgb(2, 2, 49);
    margin-bottom: 0;
    line-height: 1.5;
    font-weight: 500;
}

/* Responsive fix: gap between cards */
@media (max-width: 991px) {
    .project-card {
        margin-bottom: 20px;
    }
}






/* Contact Section Styling */
.contact-section {
    padding: 80px 20px;
    background-color: #eff6ff;
}

.contact-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
    ;
}

.contact-subtitle {
    font-size: 3.8vh;
    line-height: 1.4;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    margin-bottom: 40px;
    font-weight: 300;
}

.contact-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(100px);
    transition: all .5s ease-in-out;

    &:hover {
        box-shadow: 0px 0px 10px 5px rgb(187, 187, 187);
    }
}

.contact-form.animate,
.contact-card.animate {
    opacity: 1;
    transform: translateX(0);
}

.contact-card i {
    font-size: 1.5rem;
    margin-right: 10px;
}

.contact-info {
    font-size: 0.95rem;
    color: #333;
    height: 90px;

}

.contact-form {
    background: #fff;
    border-radius: 12px !important;
    border-radius: 30px;
    width: 89%;
    margin-left: 20px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
}

.contact-form label {
    font-weight: 600;
}

.contact-form .form-control {
    margin-bottom: 15px;
}

.contact-form button {
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-weight: 600;
    color: white;
}






@media(max-width: 768px) {
    .contact-section {
        padding: 50px 15px;
    }

    .contact-title {
        font-size: 1.8rem;
    }

    .contact-subtitle {
        font-size: 0.95rem;
    }

    .contact-map {
        height: 250px;
    }

    .contact-form {
        margin: 0px;
        width: 100%;
    }
}

.contact-map {
    width: 100%;
    height: 450px;
}






/* Styling for the links and the hover effect */
.footer-link {
    color: #495057 !important;
    /* Dark grey link color */
    text-decoration: none;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: inline-block;
    /* Essential for transform to work well */
}

.footer-link:hover {
    color: #007bff !important;
    /* Blue color on hover */
    transform: translateX(5px);
    /* Moves link slightly to the right (the 'bdya hover') */
}

/* General heading and text styles */
.footer-heading {
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
    ;
    font-weight: bold;
    margin-bottom: 1rem;
}

.footer-branding-text {
    color: #495057;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.footer-brand-it {
    color: var(--h1);
    font-weight: bold;
}

.footer-bg {
    background-color: rgb(247, 254, 255);
}



.footer {
    background-color: #c8b0ff;
}


:root {
    --color-accent-neon: #2788d8;
    --color-accent-glow: #2788d8;
}

#cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--color-accent-neon);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    box-shadow: 0 0 10px var(--color-accent-neon);
}

/* Lagging Outline Circle */
#cursor-outline {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-accent-glow);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.6;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, opacity 0.3s ease, border-width 0.3s ease;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
    /* cursor: none; */
}

/* Hover Effects */
a:hover~#cursor-outline,
button:hover~#cursor-outline,
.card:hover~#cursor-outline {
    width: 60px;
    height: 60px;
    opacity: 0.8;
    border-width: 4px;
    background: rgba(139, 92, 246, 0.1);
}

a:hover~#cursor-dot,
button:hover~#cursor-dot,
.card:hover~#cursor-dot {
    width: 16px;
    height: 16px;
    box-shadow: 0 0 20px var(--color-accent-neon);
}




@media (max-width:768px) {
    #cursor-dot{
        display: none;
    }
    #cursor-outline{
        display: none;
    }
}




















/* chatbox */
    

   

    .chat-toggle-btn {
    position: fixed;
    bottom: 60px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: white;
    border: none;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 120, 255, 0.4);
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10000; /* Highest Z-index */
}

.chat-toggle-btn:hover {
    transform: scale(1.05);
}

/* ------------------------------------ */
/* 2. Chat Widget Container */
/* ------------------------------------ */
.chat-container {
    position: fixed;
    bottom: 20px; /* Position above the toggle button */
    right: 20px;
    width: 350px;
    max-height: 500px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    overflow: hidden;
    display: flex; 
    flex-direction: column;
    z-index: 9999;
    display: none; 
    cursor: text;
    transition: all 0.3s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .chat-container {
        width: 90%;
        right: 5%;
        bottom: 80px;
    }
}

/* ------------------------------------ */
/* 3. Header */
/* ------------------------------------ */
header {
    background: linear-gradient(90deg, #0078ff, #00c6ff);
    color: white;
    text-align: center;
    padding: 15px 10px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.chat-header-title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.chat-header-subtitle {
    margin: 0;
    font-size: 12px;
    opacity: 0.8;
}

/* ------------------------------------ */
/* 4. Chat Window (Messages Area) */
/* ------------------------------------ */
#chat-window {
    flex-grow: 1; /* Allows it to take up available space */
    min-height: 250px;
    max-height: 250px;
    padding: 10px;
    overflow-y: auto;
    background-color: #f7f7f7;
}

/* Chat Bubbles */
.chat-bubble {
    padding: 8px 12px;
    border-radius: 15px;
    margin-bottom: 8px;
    max-width: 80%;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.4;
}

.bot-bubble {
    background-color: #e5e5ea;
    color: #333;
    border-bottom-left-radius: 2px;
    margin-right: auto;
}

.user-bubble {
    background-color: #0078ff;
    color: white;
    border-bottom-right-radius: 2px;
    margin-left: auto;
    text-align: right;
}

.typing-indicator {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin: 5px 0;
}

/* ------------------------------------ */
/* 5. Input Area (Text & Options) */
/* ------------------------------------ */
#input-area {
    padding: 10px;
    border-top: 1px solid #eee;
    background-color: white;
}

/* Options/Buttons */
.options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    text-align: center;
}

.option-button {
    color: #ffffff;
    border: 1px solid #0078ff;
    padding: 8px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.option-button:hover {
    background-color: #0078ff;
    color: white;
}

/* Text Input Container */
.text-input-container {
    display: flex;
    gap: 5px;
}

#text-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
    font-size: 14px;
}

#send-btn {
    background: #0078ff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

#send-btn:hover {
    background: #005bb5;
}

/* ------------------------------------ */
/* 6. Start Over Area */
/* ------------------------------------ */
#start-over-container {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #eee;
    background-color: white;
}

.start-over-btn {
    background: #dc3545; /* Red for reset/danger */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.start-over-btn:hover {
    background: #c82333;
}








.modal-overlay {
  display: none; /* Hidden initially */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-box {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: popIn 0.3s ease-in-out;
}

.modal-box h4 {
  margin-bottom: 10px;
  color: #d9534f;
}

.modal-box button {
  margin-top: 15px;
  padding: 8px 18px;
  background: linear-gradient(90deg, #007bff, #00bfff);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}