@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/* Font-Family Tag  */

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');


:root {
  --primary-color: #0D0D0D;
  --secondary-color: #ffffff;
  --gray-color:#ffffff57;
  --primary-gradient: linear-gradient(180deg, #F4FFA2 -0.63%, #B9D100 100.63%);
}

* {
  padding: 0;
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
  overflow-x: hidden;
  position: relative;
  color: var(--secondary-color);
  background-color: var(--primary-color);
  font-family: "Red Hat Display", sans-serif !important;
  font-optical-sizing: auto;
  font-size: 16px !important;
  letter-spacing: 0.8px;
}


.navbar-toggler {
  border: 0 !important;
  padding: 0 !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
  outline: none !important;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

a,
input,
textarea {
  outline: 0 !important;
  box-shadow: none;
  text-decoration: none !important;
}


.xs-padding {
  padding: 2em 0;
}

.sm-padding {
  padding: 4em 0;
}

.xs-padding-top {
  padding-top: 2em;
}

.mrg-btm-sec {
  margin-bottom: 2em;
}

.margin-btm-sm {
  margin-bottom: 1.5em;
}

.margin-btm-md {
  margin-bottom: 3em;
}

.margin-top-sm {
  margin-top: 2em;
}

.bot-radius-top-left {
  border-top-left-radius: 12px;
}

.bot-radius-top-right {
  border-top-right-radius: 12px;
}

.bot-radius-bottom-left {
  border-bottom-left-radius: 12px;
}

.bot-radius-bottom-right {
  border-bottom-right-radius: 12px;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("../img/icons/mobile-toogle.svg") !important;
}

.navbar-light .navbar-toggler {
  border: 1px solid var(--secondary-color) !important;
  color: var(--secondary-color) !important;
}

.navbar-light .navbar-toggler:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

.logo {
  /* margin-right: 1em; */
  max-width: 6em;
  height: auto;
  margin: 0;
  object-fit: contain;
}

.height-auto {
  height: auto !important;
}

.section-title {
  margin-bottom: 4em;
}

.section-title h2 {
  font-size: 2em;
  font-weight: 700;
  color: var(--secondary-color);
  position: relative;
  margin-bottom: 0.3em;
  text-align: center;
  position: relative;
  z-index: 2;
}

.section-title h2 span {
  background: -webkit-linear-gradient(180deg, #F4FFA2 -0.63%, #B9D100 100.63%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title h3 {
  font-size: 2.5em;
  font-weight: 600;
  color: var(--secondary-color);
  position: relative;
  margin-bottom: 0.5em;
  text-align: center;
  position: relative;
  z-index: 2;
}

.section-title h3 {
  font-size: 2.5em;
  font-weight: 600;
  color: var(--secondary-color);
  position: relative;
  margin-bottom: 0.5em;
  text-align: center;
}

.section-title h4 {
  font-size: 2.5em;
  font-weight: 600;
  color: var(--secondary-color);
  position: relative;
  margin-bottom: 0.5em;
  text-align: center;
}

.section-title p {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-color);
  line-height: 1.8;
  margin-bottom: 0em;
  text-align: center;
}

.section-title p+p+p {
  margin-bottom: 0;
}

.section-title span {
  color: var(--primary-color);
}

/* Button style  */
.bot-btn-frame {
  display: block;
}

.header-athu-btn {
  background: var(--primary-gradient);
  color: var(--primary-color);
  border-radius: 25px;
  padding: 1em 3em;
  font-size: 0.95em;
  font-weight: 500;
  border: 0;
}

.primary-btn {
  background: var(--primary-gradient);
  color: var(--primary-color);
  border-radius: 25px;
  padding: 1em 3em;
  font-size: 0.95em;
  font-weight: 500;
  border: 0;
  display: inline-block;
}



.header-nav-center {
  padding: 1em 0 0 0;
  background-color: var(--primary-color);
  position: relative;
}

.header-nav-center .navbar .nav-item .nav-link {
  font-size: 0.95em;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--secondary-color);
  opacity: 1;
  letter-spacing: 0.5px;
  padding: 0.5em 1em;
  position: relative;
  transition: transform 0.5s;
  padding-bottom: 0.5em;
}

.header-nav-center .navbar .navbar-nav {
  gap: 1em;
  align-items: center;
}

.header-nav-center .navbar .nav-item .nav-link:hover {
  color: var(--secondary-color);
  opacity: 1;
}

.open-header-btn {
  color: var(--secondary-color) !important;
  border: none;
  border-radius: 5px;
  opacity: 1 !important;
  z-index: 1;
  position: relative;
  transition: all 0.4s ease 0s;
  background: var(--primary-color);
  padding: 0.8em 2em !important;
  letter-spacing: 0.5px;
  font-size: 1em !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  margin-top: -0.5em;
}

.open-header-btn:hover {
  color: var(--secondary-color);
}

.open-header-btn:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 6px;
  left: 6px;
  transform: translate3d(0px, 0px, 0px);
  z-index: -1;
  transition: all 0.35s cubic-bezier(1, -1.88, 0.15, 0.95) 0s;
  border: 2px solid var(--primary-color);
  border-radius: 5px;
}

.open-header-btn:hover:after {
  transform: translate3d(4px, 4px, 0px);
}

.header-dropdown .dropdown-menu {
  border: 0;
  padding: 0 !important;
}

.header-dropdown .dropdown-menu .dropdown-item {
  padding: 0.5em 1em !important;
}

.header-dropdown .dropdown-menu:last-child .dropdown-item:hover {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.37rem;
}

.bot-nav-header {
  border-radius: 75px;
  padding: 1em 2em;
  background: rgba(59, 59, 59, 1);
  backdrop-filter: blur(10px);
}

/* Moblie Nav Style  */
.mobile-nav-header {
  display: none;
}

/* Banner style  */
.home-banner-sec {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background: radial-gradient(217.23% 100.08% at 50% 18.33%, rgba(0, 0, 0, 0.00) 21.67%, #63E 69.34%, #FFF 100%);
  background-attachment: fixed;
}

.hero-info-wrapped {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  position: relative;
  z-index: 9;
  width: auto;
  height: calc(100vh - 95px);
}

.hero-info-wrapped h1 {
  font-size: 2.5em;
  font-weight: 700;
  letter-spacing: 1;
  line-height: 1.3;
  color: var(--secondary-color);
  margin-bottom: 0;
  text-align: center;
}

.hero-info-wrapped p {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1;
  color: var(--gray-color);
  margin-bottom: 0;
}

.hero-info-wrapped span {
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1;
  background: -webkit-linear-gradient(95deg, #627FFF 8.51%, #865BFF 94.21%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Support Bot  style */

.banner-video-dimensions {
  width: 100% !important;
  height: calc(100vh - 200px) !important;
  border-radius: 20px;
  overflow: hidden;

}

.banner-video-dimensions video {
  object-fit: cover;
}
.bot-analysis-card-wrap{
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.bot-analysis-card{
  padding: 1em;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
.bot-analysis-info h3{
  font-size: 1.4em;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 1em;
}
.bot-analysis-info p{
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  color: var(--gray-color);
  margin-bottom: 0em;
}

/* bot retail Style  */
.bot-retail-info-wrapped h3 {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 0.8em;
}

.bot-retail-info-wrapped p {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  color: var(--gray-color);
  margin-bottom: 1em;
}

.bot-retail-info-list ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 1em;
}

.bot-retail-info-list ul li {
  display: grid;
  grid-template-columns: 25px auto;
  align-items: center;
  gap: 1em;
}

.bot-retail-info-list ul li span {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  opacity: 0.5;
  color: var(--secondary-color);
}

.point-list {
  width: 1.5em;
  height: auto;
}

.retail-img {
  width: 32em;
  height: auto;
  object-fit: contain;
}

/* Amazing Feature style  */
.bot-account-card {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.amazon-icons {
  width: 3em;
  height: auto;
  object-fit: contain;
}

.bot-account-card-info h3 {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 1em;
}

.bot-account-card-info p {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  color: var(--gray-color);
  margin-bottom: 0em;

}


/* Broker style  */
.broker-benefits-wrapped {
  background: url("../img/objects/shatter-box-gradient.png") no-repeat center;
  background-size: cover;
}

.bot-broker-benefits-info {
  border-radius: 16px;
  padding: 2em;
  border: 2px solid #ffffff1a;
  height: 100%;
}

.broker-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.bot-broker-avater-frame {
  border-radius: 16px;
  overflow: hidden;
}

.bot-broker-benefits-info h3 {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 1em;
}

.bot-broker-benefits-info p {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  color: var(--gray-color);
  margin-bottom: 1em;
}

.bot-broker-benefits-info p:last-child {
  margin-bottom: 0em;

}


/* Grid section style  */
.bot-grid-layout {
  background: url("../img/objects/shatter-two.png") center no-repeat;
  background-size: contain;
}

.bot-grid-card-icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid-icons {
  width: 4em;
  height: auto;
  object-fit: contain;
}

.bot-grid-card-icons span {
  font-size: 2em;
  font-weight: 700;
  color: var(--secondary-color);
  opacity: 0.4;
}

.bot-gridcard-wrap {
  padding: 2em;
  background: linear-gradient(282deg, rgba(47, 47, 47, 0.25) 0%, rgba(255, 255, 255, 0.13) 95.79%);
  display: flex;
  flex-direction: column;
  gap: 1em;
  height: 100%;
}

.bot-grid-card-info h3 {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 1em;
}

.bot-grid-card-info p {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  color: var(--gray-color);
  margin-bottom: 0em;
}

/* spend less time section style  */

.bot-spend-less-wrapped {
  /* background: url('../img/objects/black.png') no-repeat center; */
  background: url('../img/objects/ai.png ') no-repeat left;
  background-size: contain;
  /* background-attachment: fixed; */
  position: relative;
}
.bot-spend-less-wrapped::after{
  content: '';
  background: linear-gradient(360deg, #0d0d0d, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 0;
}
.bot-spend-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 99999;
  gap: 1em;
  padding: 2em;
  border-radius: 16px;
  height: 100%;
  background: linear-gradient(298deg, rgba(47, 47, 47, 0.70) 63.72%, rgba(18, 18, 18, 0.35) 95.08%);
}

.bot-spend-card-info h3 {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 0.5em;
}

.bot-spend-card-info p {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  color: var(--gray-color);
  margin-bottom: 0em;
}

/* Cta Section style  */
.bot-cta-card {
  background: #050713;
  border-radius: 16px;
  padding: 4em 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3em;

}

.bot-cta-card h4 {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.8;
  opacity: 1;
  color: var(--secondary-color);
  margin-bottom: 0em;

}

/* Faq Section style  */
.bot-faq-wrapped {
  background: url('../img/objects/shatter-half.png') no-repeat;
  background-position: left;
  background-size: contain;
}

.bot-faq-frame .accordion-item {
  margin-bottom: 1em;
}

/* Contact section style  */
.contact-wrapped {
  background: url("../img/objects/box-frame.png") no-repeat center;
  background-size: cover;
}

.bot-contact-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.bot-contact-form {
  padding: 2em;
  border-radius: 16px;
  background: linear-gradient(282deg, rgba(47, 47, 47, 0.25) 0%, rgba(255, 255, 255, 0.13) 95.79%);
}

.bot-contact-info-frame ul {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
}

.bot-contact-info-frame ul li {
  display: grid;
  grid-template-columns: 25px auto;
  align-items: center;
  gap: 1em;
}

.bot-contact-info-frame ul li span {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  opacity: 1;
  color: var(--secondary-color);
}

.bot-social-media-wrap ul {
  display: flex;
  align-items: center;
  gap: 1em;
}

.bot-social-media-wrap ul li a {
  background: rgba(255, 255, 255, 0.22);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
}

/* Footer section style  */
footer{
  padding-top:4em;
  padding-bottom:2em;
  background: url("../img/objects/center.png") no-repeat center;
  background-size: 100% 100%;
  
}
.bot-footer-wrap {
  padding: 4em;
  border-radius: 16px;
  background: linear-gradient(282deg, rgba(47, 47, 47, 0.25) 0%, rgba(255, 255, 255, 0.13) 95.79%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2em;
}

.footer-logo {
  width: 8em;
  margin: 0 auto;
  height: auto;
  object-fit: contain;
}


.bot-footer-descrip-frame p {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  color: var(--gray-color);
  margin-bottom: 0em;
  max-width: 800px;
}

.bot-footer-quick-link-frame h4 {
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 1em;
  text-align: center;
  background: -webkit-linear-gradient(180deg, #F4FFA2 -0.63%, #B9D100 100.63%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bot-footer-media-frame h4 {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 1em;
  text-align: center;
}

.bot-footer-media-frame ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.bot-footer-media-frame ul li a {
  background: rgba(255, 255, 255, 0.22);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
}

.bot-footer-quick-link-frame ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
}

.bot-footer-quick-link-frame ul li a {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.8;
  color: var(--secondary-color);
}

/* Animation style and class  */
.shap-hero {
  position: absolute;
  bottom: 0;
  left: 25%;
  pointer-events: none;
  z-index: 1;
}

.global {
  width: calc(100% - 80px);
  opacity: 0.4;
  -webkit-animation: rotate-center 100s linear infinite both reverse;
  animation: rotate-center 100s linear infinite both reverse;
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.img-ani{
  width: 20em;
  height: auto;
  margin: 0 auto;
  -webkit-animation: rotate-jump 5s ease-in infinite alternate-reverse;
  animation: rotate-jump 5s ease-in infinite alternate-reverse;
}

@keyframes rotate-jump {
  0%{
    /* transform: ; */
    transform: translateY(-40px);
  }
  50%{
    /* transform: rotateY(300deg); */
    /* transform: translateY(0px); */
  }
  100%{
    transform: rotateY(360deg);
    /* transform: translateY(100px); */
  }
}

/* Gradient color  */
/* .gradient-left-gray{
  background: linear-gradient(90deg, rgba(51, 51, 51, 0.00) 10.15%, rgba(255, 255, 255, 0.25) 71.89%);
}
.gradient-right-gray{
 
  background: linear-gradient(272deg, rgba(51, 51, 51, 0.00) 10.15%, rgba(255, 255, 255, 0.25) 71.89%);
} */
.mobile-nav-header .offcanvas-body{
background: var(--primary-color);
}
.mobile-nav-header .nav-link{
color: var(--secondary-color);
}
.mobile-nav-header .navbar,.offcanvas-header{
  background: rgba(59, 59, 59, 1);
}
.offcanvas-body .header-athu-btn{
  width: 100%;
  display: inline-block;
  text-align: center;
  margin-top: 1em;
}