@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");

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

a {
  text-decoration: none !important;
  display: contents;
}

li {
  list-style: none;
}

dl,
ol,
ul {
  margin: 0;
}

:root {
  --poppins: "Poppins", sans-serif;
  --lato: "Lato", sans-serif;

  --light: #f9f9f9;
  --blue: #3c91e6;
  --light-blue: #cfe8ff;
  --grey: #eee;
  --dark-grey: #aaaaaa;
  --dark: #342e37;
  --red: #db504a;
  --yellow: #ffce26;
  --light-yellow: #fff2c6;
  --orange: #fd7238;
  --light-orange: #ffe0d3;
  --primary-font-color: #003c83;
  --secondary-font-color: #7289a3;
  --black-font-color: #323338;
  --green-color: #008e4a;
  --orange-color: #ffa53a;
  --yellow-color: #ffeb3a;
  --red-color: #ff3a3a;
  --pink-color: #f74875;
  --blue-color: #0073ea;
  --purple-color: rgb(80, 52, 255);
  --light-blue-color: #ebf5ff;
  --border: 1px solid #eeeeee;
  --h1-size: 20px;
  --h2-size: 18px;
  --h3-size: 16px;
  --h4-size: 14px;
  --h5-size: 12px;
  --h6-size: 15px;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background: var(--grey);
  overflow-x: hidden;
  font-family: "Poppins", sans-serif !important;
}

body::-webkit-scrollbar {
  width: 0.6rem;
}

body::-webkit-scrollbar-track {
  background: #fff;
}

body::-webkit-scrollbar-thumb {
  background: #171f367a;
}

img {
  max-width: 100%;
}


.wrap-input100 .errormessage {
  position: absolute;
  bottom: -2rem;
  left: 0.6em;
}

/* LANDING PAAGE DESIGN STARTS HERE  */
header {
  width: 100%;
  position: sticky;
  background: #fff;
  top: 0;
  left: 0;
  z-index: 99999;
  box-shadow: 0 4px 30px hsla(242, 100%, 83%, 0.3);
}

header.fixed {
  position: fixed;
}

.navbars {
  width: 90%;
  min-height: 10vh;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: static;
  transition: all 0.2s linear;
}

.navbars ul {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  position: static;
}

.navbars .navList {
  font-size: var(--h6-size);
  color: var(--black-font-color);
  font-weight: 600;
  padding: 0.8rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.1s linear;
}

.navbars .navList a {
  color: inherit;
}

.navbars .navList i {
  font-size: var(--h5-size);
}

.featureDrop .box .fa-solid {
  color: var(--primary-font-color);
  background: hsla(213, 100%, 26%, 0.1);
  font-size: var(--h6-size);
  padding: 0.3rem;
  border-radius: 0.1rem;
}

.navList.getStarted {
  background: var(--blue-color);
  color: #fff;
  border-radius: 100vmax;
}

.navbars .navList:hover,
.navbars .navList.active {
  background: var(--light-blue-color);
  color: var(--primary-font-color);
}

.navbars .navList.active .fa-chevron-down {
  transition: all 0.2s ease-out;
  transform: rotate(180deg);
}

.hamDiv {
  display: none;
  font-size: var(--h4-size);
  min-height: 6vh;
  width: 90%;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
}

.hamburger {
  font-size: var(--h1-size);
}

@media (max-width: 1110px) {
  .hamDiv {
    display: flex;
  }

  .navbars {
    position: absolute !important;
    background: #fff;
    justify-content: center !important;
    flex-direction: column;
    width: 100%;
    top: 3rem;
    transform-origin: top center;
    transform: scaleY(0);
    visibility: hidden;
  }

  .navbars.active {
    visibility: visible;
    transform: scaleY(1);
  }

  .navbars ul {
    flex-direction: column;
  }

  .navList.getStarted,
  .navList.webLogo {
    display: none;
  }
}

/* ------------------------------------------------------------- */

/* HERO SECTION ************* */
.hero {
  background: linear-gradient(rgb(0, 1, 51) 0%, rgb(15, 16, 72) 100%);
}

.heroh1,
.heroh3 {
  font-size: clamp(1.25rem, 0.55rem + 3.2vw, 3.75rem);
  color: #fff;
  font-weight: 500;
  text-align: center;
  margin: 2rem 0;
}

.heroh3 {
  font-size: var(--h1-size);
  margin: 0;
}

.l-container {
  display: flex;
  gap: 1.5rem;
  margin-block: 5rem;
  justify-content: center;
}

.l-box {
  width: 12%;
  /* height: 14rem; */
}

.l-box label {
  border: 1px solid #676879;
  padding: 1rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  cursor: pointer;
  align-items: center;
}

.l-box label p,
.l-box label i {
  font-size: var(--h3-size);
  margin-bottom: 0.5rem;
  color: #fff;
  text-align: center;
}

.l-box input[type="checkbox"] {
  align-self: flex-start;
}

.l-box label i {
  font-size: 25px;
  margin-bottom: 1rem;
}

.l-box.pink label i {
  color: rgb(255, 21, 138);
}

.l-box.pink label {
  border: 1px solid rgb(255, 21, 138);
}

.l-box.green label i {
  color: var(--green-color);
}

.l-box.green label {
  border: 1px solid var(--green-color);
}

.l-box.orange label i {
  color: var(--orange-color);
}

.l-box.orange label {
  border: 1px solid var(--orange-color);
}

.l-box.purple label i {
  color: rgba(108, 108, 255, 1);
}

.l-box.purple label {
  border: 1px solid rgba(108, 108, 255, 1);
}

.l-box.aqua label i {
  color: rgba(0, 115, 234, 1);
}

.l-box.aqua label {
  border: 1px solid rgba(0, 115, 234, 1);
}

.l-box.blue label i {
  color: rgb(87, 155, 252);
}

.l-box.blue label {
  border: 1px solid rgb(252, 87, 241);
}

.l-box.peach label i {
  color: rgb(255, 117, 117);
}

.l-box.peach label {
  border: 1px solid rgb(255, 117, 117);
}

.l-box.darkBlue label i {
  color: rgb(78, 204, 198);
}

.l-box.darkBlue label {
  border: 1px solid rgb(78, 204, 198);
}

.l-getStarted {
  background: linear-gradient(90deg, #5034ff 25.69%, #b4b4ff 100%);
  color: #fff;
  margin: 0 auto;
  font-size: var(--h3-size);
  display: block;
  border-radius: 100vmax;
  padding: 1.5rem;
  margin-bottom: 3rem;
  transition: all 0.1s linear;
}

.l-getStarted:hover {
  translate: 0 -4px 0;
}

.triangle-border {
  border-bottom: 13.9173vw solid var(--light-blue-color);
  width: 0;
  height: 0;
  border-right: 100vw solid transparent;
  margin-top: -13.917310096006544vw;
  position: absolute;
  z-index: 2;
}

.triangle-border.white {
  border-bottom: 13.9173vw solid #fff;
}

/* MARKETING  */

.stratergy p {
  color: var(--pink-color);
  font-size: var(--h3-size);
}

.stratergy h4 {
  font-size: 35px;
  color: var(--black-font-color);
  margin-bottom: 1.5rem;
}

.stratergy h4 span {
  font-weight: 700;
}

.stratergy h5 {
  font-size: var(--h2-size);
  color: var(--black-font-color);
  font-weight: 400;
}

.stratergy .row {
  padding-bottom: 7rem;
  min-height: 70vh;
}

.stratergy img {
  filter: drop-shadow(0px 7px 25px rgba(116, 159, 201, 0.3));
}

.stratergy .pad-custom {
  padding: 0 10rem;
}

.non-profits .fire-list {
  margin-left: 2rem !important;
}

.non-profits {
  background: var(--light-blue-color);
}

.non-profits .fire-list li {
  margin: 0;
}



.fire-list li {
  font-size: var(--h3-size);
  color: var(--black-font-color);
  font-weight: 400;
  /* margin-bottom: 3rem; */
  padding: 1rem;
}

.fire-list li::marker {
  content: "✅";
  font-size: inherit;
}

.workH2 {
  font-size: clamp(1.25rem, 0.55rem + 3.2vw, 3.75rem);
  color: var(--black-font-color);
  text-align: center;
  margin-bottom: 1.5rem;
}

.guarantee {
  background: #dcedff;
  padding: 3rem 0;
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.guarantee h2 {
  font-size: 30px;
  color: var(--black-font-color);
  font-weight: 600;
  margin-bottom: 2.5rem;
}

.g-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}

.g-card-content {
  padding: 1.5rem;
  text-align: center;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.1s linear;
}

.g-card-content h3 {
  font-weight: 600;
  font-size: var(--h1-size);
  color: #fff;
  margin-bottom: 1rem;
}

.g-card-content i {
  color: #fff;
  font-size: 3rem;
  margin-bottom: 2rem;
}

.g-card-content p {
  font-size: var(--h6-size);
  color: #fff;
}

.g-card-content.green {
  background: var(--green-color);
  box-shadow: rgb(0 142 74 / 40%) 0px 8px 24px;
}

.g-card-content.purple {
  background-color: var(--purple-color);
  box-shadow: #5034ff66 0px 8px 24px;
}

.g-card-content.orange {
  background: var(--orange);
  box-shadow: rgb(253 114 56 / 40%) 0px 8px 24px;
}

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

/* Contact US form  */

.l-contactus {
  min-height: 90vh;
  background: #fff;
  padding: 4rem 2rem;
  padding-top: 4rem;
}

.l-form {
  background: #fff;
  border-radius: 1.8rem;
  box-shadow: 0px 8px 24px rgba(29, 140, 242, 0.2),
    -11px 11px 0 rgba(80, 52, 255, 0.2);
  padding: 2rem;
}

.l-form h2 {
  font-size: 2.2rem;
  color: var(--black-font-color);
  margin-bottom: 3rem;
}

.l-form .input label {
  font-size: var(--h3-size);
  color: var(--black-font-color);
  margin-bottom: 1rem;
  font-weight: 500;
  position: relative;
  width: max-content;
}

.l-form .input label::before {
  content: "*";
  color: var(--red-color);
  right: -10px;
  position: absolute;
}

.l-form .input {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.l-form .input input,
.l-form .input select,
.l-form .input textarea {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1.5px solid #676879;
  font-size: var(--h4-size);
}

.l-form .input-box {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
}

.l-form .l-getStarted {
  margin: 0;
  margin-top: 2rem;
  border: 0;
}

.l-contactus h3 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

/* Plans Starts  */
.plans {
  width: 100%;
  background: #fff;
  padding: 2rem;
  position: relative;
}

.plans h1 {
  font-size: var(--h1-size);
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 500;
  color: var(--black-font-color);

}

.plans.not-min-h100 {
  min-height: fit-content !important;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.plans .select label,
.plans .select select {
  font-size: var(--h3-size);
  color: #676879;
  font-weight: 300;
}

.plans .main-container input {
  width: var(--h1-size);
  height: var(--h1-size);
}

.plans .main-container .radio {
  width: fit-content;
  margin: 0 auto;
}

.plans .main-container .borderDiv {
  border: 1px solid #676879;
  border-radius: 0.5rem;
  border-top: 1.5rem solid #676867;
  padding: 1rem;
}

.plans .main-container .borderDiv.yellow {
  border-top-color: #ffcc00;
}

.plans .main-container .borderDiv.green {
  border-top-color: #11dd80;
}

.plans .main-container .borderDiv h2 {
  font-size: var(--h2-size);
  font-weight: 800;
  color: var(--black-font-color);
  margin-bottom: 1rem;
}

.plans .main-container .borderDiv h4 {
  font-size: var(--h4-size);
  font-weight: 500;
  color: var(--black-font-color);
  margin-bottom: 0.5rem;
}

.plans .main-container .borderDiv h3 {
  font-size: var(--h5-size);
  color: var(--black-font-color);
  font-weight: 300;
}

.plans .main-container .borderDiv h5 {
  font-size: var(--h3-size);
  font-weight: 500;
  color: var(--black-font-color);
  margin-bottom: 1.5rem;
}

.plans .main-container .borderDiv p {
  margin-bottom: 1rem;
  font-size: var(--h4-size);
  color: var(--black-font-color);
  font-weight: 300;
}

.plans .main-container .line {
  height: 2px;
  background: #676867;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.plans .featurPlan .borBottom {
  border-bottom: 1px solid var(--black-font-color);
  margin-bottom: 3rem;
}

.plans .featurPlan .borBottom h2 {
  font-size: var(--h1-size);
  font-weight: 300;
  color: var(--black-font-color);
}

.plans .featurPlan .borBottom p {
  font-size: var(--h4-size);
  font-weight: 500;
  color: var(--black-font-color);
}

.plans .featurPlan .borBottom .green {
  color: var(--green-color);
  font-weight: 700;
}

.plans .featurPlan .borBottom .yellow {
  color: var(--yellow-color);
  font-weight: 700;
}

.plans .continue .btn {
  margin: 0;
}

.landingFooter {
  background: var(--black-font-color);
  color: #fff;
}