@charset "UTF-8";
/*! -----------------------------------------------------------------------------------

    Template Name: Site Promo 2026
    Description: This is LandingPage Site
    Author: Pixelstrap
    Author URI: https://slidecode.com.br

-----------------------------------------------------------------------------------
*/
:root {
  --theme-default: #7366FF;
  --theme-secondary: #838383;
  --body-font-color: #2F2F3B;
  --white: #fff;
  --chart-text-color: rgba(82, 82, 108, 0.8);
  /* Do not show the "remove tag" (x) button when only a single tag remains */
}

/**=====================
    1.2 Mixin CSS start
==========================**/
/**=====================
    1.2 Mixin CSS end
==========================**/
/**=====================
    1.1 Reset CSS start
==========================**/

::selection {
  background-color: #7366FF;
  color: #fff;
}

::-moz-selection {
  background-color: #7366FF;
  color: #fff;
}

/*====== Padding css starts ======*/
.p-0 {
  padding: 0px;
}

/*====== Padding css ends ======*/
/*====== Padding-left css starts ======*/

/*====== Padding-left css ends ======*/
/*====== Padding-top css starts ======*/

/*====== Padding-top css ends ======*/
/*====== Padding-bottom css starts ======*/

/*====== Padding-bottom css ends ======*/
/*====== Padding-right css starts ======*/

/*====== Padding-right css ends ======*/
/*====== Margin css starts ======*/

/*====== Margin css ends ======*/
/*====== Margin-top css starts ======*/

/*====== Margin-top css ends ======*/
/*====== Margin-Bottom css starts ======*/

/*====== Margin-Bottom css ends ======*/
/*====== Margin-left css starts ======*/

/*====== Margin-left css ends ======*/
/*====== Margin-right css starts ======*/

/*====== Margin-right css ends ======*/
/*====== Border-radius css starts ======*/

/*====== Border-radius css ends ======*/
/*====== Font-size css starts ======*/

/*====== Font-size css ends ======*/
/*====== Font-weight css starts ======*/

/*====== Font-weight css ends ======*/
/*====== Font-style css starts ======*/

/*====== Font-style css ends ======*/
/*====== Text-Decoration css starts ======*/
.text-overline {
  text-decoration: overline;
}

.text-line-through {
  text-decoration: line-through;
}

.text-underline {
  text-decoration: underline;
}

.text-dashed {
  text-decoration: dashed;
}

.text-blink {
  text-decoration: blink;
}

.text-dotted {
  text-decoration: dotted;
}

.text-initial {
  text-decoration: initial;
}

.text-none {
  text-decoration: none;
}

.text-solid {
  text-decoration: solid;
}

.text-wavy {
  text-decoration: wavy;
}

.text-inherit {
  text-decoration: inherit;
}

.text-double {
  text-decoration: double;
}

/*====== Text-Decoration css ends ======*/
/*====== Border-style css starts ======*/

/*====== Border-style css ends ======*/
/*====== Vertical-Align css starts ======*/

.top {
  vertical-align: top;
}

.text-top {
  vertical-align: text-top;
}

.bottom {
  vertical-align: bottom;
}

.text-bottom {
  vertical-align: text-bottom;
}

/*====== Vertical-Align css ends ======*/
/*====== Position css starts ======*/

/*====== Position css ends ======*/
/*====== Float css starts ======*/

/*====== Float css ends ======*/
/*====== Overflow css starts ======*/

/*====== Overflow css ends ======*/
/*====== Image-sizes css starts ======*/

/*====== Image-sizes css ends ======*/
/*====== Height-sizes css starts ======*/

/*====== Height-sizes css ends ======*/
/*======= Text css starts ===========*/

/*======= Text css ends ===========*/
/*======= Label-color css starts  ======= */

/*======= Label-color css ends  ======= */
/*======= Badge-color css starts  ======= */

/*======= Badge-color css end  ======= */
/*======= Background-color css starts  ======= */
.bg-primary {
  background-color: #7366FF !important;
  color: #fff;
}
.bg-primary:hover {
  background-color: #7366FF;
  color: #fff;
}

.bg-7-primary {
  background-color: rgba(115, 102, 255, 0.07);
}

.bg-10-primary {
  background-color: rgba(115, 102, 255, 0.1);
}

.bg-20-primary {
  background-color: rgba(115, 102, 255, 0.2);
}

.text-bg-primary {
  background-color: #7366FF !important;
}

.bg-light-primary {
  background-color: rgba(115, 102, 255, 0.1) !important;
  color: #fff;
}

.bg-lighter-primary {
  background-color: rgba(115, 102, 255, 0.6);
  color: #fff;
}

.bg-secondary {
  background-color: #838383 !important;
  color: #fff;
}
.bg-secondary:hover {
  background-color: #838383;
  color: #fff;
}

.bg-7-secondary {
  background-color: rgba(131, 131, 131, 0.07);
}

.bg-10-secondary {
  background-color: rgba(131, 131, 131, 0.1);
}

.bg-20-secondary {
  background-color: rgba(131, 131, 131, 0.2);
}

.text-bg-secondary {
  background-color: #838383 !important;
}

.bg-light-secondary {
  background-color: rgba(131, 131, 131, 0.1) !important;
  color: #fff;
}

.bg-lighter-secondary {
  background-color: rgba(131, 131, 131, 0.6);
  color: #fff;
}

.bg-success {
  background-color: #65c15c !important;
  color: #fff;
}
.bg-success:hover {
  background-color: #65c15c;
  color: #fff;
}

.bg-7-success {
  background-color: rgba(101, 193, 92, 0.07);
}

.bg-10-success {
  background-color: rgba(101, 193, 92, 0.1);
}

.bg-20-success {
  background-color: rgba(101, 193, 92, 0.2);
}

.text-bg-success {
  background-color: #65c15c !important;
}

.bg-light-success {
  background-color: rgba(101, 193, 92, 0.1) !important;
  color: #fff;
}

.bg-lighter-success {
  background-color: rgba(101, 193, 92, 0.6);
  color: #fff;
}

.bg-danger {
  background-color: #fc564a !important;
  color: #fff;
}
.bg-danger:hover {
  background-color: #fc564a;
  color: #fff;
}

.bg-7-danger {
  background-color: rgba(252, 86, 74, 0.07);
}

.bg-10-danger {
  background-color: rgba(252, 86, 74, 0.1);
}

.bg-20-danger {
  background-color: rgba(252, 86, 74, 0.2);
}

.text-bg-danger {
  background-color: #fc564a !important;
}

.bg-light-danger {
  background-color: rgba(252, 86, 74, 0.1) !important;
  color: #fff;
}

.bg-lighter-danger {
  background-color: rgba(252, 86, 74, 0.6);
  color: #fff;
}

.bg-info {
  background-color: #40b8f5 !important;
  color: #fff;
}
.bg-info:hover {
  background-color: #40b8f5;
  color: #fff;
}

.bg-7-info {
  background-color: rgba(64, 184, 245, 0.07);
}

.bg-10-info {
  background-color: rgba(64, 184, 245, 0.1);
}

.bg-20-info {
  background-color: rgba(64, 184, 245, 0.2);
}

.text-bg-info {
  background-color: #40b8f5 !important;
}

.bg-light-info {
  background-color: rgba(64, 184, 245, 0.1) !important;
  color: #fff;
}

.bg-lighter-info {
  background-color: rgba(64, 184, 245, 0.6);
  color: #fff;
}

.bg-light {
  background-color: #f4f4f4 !important;
  color: #fff;
}
.bg-light:hover {
  background-color: #f4f4f4;
  color: #fff;
}

.bg-7-light {
  background-color: rgba(244, 244, 244, 0.07);
}

.bg-10-light {
  background-color: rgba(244, 244, 244, 0.1);
}

.bg-20-light {
  background-color: rgba(244, 244, 244, 0.2);
}

.text-bg-light {
  background-color: #f4f4f4 !important;
}

.bg-light-light {
  background-color: rgba(244, 244, 244, 0.1) !important;
  color: #fff;
}

.bg-lighter-light {
  background-color: rgba(244, 244, 244, 0.6);
  color: #fff;
}

.bg-dark {
  background-color: #3f475a !important;
  color: #fff;
}
.bg-dark:hover {
  background-color: #3f475a;
  color: #fff;
}

.bg-7-dark {
  background-color: rgba(63, 71, 90, 0.07);
}

.bg-10-dark {
  background-color: rgba(63, 71, 90, 0.1);
}

.bg-20-dark {
  background-color: rgba(63, 71, 90, 0.2);
}

.text-bg-dark {
  background-color: #3f475a !important;
}

.bg-light-dark {
  background-color: rgba(63, 71, 90, 0.1) !important;
  color: #fff;
}

.bg-lighter-dark {
  background-color: rgba(63, 71, 90, 0.6);
  color: #fff;
}

.bg-warning {
  background-color: #ffb829 !important;
  color: #fff;
}
.bg-warning:hover {
  background-color: #ffb829;
  color: #fff;
}

.bg-7-warning {
  background-color: rgba(255, 184, 41, 0.07);
}

.bg-10-warning {
  background-color: rgba(255, 184, 41, 0.1);
}

.bg-20-warning {
  background-color: rgba(255, 184, 41, 0.2);
}

.text-bg-warning {
  background-color: #ffb829 !important;
}

.bg-light-warning {
  background-color: rgba(255, 184, 41, 0.1) !important;
  color: #fff;
}

.bg-lighter-warning {
  background-color: rgba(255, 184, 41, 0.6);
  color: #fff;
}

.bg-primary {
  background-color: var(--theme-default) !important;
}

.bg-secondary {
  background-color: var(--theme-secondary) !important;
}

/*======= Background-color css end  ======= */
/*======= Font-color css starts  ======= */

/*======= Font-color css end  ======= */
/*======= Button-color css starts  ======= */
@keyframes push {
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/*======= Button-color css ends  ======= */

/*======= Table-Border-Bottom-color css starts  ======= */

/*======= Table-Border-Bottom-color css ends  ======= */
/*======= Table styling css starts  ======= */

/*======= Table styling css ends  ======= */
/*======= Svg stroke css start  ======= */

/*======= Svg stroke css end  ======= */
/*======= Checkbox color css start  ======= */

/*======= Checkbox color css end  ======= */
/*======= All-Borders-color css starts  ======= */

/*======= All-Borders-color css ends  ======= */
/*====== Border width css starts ======*/

/*====== Border width css ends ======*/
/*====== Border dashed css starts ======*/

/*====== Border dashed css ends ======*/

/**====== custom scrollbar css start ======**/

/**====== Animation css Start ======**/

/**====== Animation css end ======**/
/**====== Modal style css Start ======**/

/**====== Modal style css end ======**/
/**====== Animation css start ======**/

/**====== Animation css Ends ======**/
.modal-footer {
  flex-wrap: wrap;
}

@keyframes fadeIncustom {
  0% {
    opacity: 0;
    top: 50px;
  }
  75% {
    opacity: 0.6;
    top: 0;
  }
  100% {
    opacity: 1;
  }
}

.bg-gray {
  background-color: var(--chart-text-color);
}

.text-gray {
  color: var(--chart-text-color) !important;
}

/* Override the default tooltip arrow color */

/**=====================
    1.1 Reset CSS Ends
==========================**/
/**=====================
    1.2 Typography CSS start
==========================**/
body {
  font-size: 14px;
  overflow-x: hidden;
  font-family: Rubik, sans-serif;
  color: #404040;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

h1 {
  font-size: 26px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

ul {
  padding-left: 0px;
  list-style-type: none;
  margin-bottom: 0;
}

ul,
p {
  color: #404040;
}
ul li,
p li {
  color: #404040;
}

* a {
  color: var(--theme-default);
  text-decoration: none;
  letter-spacing: 1px;
}

.d-flex {
  align-items: flex-start;
}
.d-flex .flex-grow-1 {
  flex: 1;
}

a {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--theme-default);
  transition: 0.5s all;
}
a:hover {
  color: var(--theme-default);
  transition: all 0.5s all;
}
a:focus-visible {
  outline: none;
}

.btn {
  font-size: 14px;
}

*.btn:focus {
  box-shadow: none !important;
}

button:focus {
  outline: none !important;
}

p {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.7px;
}

span {
  display: inline-block;
}

.d-flex {
  display: flex;
  align-items: flex-start;
}
.d-flex .flex-grow-1 {
  flex: 1;
}

.row > div {
  position: relative;
}


*:disabled {
  cursor: not-allowed;
  opacity: 0.8 !important;
  pointer-events: inherit !important;
}

/**=====================
    1.2 Typography CSS Ends
==========================**/
/**=====================
    2.1 According CSS start
==========================**/

/**=====================
    2.1 According CSS Ends
==========================**/
/**=====================
     2.2 Alert CSS start
==========================**/

strong {
  display: inline-block;
}
strong ~ p {
  display: inline-block;
}

.border-secondary {
  border-color: #838383 !important;
}

.border-danger {
  border-color: #fc564a !important;
}

.border-warning {
  border-color: #ffb829 !important;
}

/**=====================
   2.2 Alert CSS end
==========================**/
/**=====================
  2.3 Avatars CSS start
==========================**/

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
/**=====================
    2.3 Avatars CSS Ends
==========================**/
/**=====================
    2.4 Badge CSS start
==========================**/

/**=====================
  2.4 Badge CSS Ends
==========================**/
/**=====================
    2.5 Bookmark CSS start
==========================**/

/**=====================
    2.5 Bookmark CSS Ends
==========================**/
/**=====================
2.6 Breadcrumb CSS Start
==========================**/

/**=====================
	2.6 Breadcrumb CSS ends
==========================**/
/**=====================
    2.7 Basic-card CSS Start
==========================**/

/**=====================
  2.7 Basic-card CSS Ends
==========================**/
/**=====================
  2.9 Buttons CSS start
==========================**/

.btn {
  padding: 0.375rem 1.75rem;
}
.btn.bg-light-primary:hover {
  background: #7366FF !important;
  color: #fff !important;
}

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

@keyframes ripple {
  from {
    transform: scale(1);
    opacity: 0.4;
  }
  to {
    transform: scale(30);
    opacity: 0;
  }
}

/**=====================
    2.9 Buttons CSS end
==========================**/
/**=====================
    2.9 BlockUi CSS start
==========================**/

@keyframes load {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

@keyframes content-loading {
  to {
    opacity: 0;
  }
}
/**=====================
    2.9 BlockUi CSS start
==========================**/
/**=====================
    2.10 Card CSS Start
==========================**/

/**=====================
    2.10 Card CSS End
==========================**/
/**=====================
    2.12 Data-table CSS Start
==========================**/

/**=====================
     2.12 Datatable CSS Ends
==========================**/
/**=====================
    2.13 Data picker CSS Start
==========================**/

/**=====================
   2.13 Data picker CSS End
==========================**/
/**=====================
	2.14 Dropdown CSS Start
==========================**/

.dropdown-divider {
  margin: 0;
}

.dropdown-basic {
  margin-bottom: -10px;
}
.dropdown-basic button {
  max-height: 43px;
}
.dropdown-basic .dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown-block li .dropdown-item:hover {
  background-color: #cccccc;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 8px;
  vertical-align: 2px;
  content: "";
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent;
}

/**=====================
	2.14 Dropdown CSS Ends
==========================**/
/**=====================
    2.15 Form-input CSS Start
==========================**/

/**=====================
    2.15 Form-input CSS Ends
	==========================**/
/**=====================
    2.16 Form-wizard CSS Start
==========================**/
/*Form Wizard One Start*/

/*Form Wizard One ends*/
/*Form Wizard Four Start*/

/*Form Wizard Four Ends*/
/**=====================
   2.16 Form-wizard CSS Ends
==========================**/
/**=====================
  2.17 Forms CSS Start
==========================**/
@-webkit-keyframes input-shake {
  0%, 100% {
    -webkit-transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
  }
}
@-moz-keyframes input-shake {
  0%, 100% {
    -moz-transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -moz-transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -moz-transform: translateX(10px);
  }
}
@-o-keyframes input-shake {
  0%, 100% {
    -o-transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -o-transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -o-transform: translateX(10px);
  }
}
@keyframes input-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

/**=====================
  2.17 Forms CSS Ends
==========================**/
/**=====================
	2.18 Icons CSS Start
==========================**/

/**=====================
    2.18 Icons CSS Ends
==========================**/
/**=====================
   2.19 List CSS Start
==========================**/

/**=====================
   2.19 List CSS Ends
==========================**/
/**=====================
    2.20 Loader CSS Start
==========================**/
@keyframes grow {
  0% {
    transform: scale(0.5);
    background: #40b8f5;
  }
  50% {
    transform: scale(1);
    background: var(--theme-secondary);
  }
}
@keyframes move {
  0% {
    transform: translateX(7em);
  }
  50% {
    transform: translateX(-5em);
  }
}
@keyframes shrink {
  0% {
    transform: translateX(0em);
  }
  50% {
    transform: translateX(-1em);
  }
}

/**=====================
    2.20 Loader CSS Ends
==========================**/
/**=====================
    2.21 Modal CSS start
==========================**/
.modal-toggle-wrapper .modal-img {
  display: flex;
  justify-content: center;
}
.modal-toggle-wrapper .modal-img img {
  width: 200px;
  height: 200px;
}
@media (max-width: 992px) {
  .modal-toggle-wrapper .modal-img img {
    width: calc(136px + 64 * (100vw - 320px) / 672);
    height: calc(136px + 64 * (100vw - 320px) / 672);
  }
}
.modal-toggle-wrapper .modal-img li img {
  width: 100px;
  height: 100px;
}
@media (max-width: 992px) {
  .modal-toggle-wrapper .modal-img li img {
    width: calc(75px + 25 * (100vw - 320px) / 672);
    height: calc(75px + 25 * (100vw - 320px) / 672);
  }
}
.modal-toggle-wrapper .modal-img li + li {
  margin-left: -39px;
}

.modal-padding-space {
  padding-left: 20px;
}

.modal-footer .btn {
  margin: 0 4px;
}

.modal-details h6 {
  padding-bottom: 12px;
}

.modal-dialog .modal-content .modal-body p a {
  margin-right: 0;
}

/**=====================
    2.21 Modal CSS end
==========================**/
/**=====================
  2.22 Popover CSS Start
==========================**/

/**=====================
  2.22 Popover CSS Ends
==========================**/
/**=====================
  2.23 Print CSS Start
==========================**/
@media print {
  .footer {
    display: none;
  }
}
/**=====================
  2.23 Print CSS Ends
==========================**/
/**=====================
    2.24 Radio CSS Start
==========================**/

/**=====================
    2.24 Radio CSS Ends
==========================**/
/**=====================
  2.25 Ribbon CSS Start
==========================**/

/**=====================
  2.25 Ribbon CSS Ends
==========================**/
/**=====================
   2.26 Range-slider CSS Start
==========================**/

/**=====================
    2.26 Range-slider CSS Ends
==========================**/
/**=====================
    2.27 Switch CSS Start
==========================**/

/**=====================
    2.27 Switch CSS Ends
==========================**/
/**=====================
  2.28 Tab CSS Start
==========================**/
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--theme-default);
}

.nav i {
  margin-right: 10px;
}

.nav-right {
  justify-content: flex-end;
}

.nav-theme .nav-link,
.nav-pills.nav-theme .nav-link {
  color: var(--theme-default);
}
.nav-theme .nav-link.active,
.nav-theme .show > .nav-link,
.nav-pills.nav-theme .nav-link.active,
.nav-pills.nav-theme .show > .nav-link {
  background-color: var(--theme-default);
  color: #fff;
}

.nav-primary .nav-link,
.nav-pills.nav-primary .nav-link {
  color: var(--theme-default);
}
.nav-primary .nav-link.active,
.nav-primary .show > .nav-link,
.nav-pills.nav-primary .nav-link.active,
.nav-pills.nav-primary .show > .nav-link {
  background-color: var(--theme-default);
  color: #fff;
}

.nav-secondary .nav-link,
.nav-pills.nav-secondary .nav-link {
  color: #838383;
}
.nav-secondary .nav-link.active,
.nav-secondary .show > .nav-link,
.nav-pills.nav-secondary .nav-link.active,
.nav-pills.nav-secondary .show > .nav-link {
  background-color: #838383;
  color: #fff;
}

.nav-success .nav-link,
.nav-pills.nav-success .nav-link {
  color: #65c15c;
}
.nav-success .nav-link.active,
.nav-success .show > .nav-link,
.nav-pills.nav-success .nav-link.active,
.nav-pills.nav-success .show > .nav-link {
  background-color: #65c15c;
  color: #fff;
}

.nav-danger .nav-link,
.nav-pills.nav-danger .nav-link {
  color: #fc564a;
}
.nav-danger .nav-link.active,
.nav-danger .show > .nav-link,
.nav-pills.nav-danger .nav-link.active,
.nav-pills.nav-danger .show > .nav-link {
  background-color: #fc564a;
  color: #fff;
}

.nav-info .nav-link,
.nav-pills.nav-info .nav-link {
  color: #40b8f5;
}
.nav-info .nav-link.active,
.nav-info .show > .nav-link,
.nav-pills.nav-info .nav-link.active,
.nav-pills.nav-info .show > .nav-link {
  background-color: #40b8f5;
  color: #fff;
}

.nav-light .nav-link,
.nav-pills.nav-light .nav-link {
  color: #f4f4f4;
}
.nav-light .nav-link.active,
.nav-light .show > .nav-link,
.nav-pills.nav-light .nav-link.active,
.nav-pills.nav-light .show > .nav-link {
  background-color: #f4f4f4;
  color: #fff;
}

.nav-dark .nav-link,
.nav-pills.nav-dark .nav-link {
  color: #3f475a;
}
.nav-dark .nav-link.active,
.nav-dark .show > .nav-link,
.nav-pills.nav-dark .nav-link.active,
.nav-pills.nav-dark .show > .nav-link {
  background-color: #3f475a;
  color: #fff;
}

.nav-warning .nav-link,
.nav-pills.nav-warning .nav-link {
  color: #ffb829;
}
.nav-warning .nav-link.active,
.nav-warning .show > .nav-link,
.nav-pills.nav-warning .nav-link.active,
.nav-pills.nav-warning .show > .nav-link {
  background-color: #ffb829;
  color: #fff;
}

.nav-tabs.nav-bottom .nav-item .nav-link.active {
  border-color: #fff #dee2e6 #dee2e6;
}

.nav-tabs .nav-border {
  color: #000;
  border: none;
}

::placeholder {
  font-size: 14px;
}

.bg-navbar .nav {
  justify-content: flex-end;
  background-color: #f4f4f4;
  border-radius: 8px;
}
.bg-navbar .nav .nav-item .nav-link {
  color: #898989;
}
.bg-navbar .nav .nav-item .nav-link.active {
  background-color: #7366FF;
  color: #fff;
}
.bg-navbar img {
  height: calc(160px + 85 * (100vw - 320px) / 1600);
}
@media (max-width: 500px) and (min-width: 356px) {
  .bg-navbar img {
    height: 118px;
  }
}
@media (max-width: 355px) {
  .bg-navbar img {
    height: 80px;
  }
}

/**=====================
    2.28 Tab CSS Ends
==========================**/
/**=====================
    2.29 Table CSS Start
==========================**/

/**=====================
    2.29 Table CSS Ends
==========================**/
/**=====================
   2.30 Toasts CSS Start
==========================**/

/**=====================
   2.30 Toasts CSS Ends
==========================**/
/**=====================
  2.31 Touchspin CSS Start
==========================**/

/* Chrome, Safari, Edge, Opera */

/* Firefox */

/**=====================
    2.31 Touchspin CSS Ends
==========================**/
/**=====================
  2.32 Tour CSS Start
==========================**/

/**=====================
  2.32 Tour CSS Ends
==========================**/
/**=====================
   2.33 Tree CSS Start
==========================**/

/**=====================
   2.33 Tree CSS Ends
==========================**/
/**=====================
    2.34 Typeahead-search CSS Start
==========================**/

/**=====================
  2.34 Typeahead-search CSS Ends
==========================**/
/**=====================
    2.35 Scrollbar CSS Start
==========================**/

/**=====================
    2.35 Scrollbar CSS Ends
==========================**/
/**=====================
  3.1 Add-product CSS Start
==========================**/

/**=====================
  3.1 Add-product CSS Start
==========================**/
/**=====================
   3.2 Blog CSS start
==========================**/

/**=====================
   3.2 Blog CSS ends
==========================**/
/**=====================
    3.3 Bookmark-app CSS Start
==========================**/
.modal-bookmark .modal-body,
.modal-bookmark .modal-header {
  padding: 20px;
}

@keyframes displayTransition {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media only screen and (max-width: 991px) {
  .modal-bookmark .modal-body,
  .modal-bookmark .modal-header {
    padding: 20px;
  }
}
@media only screen and (max-width: 575px) {
  .modal-bookmark .modal-body,
  .modal-bookmark .modal-header {
    padding: 15px;
  }
}
/**=====================
  3.3 Bookmark-app CSS Ends
==========================**/
/**=====================
    3.4 Cart CSS start
==========================**/

/**=====================
    3.4 Cart CSS Ends
==========================**/
/**=====================
   3.6 Chat CSS Start
==========================**/

/**=====================
    3.6 Chat CSS End
==========================**/
/**=====================
     14. Chat CSS Start
==========================**/

.active-profile {
  position: relative;
}
.active-profile img {
  width: 42px;
  height: 42px;
}
@media (max-width: 1650px) {
  .active-profile img {
    width: 33px;
    height: 33px;
  }
}

/**=====================
    14.  Chat CSS Ends
==========================**/
/**=====================
   3.7 Checkout CSS start
==========================**/

/**=====================
   3.7 Checkout CSS ends
==========================**/
/**=====================
    3.8 Comingsoon CSS Start
==========================**/

/**=====================
  3.8 Comingsoon CSS Ends
==========================**/
/**=====================
    3.9 Contacts CSS Start
==========================**/

/**=====================
   3.9 Contacts CSS Ends
==========================**/
/**=====================
    3.10 Dashboard_2 CSS Start
==========================**/
/**=====================
    3.10 Dashboard_2 CSS End
==========================**/
/**=====================
    3.11 Dashboard_3 CSS Start
==========================**/
@keyframes hand-move {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/**=====================
  3.11 Dashboard_3 CSS Ends
==========================**/
/**=====================
    3.12 Dashboard_4 CSS Start
==========================**/

/**=====================
    3.12 Dashboard_4 CSS Ends
==========================**/
/**=====================
    3.13 Dashboard_5 CSS Start
==========================**/

@keyframes wave-speaker {
  0% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(5px);
  }
}
/**=====================
    3.13 Dashboard_5 CSS Ends
==========================**/
/**=====================
   3.14 Dashboard_6 CSS Start
==========================**/

@keyframes dot-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5) translateX(-10px);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dot-animation1 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4) translateX(-10px);
  }
  100% {
    transform: scale(1);
  }
}

/**=====================
  3.14 Dashboard_6 CSS end
==========================**/
/**=====================
    3.15 Dashboard_7 Start
==========================**/

.text-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**=====================
   3.15 Dashboard_7 Ends
==========================**/
/**=====================
    3.16 Dashboard_8 Start
==========================**/

/**=====================
   3.16 Dashboard_8 Ends
==========================**/
/**=====================
    3.17 Dashboard_9 Start
==========================**/

/**=====================
    3.17 Dashboard_9 End
==========================**/
/**=====================
    3.18 Dashboard_10 Start
==========================**/
/**=====================
    3.18 Dashboard_10 Start
==========================**/
/**=====================
    3.19 Dashboard_11 Start
==========================**/
/**=====================
    3.19 Dashboard_11 Start
==========================**/
/**=====================
    3.65 Dashboard_12 Start
==========================**/

/**=====================
    3.65 Dashboard_12 Start
==========================**/
/**=====================
    3.66 Dashboard_13 Start
==========================**/

/**=====================
    3.66 Dashboard_13 Start
==========================**/
/**=====================
  3.20 Dashboard_default CSS Start
==========================**/

@keyframes bounce-effect {
  0% {
    transform: translateY(0);
    transition: 0.5s;
  }
  50% {
    transform: translateY(-5px);
    transition: 0.5s;
  }
  100% {
    transform: translateY(0);
    transition: 0.5s;
  }
}
@keyframes round {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Clock styles */
@keyframes round {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes am-moving-dashes {
  100% {
    stroke-dashoffset: -30px;
  }
}
@-webkit-keyframes am-pulsating {
  0% {
    stroke-opacity: 1;
    stroke-width: 0;
  }
  100% {
    stroke-opacity: 0;
    stroke-width: 50px;
  }
}
@keyframes am-pulsating {
  0% {
    stroke-opacity: 1;
    stroke-width: 0;
  }
  100% {
    stroke-opacity: 0;
    stroke-width: 50px;
  }
}
@-webkit-keyframes am-draw {
  0% {
    stroke-dashoffset: 500%;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes am-draw {
  0% {
    stroke-dashoffset: 500%;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@media only screen and (max-width: 360px) {
  .footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .footer p {
    font-size: 12px;
  }
}

/**=====================
  3.20 Dashboard_default CSS Ends
==========================**/
/**=====================
  3.21 Divider CSS start
==========================**/

@keyframes linear-line {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 200%;
  }
}

/**=====================
  3.21 Divider CSS end
==========================**/
/**=====================
    3.22 Flash_icons CSS Start
==========================**/
@keyframes pulse-animate {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

@keyframes heartbeat-rate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(0.85);
    opacity: 1;
  }
  35% {
    transform: scale(1.3);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
/**=====================
    3.22 Flash_icons CSS End
==========================**/
/**=====================
  3.23 E-commerce CSS Start
==========================**/
/**====== Product Start ======**/

.d-none-productlist {
  display: none;
}

.dropdown-product {
  margin-bottom: 10px;
  box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
}

/**====== Product  Ends ======**/

/**=====================
  3.23 E-commerce CSS End
==========================**/
/**=====================
  3.24 Email-application CSS Start
==========================**/

/**=====================
  3.24 Email-application CSS Ends
==========================**/
/**=====================
    3.25 Letter_box CSS Start
==========================**/

.dropdown-subtitle > p {
  color: #52526c;
  font-weight: 500;
}

@keyframes hide {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
    width: 0;
    height: 0;
    margin: 0;
  }
}
@keyframes show {
  0% {
    transform: scale(0);
    width: 0;
    height: 0;
    margin: 0;
  }
  100% {
    transform: scale(1);
  }
}
/**=====================
    3.25 Letter_box CSS End
==========================**/
/**=====================
    3.26 Errorpage CSS Start
==========================**/
@keyframes rotate-effect {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes reverse-rotate-effect {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/**=====================
    3.26 Errorpage CSS Start
==========================**/
/**=====================
    3.27 Faq CSS start
==========================**/

/**=====================
    3.27 Faq CSS end
==========================**/
/**=====================
   3.28 File CSS
==========================**/
/**=====================
    3.28 File CSS
==========================**/
/**=====================
   3.29 File Manager CSS Start
==========================**/

@keyframes fadeIn-out {
  0%, 100% {
    opacity: 0.07;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes up-down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
/**=====================
   3.29 File Manager CSS End
==========================**/
/**=====================
    3.30 Gallery CSS Start
==========================**/
@-webkit-keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

@-webkit-keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
* {
  box-sizing: border-box;
}
*:after, *:before {
  box-sizing: border-box;
}

/* clear fix */

/* ---- .grid-item ---- */

/**=====================
    3.30 Gallery CSS Ends
==========================**/
/**=====================
    3.31 Helper CSS start
==========================**/
/**=====================
    3.31 Helper CSS end
==========================**/
/**=====================
    3.32 Internationalization CSS start
==========================**/
/**=====================
    3.32 Internationalization CSS End
==========================**/
/**=====================
    3.33 Invoices CSS start
==========================**/

/**=====================
    3.33 Invoices CSS end
==========================**/
/**=====================
    3.34 Job-search CSS Start
==========================**/
@keyframes pulse-dot {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.1);
  }
}

/**=====================
    3.34 Job-search CSS End
==========================**/
/**=====================
  3.35 Jsgrid CSS Start
==========================**/

/**=====================
  3.35 Jsgrid CSS Ends
==========================**/
/**=====================
    3.36 Editors CSS Start
==========================**/

/**=====================
    3.36 Editors CSS End
==========================**/
/**=====================
  3.37 Kanban CSS start
==========================**/

footer {
  margin: 0;
  padding: 0;
}
/**=====================
   3.37 Kanban CSS ends
==========================**/
/**=====================
    3.38 Knowledgebase CSS start
==========================**/

/**=====================
    3.38 Knowledgebase CSS End
==========================**/
/**=====================
    3.39 Landing CSS Start
==========================**/
/* MESH LOADER */
@keyframes mesh {
  0% {
    transform-origin: 50% -100%;
    transform: rotate(0);
  }
  50% {
    transform-origin: 50% -100%;
    transform: rotate(360deg);
  }
  50.1% {
    transform-origin: 50% 200%;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 50% 200%;
    transform: rotate(360deg);
  }
}

@-webkit-keyframes animloader14 {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes animloader14 {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.landing-page {
  color: #000248;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rotate {
  from {
    transform: rotate(-360deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animationtop {
  0% {
    transform: translate(-10px, -5px);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-10px, -5px);
  }
}
@keyframes animationleft {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(20px, 0);
  }
  100% {
    transform: translate(0, 0px);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.navbar {
  justify-content: flex-start;
}
.navbar .navbar-toggler {
  margin-left: auto;
}

.navbar-nav {
  align-items: center;
}
.navbar-nav .nav-item {
  position: relative;
}
.navbar-nav .nav-item .nav-link {
  font-size: 18px;
  letter-spacing: 1px;
  padding: 12px 20px;
  transition: all 0.3s ease;
}
.navbar-nav .nav-item .nav-link:hover, .navbar-nav .nav-item .nav-link.active {
  opacity: 1;
  transition: all 0.3s ease;
}

.landing-page .navbar-expand-xl .navbar-collapse {
  background-color: transparent;
}
.landing-page .buy-btn {
  font-size: 16px;
  background: linear-gradient(90deg, #7366FF -18.33%, #563EE0 62.78%);
  border-radius: 5px;
  padding: 15px 54px;
  margin-left: 10px;
}
@media (max-width: 991px) {
  .landing-page .buy-btn {
    padding: 12px 35px;
  }
}
@media (max-width: 767px) {
  .landing-page .buy-btn {
    padding: 9px 20px;
    font-size: 14px;
  }
}
.landing-page .buy-btn a {
  color: #fff;
  padding: 0;
}
.landing-page .navbar-nav .nav-item .nav-link {
  letter-spacing: 1.5px;
  color: #fff;
}
.landing-page .sticky-header header {
  background: transparent;
  box-shadow: none;
  z-index: 100;
  left: 0;
  height: auto;
}
.landing-page .sticky-header header.sticky {
  margin-top: 0;
  background: #1d1f29;
}
.landing-page .sticky-header header.sticky .navbar-nav .nav-item .nav-link {
  font-size: 16px;
  padding: 15px 12px;
}

.navbar-expand-xl .navbar-brand {
  padding-left: 18px;
}
.navbar-expand-xl .navbar-collapse {
  flex-flow: row nowrap;
  justify-content: flex-end;
  background-color: #fff;
}

.landing-title {
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .landing-title {
    margin-bottom: 20px;
  }
}
.landing-title h2 {
  font-size: calc(25px + 27 * (100vw - 300px) / 1620);
}
.landing-title p {
  font-size: calc(14px + 4 * (100vw - 300px) / 1620);
  width: 65%;
  margin: 0 auto;
  color: #52526C;
  opacity: 0.8;
}
@media (max-width: 1199px) {
  .landing-title p {
    width: 80%;
  }
}
@media (max-width: 991px) {
  .landing-title p {
    width: 100%;
  }
}

.license-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media (max-width: 767px) {
  .license-list {
    gap: 10px;
  }
}
.license-list li {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 10px;
}
@media (max-width: 991px) {
  .license-list li {
    gap: 5px;
  }
}
@media (max-width: 575px) {
  .license-list li img {
    width: 18px;
    height: 18px;
  }
}
.license-list li h6 {
  font-weight: normal;
  margin-bottom: 0;
}

@keyframes arrowsvg {
  0% {
    transform: scale(0);
    transform-origin: left;
  }
  100% {
    transform: scale(1);
    transform-origin: left;
  }
}

.ptb50 {
  padding: 80px 0;
}
@media (max-width: 991.98px) {
  .ptb50 {
    padding: 60px 0;
  }
}
@media (max-width: 575.98px) {
  .ptb50 {
    padding: 50px 0;
  }
}

.footer-bg {
  position: relative;
  text-align: center;
  background: url(../images/landing/footer.jpg);
  margin-left: 0;
  color: #fff;
}
@media (max-width: 575px) {
  .footer-bg {
    background-position: center;
  }
}
.footer-bg .landing-title h2 {
  color: #fff;
}

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}
footer h2 {
  font-size: calc(24px + 46 * (100vw - 300px) / 1620);
}
footer .landing-title p {
  color: #fff;
  opacity: 0.7;
}
footer .license-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: calc(15px + 15 * (100vw - 300px) / 1620);
  gap: calc(15px + 15 * (100vw - 300px) / 1620);
}
@media (max-width: 991px) {
  footer .license-list {
    gap: 20px;
  }
}
@media (max-width: 767px) {
  footer .license-list {
    gap: 15px;
  }
}
@media (max-width: 575px) {
  footer .license-list {
    flex-wrap: wrap;
  }
}
footer .license-list h6 {
  color: #fff;
}
footer .sub-footer {
  padding: 20px 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 575px) {
  footer .sub-footer {
    padding: 12px 0px;
  }
}
footer .sub-footer h6 {
  font-weight: normal;
  color: #fff;
}
footer .sub-footer ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
footer .sub-footer ul li a {
  color: #fff;
}
footer .sub-footer ul li a:hover {
  color: #7366FF;
}
footer .sub-footer ul li i {
  font-size: 20px;
}

.landing-page .bg-Widget {
  background: linear-gradient(180deg, #F7F8F9 69%, rgba(247, 248, 249, 0) 91.83%);
}
.landing-page .bg-Widget:before {
  top: 220px !important;
  transform: rotate(-40deg);
}
.landing-page .bg-Widget:after {
  top: unset !important;
  bottom: 0 !important;
}

.tap-top {
  text-align: center;
  cursor: pointer;
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 5;
  color: #fff;
  background: var(--theme-default);
  border: none;
  padding: 7px;
  box-shadow: 0 0 10px var(--theme-default);
  opacity: 0.5;
  transition: all 0.3s ease;
}
.tap-top:hover {
  transition: all 0.3s ease;
  opacity: 1;
}

@keyframes animationFramesOne {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

.landing-page {
  overflow: hidden;
}

.landing-page {
  overflow: unset;
}

.text-marqee {
  height: 230px;
}
@media (max-width: 1199px) {
  .text-marqee {
    height: 166px;
  }
}
@media (max-width: 991px) {
  .text-marqee {
    height: 130px;
  }
}
@media (max-width: 767px) {
  .text-marqee {
    height: 95px;
  }
}
@media (max-width: 575px) {
  .text-marqee {
    height: 65px;
  }
}

.navabr_btn-set {
  position: relative;
}
.navabr_btn-set:focus {
  outline: 0;
}
.navabr_btn-set span {
  display: block;
  background-color: #fff;
  height: 3px;
  width: 25px;
  margin-top: 4px;
  margin-bottom: 4px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  left: 0;
  opacity: 1;
}
.navabr_btn-set:not(.custom_nav) span:nth-child(1) {
  position: absolute;
  left: 12px;
  top: 10px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  opacity: 0.9;
}
.navabr_btn-set:not(.custom_nav) span:nth-child(2) {
  height: 12px;
  visibility: hidden;
  background-color: transparent;
}
.navabr_btn-set:not(.custom_nav) span:nth-child(3) {
  position: absolute;
  left: 12px;
  top: 10px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  opacity: 0.9;
}

.navbar-b {
  transition: all 0.5s ease-in-out;
  background-color: transparent;
  padding-top: 1.563rem;
  padding-bottom: 1.563rem;
}

.fixed-top {
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  display: flex;
  left: 0;
  z-index: 1030;
}

.navbar-toggler span {
  display: block;
  background-color: transparent;
  height: 3px;
  width: 25px;
  z-index: 112;
  margin-top: 4px;
  margin-bottom: 4px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  left: 0;
  opacity: 1;
}
.navbar-toggler span:nth-child(1) {
  transition: transform 0.35s ease-in-out;
}
.navbar-toggler span:nth-child(3) {
  transition: transform 0.35s ease-in-out;
}
.navbar-toggler:focus {
  box-shadow: none;
}

.navbar_nav_modify li {
  text-align: center;
}

.sticky-header header {
  position: fixed;
  width: 100%;
  z-index: 6;
  text-align: center;
  line-height: normal;
  height: 80px;
  background: var(--theme-default);
  color: #fff;
  box-shadow: 0 0 5px 1px rgba(5, 56, 111, 0.1);
  transition: all 0.4s ease;
}
.sticky-header header .nav-padding {
  padding: 14px;
}
.sticky-header header.sticky {
  line-height: normal;
  background: var(--theme-default);
  text-align: left;
}
.sticky-header header.sticky .nav-padding {
  padding: 7px 14px;
}

@keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4px);
  }
}
@media (max-width: 1440px) {
  .navbar-nav .nav-item .nav-link {
    font-size: 16px;
    padding: 12px 7px;
  }
}
/* ========= responsive scss for 1200 screen ========= */
@media only screen and (max-width: 1199px) {
  .sticky-header header.sticky .nav-padding {
    padding: 15px 25px;
  }
  .navbar-toggler span {
    background-color: #fff;
  }
  .sticky-header .navbar-nav .nav-item .nav-link {
    color: #000;
    padding: 10px 12px !important;
    font-size: 15px;
  }
  .sticky-header .navbar-nav li {
    display: block;
    width: 100%;
  }
  .landing-page .navbar-expand-xl .navbar-collapse {
    background-color: white;
    margin-top: 20px;
    position: absolute;
    width: calc(100% - 30px);
    left: 15px;
    top: 70px;
  }
}
@media only screen and (max-width: 1199px) and (max-width: 575px) {
  .landing-page .navbar-expand-xl .navbar-collapse {
    top: 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .landing-page .navbar-expand-xl .navbar-collapse .navbar-nav {
    padding: 20px 30px 30px 30px;
  }
  header.sticky .navbar-expand-xl .navbar-collapse {
    top: 50px;
  }
}
/* ========= responsive scss for 992 screen ========= */
/* ========= responsive scss for 768 screen ========= */
@media only screen and (max-width: 767px) {
  .landing-page .sticky-header header.sticky .navbar-nav .nav-item .nav-link {
    font-size: 14px;
    padding: 10px 12px;
  }
  header.sticky .navbar-expand-xl .navbar-collapse {
    top: 45px;
  }
}
/* ========= responsive scss for 575 screen ========= */
@media only screen and (max-width: 480px) {
  .sticky-header header.sticky {
    height: 56px;
  }
  header.sticky .navbar-expand-xl .navbar-collapse {
    top: 36px;
  }
}

/**=====================
    3.39 Landing CSS Ends
==========================**/
/**=====================
    3.40 Language CSS start
==========================**/
.lang span span {
  color: #999;
  font-weight: 400;
  margin-left: 5px;
}

/*more lang*/

/**=====================
    3.40 Language CSS end
==========================**/
/**=====================
     3.41 Learning CSS start
==========================**/
/**=====================
     3.41 Learning CSS end
==========================**/
/**=====================
    3.42 Login CSS Start
==========================**/

.show-hide {
  position: absolute;
  top: 52px;
  right: 20px;
  transform: translateY(-50%);
}
.show-hide span {
  cursor: pointer;
  font-size: 13px;
  color: var(--theme-default);
}
.show-hide span.show:before {
  content: "\f06e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #999999;
}
.show-hide span:before {
  content: "\f070";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #999999;
}

/**=====================
    3.42 Login CSS Ends
==========================**/
/**=====================
	3.43 Megaoption CSS Start
==========================**/

/**=====================
    3.43 Megaoption CSS Ends
==========================**/
/**=====================
	3.62 Manage Reviews CSS Start
==========================**/

/**=====================
	3.62 Manage Reviews CSS End
==========================**/
/**=====================
    3.44 Navigate Links CSS start
==========================**/

.bg-opacity-wrapper > div {
  --theme-default: 115, 102, 255;
  background-color: rgba(var(--theme-default), var(--bs-bg-opacity)) !important;
}

/**=====================
    3.44 Navigate Links CSS end
==========================**/
/**=====================
    3.45 Order-history CSS start
==========================**/

/**=====================
    3.45 Order-history CSS End
==========================**/
/**=====================
     3.46. Offcanvas CSS Start
==========================**/

/**=====================
    3.46. Offcanvas CSS Ends
==========================**/
/**=====================
  3.47 Page CSS Start
==========================**/
/*test Nav bar color */

/**=====================
    3.47 Page CSS Ends
==========================**/
/**=====================
    3.48 Pricing CSS Start
==========================**/
/**=====================
   3.48 Pricing CSS Ends
==========================**/
/**=====================
   3.49 Progress CSS Start
==========================**/

@keyframes heart {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0.1);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/**=====================
   3.49 Progress CSS Ends
==========================**/
/**=====================
   3.50 Project_list CSS Start
==========================**/
/**=====================
   3.50 Project_list CSS Ends
==========================**/
/**=====================
    3.51 Placeholders CSS Start
==========================**/

@keyframes wave-left-lines {
  0% {
    background-position: -460px 0;
  }
  100% {
    background-position: 460px 0;
  }
}
@keyframes wave-square-lines {
  0% {
    background-position: -460px 0;
  }
  100% {
    background-position: 460px 0;
  }
}
@keyframes placeholder-glow {
  50% {
    opacity: 0.1;
  }
}
/**=====================
    3.51 Placeholders CSS End
==========================**/
/**=====================
   3.52 Rating CSS Start
==========================**/
@-webkit-keyframes shake {
  30% {
    transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px);
  }
  60% {
    transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px);
  }
  100% {
    transform: perspective(240px) translateZ(4px);
  }
}
@keyframes shake {
  30% {
    transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px);
  }
  60% {
    transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px);
  }
  100% {
    transform: perspective(240px) translateZ(4px);
  }
}
@-webkit-keyframes tear {
  0% {
    opacity: 0;
    transform: translateY(-2px) scale(0) translateZ(0);
  }
  50% {
    transform: translateY(12px) scale(0.6, 1.2) translateZ(0);
  }
  20%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0);
  }
}
@keyframes tear {
  0% {
    opacity: 0;
    transform: translateY(-2px) scale(0) translateZ(0);
  }
  50% {
    transform: translateY(12px) scale(0.6, 1.2) translateZ(0);
  }
  20%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0);
  }
}
@-webkit-keyframes toggle {
  50% {
    transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg));
  }
}
@keyframes toggle {
  50% {
    transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg));
  }
}
@-webkit-keyframes angry {
  40% {
    background: var(--active);
  }
  45% {
    box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry);
  }
}
@keyframes angry {
  40% {
    background: var(--active);
  }
  45% {
    box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry);
  }
}
@keyframes fade-slide-in {
  from, 16.67% {
    opacity: 0;
    transform: translateY(25%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes right-eye {
  from {
    clip-path: polygon(0 75%, 100% 0, 100% 100%, 0 100%);
  }
  50%, to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes left-eye {
  from {
    clip-path: polygon(0 0, 100% 75%, 100% 100%, 0 100%);
  }
  50%, to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes mouth-lower {
  from {
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    top: 1.75em;
    height: 0.75em;
    visibility: visible;
  }
  40% {
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    top: 1.95em;
    height: 0.25em;
    visibility: visible;
  }
  50%, to {
    border-radius: 0;
    top: 2em;
    height: 0.125em;
    visibility: hidden;
  }
}
@keyframes mouth-upper {
  from, 50% {
    border-radius: 0;
    box-shadow: 0 -0.125em 0 inset;
    top: 2em;
    height: 0.125em;
    visibility: hidden;
  }
  62.5% {
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    box-shadow: 0 -0.125em 0 inset;
    top: 1.95em;
    height: 0.25em;
    visibility: visible;
  }
  75% {
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    box-shadow: 0 -0.125em 0 inset;
    top: 1.825em;
    height: 0.5em;
    visibility: visible;
  }
  to {
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    box-shadow: 0 -0.8em 0 inset;
    top: 1.75em;
    height: 0.75em;
    visibility: visible;
  }
}

/**=====================
   3.52 Rating CSS Ends
==========================**/
/**=====================
    3.61 Roles and Permission CSS start
==========================**/

/**=====================
    3.61 Roles and Permission CSS end
==========================**/
/**=====================
    3.63 Reports CSS start
==========================**/

/**=====================
    3.63 Reports CSS end
==========================**/
/**=====================
    3.53 Social-app CSS start
==========================**/
/**=====================
    3.53 Social-app CSS end
==========================**/
/**=====================
    3.54 Scroll-spy CSS start
==========================**/

/**=====================
    3.54 Scroll-spy CSS ends
==========================**/
/**=====================
    3.55 Sweet-alert CSS Start
==========================**/

/**=====================
    3.55 Sweet-alert CSS ends
==========================**/
/**=====================
   3.56 Sellers CSS Start
==========================**/
@keyframes hide {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
    width: 0;
    height: 0;
    margin: 0;
  }
}
@keyframes show {
  0% {
    transform: scale(0);
    width: 0;
    height: 0;
    margin: 0;
  }
  100% {
    transform: scale(1);
  }
}
/**=====================
   3.56 Sellers CSS End
==========================**/
/**=====================
   3.64 Settings CSS Start
==========================**/

/**=====================
   3.64 Settings CSS Start
==========================**/
/**=====================
    3.57 Task CSS Start
==========================**/

/**=====================
  3.57 Task CSS Ends
==========================**/
/**=====================
    3.58 Timeline-v CSS Start
==========================**/

.list-inline {
  display: flex;
  justify-content: center;
}

/**=====================
    3.58 Timeline-v CSS Ends
==========================**/
/**=====================
    3.59 User-profile CSS start
==========================**/
/**=====================
    3.59 User-profile CSS Ends
==========================**/
/**=====================
    3.60 Wishlist CSS start
==========================**/

/**=====================
    3.60 Wishlist CSS Ends
==========================**/
/**=====================
    5.1 Footer CSS Start
==========================**/
.footer {
  background-color: #fff;
  box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
  padding: 15px;
  bottom: 0;
  left: 0;
  margin-left: 265px;
  transition: 0.5s;
}

/**=====================
    5.1 Footer CSS Ends
==========================**/
/**=====================
  5.2 Grid CSS Start
==========================**/

/**=====================
    5.2 Grid CSS Ends
==========================**/
/**=====================
  5.3 Header CSS Start
==========================**/

/*======= Page Header css ends  ======= */
/**======Main Header css Start ======**/

/**======Main Header css Ends ======**/
/**=====================
    5.3 Header CSS Ends
==========================**/
/**=====================
    5.4 Navs CSS Start
==========================**/

/**=====================
    5.4 Navs CSS Ends
==========================**/
/**=====================
   5.5 Search CSS Start
==========================**/

/**=====================
  5.5 Search CSS Ends
==========================**/
/**=====================
    5.6 Select2 CSS Start
==========================**/

/* Do not show the "remove tag" (x) button when only a single tag remains */

.tagify__dropdown__item--active {
  background-color: #cccccc;
  color: var(--body-font-color);
}

/**=====================
    5.6 Select2 CSS Ends
==========================**/
/**=====================
  5.7 Sidebar CSS Start
==========================**/

@keyframes pagebody {
  from {
    opacity: 0;
    transform: scale3d(0.98, 0.98, 0.98) translate(-20px, -50px);
  }
  50% {
    opacity: 1;
  }
}
/**==sidebar-css==**/
/**=====================
  5.7 Sidebar CSS Ends
==========================**/
/**=====================
    5.8 Rtl CSS Start
==========================**/

/**=====================
    5.8 Rtl CSS Ends
==========================**/
/**=====================
  5.9 Box-layout CSS start
==========================**/

/**=====================
  5.9 Box-layout CSS Ends
==========================**/
/* ---------------------
	*** themes ***
-----------------------*/
/**=====================
  4.2 Theme-customizer CSS Start
==========================**/

/**=====================
    4.2 Theme-customizer CSS Ends
==========================**/
/**=====================
  4.3 Update CSS Start
==========================**/

.nav-tabs {
  border-bottom-color: #efefef;
}
.nav-tabs .nav-bottom .nav-item .nav-link.active {
  border-color: #efefef;
}

.nav-tabs .nav-item.show .nav-link {
  font-weight: 500;
}
.nav-tabs .nav-link {
  color: #3f475a;
}
.nav-tabs .nav-link.active {
  font-weight: 500;
}
.nav-tabs.nav-bottom .nav-item .nav-link.active {
  border-color: #e9edf1 #e9edf1 #fff;
}

.dropdown-menu {
  -webkit-box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
  box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
  border: none;
  padding: 0;
  z-index: 2;
}
.dropdown-menu .dropdown-item {
  color: #2b2b2b;
  opacity: 0.6;
  font-size: 13px;
  padding: 6px 12px;
  border-top: 1px solid #efefef;
  background: var(--white);
}
.dropdown-menu .dropdown-item:hover {
  background-color: #cccccc;
}
.dropdown-menu .dropdown-item:first-child {
  border: none;
}
.dropdown-menu .dropdown-divider {
  margin: 0;
  border-top: 1px solid #cccccc;
}

.carousel-item .carousel-caption {
  width: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 26px 10px;
  background-color: rgba(38, 41, 50, 0.51);
}
.carousel-item .carousel-caption h5,
.carousel-item .carousel-caption p {
  color: #fff;
}
.carousel-item .carousel-opacity {
  background-color: rgba(244, 244, 244, 0.51);
}

.carousel-dark .carousel-caption h5,
.carousel-dark .carousel-caption p {
  color: #000;
}

.modal-popup.modal {
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0);
}
.modal-popup.modal .modal-dialog {
  pointer-events: all;
}

/**=====================
    4.3 Update CSS Ends
==========================**/
/**=====================
	4.1. Dark CSS Start
==========================**/
@keyframes pulse-animate-dark {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

/**=====================
	4.1. Dark CSS ends
==========================**/

/* Fundo global */
body.landing-page, .landing-page {
    background-color: #071426 !important; /* Deep Midnight Blue */
    color: #E2E8F0 !important; /* Soft White */
    overflow-x: hidden !important;
}


/* Hero Banner */

/* Seções */

/* Cards */

/* Blog */

/* Botões */
.buy-btn.rounded-pill {
    background-color: #60A5FA; /* Soft Sky Blue */
    color: #071426; /* Deep Midnight Blue */
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.buy-btn.rounded-pill:hover {
    background-color: #3B82F6; /* Vibrant Blue */
    color: #E2E8F0; /* Soft White */
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Instagram Widget */

/* WhatsApp Flutuante */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #E2E8F0;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #00000080;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E;
}

/* Footer */
.footer-bg {
    background-color: #2A3447;
    padding: 2rem 0;
}

.footer-bg p {
    color: #E2E8F0;
    margin: 0;
    font-size: 0.9rem;
}

.footer-bg a {
    color: #60A5FA;
    text-decoration: none;
}

.footer-bg a:hover {
    color: #3B82F6;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .footer-bg .d-flex {
        flex-direction: column;
        align-items: center;
    }
}

/* Aumentar espaço abaixo de títulos e textos */

/* Textos */
h1, h2, h3, h4, h5, h6, p, a {
    color: #E2E8F0 !important;
}

.text-primary-accent {
    color: #60A5FA !important; /* Mantém o azul claro para destaques */
}

/* Se Inspire Conosco */

/* Cabeçalho */
.sticky-header {
    background-color: #071426; /* Mantido */
    z-index: 1000; /* Mantido */
}

.navbar {
    padding: 0.5rem 1rem; /* Mantido */
}

/* Cabeçalho */
.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    margin: 0 auto;
    gap: 2rem; /* Ajuste manual do espaçamento entre logo, menu e botão */
}

.navbar-brand {
    margin: 0; /* Mantido */
    display: flex;
    align-items: center; /* Alinha verticalmente o logo */
}

.navbar-nav.navbar_nav_modify {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
}

.navbar-nav .nav-link {
    color: #E2E8F0 !important; /* Mantido */
    font-weight: 500; /* Mantido */
    transition: color 0.3s ease; /* Mantido */
    padding: 0.5rem 1rem; /* Mantido */
    border-radius: 5px; /* Mantido */
}

.navbar-nav .nav-link:hover {
    color: #60A5FA !important; /* Mantido */
    background-color: rgba(96, 165, 250, 0.1); /* Mantido */
}

.buy-btn.rounded-pill {
    background-color: #60A5FA; /* Mantido */
    color: #071426; /* Mantido */
    padding: 0.5rem 1.25rem; /* Mantido */
    border-radius: 50px; /* Mantido */
    font-weight: 500; /* Mantido */
    text-decoration: none; /* Mantido */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Mantido */
    display: inline-block; /* Evita esticamento */
    line-height: 1.5; /* Alinha texto verticalmente */
}

.buy-btn.rounded-pill:hover {
    background-color: #3B82F6; /* Mantido */
    color: #E2E8F0; /* Mantido */
    transform: scale(1.05); /* Mantido */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Mantido */
}

.navbar-toggler {
    position: absolute;
    right: 1rem; /* Mantido */
    top: 50%; /* Mantido */
    transform: translateY(-50%); /* Mantido */
    border: none; /* Mantido */
    padding: 0.5rem; /* Mantido */
    background: none; /* Mantido */
}

.navbar-toggler span {
    background-color: #E2E8F0; /* Mantido */
    width: 25px; /* Mantido */
    height: 2px; /* Mantido */
    margin: 5px 0; /* Mantido */
    display: block; /* Mantido */
    transition: all 0.3s ease; /* Mantido */
}

@media (max-width: 1199px) {
    .navbar-collapse {
        background-color: #071426; /* Mantido */
        padding: 1rem; /* Mantido */
        text-align: center; /* Mantido */
        margin-top: 0.5rem; /* Mantido */
        border-radius: 10px; /* Mantido */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Mantido */
    }

    .navbar-nav.navbar_nav_modify {
        flex-direction: column; /* Mantido */
        gap: 1rem; /* Mantido */
        margin: 0; /* Mantido */
    }

    .navbar-nav .nav-link {
        padding: 0.75rem; /* Mantido */
        font-size: 1.1rem; /* Mantido */
    }

    .buy-btn.rounded-pill {
        margin-top: 1rem; /* Mantido */
        display: inline-block; /* Mantido */
        padding: 0.75rem 1.5rem; /* Mantido */
    }
}
/* --- INICIO CUSTOM CND --- */

/* Fundo global */
body.landing-page, .landing-page {
    background-color: #071426 !important; /* Deep Midnight Blue */
    color: #E2E8F0 !important; /* Soft White */
    overflow-x: hidden !important;
}


/* Hero Banner */

/* Seções */

/* Cards */

/* Blog */

/* Botões */
.buy-btn.rounded-pill {
    background-color: #60A5FA; /* Soft Sky Blue */
    color: #071426; /* Deep Midnight Blue */
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.buy-btn.rounded-pill:hover {
    background-color: #3B82F6; /* Vibrant Blue */
    color: #E2E8F0; /* Soft White */
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Instagram Widget */

/* WhatsApp Flutuante */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #E2E8F0;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #00000080;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E;
}

/* Footer */
.footer-bg {
    background-color: #2A3447;
    padding: 2rem 0;
}

.footer-bg p {
    color: #E2E8F0;
    margin: 0;
    font-size: 0.9rem;
}

.footer-bg a {
    color: #60A5FA;
    text-decoration: none;
}

.footer-bg a:hover {
    color: #3B82F6;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .footer-bg .d-flex {
        flex-direction: column;
        align-items: center;
    }
}

/* Aumentar espaço abaixo de títulos e textos */

/* Textos */
h1, h2, h3, h4, h5, h6, p, a {
    color: #E2E8F0 !important;
}

.text-primary-accent {
    color: #60A5FA !important; /* Mantém o azul claro para destaques */
}

/* Se Inspire Conosco */

/* Cabeçalho */
.sticky-header {
    background-color: #071426; /* Mantido */
    z-index: 1000; /* Mantido */
}

.navbar {
    padding: 0.5rem 1rem; /* Mantido */
}

/* Cabeçalho */
.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    margin: 0 auto;
    gap: 2rem; /* Ajuste manual do espaçamento entre logo, menu e botão */
}

.navbar-brand {
    margin: 0; /* Mantido */
    display: flex;
    align-items: center; /* Alinha verticalmente o logo */
}

.navbar-nav.navbar_nav_modify {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
}

.navbar-nav .nav-link {
    color: #E2E8F0 !important; /* Mantido */
    font-weight: 500; /* Mantido */
    transition: color 0.3s ease; /* Mantido */
    padding: 0.5rem 1rem; /* Mantido */
    border-radius: 5px; /* Mantido */
}

.navbar-nav .nav-link:hover {
    color: #60A5FA !important; /* Mantido */
    background-color: rgba(96, 165, 250, 0.1); /* Mantido */
}

.buy-btn.rounded-pill {
    background-color: #60A5FA; /* Mantido */
    color: #071426; /* Mantido */
    padding: 0.5rem 1.25rem; /* Mantido */
    border-radius: 50px; /* Mantido */
    font-weight: 500; /* Mantido */
    text-decoration: none; /* Mantido */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Mantido */
    display: inline-block; /* Evita esticamento */
    line-height: 1.5; /* Alinha texto verticalmente */
}

.buy-btn.rounded-pill:hover {
    background-color: #3B82F6; /* Mantido */
    color: #E2E8F0; /* Mantido */
    transform: scale(1.05); /* Mantido */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Mantido */
}

.navbar-toggler {
    position: absolute;
    right: 1rem; /* Mantido */
    top: 50%; /* Mantido */
    transform: translateY(-50%); /* Mantido */
    border: none; /* Mantido */
    padding: 0.5rem; /* Mantido */
    background: none; /* Mantido */
}

.navbar-toggler span {
    background-color: #E2E8F0; /* Mantido */
    width: 25px; /* Mantido */
    height: 2px; /* Mantido */
    margin: 5px 0; /* Mantido */
    display: block; /* Mantido */
    transition: all 0.3s ease; /* Mantido */
}

@media (max-width: 1199px) {
    .navbar-collapse {
        background-color: #071426; /* Mantido */
        padding: 1rem; /* Mantido */
        text-align: center; /* Mantido */
        margin-top: 0.5rem; /* Mantido */
        border-radius: 10px; /* Mantido */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Mantido */
    }

    .navbar-nav.navbar_nav_modify {
        flex-direction: column; /* Mantido */
        gap: 1rem; /* Mantido */
        margin: 0; /* Mantido */
    }

    .navbar-nav .nav-link {
        padding: 0.75rem; /* Mantido */
        font-size: 1.1rem; /* Mantido */
    }

    .buy-btn.rounded-pill {
        margin-top: 1rem; /* Mantido */
        display: inline-block; /* Mantido */
        padding: 0.75rem 1.5rem; /* Mantido */
    }
}

/* ========================================================= */
/* Global CSS Overrides para CND Empreendimentos (Refatorado)*/
/* ========================================================= */
body {
    background-color: #0a0a0c;
    color: #e0e0e0;
}

/* Sobrescrever botão roxo do template - Solid Gold */
.buy-btn, .btn.buy-btn {
    background: #d4af37 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: bold;
    box-shadow: none !important;
    transition: all 0.3s ease;
    padding: 10px 25px !important;
    text-decoration: none !important;
}

.buy-btn:hover, .btn.buy-btn:hover {
    background: #e6c555 !important;
    color: #ffffff !important;
}

/* Links da navbar em tema escuro */
.navbar-b.navbar-trans .nav-link {
    color: #e0e0e0 !important;
}
.navbar-b.navbar-trans .nav-link:hover {
    color: #d4af37 !important;
}

/* Rodapé customizado */
.footer-bg h6, .footer-bg h2, .footer-bg .text-muted {
    color: #e0e0e0 !important;
}

.accent-red { color: #d30000 !important; }
.accent-gold { color: #d4af37 !important; }

/* Custom Styling for CND Empreendimentos - V3 Professional */
.hero-banner-cnd {
    background: linear-gradient(180deg, rgba(10,10,12,0.95) 0%, rgba(10,10,12,0.85) 100%), url('../images/vidroo/inspiracao-1.jpg') center/cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 4rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    color: #d0d0d0;
}

/* Calibração de Tipografia e Layout para Mobile */
@media (max-width: 768px) {
    .hero-title { font-size: 2.2rem !important; }
    .hero-banner-cnd { min-height: auto; padding-top: 140px; padding-bottom: 60px; }
    
    .display-5 { font-size: 2rem !important; }
    .display-6 { font-size: 1.8rem !important; }
    
    .section-cnd, .section-cnd-alt { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    
    /* Reduzindo padding dos cards e tamanho do contato flutuante no mobile */
    .service-card-cnd { padding: 1.5rem 1rem !important; }
    .contact-box { padding: 2rem !important; }
}

/* Botões elegantes em destaque */
.btn-red-outline {
    border: 2px solid #d30000;
    color: #d30000;
    background: transparent;
    transition: all 0.3s;
}
.btn-red-outline:hover {
    background-color: #d30000;
    color: white;
}

.btn-gold-outline {
    border: 2px solid #d4af37;
    color: #d4af37;
    background: transparent;
    transition: all 0.3s;
}
.btn-gold-outline:hover {
    background-color: #d4af37;
    color: #111;
}

.btn-red { background-color: #d30000; color: white; border: 2px solid #d30000; transition: all 0.3s; }
.btn-red:hover { background-color: #a00000; border-color: #a00000; color: white; }

.btn-gold { background-color: #d4af37; color: #111; border: 2px solid #d4af37; transition: all 0.3s; font-weight: bold; }
.btn-gold:hover { background-color: #b5952f; border-color: #b5952f; color: #111; }

/* Bordas completas para o Contato (Mais finas) */
.border-cnd-red { border: 1px solid #d30000 !important; }
.border-cnd-gold { border: 1px solid #d4af37 !important; }

/* Seções base do layout unificado */
.section-cnd { background-color: #0a0a0c; position: relative; }
.section-cnd-alt { background-color: #0f0f13; position: relative; }

/* Cards de Serviços unificados */
.service-card-cnd {
    background: #111115;
    border: 1px solid #1f1f25;
    border-radius: 12px;
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.service-card-cnd:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.text-light-gray { color: #b0b0b0; }
.text-white { color: #ffffff !important; }

/* Estilo de Projetos Recentes */
.project-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #1f1f25;
}
.project-card img { transition: 0.5s ease; }
.project-card:hover img { transform: scale(1.05); }

/* Box de Contato nas Seções - Igualar altura */
.contact-box {
    background: #141418;
    border: 1px solid #222228;
    border-radius: 12px;
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-box:hover { background: #1a1a20; }

/* Contato Final Wrapper */
.final-contact-wrapper {
    background: #111115;
    border-radius: 15px;
    padding: 40px 30px;
    height: 100%;
}


/* ========================================================= */
/* Global CSS Overrides para CND Empreendimentos (Refatorado)*/
/* ========================================================= */
body {
    background-color: #0a0a0c;
    color: #e0e0e0;
}

/* Sobrescrever botão roxo do template - Solid Gold */
.buy-btn, .btn.buy-btn {
    background: #d4af37 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: bold;
    box-shadow: none !important;
    transition: all 0.3s ease;
    padding: 10px 25px !important;
    text-decoration: none !important;
}

.buy-btn:hover, .btn.buy-btn:hover {
    background: #e6c555 !important;
    color: #ffffff !important;
}

/* Links da navbar em tema escuro */
.navbar-b.navbar-trans .nav-link {
    color: #e0e0e0 !important;
}
.navbar-b.navbar-trans .nav-link:hover {
    color: #d4af37 !important;
}

/* Rodapé customizado */
.footer-bg h6, .footer-bg h2, .footer-bg .text-muted {
    color: #e0e0e0 !important;
}

.accent-red { color: #d30000 !important; }
.accent-gold { color: #d4af37 !important; }

/* Custom Styling for CND Empreendimentos - V3 Professional */
.hero-banner-cnd {
    background: linear-gradient(180deg, rgba(10,10,12,0.95) 0%, rgba(10,10,12,0.85) 100%), url('../images/vidroo/inspiracao-1.jpg') center/cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 4rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    color: #d0d0d0;
}

/* Calibração de Tipografia e Layout para Mobile */
@media (max-width: 768px) {
    .hero-title { font-size: 2.2rem !important; }
    .hero-banner-cnd { min-height: auto; padding-top: 140px; padding-bottom: 60px; }
    
    .display-5 { font-size: 2rem !important; }
    .display-6 { font-size: 1.8rem !important; }
    
    .section-cnd, .section-cnd-alt { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    
    /* Reduzindo padding dos cards e tamanho do contato flutuante no mobile */
    .service-card-cnd { padding: 1.5rem 1rem !important; }
    .contact-box { padding: 2rem !important; }
}

/* Botões elegantes em destaque */
.btn-red-outline {
    border: 2px solid #d30000;
    color: #d30000;
    background: transparent;
    transition: all 0.3s;
}
.btn-red-outline:hover {
    background-color: #d30000;
    color: white;
}

.btn-gold-outline {
    border: 2px solid #d4af37;
    color: #d4af37;
    background: transparent;
    transition: all 0.3s;
}
.btn-gold-outline:hover {
    background-color: #d4af37;
    color: #111;
}

.btn-red { background-color: #d30000; color: white; border: 2px solid #d30000; transition: all 0.3s; }
.btn-red:hover { background-color: #a00000; border-color: #a00000; color: white; }

.btn-gold { background-color: #d4af37; color: #111; border: 2px solid #d4af37; transition: all 0.3s; font-weight: bold; }
.btn-gold:hover { background-color: #b5952f; border-color: #b5952f; color: #111; }

/* Bordas completas para o Contato (Mais finas) */
.border-cnd-red { border: 1px solid #d30000 !important; }
.border-cnd-gold { border: 1px solid #d4af37 !important; }

/* Seções base do layout unificado */
.section-cnd { background-color: #0a0a0c; position: relative; }
.section-cnd-alt { background-color: #0f0f13; position: relative; }

/* Cards de Serviços unificados */
.service-card-cnd {
    background: #111115;
    border: 1px solid #1f1f25;
    border-radius: 12px;
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.service-card-cnd:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.text-light-gray { color: #b0b0b0; }
.text-white { color: #ffffff !important; }

/* Estilo de Projetos Recentes */
.project-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #1f1f25;
}
.project-card img { transition: 0.5s ease; }
.project-card:hover img { transform: scale(1.05); }

/* Box de Contato nas Seções - Igualar altura */
.contact-box {
    background: #141418;
    border: 1px solid #222228;
    border-radius: 12px;
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-box:hover { background: #1a1a20; }

/* Contato Final Wrapper */
.final-contact-wrapper {
    background: #111115;
    border-radius: 15px;
    padding: 40px 30px;
    height: 100%;
}