body{
    font-family: Arial, sans-serif;
    background: #f7fff7;
}
.navbar-brand img{

    object-fit: contain;

}

.navbar{

    z-index: 999;

}
.hero-section{

    min-height: 90vh;

    display: flex;

    align-items: center;

    background:
    linear-gradient(
        to bottom,
        #f0fff4,
        #ffffff
    );

}

.card{

    transition: 0.3s ease;

}

.card:hover{

    transform: translateY(-5px);

}
.hero-title{
    font-size: 65px;
    font-weight: bold;
    color: #146c43;
}

.hero-text{
    font-size: 20px;
    color: #555;
}

.chat-card{
    background: white;
    border-radius: 30px;
    padding: 40px;
}

.question-box{
    background: #f2f2f2;
    padding: 15px;
    border-radius: 20px;
    margin-top: 20px;
}

.answer-box{
    background: #198754;
    color: white;
    padding: 15px;
    border-radius: 20px;
    margin-top: 20px;
}

.feature-card{
    background: white;
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    transition: 0.3s;
}

.feature-card:hover{
    transform: translateY(-10px);
}

.feature-icon{
    font-size: 60px;
}

.footer-section{
    background: #14532d;
    color: white;
    padding: 50px 0;
    margin-top: 80px;
}
#chatBox{

    height: 500px;

    overflow-y: auto;

    padding: 20px;

    background: #f8fff8;

    border-radius: 20px;

}

/* USER */

.user-msg{

    background: #198754;

    color: white;

    padding: 14px 18px;

    border-radius: 20px;

    display: inline-block;

    max-width: 80%;

    font-size: 16px;

}

/* AI */

.ai-msg{

    background: white;

    border: 1px solid #dcdcdc;

    padding: 14px 18px;

    border-radius: 20px;

    display: inline-block;

    max-width: 80%;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    font-size: 16px;

}
/* =====================================
   MOBILE RESPONSIVE
===================================== */

@media(max-width: 991px){

    /* NAVBAR */

    .navbar-collapse{

        background: white;

        padding: 20px;

        border-radius: 20px;

        margin-top: 15px;

        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
       
    }

    /* NAV LINKS */

    .navbar-nav{

        gap: 10px;

    }

    .navbar .btn{

        width: 100%;

    }

    /* HERO SECTION */

    .hero-section{

        text-align: center;

        padding-top: 40px;

    }

    .hero-section h1{

        font-size: 36px;

    }

    .hero-section p{

        font-size: 16px;

    }

    /* CHAT BOX */

    #chatBox{

        height: 400px;

    }

    /* CARD */

    .card{

        border-radius: 20px;

    }

    /* BUTTON */

    .btn-lg{

        width: 100%;

    }

}

/* =====================================
   NAVBAR
===================================== */

.main-navbar{

    min-height: 90px;

    z-index: 999;

}

/* LOGO */

.logo-img{

    height: 70px;

    width: auto;

    object-fit: contain;

}

/* NAV LINKS */

.navbar-nav .nav-link{

    color: #222 !important;

    font-size: 16px;

    margin-left: 10px;

    transition: 0.3s;

}

.navbar-nav .nav-link:hover{

    color: #198754 !important;

}

/* =====================================
   MOBILE RESPONSIVE
===================================== */

@media(max-width:991px){

    /* NAVBAR */

    .main-navbar{

        padding: 10px 0;

    }

    /* LOGO */

    .logo-img{

        height: 55px;

    }

    /* MENU */

    .navbar-collapse{

        background: #fff;

        padding: 20px;

        border-radius: 20px;

        margin-top: 15px;

        box-shadow: 0 5px 20px rgba(0,0,0,0.08);

    }

    /* NAV ITEMS */

    .navbar-nav{

        gap: 10px;

        align-items: start !important;

    }

    /* LINKS */

    .navbar-nav .nav-link{

        margin-left: 0;

        font-size: 18px;

    }

    /* BUTTONS */

    .w-mobile{

        width: 100%;

        text-align: center;

    }

}
/* =====================================
   FOOTER
===================================== */

.footer-section{

    background: linear-gradient(
        135deg,
        #198754,
        #146c43
    );

}

/* LINKS */

.footer-links li{

    margin-bottom: 12px;

}

.footer-links a{

    color: white;

    text-decoration: none;

    transition: 0.3s;

    font-size: 15px;

}

.footer-links a:hover{

    color: #d4ffd4;

    padding-left: 5px;

}

/* TEXT */

.footer-section p,
.footer-section small,
.footer-section h3,
.footer-section h5{

    color: white !important;

}

/* MOBILE */

@media(max-width:991px){

    .footer-section{

        text-align: center;

    }

}