:root {
  /* Primary Colors */
  --primary-color: #6dd5fa;
  /* Main brand color */
  --secondary-color: #004080;
  /* Secondary gradient color */
  --text-color: #ffffff;
  /* White text */
  --background-color: #001833;
  /* Dark background */

  /* Button Colors */
  --btn-bg-color: #6dd5fa;
  --btn-bg-secondary-color: #000;
  --btn-hover-bg-color: #48cae4;
  --btn-text-color: #000;
}

@font-face {
  font-family: 'AvenirNextLTPro';
  src: url('assets/fonts/AvenirNextLTPro-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'AvenirNextLTPro', sans-serif;
  color: #35414e;
}

#hero {
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #010d1a, #152c42);
  color: white;
  text-align: center;
  padding: 50px 20px;
}

.bg-overlay {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.bg-overlay img {
  width: 100%;
  height: 100%;
}

.collapse.navbar-collapse {
  transition: all 0.3s ease-in-out;
  /* Smooth transition for expanding/collapsing */
  overflow: hidden;
  /* Ensures smooth animation */
}

.collapse.navbar-collapse.show {
  background: linear-gradient(180deg, #010d1a, #152c42) !important;
  padding: 5px;
  border-radius: 0 0 10px 10px;
  /* Optional styling for the dropdown */
}

.btnPrimary {
  background: var(--primary-color) !important;
  color: #01080e;
  border-radius: 20px;
}

.btnPrimary:hover {
  background: var(--btn-hover-bg-color) !important;
  color: var(--btn-text-color);
}

.btnSecondary {
  background-color: var(--btn-bg-secondary-color);
  border-radius: 20px;
  color: white;
  font-weight: 400;
  justify-self: center;
}

.btnSecondary:hover {
  border: 1px solid var(--primary-color);
}

.nav-link {
  color: #e6e7e9;
  padding: 0 15px;
  transition: color 0.6s ease-in-out;
}

.nav-link.active {
  /* color: #E6E7E9; */
  font-weight: bold;
}
.nav-link:focus {
  color: white;
}
.nav-link:hover {
  font-weight: 500;
  color: white;
}

.navbar-toggler-icon {
  filter: invert(1);
}

.nav {
  z-index: 1;
  position: relative;
}

@media (max-width: 991px) {
  .navbar-collapse {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    z-index: 999;
  }
}

.hero-section {
  /* min-height: 90vh; */
  min-height: 520px;
  text-align: center;
  overflow: hidden;
}

.swiper-wrapper {
  user-select: none;
}

.line-container {
  position: relative;
  width: 40%;
  height: 2px;
  left: 30%;
  top: 20px;
}

.line {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.heading1 {
  font-weight: bold;
  font-size: 4rem;
}

.heading2 {
  font-size: 2.5rem;
  font-weight: lighter;
}

.statHead {
  font-size: 3.2rem;
  font-weight: 900;
  margin-bottom: 0;
}

.lead {
  max-width: 650px;
  text-align: center;
  margin: auto;
  font-size: 16px !important;
  font-weight: lighter;
  color: #e6e7e9;
  /* word-spacing: .6rem; */
}

.textLight {
  color: #e6e7e1b8;
}

.btn-link {
  color: #48cae4;
  text-decoration: none;
}

.whylead {
  margin: auto;
  font-size: 0.9rem;
}

.lightLead {
  color: #35414e;
}

.sectionMonetize {
  background: #e8e8e859;
  padding: 50px 20px;
}

.heading2.fw-bold {
  font-weight: 900 !important;
}

.text-justify {
  text-align: justify;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .hero-section .heading1 {
    font-size: 1.9rem;
  }

  .heading-section .heading2 {
    font-size: 1.2rem;
  }

  .line-container {
    width: 50%;
    left: 25%;
  }
}

@media (max-width: 992px) {
  #hero {
    padding: 40px 15px;
  }

  .line-container {
    width: 60%;
    left: 20%;
  }

  .lead {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  #hero {
    padding: 30px 10px;
    /* height: 70vh; */
  }

  .hero-section {
    /* min-height: 70vh; */
  }

  .hero-section .heading1 {
    font-size: 1.9rem;
  }

  .heading-section .heading2 {
    font-size: 1.2rem;
  }

  .line-container {
    width: 70%;
    left: 15%;
  }
}

@media (max-width: 576px) {
  .line-container {
    width: 80%;
    left: 10%;
  }

  .hero-section .heading1 {
    font-size: 1.9rem;
  }

  .hero-section .heading2 {
    font-size: 1.2rem !important;
  }

  .heading2 {
    font-size: 1.5rem !important;
  }

  .btnPrimary,
  .btnSecondary {
    padding: 5px 8px;
    font-size: 0.8rem;
  }

  .bgCard {
    background-position: center;
    border-radius: 10px;
  }
}

.why-pollreach-section {
  background: linear-gradient(180deg, #000000 0%, #0e1f30 52%, #043364 100%);
}

.why-pollreach-section h4 img {
  margin-bottom: 8px;
}

.nav-container {
  background: transparent;
  border-radius: 50px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  padding: 0.5rem;
}

.nav-container.scrolled {
  background: linear-gradient(
    180deg,
    #000000 0%,
    #0e1f30 52%,
    #043364 100%
  ) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Card Background Styles */
.bgCard {
  background: linear-gradient(
    95.34deg,
    #000000 -3.76%,
    #0e1f30 49.38%,
    #043364 98.88%
  );
  background-size: cover;
  border-radius: 20px;
  padding: 20px;
  height: 100%;
  /* Ensure consistent height */
}

.card2 {
  background: linear-gradient(
    95.34deg,
    #000000 -3.76%,
    #0e1f30 49.38%,
    #043364 98.88%
  );
  background-size: cover;
  border-radius: 20px;
  padding: 20px;
}

/* Bordered Card Styles */
.borderCard {
  border: 1px solid transparent;
  border-radius: 20px;
  border: 1px solid #ffffff24;
  padding: 15px;
  height: 100%;
}

.borderCard2 {
  border: 1px solid transparent;
  border-radius: 20px;
  border: 1px solid #ffffff24;
  padding: 15px;
}

/* Section Styling */
.why-pollreach-section {
  background: linear-gradient(
    150.94deg,
    #000000 -1.25%,
    #0e1f30 50.64%,
    #043364 98.97%
  );
}

/* Section Styling */
.trusted-data-section {
  background-color: white;
  /* Light blue background */
  border-radius: 20px;
  /* Match rounded-card style */
  padding: 40px;
  /* Padding for content */
}

/* Text Content Styling */
.trusted-data-section .heading2 {
  font-size: 2rem;
  /* Larger font size for heading */
  font-weight: bold;
}

.trusted-data-section .lead {
  font-size: 1rem;
  /* Standard font size for lead text */
  margin-top: 20px;
  color: #6c757d;
  /* Muted text color */
}

.trustedSection {
  background-color: #e8f8ff;
  border-radius: 20px;
  padding: 10px;
}

.benefits .card {
  border-color: #e6e7e9;
  border-radius: 25px;
}

.benefits .card p {
  font-size: 0.8rem;
}

.benefits .dark-card {
  background: linear-gradient(130deg, #000000, #0e1f30, #043364);
  color: #fff;
  border-radius: 25px;
}

.benefits .dark-card p {
  color: #b1b6ba;
}

footer {
  background-color: #01080e;
  padding: 20px;
}

.footerLinks a {
  font-weight: 400;
  color: white;
}

.footerHeading {
  font-weight: 500;
  font-size: 30px;
}

.footerP {
  font-size: 12px;
  color: #b1b6ba;
  font-weight: bold;
}

.mediumText {
  font-size: 14px;
}

.w-65 {
  width: 65%;
}

.Copyright {
  color: #b1b6ba;
}

.hidden-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.9s ease-in-out, opacity 0.3s ease-out;
  opacity: 0;
}

.hidden-content:not(.d-none) {
  max-height: 500px;
  opacity: 1;
}

/* Login */
.bg-pgradient {
  /* background: linear-gradient(40deg, #020e359a, #020E35, #020E35, #020E35, #020E35, #020e359a); */
  background: url(../images/bg-gradient.png),
    linear-gradient(to bottom right, #020e35, #020e35);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.login-register {
  overflow-x: hidden;
  min-height: 100vh;
}

.form-card {
  /* background: linear-gradient(to right, #000000 0%, #0E1F30 20%, #043364 100%); */
  background: linear-gradient(to right, #0e1f30 50%, #043364);
  border-radius: 24px;
  padding: 20px;
  color: #fff;
}

.login-register form input,
.login-register form input:focus,
.togglePass {
  background-color: transparent;
  border-color: #6dd5fa;
  color: #fff;
}

.togglePass {
  cursor: pointer;
}

.login-register form button[type='submit'] {
  background-color: #6dd5fa;
  color: #000;
}

.login-register form label {
  font-weight: bold;
  font-size: 14px;
}

.login-register .createLink {
  margin-top: 30px;
  text-align: center;
  color: #718096;
  margin-bottom: 30px;
}

.login-register .createLink a {
  color: #6dd5fa;
}

/* Register */
.country-select.inside {
  width: 100%;
}

.country-select .country-list {
  background: linear-gradient(to right, #0e1f30 50%, #043364);
  color: white;
  overflow-x: hidden;
}

/* Webkit-based browsers (Chrome, Edge, etc.) */
.country-select .country-list::-webkit-scrollbar {
  /* width: 2px; */
  /* Width of the scrollbar */
}

.country-select .country-list::-webkit-scrollbar-thumb {
  background-color: #888;
  /* Color of the scrollbar handle */
  border-radius: 10px;
  /* Rounded corners for the scrollbar handle */
}

.country-select .country-list::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* Darker handle color on hover */
}

.country-select .country-list::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* Background of the scrollbar track */
}

/* Firefox */
.country-select .country-list {
  scrollbar-width: thin;
}

.agree {
  color: #667479;
}

/* other pages css */
.mainHeading {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 48px;
  line-height: 140%;
  color: #ffffff;
}

.mainSubHeading {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 140%;
  color: #ffffff;
}
.mainText {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  color: #e6e7e9;
}

#heroGradient {
  background: url(../images/bgGradient.png);
  background-position: center;
  color: #ffffff;
  padding-bottom: 10px;
  background-size: cover;
}
#oopsGradient{
  background: url(../images/CongratulationBg.png);
  background-position: center;
  color: #ffffff;
  padding-bottom: 10px;
  background-size: cover;
}
.close-btn{
  background-color: #6dd5fa;
  color: #000;
  width: 300px;
}
.close-btn:hover{
  border: 1px solid #6dd5fa;
}