/* TABLE OF CONTENTS */
/* ------------------
1. General
2. Navbar
3. Banner
4. Client
5. About 
6. Features
7. Pricing 
8. Testimonials
9. Brands
10. FAQs 
11. Footer
12. drop down
13. right icon colour 
14. contact register form
-------------------- */

/* 1 General */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  /* Background Color */
  --bg-black: #090b3c;
  --bg-white: #fff;
  --bg-light-white: #fcfcfc;
  --bg-light-2: #f2f7fa;
  --bg-dark-green: #1081ad;
  --bg-features-1: #fff6d6;
  --bg-features-2: #ebdcf9;
  --bg-features-3: #ddf5fc;
  --bg-features-4: #dcf6e8;
  --bg-features-5: #f8e4e1;
  --bg-features-6: #fbffd4;

  /* Text Color */
  --text-black: #000;
  --text-white: #fff;
  --text-dark-gray: #4c535d;
  --text-light-2: #798089;
  --text-light-3: #5e5e72;
  --text-light-4: #a0a0a0;
  --text-dark-green: #12c4a0;
  --text-orange: #ff5d2a;
  --text-yellow: #ffc100;

  /* Fonts */
  --primary-font: Quicksand;
  --secondary-font: "Poppins", sans-serif;
  --normal-font-weight: 400;
  --bold-font-weight: 700;
}
body {
  font-family: var(--primary-font);
  font-weight: var(--normal-font-weight);
  background-color: var(--bg-white);
}

/* Custom CSS */
.learn-more-btn {
  background-color: var(--bg-black);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-white) !important;
  padding: 12px 29px !important;
  border-radius: 10px;
  border: 2px solid var(--bg-black);
  box-shadow: 0 10px 20px rgb(0 0 0 / 10%);
  display: inline-block;
  text-decoration: none;
  transition: 0.7s;
}
.btn-extra-header {
  color: var(--text-dark-gray) !important;
  background-color: transparent;
  border: 2px solid var(--text-dark-gray);
}

/* 2 Navbar */
.header_wrapper .navbar {
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.header_wrapper .navbar-brand img {
  max-width: 210px;
  height: auto;
}
.header_wrapper .menu-navbar-nav {
  width: 70%;
  display: flex;
  justify-content: center;
}
.header_wrapper .nav-item {
  margin: 0 10px;
}
.header_wrapper .nav-item .nav-link {
  font-weight: var(--bold-font-weight);
  font-size: 18px;
  color: var(--text-dark-gray);
  line-height: 1;
}
.header_wrapper .nav-item .nav-link.active {
  color: var(--text-dark-green);
}
.header-scrolled {
  position: fixed;
  margin-top: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 85px;
  background: var(--bg-white);
  -webkit-box-shadow: 0 4px 6px 0 rgba(12, 0, 46, 0.05);
  box-shadow: 0 4px 6px 0 rgba(12, 0, 46, 0.05);
}
.header-scrolled .navbar-brand img {
  width: 190px;
  height: auto;
  animation: animated 0.1s ease-in-out;
}
@keyframes animated {
  0% {
    width: 210px;
  }
  50% {
    width: 200px;
  }
  100% {
    width: 190px;
  }
}
.header-scrolled .nav-item .nav-link {
  font-size: 17px;
}

/* 3 Banner */
.banner_wrapper {
  display: flex;
  width: 100%;
  padding: 100px 0 125px;
  background: url(../images/bg.png) no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
}
.banner_wrapper .banner-subtitle {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 15px;
  color: var(--text-light-3);
}
.banner_wrapper .banner-title {
  font-family: var(--secondary-font);
  font-weight: 800;
  font-size: 60px;
  text-transform: capitalize;
  line-height: 1.15;
  margin-bottom: 25px;
  color: var(--text-black);
}
.banner_wrapper .banner-title span {
  color: var(--text-dark-green);
}
.banner_wrapper .banner-title-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 40px;
  max-width: 450px;
  color: var(--text-light-2);
}
.banner_wrapper .learn-more-btn-section {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 20px;
}
.banner_wrapper .header-img-section img {
  width: 100%;
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(20px);
  }
  100% {
    transform: translatey(0px);
  }
}

/* 4 Client */
.clients {
  padding: 80px 0 50px;
  background: var(--bg-light-2);
}
.clients h2 {
  font-family: var(--secondary-font);
  font-weight: 500;
  font-size: 25px;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 40px;
  color: var(--text-light-2);
}
.client-slider-section .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}
.client-slider-section img {
  width: auto !important;
  height: 50px;
  object-fit: cover;
}

/* 5 About */
.about_wrapper {
  padding: 100px 0 0;
}
.about_wrapper .about_number {
  font-family: var(--secondary-font);
  font-weight: 800;
  font-size: 24px;
  padding: 4px 17px;
  border-radius: 10px;
  margin-bottom: 25px;
  max-width: 44px;
  color: var(--text-white);
  background-color: var(--bg-dark-green);
}
.about_wrapper .about_title {
  font-family: var(--secondary-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.25;
  max-width: 1000px;
  margin-bottom: 25px;
  color: var(--text-black);
}
.about_wrapper .about_text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  max-width: 700px;
  color: var(--text-light-2);
}
.about_wrapper .innovate {
  background: var(--bg-light-2);
  padding: 80px 0;
}
.about_wrapper .projects {
  padding: 30px 0;
}
.about_wrapper .projects h2 {
  color: var(--text-orange);
  font-family: Poppins;
  font-weight: 800;
  font-size: 50px;
  line-height: 1.5;
  margin-bottom: 0;
}
.about_wrapper .projects p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-light-2);
}

/* 6 Features */
.features_wrapper {
  padding: 100px 0 80px;
  background: var(--bg-light-2);
}
.features_wrapper .features_subtitle {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 5px;
  color: var(--text-light-3);
}
.features_wrapper .features_title {
  font-family: var(--secondary-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.25;
  margin-bottom: 25px;
  color: var(--text-black);
}
.features_wrapper h3 {
  font-family: var(--secondary-font);
  font-size: 20px;
  font-weight: var(--bold-font-weight);
  line-height: 1.5;
  margin-bottom: 20px;
  color: var(--text-black);
}
.features_wrapper .features_text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-light-2);
}
.features_wrapper .ft-1 {
  background: var(--bg-features-1);
  padding: 40px;
  border-radius: 15px;
}
.features_wrapper .ft-1:before {
  content: url(../images/consultancy.png);
  position: absolute;
  display: block;
  margin-top: -70px;
}
.features_wrapper .ft-2 {
  background: var(--bg-features-2);
  padding: 40px;
  border-radius: 15px;
}
.features_wrapper .ft-2:before {
  content: url(../images/solutions.png);
  position: absolute;
  display: block;
  margin-top: -70px;
}
.features_wrapper .ft-3 {
  background: var(--bg-features-3);
  padding: 40px;
  border-radius: 15px;
}
.features_wrapper .ft-3:before {
  content: url(../images/simple.png);
  position: absolute;
  display: block;
  margin-top: -70px;
}
.features_wrapper .ft-4 {
  background: var(--bg-features-4);
  padding: 40px;
  border-radius: 15px;
}
.features_wrapper .ft-4:before {
  content: url(../images/deadline.png);
  position: absolute;
  display: block;
  margin-top: -70px;
}
.features_wrapper .ft-5 {
  background: var(--bg-features-5);
  padding: 40px;
  border-radius: 15px;
}
.features_wrapper .ft-5:before {
  content: url(../images/data.png);
  position: absolute;
  display: block;
  margin-top: -70px;
}
.features_wrapper .ft-6 {
  background: var(--bg-features-5);
  padding: 40px;
  border-radius: 15px;
}
.features_wrapper .ft-6:before {
  content: url(../images/flexible.png);
  position: absolute;
  display: block;
  margin-top: -70px;
}

/* 7 Pricing */


.price_wrapper {
  padding: 100px 0 0;
}
.price_wrapper .pricing_subtitle {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 5px;
  color: var(--text-light-3);
}
.price_wrapper .pricing_title {
  font-family: var(--secondary-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.25;
  margin-bottom: 25px;
  color: var(--text-black);
}
.price_wrapper .pricing_card {
  background-color: var(--bg-white);
  box-shadow: 0 1px 20px rgb(0 0 0 / 15%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 40px 45px 40px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 30px;
}
.price_wrapper .pricing_card:hover {
  box-shadow: 0 2px 29px rgb(0 0 0 / 20%);
  z-index: 5;
  cursor: pointer;
}
.price_wrapper .pricing_period {
  font-family: var(--secondary-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  padding-bottom: 0px;
  color: var(--text-light-2);
}
.price_wrapper .pricing_card img {
  max-width: 75%;
}
.price_wrapper .pricing_rate {
  color: var(--text-black);
  font-weight: 800;
  font-family: var(--secondary-font);
  font-size: 34px;
  line-height: 1.25;
}
.price_wrapper .pricing_text {
  font-size: 12px;
  font-family: var(--secondary-font);
  font-weight: 600;
  color: var(--text-black);
  margin: 0;
}
.price_wrapper .pricing_all_plan {
  text-align: center;
  width: 100%;
  display: flex;
  margin: 15px 0;
}
.price_wrapper .pricing_all_plan ul {
  width: 100%;
  list-style: none;
  padding-inline-start: 0;
}
.price_wrapper .pricing_all_plan li {
  font-size: 14px;
  color: var(--text-dark-gray);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  margin-top: 5px;
}
.price_wrapper .pricing_all_plan li strike {
  color: var(--text-light-4);
}
.price_wrapper .learn-more-btn {
  background: var(--bg-dark-green);
  border-color: var(--bg-dark-green);
}
.price_wrapper .featured {
  box-shadow: 0 2px 40px rgb(0 0 0 / 5%);
  background-color: var(--bg-white);
  border: 5px solid var(--text-black);
  padding-top: 80px;
  padding-bottom: 80px;
}
.price_wrapper .pricing-ribbon {
  width: 120px;
  height: 120px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 20;
}
.price_wrapper .pricing-ribbon span {
  font-family: var(--secondary-font);
  position: absolute;
  display: block;
  width: 225px;
  padding: 5px 0;
  background-color: var(--bg-black);
  color: var(--text-white);
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 1px 1px rgb(0 0 0 / 20%);
  text-transform: uppercase;
  text-align: center;
  right: -45px;
  top: 30px;
  transform: rotate(-45deg);
}
.price_wrapper .btn-featured {
  background-color: var(--bg-black);
  border-color: var(--bg-black);
}
.price_wrapper .featured .pricing_rate {
  font-size: 40px;
}
.free_trial {
  background: var(--bg-light-2);
  padding: 80px 0;
  margin-top: 100px;
}
.free_trial .free_title {
  font-family: var(--secondary-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.25;
  margin-bottom: 0;
  color: var(--text-black);
}
.free_trial .learn-more-btn {
  background: var(--bg-black);
  border-color: var(--bg-black);
}
.free_trial .learn-more-btn .fa {
  font-size: 22px;
  margin-right: 5px;
  vertical-align: bottom;
  color: var(--text-yellow);
}

/* 8 Reviews*/
.testimonial_wrapper {
  padding: 100px 0;
}
.testimonial_wrapper .testimonial_subtitle {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 5px;
  color: var(--text-light-3);
}
.testimonial_wrapper .testimonial_title {
  font-family: var(--secondary-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.25;
  margin-bottom: 80px;
  color: var(--text-black);
}
.testimonial_wrapper .testimonial_card {
  border-radius: 15px;
  padding: 50px;
  background-color: var(--bg-white);
  box-shadow: 0 5px 40px rgb(0 0 0 / 15%);
}
.testimonial_wrapper .testimonial_card h3 {
  font-family: var(--secondary-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 5px;
  color: var(--text-black);
}
.testimonial_wrapper .testimonial_role {
  font-size: 19px;
  font-weight: auto;
  line-height: 1;
  margin-bottom: 25px;
  color: var(--text-dark-green);
}
.testimonial_wrapper .testimonial_text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
/* 9 Brands*/
.brand_wrapper {
  padding: 100px 0;
  background: var(--bg-light-2);
}
.brand_wrapper .brand_subtitle {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 5px;
  color: var(--text-light-3);
}
.brand_wrapper .brand_title {
  font-family: var(--secondary-font);
  font-weight: 800;
  font-size: 35px;
  line-height: 1.25;
  margin-bottom: 25px;
  color: var(--text-black);
}
.brand_wrapper .showcase_card img {
  width: 100%;
  border-radius: 15px;
  padding: 45px 25px;
  background-color: var(--bg-light-white);
  text-shadow: 0 5px 40px rgb(0 0 0 / 8%);
  transition: 0.7s;
}
.brand_wrapper .showcase_card img:hover {
  transform: scale(1.2); /*for Zooming*/
  position: relative;
  z-index: 2;
}
/* 10  FAQs*/
.faq_wrapper {
  padding: 100px 0 0;
}
.faq_wrapper .faq_subtitle {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 5px;
  color: var(--text-light-3);
}
.faq_wrapper .faq_title {
  font-family: var(--secondary-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 42.25px;
  margin-bottom: 25px;
  color: var(--text-black);
}
.faq_wrapper .accordion-button:hover,
.faq_wrapper .accordion-button:focus {
  box-shadow: none;
  color: var(--text-dark-green);
}
.faq_wrapper .accordion-item {
  border: 0;
}
.faq_wrapper .accordion-button {
  font-size: 21px;
  font-family: var(--secondary-font);
  font-weight: 600;
  color: var(--text-black);
  border-radius: 0;
  padding: 0 0 15px 0;
  border-bottom: 0px solid var(--text-light-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.faq_wrapper .accordion-button::after {
  content: "\002B";
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  background-image: none;
}
.faq_wrapper .accordion-button:not(.collapsed)::after {
  content: "\2212";
  font-family: "Font Awesome 5 Free";
  font-weight: 800;
  display: inline-block;
  background-image: none;
  transform: unset;
}
.faq_wrapper .accordion-body {
  color: var(--text-black);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 25px;
  line-height: 1.5;
}

/* 11 Footer*/
.footer_wrapper {
  padding: 100px 0 25px;
  background: url(../images/bg_footer.png);
  background-size: cover;
  background-color: var(--bg-black);
  color: var(--bg-white);
}
.footer_wrapper .footer_logo img {
  max-width: 30%;
}
.footer_wrapper .footer_text,
.footer_wrapper .footer_text a {
  margin-top: 30px;
  color: var(--bg-white);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.footer_wrapper .footer_title {
  font-family: var(--secondary-font);
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var();
  color: var(--bg-white);
  margin-bottom: 25px;
}
.footer_wrapper .footer_social_media_icon {
  padding-right: 30px;
  color: var(--text-white);
  font-size: 20px;
}
.footer_wrapper .footer_credits {
  color: var(--text-white);
  border-top: 1px solid var(--text-white);
  padding-top: 20px;
  margin-top: 30px;
}
.footer_wrapper .footer_credits a {
  color: var(--text-yellow);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

/* 12 dropdown*/


.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

/* 13 right icon*/
 ul.check-list li::marker {
    content: '\2713\0020'; /* Unicode hex code followed by a space */
    color:red /* Optional: change the color */
  }

 /* contact Registration form */
.registration-form {
    font-family: 'Ubuntu', sans-serif;
    max-width: 500px;
    width: 90%; /* This makes it responsive on small screens */
    margin: 20px auto;
    padding: 30px;
    background: white;
    border-radius: 8px;
    border: 1px solid white;
    box-sizing: border-box; /* Ensures padding doesn't break layout */
}

.registration-form h2 {
    color: #0c71c3; 
    margin-bottom: 20px;
    text-align: center; /* Centered for better mobile look */
}

.registration-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #0c71c3;
}

.registration-form input, 
.registration-form select, 
.registration-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
}

.registration-form button {
    background-color: #0c71c3;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

.registration-form button:hover {
    background-color: #095a9b;
}

/* 15 WhatsApp Floating Button */
.whatsapp-widget { position:fixed; bottom:100px; right:30px; z-index:9999; }
.whatsapp-float-btn {
    width:60px; height:60px; border-radius:50%; background:#25d366; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:32px;
    cursor:pointer; box-shadow:0 4px 20px rgba(37,211,102,0.5);
    position:relative; transition:transform .3s; text-decoration:none;
}
.whatsapp-float-btn:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(37,211,102,0.7); color:#fff; }
.whatsapp-pulse {
    position:absolute; width:100%; height:100%; border-radius:50%;
    background:rgba(37,211,102,0.3); animation:waPulse 2s infinite; z-index:-1;
}
@keyframes waPulse { 0%{transform:scale(1);opacity:0.6;} 100%{transform:scale(1.6);opacity:0;} }
.whatsapp-badge {
    position:absolute; top:-4px; right:-4px; background:#fff; color:#25d366;
    width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.whatsapp-popup {
    position:absolute; bottom:75px; right:0; width:320px; background:#fff;
    border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,0.15);
    overflow:hidden; display:none; animation:popupSlide .3s ease;
}
.whatsapp-popup.show { display:block; }
@keyframes popupSlide { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.whatsapp-popup-header {
    background:#075e54; color:#fff; padding:16px; display:flex;
    justify-content:space-between; align-items:center;
}
.whatsapp-popup-header-info { display:flex; align-items:center; gap:12px; }
.whatsapp-popup-avatar {
    width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center; font-size:20px;
}
.whatsapp-popup-header strong { display:block; font-size:14px; }
.whatsapp-popup-header small { opacity:0.8; font-size:11px; }
.whatsapp-popup-close {
    background:none; border:none; color:#fff; font-size:18px; cursor:pointer;
    opacity:0.8; transition:opacity .2s;
}
.whatsapp-popup-close:hover { opacity:1; }
.whatsapp-popup-body { padding:16px; }
.whatsapp-popup-msg {
    background:#dcf8c6; border-radius:12px; padding:14px; margin-bottom:14px;
    position:relative;
}
.whatsapp-popup-msg::after {
    content:''; position:absolute; bottom:-8px; right:20px;
    border:8px solid transparent; border-top-color:#dcf8c6;
}
.whatsapp-popup-msg p { font-size:14px; color:#303030; margin:0 0 10px; line-height:1.5; }
.whatsapp-popup-quick { display:flex; flex-wrap:wrap; gap:6px; }
.whatsapp-popup-quick a {
    display:inline-flex; align-items:center; gap:5px; padding:6px 12px;
    border-radius:20px; background:#fff; color:#075e54; font-size:12px;
    font-weight:500; text-decoration:none; border:1px solid #075e54;
    transition:all .2s;
}
.whatsapp-popup-quick a:hover { background:#075e54; color:#fff; }
.whatsapp-popup-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:12px; background:#25d366; color:#fff; border:none;
    border-radius:10px; font-size:14px; font-weight:600; cursor:pointer;
    text-decoration:none; transition:background .2s;
}
.whatsapp-popup-btn:hover { background:#20bd5a; color:#fff; }

/* 16 AI Chat Widget */
.ai-chat-widget { position:fixed; bottom:30px; right:30px; z-index:9998; }
.ai-chat-btn {
    width:60px; height:60px; background:linear-gradient(135deg,#2563eb,#7c3aed);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:28px; cursor:pointer;
    box-shadow:0 4px 20px rgba(37,99,235,0.5);
    transition:all .3s; position:relative;
}
.ai-chat-btn:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(37,99,235,0.7); }
.ai-chat-btn-pulse {
    position:absolute; width:100%; height:100%; border-radius:50%;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    animation:aiPulse 2s infinite; z-index:-1;
}
@keyframes aiPulse { 0%{transform:scale(1);opacity:0.6;} 100%{transform:scale(1.6);opacity:0;} }
.ai-chat-box {
    position:absolute; bottom:75px; right:0; width:360px; max-height:500px;
    background:#fff; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.2);
    display:none; flex-direction:column; overflow:hidden;
    animation:popupSlide .3s ease;
}
.ai-chat-box.ai-chat-open { display:flex; }
.ai-chat-header {
    background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff;
    padding:16px; display:flex; justify-content:space-between; align-items:center;
}
.ai-chat-header-info { display:flex; align-items:center; gap:12px; }
.ai-avatar {
    width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center; font-size:18px;
}
.ai-chat-header strong { display:block; font-size:14px; }
.ai-chat-header small { opacity:0.8; font-size:11px; }
.ai-chat-close {
    background:none; border:none; color:#fff; font-size:18px; cursor:pointer;
    opacity:0.8; transition:opacity .2s;
}
.ai-chat-close:hover { opacity:1; }
.ai-chat-messages { flex:1; overflow-y:auto; padding:16px; max-height:350px; background:#f8fafc; }
.ai-msg { margin-bottom:14px; display:flex; gap:10px; animation:fadeIn .3s ease; }
.ai-msg-bot { justify-content:flex-start; }
.ai-msg-user { justify-content:flex-end; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
.ai-msg-avatar {
    width:30px; height:30px; border-radius:50%; display:flex;
    align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
}
.ai-msg-bot .ai-msg-avatar { background:#2563eb; color:#fff; }
.ai-msg-user .ai-msg-avatar { background:#10b981; color:#fff; order:1; }
.ai-msg-content p {
    margin:0; font-size:13px; line-height:1.6; padding:10px 14px;
    border-radius:12px; max-width:260px;
}
.ai-msg-bot .ai-msg-content p { background:#fff; border:1px solid #e2e8f0; border-bottom-left-radius:4px; color:#0f172a; }
.ai-msg-user .ai-msg-content p { background:#2563eb; color:#fff; border-bottom-right-radius:4px; }
.ai-quick-replies { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ai-quick-replies button {
    padding:6px 12px; border:1px solid #e2e8f0; border-radius:16px;
    background:#fff; color:#2563eb; cursor:pointer; font-size:11px;
    font-weight:500; transition:all .2s; font-family:'Inter',sans-serif;
}
.ai-quick-replies button:hover { background:#2563eb; color:#fff; border-color:#2563eb; }
.ai-quick-replies button i { margin-right:3px; }
.ai-chat-input {
    display:flex; gap:8px; padding:12px; border-top:1px solid #e2e8f0; background:#fff;
}
.ai-chat-input input {
    flex:1; padding:10px 14px; border:1px solid #e2e8f0; border-radius:10px;
    font-size:13px; outline:none; font-family:'Inter',sans-serif;
}
.ai-chat-input input:focus { border-color:#2563eb; }
.ai-chat-input button {
    width:40px; height:40px; border-radius:10px; border:none;
    background:#2563eb; color:#fff; cursor:pointer; font-size:14px;
    transition:background .2s;
}
.ai-chat-input button:hover { background:#1d4ed8; }
.ai-chat-messages::-webkit-scrollbar { width:4px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
@media(max-width:575px) {
    .whatsapp-popup, .ai-chat-box { width:calc(100vw - 40px); right:-10px; }
    .whatsapp-widget { bottom:100px; right:20px; }
    .ai-chat-widget { bottom:20px; right:20px; }
}

/* Feature Cards Hover Effects - White Theme */
.feature-card-new:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
}
.feature-card-new:hover div[style*="width:80px"] {
    transform: scale(1.1) rotate(5deg);
}