@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* font-family: "Poppins", sans-serif; */

:root {
  /* -- color  */
  --primary: #f7921e;
  --secoundry: #090774;

  /* -- Additional Colors */
  --sec-dark: #0e0729;
  --prim-lite: #c3dffc;

  /* HD Colors */
  --hd-prime-color: #252424;
  --hd-lite-color: #303030;

  /* Text Colors */
  --txt-black: #303030;
  --txt-dark: #253d4e;
  --txt-lite: #7e7e7e;

  /* -- Backgrounds */
  --bg-sec-dark: #0e0729;
  --bg-dark: #191a26;
  --bg-lite: #f9f8f8;
  --bg-blue-lite: #e4eef9;

  /* --Border  */
  --border-prim: 1px solid #ececec;
  --border-inpF: 1px solid #ced4da;

  /* --Border Radious */
  --radious-prim: 20px;
  --radious-sec: 10px;

  /* -- transition property */
  --Ftrns: all 0.1s linear;
  --Ltrns: all 0.3s linear;
  --Etrns: all 0.5s ease;

  /* -- Form space  */
  --form-gap: 20px;

  /* -- Font */
  --primary-font: "Poppins", sans-serif;
  --secoundry-font: "Poppins", sans-serif;

  /* --@Animation call */
  --aniTopBot: aniTopBot 6s infinite linear;
  --aniTopBotsimple: aniTopBotSimple 8s infinite linear;
  --aniTnavLink: aniTnavLink 0.2s linear forwards;

}

/* ==> @keyframes */
@keyframes aniTopBot {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px) rotate(1deg);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes aniTopBotSimple {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(15px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes aniTnavLink {
  0% {
    transform: translateX(calc(100% + 20px));
  }

  100% {
    transform: translateX(0);
  }
}

* {
  font-family: var(--primary-font);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
  scroll-padding: var(--scroll-padding, 5rem);
}

body {
  overflow-x: hidden;
  font-size: 14px;
  color: var(--txt-prime);
  width: 100%;
}

@media (min-width: 2100px) {
  body {
    font-size: 18px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--hd-prime-color);
  font-style: normal;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

h6 {
  font-size: 1rem;
}

p {
  color: var(--txt-black);
  font-size: 0.85rem;
  font-weight: 400;
  margin-bottom: 12px;
}

a {
  text-decoration: none;
  color: var(--txt-black);
}

img {
  width: 100%;
}

button {
  cursor: pointer;
  border: none;
  background: transparent;
  display: inline-block;
  flex-shrink: 0;
}

@media (min-width: 2100px) {
  p,
  a {
    font-size: 1rem;
  }
}

/*++++++++++++++++++++++++++++++
        MARK COLOR 
++++++++++++++++++++++++++++++++*/
::-moz-selection {
  /* Code for Firefox */
  color: white;
  background: var(--primary);
}

::selection {
  color: white;
  background: var(--primary);
}

/*++++++++++++++++++++++++++++++
        CUSTOM SCROLLBER 
++++++++++++++++++++++++++++++++*/
::-webkit-scrollbar {
  width: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--secoundry);
  transition: var(--Ltrns);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/*++++++++++++++++++++++++++++++++++
  FORM INPUT / TEXTAREA FIELDS 
++++++++++++++++++++++++++++++++++++*/
input,
textarea,
select {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  padding: 15px;
  border-radius: var(--radious-sec);
  width: 100%;
  border: var(--border-inpF);
  outline: transparent;
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  font-weight: 500;
}

/* ==> DIsabled styling */
input[type="file"]:disabled,
textarea:disabled {
  cursor: not-allowed;
  background-color: #e9ecef;
  opacity: 0.6;
}

input[type="radio"],
input[type="checkbox"] {
  width: fit-content;
}

textarea {
  min-height: 160px;
}

form label {
  color: var(--txt-black);
  font-weight: 500;
  padding-top: 15px;
  margin-bottom: 5px;
  display: inline-block;
}

/* ====> Date picker Styling */
input[type="date"] {
  position: relative;
  width: 100%;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  position: absolute;
  background-position: calc(100% - 20px);
  background-size: 17px;
  cursor: pointer;
}

/* ===> Checkbox / Radio */
.field-holder .flx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.field-holder .checklist {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 5px;
}
.field-holder .checklist input {
  display: none;
}

.checklist span {
  width: 15px;
  height: 15px;
  background: white;
  border: 2px solid var(--primary);
  position: relative;
  border-radius: 100%;
  flex-shrink: 0;
}

.checklist input:checked + span {
  background: var(--primary);
}
.checklist span::after {
  content: "";
  border-radius: inherit;
  width: 7px;
  aspect-ratio: 1/1;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===> Type check box */
.checklist.type-box span {
  border-radius: 5px;
  display: grid;
  place-content: center;
  color: white;
  font-size: 8px;
}
.checklist.type-box span::after {
  display: none;
}

/* =====> Input[type = "File"] */
input[type="file"] {
  cursor: pointer;
  background: white;
}

input[type="file"]::-webkit-file-upload-button {
  display: none;
}

.file-field {
  position: relative;
  overflow: hidden;
  border-radius: var(--radious-sec);
}
.file-field label {
  position: absolute;
  top: 1px;
  left: 1px;
  background: #e9ecef;
  padding: 15px 10px 14px 10px;
  font-size: 13px;
  border-top-left-radius: var(--radious-sec);
  border-bottom-left-radius: var(--radious-sec);
  pointer-events: none;
  cursor: pointer;
  text-transform: capitalize;
  font-weight: 500;
}

/* .file-field input[type="file"]:disabled + label {
  background: #e9ecef;
  opacity: 0.6;
} */

/* =====> Form grids */
.f-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--form-gap);
}

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

/* ===>  Form style */
form {
  padding: 25px;
  border-radius: var(--radious-prim);
  border: var(--border-prim);
}

@media (max-width: 600px) {
  form {
    padding: 15px;
    padding-bottom: 30px;
  }
}

/* ****************==> Form validation  */
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #198754;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Eo_circle_green_checkmark.svg/2048px-Eo_circle_green_checkmark.svg.png");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwaxffy3Er1DhrdrHp27GEtad8qvGyYw3iX5tBjWE&s");

  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #198754;
}
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

.was-validated :valid ~ .valid-feedback {
  display: block;
}
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip,
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip {
  display: block;
}

/*++++++++++++++++++++++++++++++
      HELPER CLASSES 
++++++++++++++++++++++++++++++++*/
/* -----+++ Containers */
.container-fluid {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.container {
  width: 90%;
  margin: auto;
}

.container-mini {
  width: 60%;
  margin: auto;
}

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

/* --Icon Support class*/
i {
  --smrg: 7px;
}
i.sr {
  margin-right: var(--smrg);
}
i.sl {
  margin-left: var(--smrg);
}

/* Grid Classes */
.g-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

.grid-row-auto-A {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
}


@media (max-width: 785px) {
  .grid-row-auto-A {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 750px) {
  .g-row-2 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .grid-row-auto-A {
    grid-template-columns: repeat(1,1fr);
  }
}

/* Section Spacing  */
.space-prim {
  --spacing-y: 70px;
  padding-top: var(--spacing-y);
  padding-bottom: var(--spacing-y);
}

.space-sec {
  --spacing-y: 25px;
  padding-top: var(--spacing-y);
  padding-bottom: var(--spacing-y);
}

@media (max-width: 830px) {
  .space-prim {
    --spacing-y: 60px;
  }
}

/* Display Classes */
.d-block {
  display: block;
}
.d-none {
  display: none;
}

/* Table Class */
table {
  width: 100%;
  border-spacing: 0;
}

.table-responsive {
  overflow-x: auto;
}

/* Responsive scrollbar of table  */
.table-responsive::-webkit-scrollbar {
  height: 3px;
  background-color: #eeeeee;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: #cfcfcf;
}

@media (max-width: 1200px) {
  .container {
    width: 95%;
    max-width: 100%;
  }
  
  
 .container-mini {
  width: 100%;
  max-width:670px;
 }
  
  
}

@media (max-width: 858px) {
  p,
  a {
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  p,
  a {
    font-size: 12px;
  }

  .container,
  .container-mini {
    width: 100%;
  }
}


/* new */
.alert-success {
  background-color: #d1e7dd;
  color: #0a3622;
  padding: 1rem;
  font-size: 12px;
  border: 1px solid #a3cfbb;
  border-radius: 0.375rem;
}