@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap');
@import url("./devices.css");
@import url("./_variables.css");

.bdln {
  border: 1px solid black;
}

body {
  
  color: var(--body-text-color);
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-image: url("../assets/img/landing-page-background.svg");

}


.navbar{
  background-color:var(--secondary-color);
  background-image: url("../img/decoration.svg");
  background-repeat: no-repeat;
}

.bg-landing-page-background {
  background-image: url(../img/landing-page-background.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* height: 1000px; */
}

/* -------------------------------------------- */
/*  Typography  */
/* -------------------------------------------- */


.pointer{
  cursor: pointer;
}
.text-primary {
  color: var(--primary-color)!important;
}

.text-header {
  color: var(--header-text-color) !important;
}
.text-body{
  color: var(--body-text-color) !important;
}
/* .highlight{
  color: var(--secondary-color)!important;
} */
.text-link{
  color: var(--link-color)!important;
  transition: 0.2s ease-out;
}
.text-link:hover{
  color: var(--link-color-hover)!important;
}

a{
  text-decoration: none;
  color: var(--link-color);
  transition: 0.2s ease-out;
}
a:hover{
  text-decoration: none;
  color: var(--link-color-hover);
}

.white-space-nowrap{
  white-space: nowrap!important;
}

/* ********* Headers ********* */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  /* font-family: var(--font-family-secondary); */
  font-weight: 600;

  color: var(--header-text-color);
}

/* ********* Font Sizes ********* */
.fs-12{
  font-size: 12px!important;
}
.fs-13{
  font-size: 13px!important;
}
.fs-14{
  font-size: 14px!important;
}
.fs-15{
  font-size: 15px!important;
}
.fs-16{
  font-size: 16px!important;
}
.fs-18{
  font-size: 18px!important;
}
.fs-20{
  font-size: 20px!important;
}
.fs-21{
  font-size: 21px!important;
}
.fs-22{
  font-size: 22px!important;
}
.fs-24{
  font-size: 24px!important;
}
.fs-26{
  font-size: 26px!important;
}
.fs-28{
  font-size: 28px!important;
}

/* ********* Font Weights ********* */
.fw-medium{
  font-weight: 500!important;
}








/* -------------------------------------------- */
/*  UI Components  */
/* -------------------------------------------- */

/* ********* Borders ********* */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end{
    --bs-border-color: var(--line-color)!important;
}
.border-primary{
    border-color: var(--primary-color)!important;
}
.border-secondary{
    border-color: var(--secondary-color)!important;
}
.border-input{
    border-color: var(--input-border-color)!important;
}
.border-dashed{
    --bs-border-style: dashed!important;
}

/* ********* Backgrounds ********* */
.bg-input{
  background-color: var(--input-bg-color)!important;
}


/***************** Buttons *****************/
.btn {
  border-radius: 0.25rem;
  padding: 10px 40px;

  line-height: 100%;
  font-style: normal;
  font-weight: 400;
  font-size: 0.875rem;

  min-height: 42px;

  gap: 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  outline: 0px !important;
  transition: 0.15s background-color ease-out;
}

.btn .icon{
    font-size: 16px;
}

.btn-md{
    font-size: 16px;

    padding: 12px 30px;
}
.btn-md .icon{
    font-size: 20px;
}

.btn-lg{
    font-size: 18px;

    padding: 16px 36px;
}
.btn-lg .icon{
    font-size: 24px;
}

.btn .arrow{
    display: none;
    animation: icon-card-arrow 0.3s ease-out forwards;
}
.btn:hover .arrow{
    display: inline-block;
}

@keyframes icon-card-arrow {
    from{
      margin-left: -12px;
    }
    to{
      margin-left: 0;
    }
}

.btn-unset-all{
    all: unset;
}
.btn-hover:hover{
    opacity: 0.9;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color);
}


/***************** Alerts *****************/
.alert{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  gap: 8px;

  width: 100%;

  border-radius: 8px;

  font-weight: 400;
  font-size: 15px;
  line-height: 140%;
}
.alert.alert-info{
  color: var(--primary-color);
  background: var(--primary-fade-color);
  border-color: var(--primary-fade-color);
}




/********** Modals ************/
.modal-content{
  background-color: var(--modal-bg-color);
  --bs-modal-border-color: transparent;
  --bs-modal-header-border-color: var(--line-color);
  --bs-modal-footer-border-color: var(--line-color);
}
.modal-md{
  max-width: 590px;
}