/* ===== GENERAL RESET ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Outfit','Poppins', sans-serif;
  scroll-behavior: smooth;
   overflow-x: hidden;
   overflow-y: scroll;
}

body::-webkit-scrollbar {
  display: none;
}

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

.navbar-brand img {
  height: 100px; 
  width: auto;
  max-height: 100%;
}

.navbar-nav .nav-link {
  color: #333;
}

body.dark .navbar {
  background-color: #111;
}

body.dark .navbar-nav .nav-link {
  color: #fff;
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}


.nav-item.dropdown:hover .dropdown-menu .dropdown-item:hover {
  background-color:#b84f17;
  color: #fff;
}

.navbar-custom .navbar-nav,
.navbar-custom .d-flex.align-items-center {
  align-items: center; /* ensures vertical centering */
}

.navbar-toggler {
    border: none;
    outline: none;
    margin-left: auto; /* push to the right */
}

@media (max-width: 991.98px) {
  body.dark .navbar-nav button.nav-link {
    color: #000;
    background: transparent;
    border: none;
  }
}

.hero-section {
  min-height: 100vh;       
  display: flex;
  justify-content: center;  
  align-items: center;     
  text-align: center;
  background:  #134774;
  color: white;
  padding: 20px 15px;
  padding-top: 80px;
  
}
/* Increase Hero Heading Size */
.hero-section h1 {
  font-weight: 900;  
  margin: 0;     
  font-size: clamp(1.8rem, 5vw, 4rem);
  line-height: 1.2;
}

/* Increase Hero Paragraph Size */
.hero-section p {
  font-size: 1.5rem;   
  margin: 0;  
}

.hero-section p.lead {
  color: #fff;
  text-align: center;
}

.hero-section .btn {
  font-size: 1.25rem;
  padding: 0.9rem 2.5rem;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.hero-section .btn:hover {
  transform: scale(1.05);
}

/* ===== STATS SECTION ===== */
.stats-section {
  background: #f8f9fa;
  padding: 80px 15px;
}

.stats-section .stats {
  background:#cb6b33 ;
  padding: 40px 15px;
  border-radius: 10px;
  min-height: 300px;
}

.stats-section h2 {
  font-size: 4rem;
  color: white;
  margin-bottom: 10px;
}

.stats-section p {
  font-size: 1.5rem;
  color: white;
}

/* Logos below stats */
.stats-section .brand-logos {
  margin-top: 40px;
}

.stats-section .brand-logos img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  margin: 10px;
}

/* ===== PORTFOLIO / CARDS ===== */
.card-img-top {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}

.card {
  border: none;
}
.cards
{
  background-color:#134774 ;
  color: white;
 width: 100vw;
  margin-left: calc(-50vw + 50%);
}


/* ===== FEATURE / CONTACT / FOOTER ===== */
.feature {
  background: whitesmoke;
  padding: 60px 15px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.feature-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.feature-column {
  flex: 1 1 150px;
  min-width: 150px;
}

.feature-column h4 {
  margin-bottom: 15px;
}

.feature-column ul {
  list-style: none;
  padding-left: 0;
}

.feature-column ul li {
  margin-bottom: 8px;
}

/* Footer */
.orange-line {
  height: 3px;
  background-color: orange;
  border: none;
  margin: 30px 0;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}

.footer-bottom .footer-right,
.footer-bottom .footer-left {
  margin: 5px 0;
}

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


/* Optional: adjust for smaller screens */
@media (max-width: 767px) {
  .navbar-brand img {
    height: 50px; /* smaller on mobile */
  }

  .navbar-collapse {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        width: 100%;
        background-color: white;
        padding: 15px;
        z-index: 1049;
    }

    .navbar-nav {
        flex-direction: column;
        gap: 15px;
    }

}

@media (min-width: 768px) and (max-width: 1200px) {
  .navbar-brand img {
    height: 60px; /* medium for tablets */
  }
}

@media (max-width: 992px) {
  .stats-section .stats {
    padding: 20px;
  }

  .stats-section .stats h2 {
    font-size: 1.8rem;
  }

  .stats-section .stats p {
    font-size: 0.95rem;
  }
}

@media (max-width: 767px) {
  .hero-section {
    padding-top: 80px; 
    
  }
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2rem;
  }

  .hero-section p.lead {
    font-size: 1rem;
  }

  .feature-row {
    flex-direction: column;
    gap: 30px;
  }

  .stats-section .brand-logos {
    flex-direction: column;
  }
}


.navbar-custom
{
  background-color:white;
  height:80px;
  padding: 10px 0;
}

.dropdown-toggle::after {
  display: none;
}
b{
    padding-left:5px;
}

/* --- Unified Button Styling --- */
.btn-unified {
  background-color:#b84f17;      
  color: #ffffff;                 
  border: none;
  font-size: 0.875rem;            
  padding: 0.5rem 1.5rem;        
  border-radius: 50px;           
  transition: all 0.3s ease;     
  display: inline-block;
  text-decoration: none;
}

/* Hover effect */
.btn-unified:hover {
 background-color: #b84f17;      
  color: #ffffff;
  transform: scale(1.05);        
  text-decoration: none;
}

/* Larger buttons if needed */
.btn-unified-lg {
  font-size: 1.125rem;            
  padding: 0.75rem 2rem;
}

/* Smaller buttons */
.btn-unified-sm {
  font-size: 0.875rem;
  padding: 0.4rem 1.5rem;
}

.hero-section .hero-image {
  flex: 0 0 auto;        
  margin-left: 20px;      
}

/* Heading color */
.custom-heading {
  color: #134774;
}

.custom-heading.copyright{
    font-size: 0.9rem; 
}

/* Orange cards */
.orange-card {
  background-color: #cb6b33; 
  border: none;
  border-radius: 10px;
  min-width: 180px;
}

/* Card text */
.logo-card h5 {
  color: #ffffff; 
}

/* Optional: add hover effect */
.orange-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: 0.3s;
}
.isologo {
  display: flex;
  align-items: center; 
  justify-content: center;
}

.isologo img {
  height: 60px;      
  width: auto;        
     
}

@media (max-width: 992px) {
  .isologo img {
    height: 50px;    
  }
}

@media (max-width: 768px) {
  .isologo img {
    height: 40px; 
  }
}

/* Navbar ISO logo adjustments */
@media (max-width: 1200px) {
  .isologo {
    margin-left: 10px;
  }
}

@media (max-width: 1024px) {
  .isologo {
    margin-left: 0;
  }
}

/* ===== Modal Background ===== */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
  padding: 15px;
  -webkit-backdrop-filter: blur(3px); 
}

/* Show modal when active */
.modal.active {
  display: flex;
}

/* ===== Modal Box ===== */
.modal-content {
  width: 90%;
  max-width: 550px;     
  height: 400px;        
  max-height: 90vh;    
  border-radius: 15px;
  padding: 25px;
  position: relative;
  overflow-y: auto;

  background:
    linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
    url('../cimages/map.webp'); /* adjust path */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
}

/* ===== Animation ===== */
@keyframes modalFade {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== Close Button ===== */
.close-btn {
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

.close-btn:hover {
  color: red;
}

/* ===== Language Grid ===== */

/* ===== Grid: 3 Per Row ===== */
.language-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 15px;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .language-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 per row */
@media (max-width: 600px) {
  .language-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Language Item ===== */
.language-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 5px;
  cursor: pointer;
  font-size: 15px;
  color: black;                 
  border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
  transition: all 0.2s ease;
}

/* Hover */
.language-item:hover {
  color: #000;
  transform: translateY(-2px);
}

/* Flag */
.flaglogo {
  width: 26px;
  height: 18px;
  object-fit: cover;
}

/* Navbar collapse box only on tablet & mobile */
@media (max-width: 991.98px) {

  #navbarNav {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    text-align: center;
  }

   #navbarNav a,
  .navbar-nav .nav-link {
    color: #000;
  }

   /* Center nav items */
  .navbar-nav {
    gap: 10px;
    align-items: center;
  }

  /* Center right-side section */
  .navbar-custom .d-flex {
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
  }

  /* Remove desktop spacing */
  .isologo {
    margin-left: 0;
  }

  /* Optional: make button full width (clean mobile look) */
  .navbar-custom .btn-unified {
    width: 100%;
    max-width: 250px;
  }

}

/* Hide Google Translate top banner */
body > .goog-te-banner-frame.skiptranslate {
    display: none;
}

/* Reset page offset caused by Google Translate */
html {
    top: 0;
    position: static;
}

/* Hide the Google Translate menu iframe */
iframe.goog-te-menu-frame {
    display: none;
}

/* Hide Google Translate logos and tooltips */
.goog-logo-link,
.goog-te-gadget,
.goog-tooltip,
.goog-tooltip:hover {
    display: none;
}

/* Remove highlight style from translated text */
.goog-text-highlight {
    background: none;
    box-shadow: none;
}

/* Hide any specific Google Translate iframes by their generated class */
iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none;
}

.social-icons a {
  font-size: 22px;   
  margin: 0 5px;    
       
  transition: 0.3s;
}

.social-icons a:hover {
  transform: scale(1.2);   
}
.linkedin
{
  color: rgb(0, 111, 170);
}

/* ===== COMPLIANCE PAGE ===== */

.compliance-page{
  padding-top:120px;   
  padding-bottom:80px;
}

.compliance-title{
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:40px;
}

/* Certificate box */
.compliance-box{
  background:white;
  padding:40px;
  border-radius:15px;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
  display:inline-block;
  transition:all 0.3s ease;
  color:#000;
}

.compliance-box:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

/* Compliance images: smaller size for ISO / SOC logos */
.compliance-img {
  max-height: 250px;  /* desktop */
  width: auto;
  display: inline-block;
}

/* Medium screens (tablets, 768px - 1024px) */
@media (max-width: 1024px) {
  .compliance-img {
    max-height: 120px;
  }
}

/* Mobile screens */
@media (max-width: 767px) {
  .compliance-img {
    max-height: 100px;
  }
}

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

/* Tablet */
@media (max-width:992px){

  .compliance-title{
    font-size:2rem;
  }

  .compliance-box{
    padding:30px;
  }

  .compliance-img{
    max-height:180px;
  }

}

/* Mobile */
@media (max-width:576px){

  .compliance-page{
    padding-top:120px;
  }

  .compliance-title{
    font-size:1.6rem;
  }

  .compliance-box{
    padding:20px;
  }

  .compliance-img{
    max-height:150px;
  }

}

#soc2 {
  scroll-margin-top: 100px;
}

/* Default desktop spacing */
.iso-section {
  justify-content: center;  
  flex-wrap: wrap;           
  gap: 20px; 
  display: flex;               
}

.iso-section img {
  max-height: 150px;
  width: auto;
  display: block;
   margin: 0 20px; 
}

/* Mobile: fully center and smaller spacing */
@media (max-width: 767px) {
  .iso-section {
    justify-content: center;  
    gap: 10px;                
  }

  .iso-section img {
    max-height: 120px;       
    margin: 0 auto;          
  }
}

.compliance-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.compliance-list ul {
  padding-left: 20px;
  margin-bottom: 20px;
  list-style-type: disc;
}
.compliance-list li {
  line-height: 1.6;
}
.iso-image, .soc-image {
  max-width: 80%;
  height: auto;
}

.experience-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #134774, #1b5e91);
  z-index: 9999;
}

.experience-container {
  width: 100%;
  height: 100%;
  padding: 20px clamp(15px, 4vw, 60px);
  box-sizing: border-box;
  margin-top: 60px; 
}

#startBtn
{
  background-color:#134774;
  color:#fff;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
   height: calc(100% - 70px);
}

.card-content {
   display: flex;              
  flex-direction: column;    
  gap:12px;
  margin-top: 10px;
}

.card-header {
  margin-bottom: 16px; 
  font-weight: 600;
  font-size: 18px;
  color: #134774;
}

.card-content .controls {
  margin-bottom: 16px;
}

.card-content .box {
  margin-top: 12px; 
}

.card-content label {
  display: block;
  margin-top: 16px; 
  margin-bottom: 6px; 
  font-weight: 500;
}

/* Remove extra bootstrap margin conflicts */
.card-content .form-control,
.card-content select,
.card-content textarea,
.card-content input {
  margin-bottom: 0;
}

.form-control {
  appearance: auto;
  -webkit-appearance: menulist; 
  -moz-appearance: menulist; 
}

/* Add breathing space for table card */
#recordingsTable {
  margin-top: 10px;
}

#recordingsTable thead th {
   padding-bottom: 16px;
   color:#134774;
}

#recordingsTable td {
  color:grey;
}


.status {
  background: #d4edda;
  padding: 10px;
  border-radius: 6px;
  color: #155724;
}

.subtitle {
  background: #eee;
  padding: 15px;
  border-radius: 6px;
  text-align: center;
  color: #333;
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

.voice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.voice-selection {
  display: flex;
  gap: 10px;
}

.voice-card {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
  transition: background 0.3s;
  border:none;
}

.voice-card.active {
  background-color: #134774; /* highlight color */
  color: #fff;
}

.voice-card:not(.active) {
  background-color: #f0f0f0;
  color: #333;
}
.voice-icon {
  font-size: 28px;
}

.voice-label {
  margin-top: 5px;
  font-weight: 500;
}
/* General dropdown styling */
select {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* Center wrapper */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mic button styling */
.mic-btn {
  width: 96px;
  height: 96px;
  background: whitesmoke;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mic-btn img {
  width: 40px;
  height: 40px;
}

.mic-wrapper {
  margin-top: 10px; 
}

/* Controls during recording */
.controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
}

.circle-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
  font-size: 20px;
}

.stop {
  background: #b84f17;
  color: #fff;
}

/* Waveform container */
.wave-container {
  height: 96px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.waves {
  display: flex;
  gap: 2px;
  height: 100%;
  align-items: center;
}

.bar {
  width: 3px;
  background: #134774;
  border-radius: 2px;
}

/* Last transcription box */
.box {
  padding: 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  min-height: 50px;
}

/* Progress bar for recording accuracy */
.progress {
  height: 10px;
  background: #e5e7eb;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: #b84f17;
  border-radius: 5px;
}

/* Table player buttons */
.recbtn {
  font-size: 18px;
  cursor: pointer;
}
.slider {
  width: 100px;
  margin: 0 5px;
}

/* Flex container for icon + details */
#recordingsTable .player-cell {
  display: flex;
  align-items: center;
  gap: 10px; 
  min-height: 50px;          
}

/* Hide details when not playing */
#recordingsTable .player-cell .player-details {
  display: none;
  flex: 1;             
  min-width: 120px;   
}

#recordingsTable .player-cell .player-details.show {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Player icon */
#recordingsTable .recbtn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #134774;
  font-size: 18px;
}

/* Slider & times */
#recordingsTable .slider {
  flex: 1;              
  margin: 0;
}
#recordingsTable .time {
  min-width: 35px;
  text-align: center;
  font-size: 14px;
}

.summarization-content {
  text-align: center;
}

/* ===== HEADER ===== */
.experience-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 9999;
}

/* LEFT */
.header-left {
  display: flex;
  align-items: center;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #134774;
  margin: 0;
  white-space: nowrap;
}

/* RIGHT (LOGO) */
.header-right {
  display: flex;
  align-items: center;
}

.back-btn {
  background-color: #134774;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: white;          
  padding: 8px 12px;     
  border-radius: 6px;   
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.back-btn:hover {
  background-color: #0f3560; 
}

.back-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(19, 71, 116, 0.6); 
}

.back-btn i {
  color: white;
}

.header-center {
      flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    gap: 3px;
     position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.sub-title {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: grey;
    font-weight: 400;
}

.header-logo {
  height: 80px;
  max-width: 140px;
  object-fit: contain;
}

/* Push content below the fixed header */

.demo-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);

  overflow-y: auto;

  /* Firefox */
  scrollbar-width: none;
  min-height: 300px;
}

/* Hide scrollbar by default */
.demo-card::-webkit-scrollbar {
  width: 0;
}

/* Show on hover */
.demo-card:hover {
  scrollbar-width: thin;
  scrollbar-color: #134774 transparent; 
}

.demo-card:hover::-webkit-scrollbar {
  width: 6px;
}

/* ✅ FORCE COLOR */
.demo-card:hover::-webkit-scrollbar-thumb {
  background-color: #134774 !important;
  border-radius: 10px;
}

/* Optional: track */
.demo-card:hover::-webkit-scrollbar-track {
  background: transparent;
}

#text {
  resize: none;
  overflow-y: auto;

  scrollbar-width: none; 
}

#text::-webkit-scrollbar {
  display: none; /* optional */
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablets */
@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .experience-header {
    height: 55px;
  }

  .experience-container {
    margin-top: 55px;
    padding: 10px;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .demo-card {
    padding: 16px;
    min-height: auto;
  }

  @media (max-width: 768px) {
  .header-title {
    font-size: 14px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

  .back-btn {
    font-size: 16px;
    padding: 5px 8px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .voice-selection {
    flex-direction: column;
  }

  .voice-card {
    font-size: 14px;
  }

  .demo-card {
    padding: 14px;
  }
}
 .highlight{
  color: #b84f17;
 }

/* Disable scroll only when experience page is open */
body.experience-active {
  overflow: hidden;
}

#experience-live {
  padding-left: clamp(15px, 5vw, 60px);
  padding-right: clamp(15px, 5vw, 60px);
  box-sizing: border-box;
  padding-top: 20px;
}

/* ===== MOBILE HEADER FIX ===== */
@media (max-width: 768px) {

  .experience-header {
    height: 60px;
    padding: 0 10px;
  }

  /* Center title properly */
  .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;              /* prevent overlap */
    text-align: center;
  }

  .header-title {
    font-size: 14px;         /* smaller for mobile */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* avoid breaking */
  }

  /* Hide subtitle on mobile */
  .sub-title {
    display: none;
  }

  /* Logo smaller */
  .header-logo {
    height: 30px;
  }

  /* Back button smaller */
  .back-btn {
    font-size: 16px;
    padding: 5px 8px;
  }
}

/* Footer base */
#footer {
  background-color: transparent;
  color: #222;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 40px 15px;
}

/* Headings */
#footer h4 {
  font-weight: 700;
  font-size: 1.2rem;
  color: #134774; /* brand heading color */
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* Paragraphs for address/US/India */
#footer .address-text {
  font-weight: 400;
  font-size: 0.875rem; 
  margin-bottom: 8px;
  color: grey;
}

/* Footer links */
#footer .footer-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#footer .footer-links li {
  margin-bottom: 8px;
}

#footer .footer-links li a {
  font-size: 0.95rem;
  color: grey;
  text-decoration: none;
  transition: color 0.3s;
}

#footer .footer-links li a:hover {
  color: #ff7a00;
}

/* Social media icons */
#footer .social-media li {
  list-style: none;
}

#footer .social-media li a {
  font-size: 1.8rem;
  color: #134774;
  transition: color 0.3s;
}

#footer .social-media li a:hover {
  color: #ff7a00;
}

/* Copyright */
#footer .copyright {
  font-size: 0.85rem;
  color: #555;
  margin-top: 25px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  #footer .col-lg-3 {
    margin-bottom: 30px;
  }
}

@media (max-width: 576px) {
  #footer .social-media {
    justify-content: center;
  }
}

/* Mobile adjustments: reduce space between button and footer */
@media (max-width: 576px) {
  /* Reduce top/bottom padding of the demo button section */
  #contact > .container > .text-center {
    margin-bottom: 1rem; 
    padding-bottom: 0.5rem; 
    padding-top: 1rem; 
  }

  /* Reduce footer container padding */
  #contact footer .container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.absence-section h5{
 color: #b84f17;
 font-weight: 600;
}

.absence-section,.absence-section1 p{
 color: grey;
}
.section-main-img {
    max-width: 500px;  
    width: 100%;
    height: auto;
}



.section2-img {
    max-width: 100%;
    height: auto;
}

/* Responsive: Image on top for mobile */
@media (max-width: 767px) {
    .row.align-items-center .col-lg-6 {
        text-align: center;
        margin-bottom: 20px;
    }
}


/* ========================
   Banner / Header
======================== */
.banner {
   
    padding: 140px 0 80px;
    color: #134774;
    text-align: center;
  }

.banner h2 {
    font-size: 2.8rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.banner h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.banner .btn1 {
    background: #b84f17;
    color: #fff;
    padding: 0.6rem 1.8rem;
    font-weight: 600;
    border-radius: 50px;
    transition: 0.3s;
}

.banner .btn1:hover {
    
    transform: translateY(-2px);
}

.banner .learn {
  text-decoration: none;
}

/* ========================
   Sections
======================== */
section {
    padding: 80px 0;
}

section h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
    color: #134774;
}

section p.timebound {
    text-align: center;
    font-size: 1.1rem;
    max-width: 900px;
    margin: 0 auto 40px;
    color: #555;
}

/* ========================
   Features / Cards
======================== */
.features .item {
    background: #fff;
    border-radius: 15px;
    padding: 30px 20px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    text-align: center;
}

.features .item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.features .item h5 {
    margin-top: 15px;
    color: #134774;
    font-weight: 600;
}

.features .item p {
    color: #555;
    font-size: 0.95rem;
    margin-top: 10px;
}

/* Feature Images (placeholder) */
.f-img {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    background: #134774;
    border-radius: 50%;
}


/* ========================
   Contact Form
======================== */
.contact h2 {
    margin-bottom: 40px;
    font-weight: 700;
}

.contact form .form-group {
    margin-bottom: 20px;
}

.contact form .form-control {
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 10px 15px;
    transition: 0.3s;
}

.contact form .form-control:focus {
    border-color: #134774;
    box-shadow: 0 0 10px rgba(0,123,255,0.2);
}

.contact button.btn2 {
    background: #b84f17;
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 10px 25px;
    transition: 0.3s;
}

.contact button.btn2:hover {
    background: #cb6b33;
    transform: translateY(-2px);
}

/* ========================
   Footer
======================== */
footer {
    padding: 30px 0;
    color:#134774;
    text-align: center;
}

footer p {
    margin: 0;
}

/* ========================
   Responsive
======================== */
@media (max-width: 768px) {
    .banner h2 {
        font-size: 2rem;
    }

    .banner h3 {
        font-size: 1.2rem;
    }

    .features .item {
        margin-bottom: 20px;
    }

   
}



/* ========================
   Orange Buttons
======================== */
.btn-orange {
    background-color: #b84f17;
    color: #fff;
    font-weight: 600;
    border-radius: 50px; 
    padding: 0.6rem 1.8rem;
    text-align: center;
    display: inline-block;
    border: none;
    transition: 0.3s;
}

.btn-orange:hover {
    background-color: #b84f17;
    transform: translateY(-2px);
    text-decoration: none;
    color: #fff;
}

/* ========================
   Timebound Section Paragraphs
======================== */
/* Justify only Timebound section paragraphs */
.timeboundsec {
    text-align: justify;
}


#timebound h5 {
    color: #134774; 
}

#timebound p {
    color: grey; 
}

#feature p{
  color: grey;
}




/* Grid container */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

/* Feature cards */
.features-grid .item {
  background: #fff;
  border-radius: 15px;
  padding: 30px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  text-align: center;
  transition: all 0.3s ease;
}

.features-grid .item:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.features-grid .item h5 {
  margin-top: 15px;
  color: #134774;
  font-weight: 600;
}

.features-grid .item p {
  color: #555;
  font-size: 0.95rem;
  margin-top: 10px;
}

/* Icon base */
.features-grid .icon {
  width: 120px;
  height: 100px;
  margin: 0 auto 15px;
  background-image: url('../cimages/service.gif');
  background-repeat: no-repeat;
  background-size: 1080px 100px; 
  background-position-y: center;
}

/* Icons positions */
.icon-1 { background-position-x: 7px; }
.icon-2 { background-position-x: -120px; }
.icon-3 { background-position-x: -240px; }
.icon-4 { background-position-x: -360px; }
.icon-5 { background-position-x: -488px; }
.icon-6 { background-position-x: -600px; }
.icon-7 { background-position-x: -720px; }
.icon-8 { background-position-x: -859px; }
.icon-9 { background-position-x: -988px; }

/* Analyzer*/
.banner img {
  width: 100%;
}

.video-play {
  position: absolute;
  font-size: 60px;
  color: #2071B9;
}



/* =========================
   MAIN SECTION
========================= */
.main-cs {
  padding: 80px 0;
}

.main-cs .row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.main-cs h3 {
  font-size: 28px;
  margin-bottom: 15px;
}

.small-box {
  color: #5a6a7a;
  margin-bottom: 20px;
}

video {
  width: 100%;
  border-radius: 10px;
}


.card-top {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 30px;
    border-radius: 10px; 
    overflow: hidden;
    transition: 0.3s;
    height: 100%; 
}

/* Hover effect */
.card-top:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Image bigger, circular white background */
.card-top img.card-img {
    width: 100px;   
    height: 100px;  
    object-fit: contain;
    margin: 20px auto 15px auto;
  }

/* Content section whitesmoke */
.content.bg-blue {
    background-color: #f5f5f5;
    padding: 20px;
    color: #333333; 
    flex-grow: 1; 
}

/* Text inside content */


.content.bg-blue p {
    text-align: left;      
    line-height: 1.6;      
    font-size: 14px;
    margin-bottom: 0;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .content.bg-blue p {
        text-align: center;
    }
}

.feature-item {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px; 
    margin-right: -15px;
    gap: 30px; 
} 

/* Ensure items take proper width with gap */
.feature-item .item {
    padding-left: 15px;
    padding-right: 15px;
    flex: 1 1 calc(33.333% - 30px); 
    box-sizing: border-box;
}

/* For last row with 2 cards centered */
@media (min-width: 992px) {
    .feature-item .offset-lg-2 {
        margin-left: calc(16.666% + 15px); 
    }
}

/* Mobile and tablet responsiveness */
@media (max-width: 991px) {
    .feature-item .item {
        flex: 1 1 calc(50% - 15px); 
    }
}

@media (max-width: 576px) {
    .feature-item .item {
        flex: 1 1 100%; 
    }
}



/* =========================
   USE CASES
========================= */
.sol-list {
  padding: 80px 0;
  text-align: center;
}

.sol-list h2 {
  margin-bottom: 40px;
}

.sol-list .row {
  gap: 30px;
}

.list-item {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 280px;
  transition: 0.3s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  text-decoration: none;
  
}

.list-item h4 {
  font-size: 20px;
}

.list-item img {
  height: 60px;
  margin-bottom: 10px;
}

.list-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {

  header .row,
  .main-cs .row {
    flex-direction: column;
  }

  .feature .item {
    width: 100%;
  }

  .sol-list .row {
    flex-direction: column;
    align-items: center;
  }
}

.required {
  color: #ef4444;
}
/* SQL Section */
.sqlhero {
  
    text-align: center;
    padding: 100px 20px;
   
}
.sqlhero h1 {
    font-size: 3rem;
    color: #0f172a;
}
.sqlhero p {
    margin: 20px 0;
    color: #475569;
}
.sqlbtn {
    padding: 12px 25px;
    border: none;
    margin: 10px;
    border-radius: 8px;
    cursor: pointer;
    background: #b84f17;
    color: white;
    transition: 0.3s;
    font-weight: 500;
}

.sqlbtn:hover {
    background: #c55318;
}
/* Section */

.sqlsection {
    padding: 80px 20px;
    max-width: 1100px;
    margin: auto;
}

.sqlsection h2 {
    margin-bottom: 20px;
    font-size: 2rem;
}

/* GRID */
.sqlgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.sqlcard {
    background: #f1f5f9;
    padding: 20px;
    border-radius: 12px;
    transition: 0.3s;
}

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

/* DEMO BOX */
.sqldemo-box {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
}

.sqlsection textarea {
    width: 100%;
    height: 80px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    margin-bottom: 10px;
}

.sqloutput {
    background: #f1f5f9;
    padding: 15px;
    border-radius: 8px;
    min-height: 50px;
    margin-top: 10px;
    color: #b84f17;
    font-family: monospace;
}

/* CTA CENTER */
.sqlcenter {
    text-align: center;
}

/* FOOTER */
.sqlfooter {
    text-align: center;
    padding: 40px;
    color: #64748b;
}

/* Policy Page */

/* Section Styling */
.policy-section {
    padding: 60px 10%;
}
.policy-section .container {
  padding-top: 100px;
}

.policy-sectionh2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #222;
}

.policy-section p {
    color: #555;
    font-size:1.1rem;
    line-height:1.6;
}

/* Buttons */
.policy-section .btn {
    display: inline-block;
    padding: 10px 20px;
    background: #b84f17;
    color: #fff;
    border-radius: 25px;
    margin-top: 10px;
    text-decoration: none;
}

.poliy-section .btn:hover {
    background: #134774;
}

/* Hero */
.policy-section.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.policy-section .hero-text {
    max-width: 500px;
}

.policy-section .hero img {
    width: 400px;
    max-width: 100%;
}

.policy-section .card h3 {
    margin-bottom: 10px;
    color: #134774;
}

/* Cards */
.policy-section .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.policy-section .card {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Process Steps */
.policy-section .steps {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.policy-section .step {
    flex: 1;
    min-width: 200px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

/* Testimonials */
.policy-section .testimonial {
    background: #fff;
    padding: 20px;
    border-left: 4px solid #134774;
}

/* Contact */
.policy-section .contact form {
    display: grid;
    gap: 10px;
}

.policy-section input, .policy-section textarea {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

/* Footer */
.policy-section footer {
    text-align: center;
    padding: 20px;
    
}

/* Responsive */
@media(max-width:768px){
    .policy-section .hero {
        flex-direction: column;
        text-align: center;
    }
}

/* Timeline */
.policy-section.process {
    text-align: center;
   
}

.policy-section .timeline {
    position: relative;
    margin-top: 40px;
    padding-left: 20px;
    border-left: 3px solid #134774;
}

.policy-section .timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    position: relative;
}

/* Circle */
.policy-section .circle {
    width: 40px;
    height: 40px;
    background: #134774;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-left: -22px;
    margin-right: 20px;
}

/* Content */
.policy-section .content {
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: left;
}

/* Hover Animation */
.policy-section .timeline-item:hover .content {
    transform: translateY(-5px);
    transition: 0.3s;
}

/* Mobile */
@media(max-width:768px){
    .policy-section .timeline {
        border-left: none;
        padding-left: 0;
    }

    .policy-section .timeline-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .policy-section .circle {
        margin: 0 0 10px 0;
    }
}

/* Section Background */
.policy-section.why {
    text-align: center;
    
}

/* Grid */
.policy-section .why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

/* Cards */
.policy-section .why-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

/* Hover Effect */
.policy-section .why-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* Icon */
.policy-section .icon {
    font-size: 35px;
    margin-bottom: 15px;
}

/* Heading */
.policy-section .why-card h3 {
    color: #0066ff;
    margin-bottom: 10px;
}

/* Glow Border Effect */
.policy-section .why-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 1px;
    background: #134774;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);

        mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Chatbot Page */
.chatbot-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

/* Soft animated gradient background blobs */
.chatbot-section::before,
.chatbot-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.25;
    animation: floatBlob 10s infinite alternate ease-in-out;
}

.chatbot-section::before {
    background: #134774;
    top: 10%;
    left: 10%;
}

.chatbot-section::after {
    background: #e16924;
    bottom: 10%;
    right: 10%;
}

@keyframes floatBlob {
    from { transform: translateY(0px) scale(1); }
    to { transform: translateY(40px) scale(1.1); }
}

/* =========================
   HERO + INFO
========================= */
.chatbot-section.hero, .chatbot-section.info {
    flex-direction: row;
    text-align: left;
}

.chatbot-section .hero h1 {
    font-size: 3rem;
    font-weight: 700;
    animation: fadeUp 0.8s ease;
}

.chatbot-section .hero p {
    margin-top: 10px;
    color: #555;
    animation: fadeUp 1s ease;
}

/* image */
.chatbot-section .image-box img {
    width: 80%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    transition: 0.4s;
     animation: fadeUp 0.8s ease;
}

.chatbot-section.image-box img:hover {
    transform: scale(1.03);
}

/* =========================
   FEATURES
========================= */
.chat-section.features {
    background: #f9fbff;
}

.chatbot-section .feature-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}

.chatbot-section .card {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 16px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    animation: fadeUp 0.6s ease;
}

.chatbot-section .card:hover {
    transform: translateY(-10px);
    border-color: #e16924;
}

.chatbot-section .card small {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.chatbot-section .card .icon {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
}

/* =========================
   CHAT SECTION (MODERN UI)
========================= */
.chatbot-section .chat-section {
    background: linear-gradient(135deg, #ffffff, #f2f6fb);
}

.chatbot-section.chat-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeUp 0.8s ease;
}

.chatbot-section .chat-box {
    width: 100%;
    max-width: 420px;
    height: 420px;
    background: white;
    border-radius: 18px;
    padding: 15px;
    overflow-y: auto;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);

    scroll-behavior: smooth;
}

/* Messages */
.chatbot-section .msg {
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 80%;
    animation: msgPop 0.3s ease;
}

.chatbot-section .user {
    background: #134774;
    color: white;
    margin-left: auto;
    text-align: right;
}

.chatbot-section .bot {
    background: #e9eef3;
    color: #134774;
    margin-right: auto;
    text-align: left;
}

/* Input */
.chatbot-section .input-area {
    margin-top: 12px;
    display: flex;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-radius: 10px;
    overflow: hidden;
}

.chatbot-section input {
    flex: 1;
    padding: 12px;
    border: none;
    outline: none;
}

.chatbot-section button {
    padding: 12px 18px;
    background: linear-gradient(135deg, #b84f17, #ff8a3d);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

.chatbot-section button:hover {
    opacity: 0.9;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes msgPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Analyzer Page */

/* =======================
   HERO SECTION
======================= */
.analyzer-section.hero-section{
  background: whitesmoke;
  color: #134774;
  padding: 150px 0 80px;
}

.analyzer-section .row {
  row-gap: 25px;
}

.analyzer-section h1 {
  font-size: 2.8rem;
  font-weight: 700;
  text-align: left;
}

.analyzer-section p {
  font-size: 1.1rem;
  color: grey;
  line-height: 1.7;
    text-align: left;
}

.analyzer-section video {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.analyzer-section.section-title {
  color: #fff;
}

/* =======================
   FEATURES SECTION
======================= */
/* =======================
   FEATURE SECTION BACKGROUND
======================= */
.analyzer-section.feature-section {
  background: #134774;
  padding: 100px 0;
}



/* columns stretch */
.analyzer-section .col-lg-4,
.analyzer-section .col-md-6 {
  display: flex;
}

/* =======================
   FEATURE CARD FIX (EQUAL HEIGHT)
======================= */
.analyzer-section .feature-card {
  background: #ffffff;
  color: #134774;
  border-radius: 25px;
  padding: 1.5rem;

  text-align: left;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);

  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
  align-items: flex-start;

  height: 100%;
  width: 100%;

  transition: all 0.3s ease;
  cursor: pointer;
}

/* hover effect */
.analyzer-section .feature-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

/* image consistency */
.analyzer-section .feature-card img {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  object-fit: contain;
}

/* text spacing control */
.analyzer-section .feature-card h4 {
  margin-bottom: 10px;
   
}

.analyzer-section .feature-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}

/* =======================
   CENTER LAST ROW
======================= */
.analyzer-section .justify-content-center {
  justify-content: center;
}

/* =======================
   ANIMATION SYSTEM (FIXED DELAYS)
======================= */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* clean stagger animation system */
.analyzer-section .bounce-1 { animation: bounce 2s ease-in-out infinite; }
.analyzer-section .bounce-2 { animation: bounce 2.2s ease-in-out infinite; }
.analyzer-section .bounce-3 { animation: bounce 2.4s ease-in-out infinite; }
.analyzer-section .bounce-4 { animation: bounce 2.6s ease-in-out infinite; }
.analyzer-section .bounce-5 { animation: bounce 2.8s ease-in-out infinite; }

/* =======================
   BOUNCE ANIMATION
======================= */
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* =======================
   USE CASES
======================= */
.analyzer-section.sol-list {
  padding: 100px 0;
  text-align: center;
}

.analyzer-section .sol-list h2 {
  font-weight: 700;
  margin-bottom: 60px;
  color: #1e3c72;
}

.analyzer-section .list-item {
  background: #fff;
  border-radius: 15px;
  margin: 20px;
  padding: 30px 20px;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  color: #1e3c72;
}

.analyzer-section .list-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.analyzer-section .list-item img {
  width: 80px;
  margin-bottom: 15px;
}
/* =======================
   BASE FIX (IMPORTANT)
======================= */
.analyzer-section .col-lg-4,
.analyzer-section .col-md-6,
.analyzer-section .col-12 {
  display: flex;
}

/* =======================
   DESKTOP (3 per row)
======================= */
@media (min-width: 992px) {
  .analyzer-section .col-lg-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}



/* =======================
   MOBILE (1 per row)
======================= */
@media (max-width: 767px) {
  .analyzer-section .col-md-6,
  .analyzer-section .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* =======================
   TABLET FIX (EXACT 2 PER ROW)
   12 / 34 / 56 / 78
======================= */
@media (min-width: 768px) and (max-width: 991px) {

  .analyzer-section .col-lg-4,
  .analyzer-section .col-md-6,
  .analyzer-section .col-12 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

}

.analyzer-section [class*="col-"] {
  box-sizing: border-box;
}
  

/* ===== DARK MODE BASE ===== */
body.dark {
  background-color: #0f0f0f;
  color: #ffffff;
}

/* HERO */
body.dark .hero-section {
  background: #0b2a4a;
}

/* STATS */
body.dark .stats-section {
  background: #111;
}

body.dark .stats-section .stats {
  background: #8a4a22;
}

/* CARDS SECTION */
body.dark .cards {
  background-color: #0b2a4a;
  color: #ffffff;
}

body.dark .cards * {
  color: #ffffff;
}

/* FEATURE / FOOTER */
body.dark .feature {
  background: #1a1a1a;
  color: #ddd;
}

body.dark .feature-column ul li,
body.dark .feature-column h4 {
  color: #ddd;
}

/* BUTTON */
.theme-btn {
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 9999;
}

body.dark .cards h1,
body.dark .cards h2,
body.dark .cards h3,
body.dark .cards p,
body.dark .cards span {
  color: #ffffff;
}

/* Certification section in home page */

.certifiedhero {
  text-align: center;
  padding: 60px 20px;
  color: #fff;
  background: #b85c2b; 
  border-radius: 10px;
  
}

.certifiedhero h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
}

.certifiedhero p {
  font-size: 16px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.certifiedcard-container {
  background: #e9eef2;
  padding: 40px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

.certifiedcard {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  border-radius: 12px;
}

/* Hover pop-up effect */
.certifiedcard:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

.certifiedcard img {
  max-width: 100%;
  height: auto;
  pointer-events: none; /* prevents overlay click issues */
}

.insurancehero {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  text-align: center;
}

.insurancehero h1 {
  font-size: 42px;
}

.insurancehero p {
  margin-top: 10px;
  font-size: 18px;
}

.cta-btn {
  margin-top: 20px;
  padding: 12px 25px;
  border: none;
  background: #b84f17;
  color: white;
  font-size: 16px;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s;
}

.cta-btn:hover {
  background: #b85c2b;
  transform: scale(1.05);
}

/* SECTIONS */
.section-title {
  text-align: center;
  margin: 50px 0 20px;
}

/* CARDS */
.insurancefeatures {
  padding: 40px;
}

.insurancecard-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.insurancecard {
  background: white;
  padding: 20px;
  width: 250px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: 0.3s;
}

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

/* FORM */
.insuranceform-section {
  padding: 60px 20px;
  text-align: center;
}

.insuranceform-box {
  background: white;
  padding: 30px;
  width: 300px;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.insuranceform-box input,
.insuranceform-box select {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
}

.insuranceform-box button {
  width: 100%;
  padding: 10px;
  background: #2a5298;
  color: white;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.insuranceform-box button:hover {
  background: #1e3c72;
}

/* ANIMATIONS */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s forwards;
}

.delay {
  animation-delay: 0.3s;
}

.delay2 {
  animation-delay: 0.6s;
}

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

.slide-up {
  opacity: 0;
  transform: translateY(40px);
  animation: slideUp 1s forwards;
}

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

.theme-btn i {
  color: black;
  transition: 0.3s;
}

body.dark .theme-btn i {
  color: white;
}

/* Mobile & Tablet override */
@media (max-width: 991.98px) {
  body.dark .theme-btn i {
    color: #000; 
  }
}