/* =========================
   GLOBAL RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, sans-serif;
  background:#ffffff;
  color:#222;
  line-height:1.6;
}

a{
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

/* =========================
   ROOT COLORS
========================= */

:root{
  --primary-gradient:
  linear-gradient(
    135deg,
    #2563eb,
    #9333ea,
    #ec4899
  );
  --button-gradient:
  linear-gradient(
    135deg,
    #f97316,
    #22c55e
  );

  --glass:
  rgba(255,255,255,0.15);

}

/* =========================
   PORTAL SECTION
========================= */

.portal-section{
  padding:80px 5%;
}
.portal-grid{
  display:grid;
  grid-template-columns:
  repeat(2,1fr);
  gap:35px;
}


.portal-card{
  background:#acbeff;
  border-radius:35px;
  padding:20px;
  text-align:center;
  box-shadow:
  0 12px 30px rgba(244, 4, 4, 0.08);
}



.portal-card:hover{
  transform:
  translateY(-8px);
}



.portal-icon{
  font-size:42px;
  margin-bottom:18px;
}



.portal-card h3{
  font-size:32px;
  margin-bottom:12px;
}


.portal-card p{
  color:#01016a;
  margin-bottom:25px;
  line-height:1.7;
}

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

.navbar{
  position:sticky;
  top:0;
  z-index:999;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 5%;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  box-shadow:
  0 5px 20px rgba(0,0,0,0.08);
}


.logo-box img{
  width:180px;
}


nav{
  display:flex;
  gap:25px;
}


nav a{
  color:#222;
  font-weight:600;
}


nav a:hover{
  color:#2563eb;
}


.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
}



/* =========================
   BUTTONS
========================= */

button,
.primary-btn,
.secondary-btn,
.demo-btn,
.login-btn{
  border:none;
  cursor:pointer;
  padding:12px 22px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
}


.primary-btn,
.demo-btn{
  background:var(--button-gradient);
  color:#fff;
}


.secondary-btn{
  background:#fff;
  color:#222;
}


.login-btn{
  background:#f3f4f6;
  color:#222;
}


#langBtn{
  padding:10px 16px;
  border:none;
  border-radius:8px;
  cursor:pointer;
}



/* =========================
   HERO SECTION
========================= */

.hero-section{
  min-height:90vh;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5%;
  background:var(--primary-gradient);
  color:#fff;
}


.hero-content{
  max-width:550px;
}


.hero-content h1{
  font-size:55px;
  margin-bottom:20px;
}


.hero-content p{
  font-size:20px;
  margin-bottom:30px;
}


.hero-buttons{
  display:flex;
  gap:15px;
}


.dashboard-preview{
  width:500px;
  background:var(--glass);
  padding:20px;
  border-radius:25px;
  backdrop-filter:blur(10px);
}



/* =========================
   PAGE BANNER
========================= */

.page-banner{
  padding:100px 5%;
  text-align:center;
  background:var(--primary-gradient);
  color:#fff;
}


.page-banner h1{
  font-size:48px;
  margin-bottom:20px;
}



/* =========================
   STATS
========================= */

.stats-section{
  display:flex;
  justify-content:center;
  gap:30px;
  padding:60px 5%;
}


.stat-card{
  padding:25px 40px;
  border-radius:15px;
  background:#fff;
  box-shadow:
  0 10px 30px rgba(0,0,0,0.08);
  font-weight:bold;
}



/* =========================
   FEATURES
========================= */

.home-features,
.features-page{
  padding:80px 5%;
}


.home-features h2,
.features-page h2{
  text-align:center;
  margin-bottom:40px;
}


.features-grid{
  display:grid;
  grid-template-columns:
  repeat(3,1fr);
  gap:25px;
}


.feature-card{
  background:#fff;
  padding:30px;
  border-radius:20px;
  box-shadow:
  0 10px 30px rgba(0,0,0,0.08);
}



/* =========================
   PRICING
========================= */

.pricing-section{
  padding:80px 5%;
}


.pricing-grid{
  display:grid;
  grid-template-columns:
  repeat(3,1fr);
  gap:30px;
}


.pricing-card{
  background:#fff;
  border-radius:20px;
  padding:35px;
  box-shadow:
  0 10px 30px rgba(0,0,0,0.08);
}


.pricing-card ul{
  margin:20px 0;
  padding-left:20px;
}


.featured-plan{
  border:3px solid #9333ea;
}



/* =========================
   CONTACT
========================= */

.contact-page{
  display:grid;
  grid-template-columns:
  1fr 1fr;
  gap:40px;
  padding:80px 5%;
}


.contact-form-box input,
.contact-form-box textarea{
  width:100%;
  padding:15px;
  margin-bottom:15px;
  border:1px solid #ddd;
  border-radius:10px;
}


.contact-info-box{
  background:#fff;
  padding:30px;
  border-radius:20px;
  box-shadow:
  0 10px 30px rgba(0,0,0,0.08);
}

/* =========================
   CONTACT WHATSAPP BUTTON
========================= */

.contact-info-box .primary-btn{
  display:inline-block;
  margin-top:30px;
  padding:16px 32px;
  border-radius:14px;
  background:linear-gradient(
    135deg,
    #25D366,
    #128C7E
  );
  color:#ffffff;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  box-shadow:
  0 10px 25px rgba(37,211,102,0.25);
}


.contact-info-box .primary-btn:hover{
  transform:
  translateY(-5px)
  scale(1.03);
  box-shadow:
  0 18px 35px rgba(37,211,102,0.35);
}

/* =========================
   LOGIN
========================= */

.login-page{
  padding:80px 5%;
}


.login-grid{
  display:grid;
  grid-template-columns:
  repeat(2,1fr);
  gap:25px;
}


.login-card{
  background:#fff;
  padding:30px;
  border-radius:20px;
  text-align:center;
  box-shadow:
  0 10px 30px rgba(0,0,0,0.08);
}



/* =========================
   SAAS FOOTER
========================= */

.saas-footer{
  background:#111318;
  color:#ffffff;
  padding:45px 5% 15px;
}


.footer-top{
  margin-bottom:30px;
}


.footer-top h2{
  font-size:30px;
  margin-bottom:20px;
}


.footer-top p{
  color:#a1a1aa;
  font-size:14px;
}



.footer-links{
  display:grid;
  grid-template-columns:
  repeat(4,1fr);
  gap:20px;
  margin-bottom:30px;
}



.footer-column h3{
  margin-bottom:20px;
  font-size:12px;
}



.footer-column a{
  display:block;
  margin-bottom:9px;
  color:#9ca3af;
}


.footer-column a:hover{
  color:#ffffff;
}



.footer-bottom{
  margin-top:20px;
  padding:18px 25px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:#161b22;
  border-radius:12px;
}


.footer-bottom p{
  color:#d1d5db;
  font-size:15px;
  margin:0;
}




/* Testimonials */

.testimonials-section{
  padding:80px 5%;
  text-align:center;
}


.slider-container{
  max-width:700px;
  margin:auto;
}


.slide img{
  border-radius:20px;
  margin-bottom:20px;
}


.slide p{
  font-size:18px;
}

/* =========================
   WHATSAPP BUTTON
========================= */

.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
  background:#25D366;
  color:#fff;
  padding:14px 20px;
  border-radius:50px;
  font-weight:600;
  box-shadow:
  0 10px 25px rgba(0,0,0,0.20);
}

.whatsapp-float:hover{
  transform:
  translateY(-5px);
}

/* =========================
   SOCIAL SIDEBAR
========================= */
/*
.social-sidebar{

  position:fixed;

  right:20px;

  top:50%;

  transform:
  translateY(-50%);

  z-index:999;

  display:flex;

  flex-direction:column;

  gap:14px;

}*/

/* =========================
   PREMIUM SOCIAL SIDEBAR
========================= */

.social-sidebar{
  position:fixed;
  right:20px;
  top:50%;
  transform:
  translateY(-50%);
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Main content */

.chat-content{

  flex:1;

  overflow:hidden;

}



/* Messages */

.bot-messages{

  height:180px;

  overflow-y:auto;

  padding:20px;

  display:flex;

  flex-direction:column;

  gap:12px;

}

/* Main Item */

.social-item{
  position:relative;
  width:55px;
  height:55px;
  border-radius:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  color:#fff;
  overflow:hidden;
  box-shadow:
  0 10px 25px rgba(0,0,0,0.18);
}



/* Label */

.social-item span{
  position:absolute;
  right:60px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  background:#111827;
  color:#fff;
  padding:10px 18px;
  border-radius:50px;
  font-size:14px;
}



/* Hover */

.social-item:hover span{
  opacity:1;
  visibility:visible;
}

/* Hover Animation */

.social-item:hover{
  transform:
  scale(1.08);
}



/* Colors */

.facebook-btn{
  background:#1877F2;
}


.instagram-btn{

  background:
  linear-gradient(
    135deg,
    #f58529,
    #dd2a7b,
    #8134af
  );

}

.whatsapp-btn{
  background:#08ff25
}

.youtube-btn{
  background:#FF0000;
}

/* Common */

.social-sidebar a{
  width:55px;
  height:55px;
  border-radius:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-decoration:none;
  box-shadow:
  0 8px 20px rgba(0,0,0,0.20);
}



/* Facebook */

.facebook-btn{
  background:#1877F2;
}



/* Instagram */

.instagram-btn{
  background:
  linear-gradient(
    135deg,
    #f58529,
    #dd2a7b,
    #8134af
  );
}



/* YouTube */

.youtube-btn{

  background:#FF0000;

}



/* Hover */

.social-sidebar a:hover{
  transform:
  scale(1.1)
  translateX(-5px);
}

/* =========================
   ABOUT PAGE
========================= */

.about-page{
  padding:90px 5%;
}


.about-container{
  max-width:900px;
  margin:auto;
}


.about-content{
  margin-bottom:55px;
}


.about-content h2{
  font-size:34px;
  margin-bottom:20px;
  color:#111827;
}


.about-content p{
  font-size:18px;
  line-height:1.9;
  color:#4b5563;
  margin-bottom:16px;
}



/* Why Choose */

.why-choose{
  margin-top:80px;
}


.why-choose h2{
  text-align:center;
  font-size:36px;
  margin-bottom:45px;
}

/*Comming Soon Page View */

/* =========================
   COMING SOON
========================= */

.coming-soon-page{

  min-height:80vh;

  display:flex;

  justify-content:center;

  align-items:center;

  text-align:center;

  padding:40px;

}



.coming-box{

  max-width:700px;

}



.coming-box h1{

  font-size:72px;

  margin-bottom:20px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #9333ea,
    #ec4899
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:
  transparent;

}



.coming-box p{

  font-size:24px;

  color:#6b7280;

  line-height:1.8;

}

/* Logo */

.site-logo{

  height:55px;

  width:auto;

  object-fit:contain;

}

/* =========================
   SMART CHATBOT
========================= */



/* Trigger Button */

.chatbot-trigger{

  position:fixed;

  right:20px;

  bottom:20px;

  width:85px;

  height:85px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #9333ea
  );

  border-radius:28px;

  display:flex;

  justify-content:center;

  align-items:center;

  cursor:pointer;

  z-index:9999;

  box-shadow:
  0 15px 35px rgba(147,51,234,0.35);

}


.chatbot-trigger img{

  width:60px;

  height:60px;

  object-fit:contain;

}






/* Popup */

.chatbot-popup{

  display:none;

  position:fixed;

  right:20px;

  bottom:120px;

  width:380px;

  height:620px;

  background:#ffffff;

  border-radius:24px;

  overflow:hidden;

  z-index:9999;

  box-shadow:
  0 20px 45px rgba(0,0,0,0.18);

  display:flex;

  flex-direction:column;

}







/* Header */

.bot-header{

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #9333ea
  );

  color:#ffffff;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:18px 20px;

}


.bot-header-left{

  display:flex;

  align-items:center;

  gap:12px;

}


.bot-header-left img{

  width:45px;

  height:45px;

  border-radius:100%;

}


.bot-header h4{

  margin:0;

  font-size:20px;

}


.bot-header p{

  margin:0;

  font-size:13px;

}







/* Chat Messages Area */

.bot-messages{

  flex:1;

  overflow-y:auto;

  overflow-x:hidden;

  padding:20px;

  display:flex;

  flex-direction:column;

  gap:12px;

}








/* Bot Bubble */

.bot-message{

  background:#f3f4f6;

  padding:14px 18px;

  border-radius:18px;

  max-width:80%;

  width:fit-content;

  line-height:1.5;

}







/* User Bubble */

.user-message{

  background:#9333ea;

  color:#ffffff;

  padding:14px 18px;

  border-radius:18px;

  max-width:80%;

  width:fit-content;

  margin-left:auto;

  line-height:1.5;

}








/* Quick Options */

.bot-cards{

  padding:0 20px 15px;

}


.bot-cards div{

  background:#ffffff;

  border:1px solid #e5e7eb;

  border-radius:18px;

  padding:16px;

  margin-bottom:12px;

  cursor:pointer;

  font-weight:500;

}


.bot-cards div:hover{

  background:#f9fafb;

}








/* Input Area */

.chat-input{

  display:flex;

  gap:10px;

  padding:20px;

  border-top:
  1px solid #e5e7eb;

  background:#ffffff;

}


.chat-input input{

  flex:1;

  border:1px solid #d1d5db;

  border-radius:14px;

  padding:14px;

  font-size:14px;

  outline:none;

}


.chat-input button{

  width:60px;

  border:none;

  border-radius:14px;

  background:#9333ea;

  color:#ffffff;

  font-size:18px;

  cursor:pointer;

}
/*language */