/* import font family is == DM Sans ==*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

/*
Theme Name:     UBIKVR
Theme URI:
Author:
Author URI:
Description:
Version:        1.0


License:
License URI:

 [Table of Content]
 01. Reset
 02. Global Style
	  01. Index Page Style
        section Index Page
            1.1. Header section
            1.2. Hero section
            1.3. About Us section
            1.4. Services section
            1.5. Choose Us section
            1.6. Achievement section
            1.7. Discover section
            1.8. Pricing Plan section
            1.9. Testimonial section
            1.10. Blogs section
            1.11. Partners section
            1.12. Newsletter section
            1.13. Footer Section

    02. About Page Style
        section About Page
            2.1. Subpage_Hero section
            2.2. Mission section
			2.3. Online section
			2.4. Team section

    03. Services Page Style
        section Services Page
            3.1. Features section

    04. Pricing Page Style

    05. Testimonial Page Style

    06. Team Page Style

    07. Blog Page Style

    08. BlogDetails_Hero Page Style
		section BlogDetails_Hero Page
			   8.1. BlogDetails_Hero section
			   8.2. Details section
			   8.3. Comment section

    09. Contact Page Style
		section Contact Page
				9.1. Contact_Details section
				9.2. Contact section

    10. Error Page Style
		section Error Page
				10.1. Error_404 section

    11. ComingSoon Page Style
		section ComingSoon Page
				11.1. ComingSoon section

 */

@font-face {
  font-family: 'ModamPro';
  src: url(../webfonts/ModamFaNumWeb-Medium.woff2);
}

@font-face {
  font-family: 'peyda';
  src: url(../webfonts/PeydaWebFaNum-Medium.woff2);
}
/* #region HTML5 display-role reset for older browsers */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-size: 100%;
}

/* #endregion */
/* End of HTML5 display-role reset for older browsers */

/* #region =====  01. Reset  ====== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  font-family: "ModamPro", sans-serif;
  line-height: 1;
  background: #161326;
  color: #ffffff;
  scroll-behavior: smooth;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

input:focus,
button:focus {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0px 0px 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

select::-ms-expand {
  display: none;
}

label {
  font-weight: normal;
}

iframe {
  width: 100%;
}
/* #endregion */
/* =====  End of 01. Reset  ====== */

/* #region ===== 02. Global Style ===== */
h1 {
  font-size: 70px;
  line-height: 80px;
  font-weight: 700;
  font-family: "ModamPro", sans-serif;
}

h2 {
  font-size: 52px;
  line-height: 62px;
  font-weight: 700;
  font-family: "ModamPro", sans-serif;
}

h3 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  font-family: "ModamPro", sans-serif;
}

h4 {
  font-size: 28px;
  line-height: 42px;
  font-weight: 700;
  font-family: "ModamPro", sans-serif;
}

h5 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  font-family: "ModamPro", sans-serif;
}

h6 {
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
  font-family: "ModamPro", sans-serif;
}

.p,
p {
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  font-family: "ModamPro", sans-serif;
}

a {
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  text-decoration: none;
  font-family: "ModamPro", sans-serif;
  color: #ffffff;
}

button {
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  padding: 17px 53px;
  font-family: "ModamPro", sans-serif;
  border: none;
  outline: none;
}

.mini-heading {
  padding: 7px 23px;
  border-radius: 40px;
  border: 1px solid #b81878;
  background-color: #161326;
  width: fit-content;
  box-shadow: 0px 0px 13px 3px #b8184480 inset;
}

.site-wrapper{
  max-width: 1920px;
  margin: auto;
}

header aside .overflow-hidden::before {
  content: "";
  width: 1355px;
  height: 1355px;
  top: 56px;
  right: 731px;
  border-radius: 50%;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.hero-bg::before {
  content: "";
  width: 946px;
  height: 946px;
  top: -443px;
  right: -441px;
  border-radius: 50%;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.hero-bg::after {
  content: "";
  width: 648px;
  height: 648px;
  border-radius: 50%;
  top: 680px;
  right: 1473px;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.hero::after {
  content: "";
  width: 648px;
  height: 648px;
  border-radius: 50%;
  top: 839px;
  right: 254px;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.twosec-bg::before,
.about-bg::before {
  content: "";
  width: 946px;
  height: 946px;
  border-radius: 50%;
  top: 510px;
  right: -370px;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.thirdsec-bg::before {
  content: "";
  width: 946px;
  height: 946px;
  border-radius: 50%;
  top: 550px;
  right: 1340px;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.hover1 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: #ffffff;
  z-index: 1;
  border-radius: 15px;
  transition: ease all 0.3s;
  text-align: center;
  box-shadow: 0px 0px 13px 3px #b818444d inset;
}

.hover1::before {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 0%;
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  z-index: -1;
  transition: 0.5s;
  border-radius: 50% 50% 0% 0%;
}

.hover1:hover::before,
.hover1:hover::after {
  height: 200%;
  width: 100%;
}

.hover1:hover {
  color: #ffffff;
}

.hover1:active {
  filter: brightness(0.8);
}

.hover3 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.5s ease;
  font-weight: 500;
  color: #ffffff;
  z-index: 1;
  padding: 17px 50px;
  border-radius: 15px;
  border: none;
  line-height: 27px;
  transition: ease all 0.3s;
  border: 1px solid transparent;
}

.hover3::before {
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 0px;
  background: linear-gradient(-135.39deg, #b81844 0%, #9e3cff 100%);
  z-index: -1;
  transition: 0.8s;
  border-radius: 0% 0% 50% 50% !important;
}

.hover3:hover::before {
  height: 200%;
}

.hover3:hover {
  color: #ffffff;
}

.hover3:active {
  filter: brightness(0.8);
}

/* form validation modal */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

#HeaderModal.active+.overlay,
#NewsletterModal.active+.overlay,
#ContactModal.active+.overlay,
#FeedbackModal.active+.overlay,
#ComingsoonModal.active+.overlay {
  display: block;
}

#HeaderModal,
#NewsletterModal,
#ContactModal,
#FeedbackModal,
#ComingsoonModal {
  display: none;
  position: fixed;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  z-index: 1000;
}

#HeaderModal.active,
#NewsletterModal.active,
#ContactModal.active,
#FeedbackModal.active,
#ComingsoonModal.active {
  display: block;
}

#HeaderModal div,
#NewsletterModal div,
#ContactModal div,
#FeedbackModal div,
#ComingsoonModal div {
  width: 350px;
  padding: 30px 0px;
  border-radius: 20px;
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
}

#HeaderModal figure,
#NewsletterModal figure,
#ContactModal figure,
#FeedbackModal figure,
#ComingsoonModal figure {
  width: fit-content;
}

#HeaderModal button,
#NewsletterModal button,
#ContactModal button,
#FeedbackModal button,
#ComingsoonModal button {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: #ffffff;
  z-index: 1;
  border-radius: 15px;
  transition: ease all 0.3s;
  text-align: center;
  box-shadow: 0px 0px 13px 3px #b818444d inset;
  padding: 15px 25px;
  background-color: #161326;
}

#HeaderModal button::before,
#NewsletterModal button::before,
#ContactModal button::before,
#FeedbackModal button::before,
#ComingsoonModal button::before {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 0px;
  background: linear-gradient(-135.39deg, #b81844 0%, #9e3cff 100%);
  z-index: -1;
  transition: 0.8s;
  border-radius: 50% 50% 0% 0% !important;
}

#HeaderModal button:hover::before,
#NewsletterModal button:hover::before,
#ContactModal button:hover::before,
#FeedbackModal button:hover::before,
#ComingsoonModal button:hover::before {
  height: 200%;
}

#HeaderModal button:hover,
#NewsletterModal button:hover,
#ContactModal button:hover,
#FeedbackModal button:hover,
#ComingsoonModal button:hover {
  color: #ffffff;
}

.hover1:active {
  filter: brightness(0.8);
}

/* #endregion */
/* ===== End of 02. Global Style ===== */

/* #region ======== 1.1. Header section ======== */
.nav-logo img {
  width: 110px;
}

nav a {
  font-size: 16px;
}

header .flex-row-reverse {
  width: 100%;
}

.navbar a,
header .lh-base:focus {
  color: #ffffff;
}

.navbar a:hover,
.navbar a.active {
  color: hsl(var(--white));
  transition: all 0.3s ease-in;
}

header .dropdown .nav-link {
  cursor: pointer;
}

header .dropdown ul {
  width: 200px;
}

header .dropdown-menu {
  padding: 20px 10px;
  background: #150c23;
  overflow: hidden;
  transition: all 0.3s ease-in;
  visibility: hidden;
  border-radius: 10px;
}

header .dropdown ul li a:focus,
header .dropdown ul li a:hover,
header .dropdown ul li a.active {
  background-color: transparent;
  color: #b81844;
}

header .search i {
  font-size: 20px;
  color: #ffffff;
  padding: 0px 0px 0px 12px;
}

header .modal {
  display: none;
  z-index: 1000;
  right: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(7px);
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

header .searchModal .close-btn {
  top: 20px;
  left: 30px;
  background: none;
  color: #ffffff;
  font-size: 50px;
  padding: 0px;
}

header .searchModal .position-relative {
  transform: translateY(-400%);
  transition: transform 0.7s ease-in-out;
}

header .modal.show .position-relative {
  transform: translateY(0);
}

header .searchModal input::placeholder {
  color: #ffffff;
}

header .searchModal input {
  padding: 20px;
  outline: none;
  background: #150c2380;
  color: #ffffff;
  border: 1px solid #b81844;
  border-radius: 10px;
}

header .close-btn:hover,
header .search-btn:hover i {
  color: #b81844;
}

header .search-btn {
  border: none;
  background: none;
  padding: 0px;
  top: 20px;
  left: 20px;
}

header .search-btn i {
  color: #ffffff;
}

header .menu-icon {
  background: transparent;
  border-radius: 50%;
  height: 36px;
  width: 38px;
  color: #ffffff;
  border: 1px solid #b81878;
  padding: 0px;
}

header .menu-icon:hover,
header .close-icon:hover {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  border: none;
}

header .menu-icon:hover i,
header .close-icon:hover i {
  transition: all 0.3s ease-in;
}

header .menu-icon i {
  font-size: 18px;
}


.menu-bar {
  left: -100%;
  top: 0px;
  z-index: 50;
  background: #161326;
  transition: left 0.8s ease;
  overflow-y: auto;
}

.menu-bar .overflow-hidden {
  padding: 1rem 0rem 8rem;
}

.menu-bar .col-lg-6 .flex-column:nth-child(1) {
  gap: 70px;
}

.menu-bar .p-0 img {
  width: 250px;
  padding: 10px 0px 0px;
}

.menu-bar.active {
  left: 0px;
}

.menu-bar .close-icon {
  width: 38px;
  height: 38px;
  font-size: 36px;
  padding: 0px;
  margin: 0px 10px 0px 0px;
  border: 1px solid #b81878;
  border-radius: 50%;
  color: #ffffff;
  background-color: transparent;
}

.menu-bar .close-icon i {
  font-size: 24px;
}

.menu-bar a {
  color: #ffffff;
  transition: all 0.3s ease-in;
}

.menu-bar .gap-sm-5 .justify-content-center {
  border: 1px solid #b81878;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  font-size: 16px;
  box-shadow: 0px 0px 13px 3px #b8184480 inset;
}

.menu-bar .dropdown-menu a {
  font-size: 16px;
}

.menu-bar .gap-sm-5 p {
  transition: all 0.3s ease-in;
}

.menu-bar ul li a:hover,
.menu-bar .gap-sm-5 a:hover p {
  color: #b81844;
}

.menu-bar .gap-sm-5 a:hover .justify-content-center {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  border: none;
}

.menu-bar hr {
  height: 3px;
  background-color: #ffffff;
}

.menu-bar form .d-flex {
  border: 1px solid #b81844;
  border-radius: 15px;
}

.menu-bar input[type="email"] {
  background-color: transparent;
  color: #ffffff;
  border: none;
  border-radius: 15px;
  padding: 25px 24px 21px 0px;
}

.menu-bar input[type="email"]::placeholder {
  color: #ffffff;
  font-size: 16px;
}

.menu-bar form button {
  background-color: #161326;
  color: #ffffff;
  border: 1px solid #b81844;
  border-radius: 15px;
  padding: 18px 36px;
  left: 0px;
  top: 0px;
}

.menu-bar .pt-sm-5 i {
  border: 1px solid #b81844;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  font-size: 16px;
  box-shadow: 0px 0px 13px 3px #b8184480 inset;
}

.menu-bar .justify-content-start i:hover {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  border: none;
}

.menu-bar .dropdown-menu {
  background: #161326;
  padding: 10px;
  z-index: 100;
}

.menu-bar .dropdown:hover .dropdown-menu,
.menu-bar .dropdown-menu.active {
  display: block;
}
/* #endregion */
/* ======== End of 1.1. Header section ======== */

/* #region ========= 1.2. Hero section ======== */
.hero::before {
  content: "";
  width: 108px;
  height: 108px;
  background: linear-gradient(-153.88deg, #b81844 12.65%, #6b122a 90.62%);
  top: 730px;
  left: 0px;
  position: absolute;
  clip-path: circle(50% at 100% 50%);
}

.hero .align-items-end .position-relative::before {
  content: "";
  width: 100%;
  height: 95%;
  background: linear-gradient(-135.39deg, #b81844 0%, #2d1157 100%);
  z-index: -1;
  border-radius: 50%;
  top: -47px;
  left: 0px;
  position: absolute;
}

.hero {
  padding: 76px 0px 0px;
}

.hero .m-auto {
  display: grid;
  grid-template-columns: repeat(3, 50%);
}

.hero h1 {
  padding: 0px 0px 20px 15px;
}

.hero p {
  padding: 0px 0px 39px 90px;
}

.hero .justify-content-sm-center {
  gap: 72px;
}

.hero .hover1 {
  border: 1px solid #b81878;
  padding: 17px 53px;
  color: #ffffff;
  background: #161326;
}

.hero button {
  background-color: transparent;
  color: #ffff;
}

.hero .p-0 span,
.hero .p-0 i {
  transition: all 0.6s ease;
}

.hero .fa-play {
  background-color: #b81844;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  position: relative;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 5px rgba(228, 42, 91, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(228, 42, 91, 0);
  }

  100% {
    box-shadow: 0 0 0 5px rgba(228, 42, 91, 0);
  }
}

.hero .modal-dialog {
  max-width: unset;
  width: 80%;
}

.hero .modal-content {
  background-color: transparent;
  backdrop-filter: unset;
}

.hero .modal-content button {
  opacity: 1;
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: -12px;
  z-index: 1;
}

.hero .modal-content i {
  color: #fff;
  visibility: visible;
  font-size: 28px;
  transition: color 0.3s ease;
}

.hero .modal-content button:hover i {
  color: #777777;
}

.hero .modal-body {
  width: 700px;
  margin: unset;
}

.hero iframe {
  border: none;
  width: 100%;
  height: 400px;
}

@keyframes slideFadeTwistEntrance {
  0% {
    transform: translateY(100vh) rotate(30deg);
    opacity: 0;
  }

  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

.hero .modal-content {
  animation: slideFadeTwistEntrance 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  padding: 0px;
}

.hero .p-0:hover span {
  color: #b81844;
  transition: all 0.3s ease;
}

.hero .p-0:hover i {
  color: #b81844;
  background-color: transparent;
  border: 1px solid #b81878;
  transition: all 0.3s ease;
}

.hero .gap-lg-3 {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  margin: 73px 0px 59px;
  padding: 24px 25px 40px;
  border-radius: 20px;
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}

.hero .align-items-end {
  grid-row: 1/3;
}

.hero .gap-lg-3 figure {
  width: fit-content;
}

.hero .flex-column h6 {
  padding: 16px 0px 0px;
}

.hero .flex-column p {
  padding: 5px 0px 0px 5px;
  font-size: 12px;
  text-align: start;
}

.hero hr {
  width: 1px;
  background: #ffffff;
  height: 146px;
  opacity: 1;
  margin: 0px;
}
/* #endregion */
/* ========= 1.2. End of Hero section ======== */

/* #region ========= 1.3. About Us section ======== */
.About {
  padding: 100px 0px;
}

.About img {
  border-radius: 20px;
  object-fit: cover;
}

.About h2 {
  padding: 23px 0px 18px;
}

.About p {
  padding: 0px 0px 40px 124px;
}

.About li i {
  font-size: 18px;
  color: #b81878;
  margin: 0px 0px 0px 28px;
}

.About .flex-sm-row {
  gap: 30px;
  padding: 50px 0px 0px;
}

.About a {
  color: #ffffff;
}

.About a i {
  border: 1px solid #ffffff;
  border-radius: 50%;
  padding: 10px 12px;
  transform: rotate(-45deg);
  transition: all 0.5s;
}

.About a.gap-3:hover i {
  color: #000000;
  background-color: #ffffff;
}

.About .hover1 {
  background-color: #161326;
  border: 1px solid #b81878;
  padding: 17px 53px;
}

.about-bg::before {
  width: 400px;
  height: 600px;
  top: 865px;
  right: -235px;
}

/* #endregion */
/* ========= 1.3. End of About Us section ======== */

/* #region ========= 1.4. Services section ======== */
.Services {
  padding: 0px 0px 100px;
}

.Services.mx-auto {
  padding: 100px 0px;
}

.Services .gap-lg-4 {
  padding: 0px 0px 50px;
}

.Services .align-items-lg-start {
  border: 1px solid #b81878;
  padding: 42px 35px 56px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.5s ease all;
}

.Services .m-auto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-template-rows: auto auto 65px;
}

.Services .m-auto .align-items-lg-start:nth-child(3) {
  grid-column: 1 / 2;
}

.Services .pt-md-3 {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}

.Services .m-0 {
  grid-column: 3 / 4;
  grid-row: 1 / 4;
}

.Services .align-items-lg-start h4 {
  padding: 25px 0px 10px;
}

.Services .align-items-lg-start p {
  padding: 0px 0px 30px 1px;
}

.Services .align-items-lg-start a {
  color: #ffffff;
}

.Services .align-items-lg-start i {
  border: 1px solid #ffffff;
  border-radius: 50%;
  padding: 8px 10px;
  transform: rotate(-45deg);
  transition: 0.5s ease all;
}

.Services .align-items-lg-start a:hover i {
  color: #000000;
  background-color: #ffffff;
}

.Services .align-items-lg-start:hover {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
}

.Services .hover1 {
  border: 1px solid #b81878;
  width: 100%;
  padding: 17px 0px;
}

.Services figure {
  width: fit-content;
  object-fit: cover;
}

.Services picture img {
  border-radius: 20px;
  object-fit: cover;
}
/* #endregion */
/* ========= 1.4. End of Services section ======== */

/* #region ========= 1.5. Choose Us section ======== */
.ChooseUs {
  padding: 0px 0px 100px;
}

.ChooseUs.mt-0 {
  padding: 100px 0px;
}

.ChooseUs img {
  border-radius: 20px;
  object-fit: cover;
}

.ChooseUs .align-items-md-start {
  gap: 20px;
  padding: 39px 0px;
}

.ChooseUs .align-items-md-start p {
  padding: 0px 0px 0px 100px;
}

.ChooseUs .flex-column {
  gap: 20px;
}

.ChooseUs a {
  color: #ffffff;
}

.ChooseUs .flex-column .hover3 {
  border: 1px solid #b81878;
  border-radius: 20px;
  padding: 30px 27px;
}

/* #endregion */
/* ========= 1.5. End of Choose US section ======== */

/* #region ========= 1.6. Achievement section ======== */
.Achievement {
  padding: 0px 0px 70px;
}

.Achievement.mx-auto {
  padding: 100px 0px 70px;
}

.Achievement.mt-0 {
  padding: 100px 0px 70px;
}

.Achievement h5 {
  width: max-content;
}

.Achievement .justify-content-center {
  padding: 0px 0px 59px;
}

.Achievement .justify-content-center hr {
  height: 2px;
  width: 36%;
  background-color: #ffffff;
  margin: 0px;
}

.Achievement h1 {
  font-size: 112px;
  color: transparent;
  -webkit-text-stroke: 2px #b81844;
  z-index: 1;
  margin: 0px;
  right: 50px;
}

.Achievement p {
  top: 41px;
  right: 212px;
  transform: translate(50%, -50%);
  z-index: 2;
}
/* #endregion */
/* ========= 1.6. End of Achievement section ======== */

/* #region ========= 1.7. Discover section ======== */
.Discover {
  background-image: url("../images/bg/discoverbg-1.html");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding: 119px 0px;
}

.Discover .d-flex {
  background-color: #161326cc;
  padding: 86px 0px 90px;
  border-radius: 20px;
}

.Discover h2 {
  padding: 0px 135px;
}

.Discover p {
  padding: 30px 192px 50px;
}

.Discover a {
  background-color: #161326;
  border: 1px solid #b81878;
  padding: 17px 53px;
}
/* #endregion */
/* ========= 1.7. End of Discover section ======== */

/* #region ========= 1.8. Pricing Plan section ======== */
.Plan {
  padding: 100px 0px;
  background-color: #211e34;
}

.Plan .gap-4 .flex-column:nth-child(-n + 2),
.Plan .col-md-6 .flex-column:nth-child(1) {
  padding: 49px 24px 50px;
  background-color: #161326;
  border-radius: 20px;
}

.Plan .align-items-baseline {
  padding: 15px 0px;
}

.Plan .flex-column p {
  padding: 0px 0px 30px 9px;
}

.Plan .flex-column a {
  background-color: #161326;
  padding: 15px 0px;
  border: 1px solid #b81878;
}

.Plan .flex-column .align-items-center {
  padding: 41px 0px 38px;
}

.Plan .flex-column hr {
  height: 2px;
  background-color: #ffffff;
  margin: 0px;
}

.Plan li i {
  font-size: 18px;
  color: #b81878;
  margin: 0px 0px 0px 28px;
  transition: all 0.4s ease;
}

.Plan .gap-4 .flex-column:nth-child(-n + 2):hover,
.Plan .col-md-6 .flex-column:nth-child(1):hover {
  background: linear-gradient(-135.39deg, #b81844 0%, #9e3cff 100%);
}

.Plan .gap-4 .flex-column:nth-child(-n + 2):hover li i,
.Plan .col-md-6 .flex-column:nth-child(1):hover li i {
  color: #ffffff;
}

.Plan h2 {
  padding: 25px 0px 20px 8px;
}

.Plan .pt-0 p {
  padding: 0px 0px 50px 50px;
}

.Plan .pt-0 a {
  padding: 17px 52px;
  border: 1px solid #b81878;
  background-color: #161326;
}
/* #endregion */
/* ========= 1.8. End of Pricing Plan section ======== */

/* ============================
    00.00 Css Variables
=============================== */
@import url("../../../../../cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
  /* Font Family */
  --heading-font: "ModamPro", serif;
  --body-font: "ModamPro", serif;
  /* ======= Theme Color Start ======== */
  --gradient: linear-gradient(90deg, #ffe552 0%, #adff33 100%);
  ;
  /* ======== Color Variables Start ========== */
  --white: 0 0% 100%;
  --body-color: 0 0% 80%;
  --heading-color: 230 100% 18%;
  --black: 0 0% 0%;
  --border-color: 0 0% 88%;
  --section-bg: 208 100% 97%;
  --background-color: #F8F8F8;
  /* =========== Box Shadow Start ============ */
  --header-box-shadow: 0px -1px 15px 3px hsl(var(--black) / 0.3);
  --mobile-box-shadow: 0px -1px 5px 0px hsl(var(--black) / 0.92);
  --box-shadow: 0px 2px 15px hsl(var(--black) / 0.05);
  /* =========== Bootstrap Modifier Start ============ */
  /* Primary Color */
  --primary-h: 84;
  --primary-s: 100%;
  --primary-l: 60%;
  --primary: var(--primary-h) var(--primary-s) var(--primary-l);
  --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1);
  --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2);
  --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3);
  --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4);
  --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5);
  --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1);
  --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2);
  --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3);
  --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4);
  --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5);
  /* Secondary Color */
  --secondary-h: 230;
  --secondary-s: 100%;
  --secondary-l: 18%;
  --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
  --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1);
  --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2);
  --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3);
  --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4);
  --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5);
  --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1);
  --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2);
  --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3);
  --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4);
  --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5);
  /* Success Color */
  --success-h: 145;
  --success-s: 63%;
  --success-l: 42%;
  --success: var(--success-h) var(--success-s) var(--success-l);
  --success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1);
  --success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2);
  --success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3);
  --success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4);
  --success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5);
  --success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1);
  --success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2);
  --success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3);
  --success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4);
  --success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5);
  /* Danger Color */
  --danger-h: 0;
  --danger-s: 96%;
  --danger-l: 63%;
  --danger: var(--danger-h) var(--danger-s) var(--danger-l);
  --danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1);
  --danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2);
  --danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3);
  --danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4);
  --danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5);
  --danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1);
  --danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2);
  --danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3);
  --danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4);
  --danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5);
  /* Warning Color */
  --warning-h: 45;
  --warning-s: 74%;
  --warning-l: 56%;
  --warning: var(--warning-h) var(--warning-s) var(--warning-l);
  --warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1);
  --warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2);
  --warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3);
  --warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4);
  --warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5);
  --warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1);
  --warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2);
  --warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3);
  --warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4);
  --warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5);
  /* Info Color */
  --info-h: 219;
  --info-s: 98%;
  --info-l: 43%;
  --info: var(--info-h) var(--info-s) var(--info-l);
  --info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1);
  --info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2);
  --info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3);
  --info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4);
  --info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5);
  --info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1);
  --info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2);
  --info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3);
  --info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4);
  --info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5);
  --error-h: 0;
  --error-s: 79%;
  --error-l: 63%;
  --error: var(--error-h) var(--error-s) var(--error-l);
  --error-d-100: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.1);
  --error-d-200: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.2);
  --error-d-300: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.3);
  --error-d-400: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.4);
  --error-d-500: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.5);
  --error-l-100: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.1);
  --error-l-200: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.2);
  --error-l-300: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.3);
  --error-l-400: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.4);
  --error-l-500: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.5);
  --black2-h: 0;
  --black2-s: 0%;
  --black2-l: 11%;
  --black2: var(--black2-h) var(--black2-s) var(--black2-l);
  --black2-d-100: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.1);
  --black2-d-200: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.2);
  --black2-d-300: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.3);
  --black2-d-400: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.4);
  --black2-d-500: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.5);
  --black2-l-100: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.1);
  --black2-l-200: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.2);
  --black2-l-300: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.3);
  --black2-l-400: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.4);
  --black2-l-500: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.5);
  --black3-h: 0;
  --black3-s: 0%;
  --black3-l: 16%;
  --black3: var(--black3-h) var(--black3-s) var(--black3-l);
  --black3-d-100: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.1);
  --black3-d-200: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.2);
  --black3-d-300: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.3);
  --black3-d-400: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.4);
  --black3-d-500: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.5);
  --black3-l-100: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.1);
  --black3-l-200: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.2);
  --black3-l-300: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.3);
  --black3-l-400: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.4);
  --black3-l-500: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.5);
  --gray-h: 0;
  --gray-s: 0%;
  --gray-l: 20%;
  --gray: var(--gray-h) var(--gray-s) var(--gray-l);
  --gray-d-100: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.1);
  --gray-d-200: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.2);
  --gray-d-300: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.3);
  --gray-d-400: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.4);
  --gray-d-500: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.5);
  --gray-l-100: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.1);
  --gray-l-200: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.2);
  --gray-l-300: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.3);
  --gray-l-400: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.4);
  --gray-l-500: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.5);
  --gray2-h: 0;
  --gray2-s: 0%;
  --gray2-l: 31%;
  --gray2: var(--gray2-h) var(--gray2-s) var(--gray2-l);
  --gray2-d-100: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.1);
  --gray2-d-200: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.2);
  --gray2-d-300: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.3);
  --gray2-d-400: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.4);
  --gray2-d-500: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.5);
  --gray2-l-100: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.1);
  --gray2-l-200: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.2);
  --gray2-l-300: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.3);
  --gray2-l-400: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.4);
  --gray2-l-500: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.5);
  --gray3-h: 0;
  --gray3-s: 0%;
  --gray3-l: 51%;
  --gray3: var(--gray3-h) var(--gray3-s) var(--gray3-l);
  --gray3-d-100: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.1);
  --gray3-d-200: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.2);
  --gray3-d-300: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.3);
  --gray3-d-400: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.4);
  --gray3-d-500: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.5);
  --gray3-l-100: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.1);
  --gray3-l-200: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.2);
  --gray3-l-300: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.3);
  --gray3-l-400: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.4);
  --gray3-l-500: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.5);
  --gray4-h: 0;
  --gray4-s: 0%;
  --gray4-l: 74%;
  --gray4: var(--gray4-h) var(--gray4-s) var(--gray4-l);
  --gray4-d-100: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.1);
  --gray4-d-200: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.2);
  --gray4-d-300: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.3);
  --gray4-d-400: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.4);
  --gray4-d-500: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.5);
  --gray4-l-100: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.1);
  --gray4-l-200: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.2);
  --gray4-l-300: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.3);
  --gray4-l-400: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.4);
  --gray4-l-500: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.5);
  --gray5-h: 0;
  --gray5-s: 0%;
  --gray5-l: 88%;
  --gray5: var(--gray5-h) var(--gray5-s) var(--gray5-l);
  --gray5-d-100: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.1);
  --gray5-d-200: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.2);
  --gray5-d-300: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.3);
  --gray5-d-400: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.4);
  --gray5-d-500: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.5);
  --gray5-l-100: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.1);
  --gray5-l-200: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.2);
  --gray5-l-300: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.3);
  --gray5-l-400: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.4);
  --gray5-l-500: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.5);
  --paragraph-h: 0;
  --paragraph-s: 0%;
  --paragraph-l: 51%;
  --paragraph: var(--paragraph-h) var(--paragraph-s) var(--paragraph-l);
  --paragraph-d-100: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.1);
  --paragraph-d-200: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.2);
  --paragraph-d-300: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.3);
  --paragraph-d-400: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.4);
  --paragraph-d-500: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.5);
  --paragraph-l-100: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.1);
  --paragraph-l-200: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.2);
  --paragraph-l-300: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.3);
  --paragraph-l-400: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.4);
  --paragraph-l-500: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.5);
  --two-header-color-h: 203;
  --two-header-color-s: 51%;
  --two-header-color-l: 16%;
  --two-header-color: var(--two-header-color-h) var(--two-header-color-s) var(--two-header-color-l);
  --two-header-color-d-100: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.1);
  --two-header-color-d-200: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.2);
  --two-header-color-d-300: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.3);
  --two-header-color-d-400: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.4);
  --two-header-color-d-500: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.5);
  --two-header-color-l-100: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.1);
  --two-header-color-l-200: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.2);
  --two-header-color-l-300: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.3);
  --two-header-color-l-400: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.4);
  --two-header-color-l-500: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.5);
  --two-section-h: 203;
  --two-section-s: 73%;
  --two-section-l: 12%;
  --two-section: var(--two-section-h) var(--two-section-s) var(--two-section-l);
  --two-section-d-100: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.1);
  --two-section-d-200: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.2);
  --two-section-d-300: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.3);
  --two-section-d-400: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.4);
  --two-section-d-500: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.5);
  --two-section-l-100: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.1);
  --two-section-l-200: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.2);
  --two-section-l-300: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.3);
  --two-section-l-400: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.4);
  --two-section-l-500: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.5);
}

.primary-text {
  color: hsl(var(--primary));
}

.secondary-text {
  color: hsl(var(--secondary));
}

.info-text {
  color: hsl(var(--info));
}

.warning-text {
  color: hsl(var(--warning));
}

.error-text {
  color: hsl(var(--error));
}

.black-text {
  color: hsl(var(--black));
}

.white-text {
  color: hsl(var(--white));
}

.gray-text {
  color: hsl(var(--gray));
}

.gray3-text {
  color: hsl(var(--gray3));
}

/* ============================
    00.01 Font Size css
=============================== */
.fs-10 {
  font-size: 0.5rem;
}

.fs-11 {
  font-size: 0.563rem;
}

.fs-12 {
  font-size: 0.625rem;
}

.fs-13 {
  font-size: 0.688rem;
}

.fs-14 {
  font-size: 0.75rem;
}

.fs-15 {
  font-size: 0.813rem;
}

.fs-16 {
  font-size: 0.875rem;
}

@media screen and (max-width: 1199px) {
  .fs-16 {
    font-size: 0.813rem;
  }
}

.fs-17 {
  font-size: 0.938rem;
}

@media screen and (max-width: 1199px) {
  .fs-17 {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-17 {
    font-size: 0.813rem;
  }
}

.fs-18 {
  font-size: 1rem;
}

@media screen and (max-width: 1399px) {
  .fs-18 {
    font-size: 0.938rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-18 {
    font-size: 0.875rem;
  }
}

.fs-19 {
  font-size: 1.063rem;
}

@media screen and (max-width: 1399px) {
  .fs-19 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-19 {
    font-size: 0.938rem;
  }
}

.fs-20 {
  font-size: 1.125rem;
}

@media screen and (max-width: 1399px) {
  .fs-20 {
    font-size: 1.063rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-20 {
    font-size: 1rem;
  }
}

.fs-21 {
  font-size: 1.188rem;
}

@media screen and (max-width: 1399px) {
  .fs-21 {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-21 {
    font-size: 1.063rem;
  }
}

.fs-22 {
  font-size: 1.25rem;
}

@media screen and (max-width: 1399px) {
  .fs-22 {
    font-size: 1.188rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-22 {
    font-size: 1.125rem;
  }
}

.fs-23 {
  font-size: 1.313rem;
}

@media screen and (max-width: 1399px) {
  .fs-23 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-23 {
    font-size: 1.188rem;
  }
}

.fs-24 {
  font-size: 1.375rem;
}

@media screen and (max-width: 1399px) {
  .fs-24 {
    font-size: 1.313rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-24 {
    font-size: 1.25rem;
  }
}

.fs-25 {
  font-size: 1.438rem;
}

@media screen and (max-width: 1399px) {
  .fs-25 {
    font-size: 1.375rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-25 {
    font-size: 1.313rem;
  }
}

.fs-26 {
  font-size: 1.5rem;
}

@media screen and (max-width: 1399px) {
  .fs-26 {
    font-size: 1.438rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-26 {
    font-size: 1.375rem;
  }
}

.fs-27 {
  font-size: 1.563rem;
}

@media screen and (max-width: 1399px) {
  .fs-27 {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-27 {
    font-size: 1.438rem;
  }
}

.fs-28 {
  font-size: 1.625rem;
}

@media screen and (max-width: 1399px) {
  .fs-28 {
    font-size: 1.563rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-28 {
    font-size: 1.5rem;
  }
}

.fs-29 {
  font-size: 1.688rem;
}

@media screen and (max-width: 1399px) {
  .fs-29 {
    font-size: 1.625rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-29 {
    font-size: 1.563rem;
  }
}

.fs-30 {
  font-size: 1.75rem;
}

@media screen and (max-width: 1399px) {
  .fs-30 {
    font-size: 1.688rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-30 {
    font-size: 1.625rem;
  }
}

.fs-31 {
  font-size: 1.813rem;
}

@media screen and (max-width: 1399px) {
  .fs-31 {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-31 {
    font-size: 1.688rem;
  }
}

.fs-32 {
  font-size: 1.875rem;
}

@media screen and (max-width: 1399px) {
  .fs-32 {
    font-size: 1.813rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-32 {
    font-size: 1.75rem;
  }
}

.fs-33 {
  font-size: 1.938rem;
}

@media screen and (max-width: 1399px) {
  .fs-33 {
    font-size: 1.875rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-33 {
    font-size: 1.813rem;
  }
}

.fs-34 {
  font-size: 2rem;
}

@media screen and (max-width: 1399px) {
  .fs-34 {
    font-size: 1.938rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-34 {
    font-size: 1.875rem;
  }
}

.fs-35 {
  font-size: 2.063rem;
}

@media screen and (max-width: 1399px) {
  .fs-35 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-35 {
    font-size: 1.938rem;
  }
}

.fs-36 {
  font-size: 2.125rem;
}

@media screen and (max-width: 1399px) {
  .fs-36 {
    font-size: 2.063rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-36 {
    font-size: 2rem;
  }
}

.fs-37 {
  font-size: 2.188rem;
}

@media screen and (max-width: 1399px) {
  .fs-37 {
    font-size: 2.125rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-37 {
    font-size: 2.063rem;
  }
}

.fs-38 {
  font-size: 2.25rem;
}

@media screen and (max-width: 1399px) {
  .fs-38 {
    font-size: 2.188rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-38 {
    font-size: 2.125rem;
  }
}

.fs-39 {
  font-size: 2.313rem;
}

@media screen and (max-width: 1399px) {
  .fs-39 {
    font-size: 2.25rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-39 {
    font-size: 2.188rem;
  }
}

.fs-40 {
  font-size: 2.375rem;
}

@media screen and (max-width: 1399px) {
  .fs-40 {
    font-size: 2.313rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-40 {
    font-size: 2.25rem;
  }
}

.fs-41 {
  font-size: 2.438rem;
}

@media screen and (max-width: 1399px) {
  .fs-41 {
    font-size: 2.375rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-41 {
    font-size: 2.313rem;
  }
}

.fs-42 {
  font-size: 2.5rem;
}

@media screen and (max-width: 1399px) {
  .fs-42 {
    font-size: 2.438rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-42 {
    font-size: 2.375rem;
  }
}

.fs-43 {
  font-size: 2.563rem;
}

@media screen and (max-width: 1399px) {
  .fs-43 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-43 {
    font-size: 2.438rem;
  }
}

.fs-44 {
  font-size: 2.625rem;
}

@media screen and (max-width: 1399px) {
  .fs-44 {
    font-size: 2.563rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-44 {
    font-size: 2.5rem;
  }
}

.fs-45 {
  font-size: 2.688rem;
}

@media screen and (max-width: 1399px) {
  .fs-45 {
    font-size: 2.625rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-45 {
    font-size: 2.563rem;
  }
}

.fs-46 {
  font-size: 2.75rem;
}

@media screen and (max-width: 1399px) {
  .fs-46 {
    font-size: 2.688rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-46 {
    font-size: 2.625rem;
  }
}

.fs-47 {
  font-size: 2.813rem;
}

@media screen and (max-width: 1399px) {
  .fs-47 {
    font-size: 2.75rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-47 {
    font-size: 2.688rem;
  }
}

.fs-48 {
  font-size: 2.875rem;
}

@media screen and (max-width: 1399px) {
  .fs-48 {
    font-size: 2.813rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-48 {
    font-size: 2.75rem;
  }
}

.fs-49 {
  font-size: 2.938rem;
}

@media screen and (max-width: 1399px) {
  .fs-49 {
    font-size: 2.875rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-49 {
    font-size: 2.813rem;
  }
}

.fs-50 {
  font-size: 3rem;
}

@media screen and (max-width: 1399px) {
  .fs-50 {
    font-size: 2.938rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-50 {
    font-size: 2.875rem;
  }
}

.fs-51 {
  font-size: 3.063rem;
}

@media screen and (max-width: 1399px) {
  .fs-51 {
    font-size: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-51 {
    font-size: 2.938rem;
  }
}

.fs-52 {
  font-size: 3.125rem;
}

@media screen and (max-width: 1399px) {
  .fs-52 {
    font-size: 3.063rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-52 {
    font-size: 3rem;
  }
}

.fs-53 {
  font-size: 3.188rem;
}

@media screen and (max-width: 1399px) {
  .fs-53 {
    font-size: 3.125rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-53 {
    font-size: 3.063rem;
  }
}

.fs-54 {
  font-size: 3.25rem;
}

@media screen and (max-width: 1399px) {
  .fs-54 {
    font-size: 3.188rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-54 {
    font-size: 3.125rem;
  }
}

.fs-55 {
  font-size: 3.313rem;
}

@media screen and (max-width: 1399px) {
  .fs-55 {
    font-size: 3.25rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-55 {
    font-size: 3.188rem;
  }
}

.fs-56 {
  font-size: 3.375rem;
}

@media screen and (max-width: 1399px) {
  .fs-56 {
    font-size: 3.313rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-56 {
    font-size: 3.25rem;
  }
}

.fs-57 {
  font-size: 3.438rem;
}

@media screen and (max-width: 1399px) {
  .fs-57 {
    font-size: 3.375rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-57 {
    font-size: 3.313rem;
  }
}

.fs-58 {
  font-size: 3.5rem;
}

@media screen and (max-width: 1399px) {
  .fs-58 {
    font-size: 3.438rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-58 {
    font-size: 3.375rem;
  }
}

.fs-59 {
  font-size: 3.563rem;
}

@media screen and (max-width: 1399px) {
  .fs-59 {
    font-size: 3.5rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-59 {
    font-size: 3.438rem;
  }
}

.fs-60 {
  font-size: 3.625rem;
}

@media screen and (max-width: 1399px) {
  .fs-60 {
    font-size: 3.563rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-60 {
    font-size: 3.5rem;
  }
}

.container {
  max-width: 1320px;
}

.btn-magnetic {
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.35s;
  cursor: pointer;
  border: 2px solid hsl(var(--white)/0.2);
  font-size: 1rem;
  font-weight: 700;
  display: inline-block;
  color: hsl(var(--white));
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  .btn-magnetic {
    font-size: 0.875rem;
    padding: 10px 20px;
  }
}

.btn-magnetic:hover,
.btn-magnetic:focus {
  color: hsl(var(--white));
  border-color: hsl(var(--primary));
}

.btn-magnetic:hover i,
.btn-magnetic:focus i {
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}

.btn-magnetic:hover span,
.btn-magnetic:focus span {
  width: 225%;
  height: 225%;
}

.btn-magnetic i {
  font-size: 1.125rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-magnetic span {
  position: absolute;
  width: 0;
  height: 0;
  background-color: hsl(var(--primary));
  -webkit-transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  z-index: -1;
  border-radius: 10px;
}

.custom_anime_top {
  -webkit-animation: anime-top 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  animation: anime-top 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

@-webkit-keyframes anime-top {
  0% {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%);
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes anime-top {
  0% {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%);
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.btn {
  color: hsl(var(--white));
  font-weight: 600;
  padding: 15px 24px;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  font-family: var(--body-font);
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  font-size: 1rem;
  line-height: 1;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-align: center;

  i {
    font-size: 1.3rem;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    line-height: 0;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
  }
}

@media screen and (max-width: 1199px) {
  .btn {
    font-size: 0.9375rem;
  }
}

@media screen and (max-width: 991px) {
  .btn {
    font-size: 0.875rem;
  }
}

.btn svg,
.btn img {
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: auto;
  left: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: var(--gradient);
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .btn {
    padding: 16px 25px;
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 767px) and (max-width: 1199px) {
  .btn {
    font-size: 0.8125rem;
  }
}

@media screen and (max-width: 575px) {
  .btn {
    padding: 15px 20px;

    i {
      font-size: 1.1rem;
    }
  }
}

.btn:hover,
.btn:focus,
.btn:focus-visible {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  color: hsl(var(--black));
  -webkit-text-fill-color: hsl(var(--black));

  i {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

.btn:hover::before,
.btn:focus::before,
.btn:focus-visible::before {
  width: 100%;
  right: 0;
  left: auto;
}

.btn:hover img,
.btn:focus img,
.btn:focus-visible img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.btn:active {
  top: 1px;
}

.btn--base {
  color: hsl(var(--black));
}

.btn--base {
  position: relative;
}

.btn--base::before,
.btn--base::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: -webkit-gradient(linear, right top, left top, from(#adff33), to(#ffe552));
  background: -o-linear-gradient(right, #adff33 0%, #ffe552 100%);
  background: linear-gradient(-90deg, #adff33 0%, #ffe552 100%);
  border-radius: inherit !important;
  z-index: -1;
  -webkit-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
}

.btn--base::after {
  background: -webkit-gradient(linear, right top, left top, from(#ffe552), to(#adff33));
  background: -o-linear-gradient(right, #ffe552 0%, #adff33 100%);
  background: linear-gradient(-90deg, #ffe552 0%, #adff33 100%);
  visibility: hidden;
  opacity: 0;
}

.btn--base:hover::after,
.btn--base:focus::after,
.btn--base:focus-visible::after {
  visibility: visible;
  opacity: 1;
}

.btn--border {
  text-transform: capitalize;
}

.btn--border::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.0625rem;
  background: var(--gradient);
  border-radius: inherit;
  --m: conic-gradient(#000 0 0);
  -webkit-mask: var(--m) content-box, var(--m);
  -webkit-mask-composite: xor;
  mask: var(--m) content-box exclude, var(--m);
}


/* ================================= Common Typography Css Start =========================== */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  color: hsl(var(--body-color));
  word-break: break-word;
  background-color: #070e06;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

p {
  font-size: 0.875rem;
  font-weight: 200;
  margin: 0;
  color: hsl(var(--body-color));
}

span {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px 0;
  font-family: var(--heading-font);
  color: hsl(var(--white));
  line-height: 1.3;
  font-weight: 700;
}

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

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

h1 {
  font-size: 3.75rem;
}

@media screen and (max-width: 1399px) {
  h1 {
    font-size: 3.125rem;
  }
}

@media screen and (max-width: 1199px) {
  h1 {
    font-size: 2.8125rem;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 2.1875rem;
  }
}

@media screen and (max-width: 575px) {
  h1 {
    font-size: 1.875rem;
  }
}

h2 {
  font-size: 2.5rem;
}

@media screen and (max-width: 1399px) {
  h2 {
    font-size: 2.8125rem;
  }
}

@media screen and (max-width: 1199px) {
  h2 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 991px) {
  h2 {
    font-size: 2.1875rem;
  }
}

@media screen and (max-width: 767px) {
  h2 {
    font-size: 1.875rem;
  }
}

@media screen and (max-width: 575px) {
  h2 {
    font-size: 1.5625rem;
  }
}

h3 {
  font-size: 1.875rem;
}

@media screen and (max-width: 1399px) {
  h3 {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 1199px) {
  h3 {
    font-size: 1.5625rem;
  }
}

@media screen and (max-width: 991px) {
  h3 {
    font-size: 1.4375rem;
  }
}

@media screen and (max-width: 767px) {
  h3 {
    font-size: 1.375rem;
  }
}

@media screen and (max-width: 575px) {
  h3 {
    font-size: 1.25rem;
  }
}

h4 {
  font-size: 1.5rem;
}

@media screen and (max-width: 1399px) {
  h4 {
    font-size: 1.3125rem;
  }
}

@media screen and (max-width: 1199px) {
  h4 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 991px) {
  h4 {
    font-size: 1.1875rem;
  }
}

@media screen and (max-width: 767px) {
  h4 {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 575px) {
  h4 {
    font-size: 1.0625rem;
  }
}

h5 {
  font-size: 1.25rem;
}

@media screen and (max-width: 1399px) {
  h5 {
    font-size: 1.1875rem;
  }
}

@media screen and (max-width: 1199px) {
  h5 {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 991px) {
  h5 {
    font-size: 1.0625rem;
  }
}

@media screen and (max-width: 767px) {
  h5 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 575px) {
  h5 {
    font-size: 1rem;
  }
}

h6 {
  font-size: 1rem;
}

@media screen and (max-width: 1399px) {
  h6 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 1199px) {
  h6 {
    font-size: 0.9375rem;
  }
}

@media screen and (max-width: 991px) {
  h6 {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 767px) {
  h6 {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 575px) {
  h6 {
    font-size: 0.875rem;
  }
}

h1>a,
h2>a,
h3>a,
h4>a,
h5>a,
h6>a {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
  line-height: inherit;
}

a {
  display: inline-block;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
  text-decoration: none;
  color: hsl(var(--info));
}

a:hover {
  color: #adff33;
}

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

select {
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

button {
  border: 0;
  background-color: transparent;
}

button:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-select:focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.dashboard-body h1,
.dashboard-body h2,
.dashboard-body h3,
.dashboard-body h4,
.dashboard-body h5,
.dashboard-body h6 {
  font-family: var(--body-font);
}

/* ================================= Common Typography Css End =========================== */
/* ============================
    01.02 reset css 
=============================== */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

button,
a {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
}

img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    -webkit-transition: none;
    transition: none;
  }
}

html {
  scroll-behavior: smooth;
}

body,
html {
  height: 100%;
  scroll-behavior: smooth;
}

/* body::-webkit-scrollbar-track, html::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: hsl(var(--white));
}

body::-webkit-scrollbar, html::-webkit-scrollbar {
    width: 8px;
    background-color: hsl(var(--white));
}

body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb {
    background-color: hsl(var(--primary));
    border-radius: 0px;
} */

.disabled-link {
  pointer-events: none;
  opacity: 0.5;
  /* Optional: visually indicate it's disabled */
}

/* ================================= Background Color Css Start =========================== */
.bg--base {
  background-color: #adff33 !important;
}

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

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

.bg--success {
  background-color: hsl(var(--success)) !important;
}

.bg--danger {
  background-color: hsl(var(--danger)) !important;
}

.bg--warning {
  background-color: hsl(var(--warning)) !important;
}

.bg--info {
  background-color: hsl(var(--info)) !important;
}

/* ================================= Background Color Css End =========================== */
/* ================================= Color Css Start =========================== */
.text--base {
  color: #adff33 !important;
}

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

.text--secondary {
  color: hsl(var(--secondary)) !important;
}

.text--success {
  color: hsl(var(--success)) !important;
}

.text--danger {
  color: hsl(var(--danger)) !important;
}

.text--warning {
  color: hsl(var(--warning)) !important;
}

.text--info {
  color: hsl(var(--info)) !important;
}

/* ================================= Color Css End =========================== */
/* ================================= margin Css Start =========================== */
.my-120 {
  margin-top: 60px;
  margin-bottom: 60px;
}

@media (min-width: 576px) {
  .my-120 {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}

@media (min-width: 992px) {
  .my-120 {
    margin-top: 120px;
    margin-bottom: 120px;
  }
}

.mt-120 {
  margin-top: 60px;
}

@media (min-width: 576px) {
  .mt-120 {
    margin-top: 80px;
  }
}

@media (min-width: 992px) {
  .mt-120 {
    margin-top: 120px;
  }
}

.mb-120 {
  margin-bottom: 60px;
}

@media (min-width: 576px) {
  .mb-120 {
    margin-bottom: 80px;
  }
}

@media (min-width: 992px) {
  .mb-120 {
    margin-bottom: 120px;
  }
}

.my-60 {
  margin-top: 30px;
  margin-bottom: 30px;
}

@media (min-width: 576px) {
  .my-60 {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .my-60 {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

.mt-60 {
  margin-top: 30px;
}

@media (min-width: 576px) {
  .mt-60 {
    margin-top: 40px;
  }
}

@media (min-width: 992px) {
  .mt-60 {
    margin-top: 60px;
  }
}

.mb-60 {
  margin-bottom: 30px;
}

@media (min-width: 576px) {
  .mb-60 {
    margin-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .mb-60 {
    margin-bottom: 60px;
  }
}

/* ================================= margin Css End =========================== */
/* ================================= padding Css Start =========================== */
.py-120 {
  padding-top: 60px;
  padding-bottom: 60px;
}

@media (min-width: 576px) {
  .py-120 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 992px) {
  .py-120 {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.pt-120 {
  padding-top: 60px;
}

@media (min-width: 576px) {
  .pt-120 {
    padding-top: 80px;
  }
}

@media (min-width: 992px) {
  .pt-120 {
    padding-top: 120px;
  }
}

.pb-120 {
  padding-bottom: 60px;
}

@media (min-width: 576px) {
  .pb-120 {
    padding-bottom: 80px;
  }
}

@media (min-width: 992px) {
  .pb-120 {
    padding-bottom: 120px;
  }
}

.py-60 {
  padding-top: 30px;
  padding-bottom: 30px;
}

@media (min-width: 576px) {
  .py-60 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.pt-60 {
  padding-top: 30px;
}

@media (min-width: 576px) {
  .pt-60 {
    padding-top: 40px;
  }
}

@media (min-width: 992px) {
  .pt-60 {
    padding-top: 60px;
  }
}

.pb-60 {
  padding-bottom: 30px;
}

@media (min-width: 576px) {
  .pb-60 {
    padding-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .pb-60 {
    padding-bottom: 60px;
  }
}

/* ================================= padding Css End =========================== */
/* ================================= Border Color Css Start =========================== */
.border--base {
  border-color: #adff33 !important;
}

.border--primary {
  border-color: hsl(var(--primary)) !important;
}

.border--secondary {
  border-color: hsl(var(--secondary)) !important;
}

.border--success {
  border-color: hsl(var(--success)) !important;
}

.border--danger {
  border-color: hsl(var(--danger)) !important;
}

.border--warning {
  border-color: hsl(var(--warning)) !important;
}

.border--info {
  border-color: hsl(var(--info)) !important;
}

/* ================================= Border Color Css End =========================== */
/* Style the cursor elements */
.cursor,
.cursor-trail {
  position: fixed;
  top: 0;
  right: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  z-index: 1000;
}

.cursor {
  width: 4px;
  height: 4px;
  background-color: hsl(var(--secondary));
}

.cursor-trail {
  width: 35px;
  height: 35px;
  background-color: rgba(0, 15, 92, 0.3);
}

/* ================================= preload Css End ===========================  */
/* Preloader container styling */
#preloader {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-color: hsl(var(--black)/0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Logo animation styling */
#preloader img {
  width: 100px;
  /* Adjust size as needed */
  -webkit-animation: pulse 1.5s ease-in-out infinite, fade 1.5s ease-in-out infinite alternate;
  animation: pulse 1.5s ease-in-out infinite, fade 1.5s ease-in-out infinite alternate;
}

/* Scale (pulse) animation */
@-webkit-keyframes pulse {

  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /* Adjust scale intensity */
  }
}

@keyframes pulse {

  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /* Adjust scale intensity */
  }
}

/* Fade effect */
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
    /* Adjust fade intensity */
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
    /* Adjust fade intensity */
  }
}

.dm-navbar {
  position: absolute;
  width: 100%;
  right: 0;
  left: 0;
  padding: 20px 0;
  z-index: 99;
}

.dm-navbar.sticky {
  background: hsl(var(--black)/0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.dm-navbar .navbar-nav {
  gap: 20px;
}

.dm-navbar a,
.dm-navbar .nav-link {
  color: hsl(var(--white));
  font-size: 1rem;
  font-weight: 500;
  padding: 0 10px;
}

.dm-navbar a.active,
.dm-navbar .nav-link.active {
  color: hsl(var(--primary));
}

.dm-navbar .btn-magnetic {
  padding: 10px 20px;
}

@media screen and (max-width: 424px) {
  .dm-navbar .btn-magnetic {
    padding: 7px 10px;
  }
}

@media screen and (max-width: 424px) {
  .dm-navbar .navbar-brand {
    margin-left: 0;
    width: 144px;
  }

  .dm-navbar .navbar-brand img {
    width: 100%;
  }
}

.footer-content {
  position: relative;
  overflow: hidden;
}

.footer-content .parallax-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/footer/footer.jpg");
  background-size: cover;
  background-position: center;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  z-index: -1;
}

.footer-content .parallax-bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(var(--black)/0.7);
  z-index: -1;
  backdrop-filter: blur(2px);
}

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

.footer-content__text img {
  background: hsl(var(--black));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 20px;
  border-radius: 100%;
  width: 100px;
}

.footer-content__text h2 {
  font-size: 3.625rem;
  color: hsl(var(--white));
  margin-top: 15px;
}

.footer-content__text h2 strong {
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 767px) {
  .footer-content__text h2 {
    font-size: 2.375rem;
    margin-top: 25px;
  }
}

.footer-content__text p {
  font-size: 1.125rem;
  color: hsl(var(--white));
  font-weight: 400;
  max-width: 500px;
  margin: 20px auto 30px;
}

@media screen and (max-width: 767px) {
  .footer-content__text p {
    font-size: 0.875rem;
  }
}

/* ===================== Scroll to Top Start ================================= */
.scroll-top {
  position: fixed;
  left: 30px;
  bottom: 30px;
  color: hsl(var(--white));
  width: 48px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 50%;
  z-index: 5;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
  -webkit-transform: scale(0);
  transform: scale(0);
  background-color: #adff33;
}

.scroll-top:hover {
  color: hsl(var(--white));
  background-color: hsl(var(--base-d-100));
}

.scroll-top.show {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* ===================== Scroll to Top End ================================= */
.dm-banner {
  position: relative;
  overflow: hidden;
  padding: 180px 0 80px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 575px) {
  .dm-banner {
    padding: 110px 0 80px;
  }
}

.dm-banner .parallax-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/banner/banner-bg.jpg");
  background-size: cover;
  background-position: center;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  z-index: -1;
}

.dm-banner .parallax-bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(var(--black)/0.7);
  z-index: -1;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

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

.dm-banner__title h2 {
  font-size: 3.625rem;
  font-weight: 700;
  color: hsl(var(--white));
}

@media screen and (max-width: 991px) {
  .dm-banner__title h2 {
    font-size: 2.688rem;
  }
}

@media screen and (max-width: 767px) {
  .dm-banner__title h2 {
    font-size: 2.063rem;
  }
}

@media screen and (max-width: 575px) {
  .dm-banner__title h2 {
    font-size: 1.625rem;
  }
}

@media screen and (max-width: 424px) {
  .dm-banner__title h2 {
    font-size: 1.313rem;
  }
}

.dm-banner__title p {
  font-size: 1.125rem;
  color: hsl(var(--white)/.8);
  font-weight: 400;
  max-width: 530px;
  margin: 30px auto 60px;
}

@media screen and (max-width: 767px) {
  .dm-banner__title p {
    font-size: 1rem;
    margin: 20px auto 30px;
  }
}

@media screen and (max-width: 575px) {
  .dm-banner__title p {
    font-size: 0.875rem;
  }
}

.dm-banner__title__btn .btn-magnetic:first-child {
  background: hsl(var(--white));
  color: hsl(var(--black));
}

.dm-banner__title__btn .btn-magnetic:first-child:hover {
  color: hsl(var(--white));
}

@media screen and (max-width: 374px) {
  .dm-banner__title__btn .btn-magnetic {
    font-size: 0.75rem;
    padding: 8px 15px;
  }
}

.dm-banner__img {
  padding: 10px;
  background: #141b13;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.dm-banner__img img {
  width: 100%;
  border-radius: 10px;
}

.dm-banner .banner-center-img {
  margin-top: 100px;
}

@media screen and (max-width: 575px) {
  .dm-banner .banner-center-img {
    margin-top: 60px;
  }
}

@media screen and (max-width: 991px) {

  .dm-banner .banner-left,
  .dm-banner .banner-right {
    display: none;
  }
}

.page__title {
  text-align: center;
  position: relative;
}

.page__title .stok-title {
  font-family: 'arial';
  font-size: 150px;
  font-weight: 700;
  position: relative;
  line-height: 0.8;
  margin-bottom: -40px;
  z-index: -1;
  color: hsl(var(--white)/0.1);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px;
  z-index: 1;
}

@media screen and (max-width: 991px) {
  .page__title .stok-title {
    font-size: 80px;
    margin-bottom: -20px;
  }
}

.page__title h2 {
  font-size: 3.313rem;
  font-weight: 700;
  padding-bottom: 20px;
  text-transform: capitalize;
}

@media screen and (max-width: 991px) {
  .page__title h2 {
    font-size: 2.375rem;
  }
}

@media screen and (max-width: 767px) {
  .page__title h2 {
    font-size: 1.75rem;
    padding-bottom: 10px;
  }
}

@media screen and (max-width: 575px) {
  .page__title h2 {
    font-size: 1.438rem;
  }
}

.page__title p {
  font-size: 1.125rem;
  max-width: 650px;
  margin: 0 auto;
  color: hsl(var(--white)/.8);
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .page__title p {
    font-size: 0.875rem;
  }
}

.dm-pages__item {
  padding: 5px 5px 15px;
  background: #141b13;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 2px solid hsl(var(--secondary)/0.06);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.dm-pages__item:hover {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

.dm-pages__item:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.dm-pages__item:hover .view-btn {
  margin-bottom: 0;
}

.dm-pages__item__img {
  overflow: hidden;
  border: 1.5px solid hsl(var(--secondary)/0.05);
  border-radius: 10px;
  position: relative;
  &:hover{
    img{
      object-position: bottom center;
    }
  }
}

.dm-pages__item__img img { 
  transition: all 3.5s ease-in-out;
  width: 500px;
  height: 400px;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: top center;
}

.dm-pages__item .view-btn {
  background: var(--gradient);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: hsl(var(--black));
  padding: 10px 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  letter-spacing: 1px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  width: 100%;
  margin-bottom: -50px;
}

.dm-pages__item__btn {
  text-align: center;
  display: block;
  font-size: 1.3rem;
  color: hsl(var(--white));
  font-weight: 700;
  text-transform: capitalize;
  padding-top: 10px;
}

@media screen and (max-width: 767px) {
  .dm-pages__item__btn {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 575px) {
  .dm-pages__item__btn {
    font-size: 1rem;
  }
}

.dm-pages__item__btn:hover {
  color: hsl(var(--primary));
}

.dm-inner{
  background: #0c130b;
}

.dm-inner .dm-pages__item__btn {
  font-size: 1.125rem;
}

@media screen and (max-width: 767px) {
  .dm-inner .dm-pages__item__btn {
    font-size: 1rem;
  }
}

@media screen and (max-width: 575px) {
  .dm-inner .dm-pages__item__btn {
    font-size: 0.875rem;
  }
}
 

.looks-devices__content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .looks-devices__content {
    grid-template-columns: repeat(2, 1fr);
  }
}

.looks-devices__content__item {
  text-align: center;
  border-left: 1px solid hsl(var(--secondary)/0.1);
}

.looks-devices__content__item:last-child {
  border-left: 0;
}

@media screen and (max-width: 767px) {
  .looks-devices__content__item {
    padding: 30px 20px;
    border-top: 1px solid hsl(var(--secondary)/0.1);
  }

  .looks-devices__content__item:nth-child(1) {
    border-top: 0;
  }

  .looks-devices__content__item:nth-child(2) {
    border-left: 0;
    border-top: 0;
  }
}

@media screen and (max-width: 374px) {
  .looks-devices__content__item {
    padding: 25px 10px;
  }
}

.looks-devices__content__item i {
  font-size: 3.313rem;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 374px) {
  .looks-devices__content__item i {
    font-size: 2.375rem;
  }
}

.looks-devices__content__item h6 {
  font-size: 1.125rem;
  padding: 15px 0 5px;
}

@media screen and (max-width: 374px) {
  .looks-devices__content__item h6 {
    font-size: 1rem;
  }
}

.looks-devices__content__item p {
  font-weight: 400;
  color: hsl(var(--white)/.8);
}

@media screen and (max-width: 374px) {
  .looks-devices__content__item p {
    font-size: 0.75rem;
  }
}

.theme-features {
  background: #0c130b;
}

.theme-features__item {
  padding: 0 15px 35px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.theme-features__item::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 85%;
  background: #070e06;
  border: 2px dashed hsl(var(--white)/0.08);
  z-index: -1;
  border-radius: 10px;
}

@media screen and (max-width: 374px) {
  .theme-features__item {
    padding: 0 10px 30px;
  }
}

.theme-features__item .theme-features__icon {
  margin-top: 0px;
}

@media screen and (max-width: 374px) {
  .theme-features__item .theme-features__icon img {
    height: 40px;
  }
}

.theme-features__item h3 {
  font-size: 1.125rem;
  text-transform: capitalize;
  padding: 20px 0 10px;
  font-family: var(--body-font);
}

@media screen and (max-width: 374px) {
  .theme-features__item h3 {
    font-size: 0.813rem;
  }
}

.theme-features__item p {
  color: hsl(var(--white)/0.8);
  font-weight: 400;
  max-width: 220px;
  margin: 0 auto;
}

@media screen and (max-width: 374px) {
  .theme-features__item p {
    font-size: 0.688rem;
  }
}

#preloader {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: hsl(var(--black));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: height 0.5s, opacity 0.5s, border-radius 0.5s;
  -o-transition: height 0.5s, opacity 0.5s, border-radius 0.5s;
  transition: height 0.5s, opacity 0.5s, border-radius 0.5s;
}

#preloader #text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}

@media screen and (max-width: 767px) {
  #preloader #text {
    gap: 7px;
  }
}

#preloader #text p {
  color: hsl(var(--white));
  font-size: 3.625rem;
  font-weight: 800;
  margin: 0;
  opacity: 0;
  -webkit-animation: fadeIn 1.5s ease-in-out infinite;
  animation: fadeIn 1.5s ease-in-out infinite;
  font-family: var(--title-font);
}

@media screen and (max-width: 1199px) {
  #preloader #text p {
    font-size: 3.75rem;
  }
}

@media screen and (max-width: 991px) {
  #preloader #text p {
    font-size: 3.625rem;
  }
}

@media screen and (max-width: 575px) {
  #preloader #text p {
    font-size: 3.563rem;
  }
}

@media screen and (max-width: 767px) {
  #preloader #text p {
    font-size: 2.375rem;
  }
}

@media screen and (max-width: 767px) and (max-width: 1199px) {
  #preloader #text p {
    font-size: 2.438rem;
  }
}

@media screen and (max-width: 767px) and (max-width: 991px) {
  #preloader #text p {
    font-size: 2.375rem;
  }
}

@media screen and (max-width: 767px) and (max-width: 575px) {
  #preloader #text p {
    font-size: 2.313rem;
  }
}

#preloader #text p.active {
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#preloader #text p:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

#preloader #text p:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#preloader #text p:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#preloader #text p:nth-child(4) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

#preloader #text p:nth-child(5) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

#preloader #text p:nth-child(6) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

#preloader #text p:nth-child(7) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

#preloader #text p:nth-child(8) {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

#preloader #text p:nth-child(9) {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

#preloader #text p:nth-child(10) {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* #region ========= 1.10. Blogs section ======== */
.Blogs.mx-auto {
  padding: 100px 0px;
}

.Blogs .row .p-2 {
  border-radius: 20px;
  border: 1px solid #b81878;
}

.Blogs .h-100 div {
  padding: 35px 22px 54px;
}

.Blogs .h-100 h4 {
  padding: 20px 0px 20px 5px;
}

.Blogs .h-100 p {
  padding: 0px 0px 40px 52px;
}

.Blogs a {
  color: #ffffff;
  width: fit-content;
}

.Blogs a i {
  border: 1px solid #ffffff;
  border-radius: 50%;
  padding: 8px 10px;
  transform: rotate(-45deg);
  transition: 0.5s ease all;
}

.Blogs a:hover i {
  color: #000000;
  background-color: #ffffff;
}

.Blogs img {
  border-radius: 20px;
}

.Blogs .row .col-lg-6:nth-child(2) {
  display: flex;
  flex: 1;
}

.Blogs .gap-4 {
  flex: 1;
}

.Blogs .gap-4 img {
  object-fit: cover;
}

.Blogs .gap-4 p {
  padding: 0px 0px 24px;
}

.Blogs .flex-lg-row {
  gap: 20px;
}

.Blogs .w-lg-100 .h-100 {
  padding: 42px 25px;
  border-radius: 20px;
  border: 1px solid #b81878;
}

.Blogs .h-lg-100 h4 {
  padding: 10px 0px;
}

.Blogs .flex-sm-row .h-100:first-child h4 {
  padding: 10px 0px 10px 10px;
}

.Blogs .flex-sm-row p {
  padding: 0px 0px 30px;
}

.Blogs .col-lg-6 .p-2:first-child:hover,
.Blogs .w-lg-100 .h-100:hover {
  background: linear-gradient(-135.39deg, #b81844 0%, #9e3cff 100%);
}

.Blogs .row .col-lg-4:nth-last-child(1) h4 {
  padding: 0px 0px 0px 60px;
}

.Blogs .gap-sm-4 p {
  flex-grow: 1;
}
/* #endregion */
/* ========= End of 1.10. Blogs section ======== */

/* #region ========= 1.11. Partners section ======== */
.Partners {
  padding: 100px 0px;
}

.Partners .flex-column {
  gap: 30px;
}

.Partners .PartnersSlider1 .align-items-center,
.Partners .PartnersSlider2 .align-items-center {
  border: 1px solid #b81878;
  border-radius: 20px;
  height: 90px;
  width: 228px;
}

.Partners img[alt="partnerslogo1"] {
  width: 166px;
  height: 34px;
}

.Partners img[alt="partnerslogo2"] {
  width: 149px;
  height: 36px;
}

.Partners img[alt="partnerslogo3"] {
  width: 154px;
  height: 36px;
}

.Partners img[alt="partnerslogo4"] {
  width: 147px;
  height: 36px;
}

.Partners img[alt="partnerslogo5"] {
  width: 146px;
  height: 34px;
}

.Partners img[alt="partnerslogo6"] {
  width: 181px;
  height: 34px;
}

.Partners img[alt="partnerslogo7"] {
  width: 148px;
  height: 34px;
}

.Partners .slick-track {
  gap: 25px;
}
/* #endregion */
/* ========= 1.11. End of Partners section======== */

/* #region ========= 1.12. Newsletter section======== */
.Newsletter {
  background-image: url("../images/bg/newsletter-bg.html");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  padding: 66px 0px 0px;
}

.Newsletter .row h4 {
  padding: 23px 0px 21px;
}

.Newsletter .row p {
  padding: 0px 0px 42px 186px;
}

.Newsletter form .d-flex {
  border: 1px solid #b81844;
  border-radius: 15px;
  width: 80%;
}

.Newsletter input[type="email"] {
  background-color: transparent;
  color: #ffffff;
  border: none;
  border-radius: 15px;
  padding: 26px 24px 21px 0px;
}

.Newsletter input[type="email"]::placeholder {
  color: #ffffff;
  font-size: 16px;
}

.Newsletter button {
  background-color: #161326;
  border: 1px solid #b81844;
  padding: 18px 36px 19px;
  left: 0px;
  top: 0px;
}
/* #endregion */
/* ========= 1.12. End of Newsletter section======== */

/* #region ========= 1.13. Footer section======== */
footer::before {
  content: "";
  width: 946px;
  height: 913px;
  top: 100px;
  right: 25%;
  background: #b8184466;
  filter: blur(180px);
  border-radius: 50%;
  position: absolute;
  z-index: -1;
}

footer {
  padding: 70px 0px 40px;
}

footer figure {
  width: fit-content;
}

footer img {
  width: 150px;
}

footer .align-items-lg-start p {
  padding: 0px 0px 15px 60px;
}

footer .align-items-lg-start .gap-md-4 a {
  border: 1px solid #b81844;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0px 0px 13px 3px #b8184480 inset;
}

footer .align-items-lg-start .gap-md-4 a:hover {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  border: none;
}

footer .gap-3 .gap-2 .justify-content-center {
  border: 1px solid #b81878;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  font-size: 16px;
  box-shadow: 0px 0px 13px 3px #b8184480 inset;
}

footer li {
  width: max-content;
}

footer a {
  font-size: 16px;
}

footer ul li:hover a,
footer .gap-3 .gap-2:hover p {
  color: #b81844;
  transition: all 0.3s ease-in;
}

footer .gap-3 .gap-2:hover i {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  transition: all 0.3s ease-in;
  color: #ffffff;
  border: none;
}

footer hr {
  height: 3px !important;
  width: 95%;
  margin: 0px;
  background-color: #ffffff;
}
/* #endregion */
/* ========= 1.13. End of Footer section ======== */

/* #region ========= 2.2. Subpages-hero section ======== */
.Subpages-hero .bg::before {
  content: "";
  width: 2001px;
  height: 696px;
  top: 160px;
  right: -445px;
  border-radius: 45%;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.Subpages-hero {
  padding: 100px 0px;
}

.Subpages-hero p {
  padding: 0px 205px;
}

/* #endregion */
/* ========= End of 2.2. Subpages-hero section ======== */

/* #region ======== 2.4. States section ======== */
.States {
  padding: 0px 0px 100px;
}

.States .flex-sm-row .flex-column {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  border-radius: 20px;
  padding: 55px 21px;
  transition: all 0.4s ease-in-out;
}

.States figure {
  width: fit-content;
}

.States p {
  padding: 0px 20px;
}

.States .align-items-center:hover {
  transform: scale(1.06, 1.1);
}
/* #endregion */
/* ======== End of 2.4. States section ======== */

/* #region ======== 2.5. Vision section ======== */
.Vision {
  padding: 100px 0px;
  background: #211e34;
}

.Vision .gap-4 figure {
  width: fit-content;
  border-radius: 50%;
  padding: 24px;
  background: linear-gradient(-135.39deg, #b81844 0%, #9e3cff 100%);
}

.Vision .align-items-center p {
  padding: 0px 0px 0px 115px;
}

.Vision hr {
  height: 3px;
  margin: 60px 0px 70px;
}

.Vision .EmptyProgress {
  width: 100%;
  height: 10px;
  background-color: #161326;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
}

.Vision .FilledProgress {
  height: 100%;
  background: #b81844;
  width: 0%;
  border-radius: 10px;
}

.Vision .SkillProgress {
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  right: 0%;
}

.Vision .row .col-md-6:nth-child(2) img {
  border-radius: 20px;
}

/* #endregion */
/* ======== End of 2.5. Vision section ======== */

/* #region ======== 2.9. Our Team section ======== */
.Team.mx-auto {
  padding: 100px 0px;
}

.Team figure,
.Team .position-relative {
  width: fit-content;
  overflow: hidden;
  border-radius: 20px;
}

.Team img {
  border-radius: 20px;
}

.Team .position-relative::before {
  content: "";
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 2;
  border-radius: 20px;
  position: absolute;
  background: linear-gradient(-135.39deg,
      rgba(45, 17, 87, 0.8) 0%,
      rgba(184, 24, 68, 0.8) 100%);
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1s ease-in-out;
}

.Team .position-absolute {
  top: 0px;
  left: 0px;
  border-radius: 20px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  z-index: 3;
  transform: translateX(-100%);
  transition: all 1s ease-in-out;
}

.Team p {
  padding: 0px 20px 25px;
}

.Team .gap-3 i{
  font-size: 16px;
}

.Team .gap-3 a {
  border: 1px solid #b81844;
  border-radius: 50%;
  background: #261329;
  height: 35px;
  width: 35px;
  box-shadow: 0px 0px 13px 3px #b8184480 inset;
}

.Team .gap-3 a:hover {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  color: #ffffff;
  border: none;
}

.Team .position-relative:hover .position-absolute,
.Team .position-relative:hover::before {
  opacity: 1;
  transform: translateX(0%);
}

/* #endregion */
/* ======== End of 2.9. Our Team section ======== */

/* #region ======== 3.3. Contact Us section ======== */
.ContactUs {
  padding: 100px 0px;
}

.ContactUs .gap-3 p {
  padding: 0px 0px 0px 75px;
}

.ContactUs .w-100 img {
  border-radius: 20px;
}

.ContactUs .flex-xl-row h5 {
  font-weight: 400;
}

.ContactUs i {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  font-size: 20px;
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
}

.ContactUs a p,
.ContactUs a h5 {
  transition: all 0.3s ease;
}

.ContactUs a:hover p,
.ContactUs a:hover h5 {
  color: #b81844;
}

.ContactUs a:hover i {
  background: transparent;
  color: #b81844;
  border: 1px solid #b81844;
}

.ContactUs form {
  background: #211e34;
  padding: 30px 25px 35px 30px;
  border-radius: 20px;
}

.ContactUs form input,
.ContactUs form textarea {
  width: 100%;
  padding: 18px 38px 18px 0px;
  margin: 0px 0px 20px;
  border: none;
  border-radius: 15px;
  background: #161326;
  color: #ffffff;
}

.ContactUs form textarea {
  height: 174px;
  resize: none;
}

.ContactUs form textarea:focus {
  outline: none;
}

.ContactUs form input::placeholder,
.ContactUs form textarea::placeholder {
  color: #ffffff;
}

.ContactUs form button {
  color: #ffffff;
  background: #161326;
  border: 1px solid #b81844;
  border-radius: 15px;
  padding: 17px 78px;
  margin: 5px 0px 0px;
}

.ContactUs .gap-sm-5 .gap-4 {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  padding: 30px;
  border-radius: 20px;
}

.ContactUs .gap-sm-5 p {
  padding: 0px 0px 0px 62px;
}

/* #endregion */
/* ======== End of 3.3. Contact Us section ======== */

/* #region ======== 3.4. Map section section ======== */
.Map {
  padding: 0px 0px 100px;
}

.Map iframe {
  width: 100%;
  height: 500px;
}

/* #endregion */
/* ======== End of 3.4. Map section section ======== */

/* #region ======== 5.3. Faq's Section ========  */
.Faq {
  padding: 100px 0px;
}

.Faq .accordion-button::after {
  margin-right: auto;
  transition: 0.3s ease-in-out;
  filter: brightness(100);
}

.Faq .accordion-button:not(.collapsed)::after {
  transition: 0.3s ease-in-out;
}

.Faq .accordion-button:focus {
  box-shadow: none;
}

.Faq .accordion-button:not(.collapsed),
.Faq .accordion-button {
  color: #ffffff;
  background-color: transparent;
}

.accordion-button {
  font-size: 20px;
}

.Faq .accordion-item {
  border: 1px solid #b81844;
  border-radius: 20px;
  background: transparent;
  transition: all 0.5s ease-in-out;
}

.Faq .accordion-body {
  padding: 0px 26px 40px 168px;
}

.Faq .row .col-lg-6:nth-child(4) .px-3 {
  background: #211E34;
  padding: 80px 0px;
  border-radius: 20px;
  gap: 35px;
}

.Faq figure {
  width: fit-content;
}

.Faq img {
  border-radius: 15px;
  width: 100%;
}

.Faq img[alt="faq-1"] {
  margin: 0% 35% 0% 0%;
}

.Faq img[alt="faq-3"] {
  margin: 0% -35% 0% 0%;
}

.Faq .px-3 p {
  padding: 0px 45px 16px;
}

.Faq .px-3 a {
  padding: 17px 53px;
  border: 1px solid #b81844;
}

/* #endregion */
/* ======== End of 5.3. Faq's Section ========  */

/* #region ======== 7.3. Blog Details section ======== */
.Blog-details {
  padding: 100px 0px 24px;
}

.Blog-details img {
  border-radius: 20px;
}

.Blog-details i {
  font-size: 24px;
  height: 52px;
  width: 52px;
  border: 1px solid #b81844;
  border-radius: 50%;
  color: #ffffff;
  box-shadow: 0px 0px 16.9px 3.9px rgba(184, 24, 68, 0.5) inset;
}

.Blog-details i:hover {
  background: linear-gradient(-135.39deg, #2d1157 0%, #b81844 100%);
  border: none;
}

.Blog-details .col-sm-10 .pb-4::first-letter {
  font-size: 70px;
  font-weight: 700;
  line-height: 60px;
  float: right;
  padding: 0px 0px 30px 20px;
}

.Blog-details .gap-2 {
  line-height: 1.2;
  padding: 0px 0px 40px;
  counter-reset: item;
}

.Blog-details .gap-2 li::before {
  content: "0" counter(item) " ";
  counter-increment: item;
  margin-left: 10px;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
}

.Blog-details .BlogSlider {
  padding: 0px 0px 40px;
}

.Blog-details .slick-track {
  gap: 16px;
}

.Blogdetails .BlogSlider figure {
  width: fit-content;
}

.Blog-details .slick-dots {
  bottom: 0px;
  color: #ffffff;
}

.Blog-details .slick-dots li {
  width: 15px;
}

.Blog-details .slick-dots li.slick-active button:before {
  color: transparent;
}

.Blog-details .slick-dots li button {
  padding: 0px;
}

.Blog-details .slick-dots li button:before {
  width: 12px;
  height: 12px;
  font-size: 30px;
}

.Blog-details hr {
  color: #ffffff;
  height: 2px;
}

/* #endregion */
/* ======== End of 7.3. Blog Details section ======== */

/* #region ======== 7.4. Feedback section ======== */
.Feedback {
  padding: 0px 0px 100px;
}

.Feedback .gap-sm-5 {
  width: 83%;
}

.Feedback form {
  width: 85%;
}

.Feedback textarea {
  width: 100%;
  height: 160px;
  color: #ffffff;
  background: rgba(33, 30, 52, 1);
  border-radius: 15px;
  padding: 26px 30px;
  border: none;
  resize: none;
  outline: none;
}

.Feedback input {
  width: 50%;
  height: 66px;
  border: none;
  border-radius: 15px;
  color: #ffffff;
  background: rgba(33, 30, 52, 1);
  padding: 24px 30px;
}

.Feedback form input::placeholder,
.Feedback form textarea::placeholder {
  color: #ffffff;
  font-size: 16px;
}

.Feedback form button {
  width: fit-content;
  background-color: #161326;
  border: 1px solid #b81844;
  padding: 17px 79px;
}
/* #endregion */
/* ======== End of 7.4. Feedback section ======== */

/* #region ======== 10.3. Portfolio section ======== */
.Portfolio {
  padding: 100px 0px;
}

.Portfolio .mx-auto {
  width: 95%;
  max-width: 1459px;
}

.Portfolio .position-absolute {
  top: 0px;
  right: 0px;
  padding: 15px;
  color: #fff;
  border-radius: 15px;
  gap: 15px;
  background: linear-gradient(-135.39deg, rgba(45, 17, 87, 0.8) 0%, rgba(184, 24, 68, 0.8) 100%);
  transition: all 0.4s ease-in-out;
  opacity: 0;
}

.Portfolio figure {
  border-radius: 15px;
  width: fit-content;
  overflow: hidden;
}

.Portfolio img {
  transition: all 0.4s ease-in-out;
}

.Portfolio .col-lg-4 {
  padding: 0px 4px 0px 12px;
}


.Portfolio a:hover .position-absolute {
  opacity: 1;
}

.Portfolio a:hover img {
  transform: scale(1.1);
}

/* #endregion */
/* ======== End of 10.3. Portfolio section ======== */

/* #region ======== 11.1. Coming Soon section ======== */
.Coming-soon {
  min-height: 100vh;
  padding: 100px 0px;
}

.Coming-soon .flex-column.text-center {
  gap: 32px;
  padding: 0px 0px 60px;
}

.Coming-soon .text-center p {
  padding: 0px 125px;
}

.Coming-soon form .d-flex {
  border: 1px solid #b81844;
  border-radius: 15px;
  width: 68%;
}

.Coming-soon input[type="email"] {
  background-color: transparent;
  color: #ffffff;
  border: none;
  border-radius: 15px;
  padding: 26px 24px 21px 0px;
}

.Coming-soon input[type="email"]::placeholder {
  color: #ffffff;
  font-size: 16px;
}

.Coming-soon button {
  background-color: #161326;
  border: 1px solid #b81844;
  padding: 18px 36px 19px;
  left: 0px;
  top: 0px;
}

.Coming-soon #comingsoonTimer {
  padding: 100px 0px 0px;
}

.Coming-soon .gap-sm-4 h2 {
  padding: 22px 24px;
  background: #161326;
  border: 1px solid #b81844;
  border-radius: 15px;
}

.Coming-soon span {
  bottom: 40px;
  font-size: 40px;
}

/* #endregion */
/* ======== End of 11.1. Coming Soon section ======== */

/* #region ======== 12.1. Error 404 section ======== */
.Error .bg::before,
.Coming-soon .bg::before {
  content: "";
  width: 2001px;
  height: 696px;
  top: 480px;
  right: -330px;
  border-radius: 50%;
  position: absolute;
  background: #b8184466;
  filter: blur(180px);
  z-index: -1;
}

.Error {
  padding: 110px 0px;
  height: 100vh;
}

.Error .text-center {
  gap: 42px;
}

.Error h1 {
  font-size: 300px;
  line-height: 225px;
  text-shadow: #ff0046 -6px 9px 15px;
}

.Error p {
  padding: 0px 214px;
}

.Error a {
  border: 1px solid #b81844;
  padding: 17px 53px;
  background: #161326;
}
/* #endregion */
/* ======== End of 12.1. Error 404 section ======== */