:root {

  --ink: #265148;

      --ink-deep: #add4a8;

  --tg-body-font-family: "Inter", sans-serif;

  --tg-heading-font-family: "DM Sans", sans-serif;

  --tg-icon-font-family: "Font Awesome 5 Free";

  --tg-body-font-size: 16px;

  --tg-body-line-height: 1.6;

  --tg-heading-line-height: 1.2;

  --tg-body-color: #222222;

  --tg-heading-color: #212121;

  --tg-theme-primary: #0077AB;

  --tg-theme-primary-2: #0077AB;

  --tg-theme-primary-3: #FF4C4C;

  --tg-theme-secondary: #219dd3;

      --gold: #9127a8;

          --gold-light: #f27eff;

          --slate-light: #f27eff;

          --border: #f7b6ff;

  --tg-color-blue-default: #1598d1;

  --tg-color-dark-blue: #0E104B;

  --tg-color-yellow-default: #FFD247;

  --tg-color-yellow-light: #f8f7d7;

  --tg-color-white-default: #ffffff;

  --tg-color-lavender-default: #eeebff;

  --tg-color-anti-flash-default: #f1f1f1;

  --tg-color-anti-flash-2: #f4eaf4;

  --tg-color-alice-blue-default: #ecf5ff;

  --tg-color-green-default: #1598d1;

  --tg-color-dark-green: #ffbe052e;

  --tg-color-gray-1: #b1b5bf;

  --tg-color-gray-2: #E8E8E8;

  --tg-color-gray-3: #F5F7F9;

  --tg-color-gray-4: #767982;

  --tg-color-gray-5: #B1B5BF;

  --tg-color-gray-6: #F0F1F3;

  --tg-color-gray-7: #494C55;

  --tg-color-gray-8: #F0F2F6;

  --tg-color-gray-9: #F3F1FF;

  --tg-color-gray-10: #F7F7F7;

  --tg-color-dark: #0A0B0F;

  --tg-color-dark-2: #242424;

  --tg-color-dark-3: #1F2122;

  --tg-color-dark-4: #06070A;

  --tg-color-dark-5: #1B1C1D;

  --tg-border-1: #f0f0f0;

  --tg-border-2: #d9dfe5;

  --tg-border-3: #343641;

  --tg-border-4: #EEF2F6;

  --tg-border-5: #E1E6F0;

  --tg-fw-extra-bold: 800;

  --tg-fw-bold: 800;

  --tg-fw-semi-bold: 600;

  --tg-fw-medium: 500;

  --tg-fw-regular: 400;

  --tg-fw-light: 300;

}



/*=============================

	00. Section Title

===============================*/

.section__title {

 position: relative;

}

.application-bg{

  flex-direction: column;

  align-items: center;

  justify-content: center;

  display: flex;

  border-radius: 20px;

  padding: 20px;

  height: 100%;

  

  background: linear-gradient(180deg, #d1dcee, #c2f8ff, #00c4ff80);

}

.section__title .sub-title {

  font-weight: 500;

  font-size: 12px;

  border: 1px solid var(--tg-border-2);

  display: inline-block;

  padding: 8px 15px;

  -webkit-border-radius: 24px;

  -moz-border-radius: 24px;

  -o-border-radius: 24px;

  -ms-border-radius: 24px;

  border-radius: 24px;

  line-height: 1;

  margin-bottom: 16px;

}

.section__title .title {

  margin-bottom: 0;

  font-size: 47px;

  font-weight: 700;

  color: #000826;

}

.why-section{

  padding: 80px 0;

}

@media (max-width: 1199.98px) {

  .section__title .title {

    font-size: 36px;

  }

}

@media (max-width: 767.98px) {

  .section__title .title {

    font-size: 32px;

  }

}

.section__title .title span, span.highlited {

    color: #2563eb;

}

.section__title .title .shape {

  width: 165px;

  height: auto;

}

.section__title .title .shape path {

  fill: none;

  stroke: #FC5C79;

  stroke-width: 2;

}

.section__title p {

  margin-bottom: 0;

  margin-top: 16px;

  color: #434a5a

}

.section__title.white-title .title {

  color: var(--tg-color-white-default);

}

.section__title.white-title p {

  color: var(--tg-color-gray-5);

}

.section__title .white-content {

  color: var(--tg-color-white-default) !important;

}

.section__title-two .title span {

  text-decoration: underline;

  text-decoration-skip-ink: none;

  color: var(--tg-theme-secondary);

  font-style: italic;

}



@media (max-width: 991.98px) {

  .section__title.mb-70,

  .section__title.mb-60 {

    margin-bottom: 40px;

  }

}



.section-py-140 {

  padding: 140px 0;

}

@media (max-width: 991.98px) {

  .section-py-140 {

    padding: 120px 0;

  }

}

@media (max-width: 767.98px) {

  .section-py-140 {

    padding: 100px 0;

  }

}



.section-pt-140 {

  padding-top: 140px;

}

@media (max-width: 991.98px) {

  .section-pt-140 {

    padding-top: 120px;

  }

}

@media (max-width: 767.98px) {

  .section-pt-140 {

    padding-top: 100px;

  }

}



.section-pb-140 {

  padding-bottom: 140px;

}

@media (max-width: 991.98px) {

  .section-pb-140 {

    padding-bottom: 120px;

  }

}

@media (max-width: 767.98px) {

  .section-pb-140 {

    padding-bottom: 100px;

  }

}



.section-pb-110 {

  padding-bottom: 110px;

}

@media (max-width: 991.98px) {

  .section-pb-110 {

    padding-bottom: 90px;

  }

}

@media (max-width: 767.98px) {

  .section-pb-110 {

    padding-bottom: 70px;

  }

}



.section-py-120 {

  padding: 120px 0;

}

@media (max-width: 767.98px) {

  .section-py-120 {

    padding: 100px 0;

  }

}



.section-pt-120 {

  padding-top: 120px;

}

@media (max-width: 767.98px) {

  .section-pt-120 {

    padding-top: 100px;

  }

}



.section-pb-120 {

  padding-bottom: 120px;

}

@media (max-width: 767.98px) {

  .section-pb-120 {

    padding-bottom: 100px;

  }

}



.section-pb-90 {

  padding-bottom: 90px;

}

@media (max-width: 767.98px) {

  .section-pb-90 {

    padding-bottom: 70px;

  }

}



.section-pt-90 {

  padding-top: 90px;

}

@media (max-width: 767.98px) {

  .section-pt-90 {

    padding-top: 70px;

  }

}



/* .container {

  max-width: 1350px;

}

@media (max-width: 1500px) {

  .container {

    max-width: 1320px;

  }

} */

@media (max-width: 1199.98px) {

  

 

  .container {

    max-width: 960px;

  }

}

a, button {

    color: #4588f4;

    outline: none;

    text-decoration: none;

    -webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -ms-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s;

}

.tgmobile__menu .tgmenu__action {

  padding: 0 0;

  margin: 0 0;

}

.tgmobile__menu .tgmenu__action > ul {

  margin: 0 0;

  padding: 30px 20px 0;

  justify-content: center;

  gap: 0 15px;

}

.tgmobile__menu .tgmenu__action > ul li {

  margin: 0 0;

}

.tgmobile__menu .tgmenu__action > ul .header-btn {

  display: block;

}

@media (max-width: 991.98px) {

  .tgmenu__action {

    margin: 0 24px 0 auto;

  }

}

@media (max-width: 767.98px) {

      .mission-section {

        padding: 4rem 0;

    }

    .mission-headline, .bgs-title{

      font-size: 31px !important;

    }

  .tgmenu__action {

    /* display: none; */

  }

}

.tgmenu__action > ul {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  gap: 0px;

  margin: 0;

  padding: 0;

}

.tgmenu__action > ul li {

  position: relative;

  margin-left: 24px;

  flex: 0 0 auto;

  list-style: none;

}

@media (max-width: 991.98px) {

  .tgmenu__action > ul li {

    margin-left: 20px;

  }

}

.tgmenu__action > ul li.header-btn .tg-btn {

  gap: 4px;

  padding: 16px 20px;

  border: 0;

}

.tgmenu__action > ul li:first-child {

  margin-left: 0;

}

.tgmenu__action-three {

  margin-left: 16px;

}

@media (max-width: 991.98px) {

  .tgmenu__action-three {

    margin: 0 24px 0 auto;

  }

}

/*=========================

      Breadcrumb

===========================*/

.breadcrumb__area {

    background: url(../images/page-title.jpg) no-repeat 0 0;

    background-size: cover;

  position: relative;

  z-index: 1;

  padding: 80px 0 120px;

      border-bottom: 1px solid #e4e4e4;

 background: radial-gradient(1200px 600px at 85% 110%, rgba(147, 51, 234, .22), transparent 55%), radial-gradient(900px 500px at 10% 120%, rgba(88, 28, 135, .18), transparent 55%), #0a0510;

}

@media (max-width: 1199.98px) {

  .feature-card{

    padding: 24px 16px;

  }

  .feature-card h3{

    font-size: 17px;

  }

  .feature-card-txt p{

    font-size: 14px;

  }

  .breadcrumb__area {

    padding: 80px 0 100px;

  }

  .feature-pill{

    width: 100%;

  }

  .feature-pill{

    font-size: 15px;

  }

}

@media (max-width: 767.98px) {

  .breadcrumb__area {

    padding: 60px 0 80px;

  }

}

.breadcrumb__area .shape {

  position: absolute;

  /* transform: rotate(90deg); */

  right: 0;

  top: 0;

  z-index: -1;

  opacity: 0.3

}

@media (max-width: 991.98px) {

  .features-section::before{

    width: 100%;

  }

  .ftr-left-wrap{

    position: relative;

  }

  .features-section::after{

    content: "";

        position: absolute;

        inset: 0;

              background: rgb(252 230 255 / 80%);

              z-index: 0;

              top:0;

              left: 0;

              width: 100%

  }

  .features-section{

        padding: 80px 0 30px;

  }

  .ftr-left-wrap{

    z-index: 99;

    padding-right: 0;

  }

  .breadcrumb__area .shape {

    max-width: 320px;

  }

}

@media (max-width: 767.98px) {

  .breadcrumb__area .shape {

    max-width: 280px;

  }

}

.breadcrumb__area-two {

  padding: 80px 0 32px;

}

@media (max-width: 767.98px) {

  .breadcrumb__area-two {

    padding: 60px 0 32px;

  }

}

.breadcrumb__area-three {

  padding: 80px 0 40px;

}

@media (max-width: 767.98px) {

  .breadcrumb__area-three {

    padding: 60px 0 40px;

  }

}

.breadcrumb__inner-wrap {

  padding: 0 56px;

}

@media (max-width: 1199.98px) {

  .breadcrumb__inner-wrap {

    padding: 0;

  }

}

.breadcrumb__inner-wrap .breadcrumb__content .title {

  text-align: left;

}

.breadcrumb__content {

  text-align: center;

}

.breadcrumb__content .breadcrumb {

  display: inline-flex;

    background: #d0deff;

  -webkit-border-radius: 24px;

  -moz-border-radius: 24px;

  -o-border-radius: 24px;

  -ms-border-radius: 24px;

  border-radius: 24px;

  padding: 8px 16px;

  gap: 8px;

  margin-bottom: 24px;

}

.breadcrumb__content .breadcrumb span {

  font-weight: 500;

  font-size: 12px;

  line-height: 1.2;

  color: var(--tg-heading-color);

}

.breadcrumb__content .breadcrumb span a {

  color: var(--tg-color-gray-4);

}

.breadcrumb__content .breadcrumb span a:hover {

  color: var(--tg-theme-secondary);

}

.breadcrumb__content .breadcrumb span.breadcrumb-separator {

  color: var(--tg-color-gray-4);

}

.breadcrumb__content .title {

  margin-bottom: 0;

  font-size: 40px;

      color: #fff;

}

@media (max-width: 1199.98px) {

  .breadcrumb__content .title {

    font-size: 36px;

  }

}

@media (max-width: 767.98px) {

  .breadcrumb__content .title {

    font-size: 32px;

  }

}

.breadcrumb__menu {

  margin-top: 32px;

}

.breadcrumb__menu .list-wrap {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

}

.breadcrumb__menu .list-wrap li a {

  font-weight: 500;

  font-size: 14px;

  background: #F0F2F6;

  display: block;

  color: var(--tg-body-color);

  padding: 13px 20px;

  -webkit-border-radius: 40px;

  -moz-border-radius: 40px;

  -o-border-radius: 40px;

  -ms-border-radius: 40px;

  border-radius: 40px;

  line-height: 1;

  position: relative;

  z-index: 1;

}

.breadcrumb__menu .list-wrap li a:hover {

  background: var(--tg-theme-secondary);

  color: var(--tg-color-white-default);

}

.breadcrumb__menu .list-wrap li a span {

  font-weight: 600;

  font-size: 12px;

  text-transform: uppercase;

  border: 1px solid #d9dfe5;

  border-radius: 4px;

  background: var(--tg-color-white-default);

  color: var(--tg-heading-color);

  padding: 1px 5px;

}



/*=============================

    	20. Contact

===============================*/

.contact__info-box {

  background: linear-gradient(45deg, #fff 70.19%, #e6e2fa 100%);

  border: 1px solid var(--tg-border-2);

  padding: 70px 64px 72px;

  -webkit-border-radius: 16px;

  -moz-border-radius: 16px;

  -o-border-radius: 16px;

  -ms-border-radius: 16px;

  border-radius: 16px;

  height: 100%;

}

@media (max-width: 1199.98px) {

  .contact__info-box {

    padding: 60px 50px 60px;

  }

}

@media (max-width: 767.98px) {

  .contact__info-box {

    padding: 40px 30px 40px;

  }

}

.contact__info-box > .title {

  margin-bottom: 16px;

  font-size: 32px;

  font-weight: 600;

}

@media (max-width: 1199.98px) {

  .contact__info-box > .title {

    font-size: 28px;

  }

}

.contact__info-box p {

  font-size: 14px;

  margin-bottom: 32px;

  width: 90%;

}

@media (max-width: 1199.98px) {

  .contact__info-box p {

    width: 100%;

  }

}

.contact__info-box > .list-wrap li {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: flex-start;

  gap: 20px;

  margin-bottom: 24px;

}

.contact__info-box > .list-wrap li:last-child {

  margin-bottom: 0;

}

.contact__info-box > .list-wrap li .icon {

  width: 40px;

  height: 40px;

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: 1px solid var(--tg-border-2);

  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -o-border-radius: 8px;

  -ms-border-radius: 8px;

  border-radius: 8px;

  flex: 0 0 auto;

}

.contact__info-box > .list-wrap li span, .contact__info-box > .list-wrap li a {

  font-weight: 500;

  font-size: 24px;

  color: var(--tg-body-color);

  line-height: 1.4;

}

@media (max-width: 1199.98px) {

  .contact__info-box > .list-wrap li span, .contact__info-box > .list-wrap li a {

    font-size: 22px;

  }

}

@media (max-width: 767.98px) {

  .contact__info-box > .list-wrap li span, .contact__info-box > .list-wrap li a {

    font-size: 20px;

  }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .contact__info-box > .list-wrap li span, .contact__info-box > .list-wrap li a {

    font-size: 22px;

  }

}

.contact__info-box > .list-wrap li a:hover {

  color: var(--tg-theme-secondary);

}

.contact__form-box {

  border: 1px solid var(--tg-border-2);

  background: linear-gradient(45deg, #fff 70.19%, #def7ea33 100%);

  border-radius: 16px;

  padding: 70px 64px 72px;

}

@media (max-width: 1199.98px) {

  .contact__form-box {

    padding: 60px 50px 60px;

  }

}

@media (max-width: 767.98px) {

  .contact__form-box {

    padding: 40px 30px 40px;

  }

}

.contact__form-box .title {

  font-size: 32px;

  margin-bottom: 24px;

}

@media (max-width: 1199.98px) {

  .contact__form-box .title {

    font-size: 28px;

  }

}

.contact__form-box .form-grp {

  margin-bottom: 16px;

}

.contact__form-box .form-grp textarea, .contact__form-box .form-grp input {

  width: 100%;

  background: var(--tg-color-white-default);

  border: 1px solid var(--tg-border-2);

  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -o-border-radius: 8px;

  -ms-border-radius: 8px;

  border-radius: 8px;

  font-size: 16px;

  font-weight: 400;

  color: var(--tg-heading-color);

  padding: 14px 24px;

  height: 40px;

  display: block;

  outline: none;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s;

}

.contact__form-box .form-grp textarea::placeholder, .contact__form-box .form-grp input::placeholder {

  color: #717484;

  font-size: 14px;

}

.contact__form-box .form-grp textarea:focus, .contact__form-box .form-grp input:focus {

  border-color: var(--tg-heading-color);

}

.contact__form-box .form-grp textarea {

  min-height: 117px;

  max-height: 117px;

  margin-bottom: 24px;

}

.contact__form-box .tg-btn {

  font-size: 14px;

  font-weight: 500;

}

.contact__social {

  margin-top: 70px;

}

.contact__social .list-wrap li a:hover {

  color: var(--tg-theme-secondary);

}

.contact__item {

  background: var(--tg-color-gray-3);

  padding: 32px 32px;

  -webkit-border-radius: 24px;

  -moz-border-radius: 24px;

  -o-border-radius: 24px;

  -ms-border-radius: 24px;

  border-radius: 24px;

  height: 100%;

}

@media (max-width: 1199.98px) {

  .contact__item {

    padding: 30px 25px;

  }

}

.contact__item:hover .contact__item-icon {

  transform: translateY(5px);

}

.contact__item-icon {

  width: 56px;

  height: 56px;

  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -o-border-radius: 8px;

  -ms-border-radius: 8px;

  border-radius: 8px;

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--tg-color-white-default);

  border: 1px solid var(--tg-border-2);

  color: var(--tg-theme-secondary);

  margin-bottom: 32px;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s;

}

.contact__item-content .title {

  margin-bottom: 8px;

  font-size: 32px;

}

@media (max-width: 1199.98px) {

  .contact__item-content .title {

    font-size: 28px;

  }

}

.contact__item-content p {

  margin-bottom: 30px;

}

.contact__item-content .list-wrap {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  gap: 10px 16px;

  flex-wrap: wrap;

}

.contact__item-content .list-wrap li a {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  background: var(--tg-color-white-default);

  gap: 8px;

  -webkit-border-radius: 20px;

  -moz-border-radius: 20px;

  -o-border-radius: 20px;

  -ms-border-radius: 20px;

  border-radius: 20px;

  color: var(--tg-theme-secondary);

  font-weight: 500;

  padding: 6px 16px;

  line-height: 1;

}

.contact__item-content .list-wrap li a:hover {

  background: var(--tg-theme-secondary);

  color: var(--tg-color-white-default);

}



.ajax-response.error, .ajax-response.success {

  margin: 20px 0 0 !important;

}

.ajax-response.error {

  color: red;

}

.ajax-response.success {

  color: green;

}





.your-order-table .product td {

    padding-top: 15px;

    padding-bottom: 15px;

    vertical-align: middle;

}



.total-price-table td, .total-price-table th {

    

    padding-top: 20px;

    padding-bottom: 20px;

    vertical-align: top;

}



.total-price-table .total-amount td, .total-price-table .total-amount th {

    border-bottom: 0;

    font-size:  19px;

}

tr.total-amount h6 {

    font-size: 25px;

}

ul.list-style2 {

    list-style: none;

    padding: 10px 0 0;

    

}

ul.list-style2::-webkit-scrollbar {

  width: 4px;

  height: 4px;

}

label {

  margin-top: 10px;

  margin-bottom: 10px;

  color: var(--tg-heading-color);

  cursor: pointer;

  font-size: var(--tg-body-font-size);

  font-weight: var(--tg-fw-regular);

}

.right_txt{

  float: right;

  padding-right: 48px;

}

/*=============================

    	21. Error

===============================*/

.error__area {

  position: relative;

  z-index: 1;

  padding: 120px 0;

}

@media (max-width: 767.98px) {

  .error__area {

    padding: 100px 0;

  }

}

.error__area .shape {

  position: absolute;

  right: 0;

  top: 0;

  z-index: -1;

}

@media (max-width: 991.98px) {

  .error__area .shape {

    max-width: 320px;

  }

}

@media (max-width: 767.98px) {

  .error__area .shape {

    max-width: 280px;

  }

}

.error__content {

  text-align: center;

}

.error__content img {

  margin-bottom: 24px;

}

.error__content .title {

  margin-bottom: 16px;

  font-weight: 500;

  font-size: 40px;

}

@media (max-width: 767.98px) {

  .error__content .title {

    font-size: 34px;

  }

}

.error__content p {

  margin-bottom: 40px;

}



/*=============================

    	22. Terms

===============================*/

.terms_sec{

    margin: 50px 0 100px;

}

.terms__content .title {

  font-size: 18px;

  margin-bottom: 8px;

}

.terms__content p {

  margin-bottom: 32px;

}

.terms__content p.last-info {

  margin-bottom: 0;

}

.terms__content-bottom {

  margin-top: 40px;

}



/*=============================

    	23. Login

===============================*/

.login__form-inner {

  position: relative;

  z-index: 1;

  overflow: hidden;

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}

@media (max-width: 767.98px) {

  .login__form-inner {

    height: 100vh;

  }

}

.login__form-inner .shape img {

  position: absolute;

  right: -24%;

  top: -10%;

  z-index: -1;

}

.login__form-wrap {

  padding: 30px 15px;

  width: 490px;

  margin: 0 auto;

}

@media (max-width: 1199.98px) {

  .login__form-wrap {

    width: 445px;

  }

}

@media (max-width: 991.98px) {

  .login__form-wrap {

    width: 345px;

  }

}

.login__form-wrap .title {

  margin-bottom: 48px;

  font-size: 40px;

}

@media (max-width: 1500px) {

  .login__form-wrap .title {

    font-size: 36px;

    margin-bottom: 25px;

  }

}

@media (max-width: 767.98px) {

  .login__form-wrap .title {

    font-size: 32px;

  }

}

.login__form-wrap .divider {

  text-align: center;

  display: block;

  font-weight: 500;

  font-size: 14px;

  color: #717484;

  margin-bottom: 24px;

  margin-top: 24px;

}

.login__form-social a {

  display: flex;

  align-items: center;

  color: var(--tg-heading-color);

  border: 1px solid var(--tg-border-2);

  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -o-border-radius: 8px;

  -ms-border-radius: 8px;

  border-radius: 8px;

  justify-content: center;

  gap: 15px;

  font-weight: 500;

  font-size: 16px;

  margin-bottom: 16px;

  padding: 14px 15px;

  background: var(--tg-color-white-default);

}

.login__form-social a:hover {

  color: var(--tg-theme-secondary);

  border-color: var(--tg-theme-secondary);

}

.login__form-social a:last-child {

  margin-bottom: 0;

}

.login__form .form__grp {

  position: relative;

  margin-bottom: 16px;

}

.login__form .form__grp label {

  position: absolute;

  left: 16px;

  top: 16px;

  color: #717484;

}

.login__form .form__grp input {

  width: 100%;

  font-size: 16px;

  font-weight: 400;

  color: var(--tg-heading-color);

  border: 1px solid var(--tg-border-2);

  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -o-border-radius: 8px;

  -ms-border-radius: 8px;

  border-radius: 8px;

  padding: 14px 20px 14px 55px;

  height: 56px;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s;

  display: block;

}

.login__form .form__grp input::placeholder {

  color: #717484;

}

.login__form .form__grp input:focus {

  border-color: var(--tg-heading-color);

}

.login__form .tg-btn {

  width: 100%;

  justify-content: center;

  padding: 16px 20px;

}

.login__img {

  width: 100%;

  height: 100vh;

  background-size: cover;

  background-position: center;

  position: relative;

  z-index: 1;

}

@media (max-width: 767.98px) {

  .login__img {

    display: none;

  }

}

.login__img::before {

  content: "";

  position: absolute;

  left: 40px;

  top: 40px;

  bottom: 40px;

  right: 40px;

  border: 16px solid rgba(255, 255, 255, 0.24);

}



.forgot-password {

  margin-bottom: 32px;

}

.forgot-password a {

  font-size: 12px;

  color: #FC5C79;

}

.forgot-password a:hover {

  color: var(--tg-theme-primary);

}



.password-reset {

  margin-bottom: 24px;

}

.password-reset a {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  color: #19202B;

  gap: 8px;

}

.password-reset a:hover {

  color: var(--tg-theme-primary);

}



.account__switch {

  margin-top: 24px;

}

.account__switch p {

  margin-bottom: 0;

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

}

.account__switch p a {

  color: var(--tg-theme-secondary);

}

.account__switch p a:hover {

  color: var(--tg-theme-primary);

}



#my-widget-popup{

      top: auto !important;

    bottom: 20px !important;

}

#widget-content{

    bottom: 0px !important;

    top: auto !important;

}





/* contact us page css */

    .address-items, .address-items .icon-box {

    align-items: center;

    display: flex;

    } 

.address-items .icon-box {

    background-color: #2563eb;

    border-radius: 4px;

    height: 50px;

    justify-content: center;

    position: relative;

    width: 50px;

    z-index: 1;

}

.address-items .contact-box {

    background-color: #eee;

    border: 1px solid #1d1d1d;

    border-radius: 4px;

    padding: 20px 10px 20px 40px;

    transform: translateX(-24px);

    width: calc(100% - 50px);

}

.address-items .icon-box .iconsax {

    --Iconsax-Size: 24px;

    --Iconsax-Color: #fff;

}

.iconsax {

    display: inline-block;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: var(--Iconsax-Size);

    vertical-align: middle;

}



.form-select:disabled{

  background-color: #fff !important;

}







/* Main card area */

    .main-section {

      padding: 40px 0 60px;

    }



    .card-panel {

      background: white;

      border: 1px solid #14141440;

      border-radius: 12px;

      overflow: hidden;

      animation: fadeUp 0.5s 0.35s ease both;

    }

    .card-panel-header {

      background: #eee;

      padding: 18px 28px;

      border-bottom: 1px solid #14141412;

      display: flex;

      align-items: center;

      gap: 10px;

    }

    .card-panel-header .label {

      font-size: 0.75rem;

      font-weight: 500;

      text-transform: uppercase;

      letter-spacing: 0.1em;

      color: var(--sage);

    }

    .card-panel-header .order-num {

      font-family: 'Plus Jakarta Sans';

      font-size: 1.15rem;

      color: var(--ink);

      margin-left: auto;

    }

    .card-panel-body {

      padding: 28px;

    }



    /* Order detail rows */

    .detail-row {

      display: flex;

      justify-content: space-between;

      align-items: flex-start;

      padding: 12px 0;

      border-bottom: 1px solid #14141412;

      font-size: 0.9rem;

    }

    .detail-row:last-child { border-bottom: none; }

    .detail-row .key {

      color: var(--warm-gray);

      font-weight: 400;

    }

    .detail-row .val {

      font-weight: 500;

      text-align: right;

      max-width: 55%;

    }

    .detail-row .val a {

      color: var(--sage);

      text-decoration: none;

    }

    .detail-row .val a:hover { text-decoration: underline; }



    /* Receipt link */

    .receipt-link {

      display: inline-flex;

      align-items: center;

      gap: 6px;

      font-size: 0.85rem;

      font-weight: 500;

      color: var(--sage);

      text-decoration: none;

      border: 1px solid var(--sage);

      border-radius: 6px;

      padding: 8px 16px;

      margin-top: 20px;

      transition: all 0.2s;

    }

    .receipt-link:hover {

      background: var(--sage);

      color: white;

    }



    /* Save info panel */

    .save-panel {

      background: white;

      border: 1px solid #14141440;

      border-radius: 12px;

      padding: 28px;

      animation: fadeUp 0.5s 0.45s ease both;

          margin-bottom: 60px;

    }

    .save-panel h3 {

    font-family: 'Urbanist';

    font-size: 1.2rem;

    margin-bottom: 6px;

    }

    .save-panel p {

      font-size: 0.85rem;

      color: var(--warm-gray);

      margin-bottom: 22px;

    }



    .form-label-custom {

      font-size: 0.78rem;

      font-weight: 500;

      text-transform: uppercase;

      letter-spacing: 0.08em;

      color: var(--warm-gray);

      margin-bottom: 6px;

    }

    .form-control-custom {

      width: 100%;

      background: var(--cream);

      border: 1px solid #14141440;

      border-radius: 8px;

      padding: 11px 14px;

      font-size: 0.9rem;

      font-family: 'DM Sans', sans-serif;

      color: var(--ink);

      outline: none;

      transition: border-color 0.2s, box-shadow 0.2s;

    }

    .form-control-custom:focus {

      border-color: var(--sage);

      box-shadow: 0 0 0 3px rgba(74,124,89,0.12);

    }

    .form-control-custom::placeholder { color: #bbb; }

    .hint-text {

      font-size: 0.75rem;

      color: var(--warm-gray);

      margin-top: 5px;

    }



    .btn-create {

      background: var(--ink);

      color: white;

      border: none;

      border-radius: 8px;

      padding: 11px 24px;

      font-family: 'DM Sans', sans-serif;

      font-size: 0.88rem;

      font-weight: 500;

      letter-spacing: 0.03em;

      cursor: pointer;

      transition: background 0.2s, transform 0.1s;

      white-space: nowrap;

    }

    .btn-create:hover {

      background: var(--sage);

      transform: translateY(-1px);

    }

    .btn-create:active { transform: translateY(0); }



    /* Help sidebar */

    .help-sidebar {

      background: white;

      border: 1px solid #14141440;

      border-radius: 12px;

      padding: 24px;

      animation: fadeUp 0.5s 0.55s ease both;

    }

    .help-sidebar h5 {

      font-family: 'Urbanist';

      font-size: 1rem;

      margin-bottom: 14px;

    }

    .help-item {

      display: flex;

      align-items: flex-start;

      gap: 12px;

      padding: 12px 0;

      border-bottom: 1px solid #14141412;

      font-size: 0.85rem;

    }

    .help-item:last-child { border-bottom: none; }

    .help-icon {

      width: 32px; height: 32px;

      border-radius: 8px;

      background: #eee;

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

      flex-shrink: 0;

      color: var(--sage);

    }

    .help-item .title { font-weight: 500; margin-bottom: 2px; }

    .help-item .desc { color: var(--warm-gray); font-size: 0.8rem; }

    .help-item a { color: var(--sage); text-decoration: none; font-weight: 500; }

    .help-item a:hover { text-decoration: underline; }