/* 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

 */
/* #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: "DM-Sans", 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: "DM-Sans", sans-serif;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.thirdsec-bg::before {
  content: "";
  width: 946px;
  height: 946px;
  border-radius: 50%;
  top: 550px;
  left: 1340px;
  background: #c5000775;
  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 #c500074d inset;
}

.hover1::before {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 0%;
  background: linear-gradient(135.39deg, #2d1157 0%, #c50007 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;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 0px;
  background: linear-gradient(135.39deg, #c50007 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;
  left: 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%;
  left: 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%, #c50007 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 #c500074d 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;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 0px;
  background: linear-gradient(135.39deg, #c50007 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: #c50007;
  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: #c50007;
}

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

header .modal {
  display: none;
  z-index: 1000;
  left: 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;
  right: 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 #c50007;
  border-radius: 10px;
}

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

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

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

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

header .menu-icon:hover,
header .close-icon:hover {
  background: linear-gradient(135.39deg, #2d1157 0%, #c50007 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 {
  right: -100%;
  top: 0px;
  z-index: 50;
  background: #161326;
  transition: right 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 {
  right: 0px;
}

.menu-bar .close-icon {
  width: 38px;
  height: 38px;
  font-size: 36px;
  padding: 0px;
  margin: 0px 0px 0px 10px;
  border: 1px solid #c50007;
  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 #c50007;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  font-size: 16px;
  box-shadow: 0px 0px 13px 3px #c5000780 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: #c50007;
}

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

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

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

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

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

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

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

.menu-bar .justify-content-start i:hover {
  background: linear-gradient(135.39deg, #2d1157 0%, #c50007 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, #c50007 12.65%, #6b122a 90.62%);
  top: 730px;
  right: 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, #c50007 0%, #2d1157 100%);
  z-index: -1;
  border-radius: 50%;
  top: -47px;
  right: 0px;
  position: absolute;
}

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

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

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

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

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

.hero .hover1 {
  border: 1px solid #c50007;
  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: #c50007;
  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;
  right: 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: #c50007;
  transition: all 0.3s ease;
}

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

.hero .gap-lg-3 {
  background: linear-gradient(135.39deg, #2d1157 0%, #c50007 100%);
  margin: 73px 0px 59px;
  padding: 24px 25px 10px;
  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;
	margin:auto;
}

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

.hero .flex-column p {
  padding: 5px 5px 0px 0px;
  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 124px 40px 0px;
	font-size: 1.5rem; line-height: 1.5;
}

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

.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 #c50007;
  padding: 17px 53px;
}

.about-bg::before {
  width: 400px;
  height: 600px;
  top: 865px;
  left: -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 #c50007;
  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 1px 30px 0px;
}

.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%, #c50007 100%);
}

.Services .hover1 {
  border: 1px solid #c50007;
  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 100px 0px 0px;
}

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

.ChooseUs a {
  color: #ffffff;
}

.ChooseUs .flex-column .hover3 {
  border: 1px solid #c50007;
  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 #c50007;
  z-index: 1;
  margin: 0px;
  left: 50px;
}

.Achievement p {
  top: 41px;
  left: 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.webp");
  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 #c50007;
  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 9px 30px 0px;
}

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

.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: #c50007;
  margin: 0px 28px 0px 0px;
  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, #c50007 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 8px 20px 0px;
}

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

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

/* #region ========= 1.9. Testimonial section ======== */
.Testimonial {
  padding: 100px 0px;
}

.Testimonial .col-md-7 {
  padding-right: 0px;
}

.Testimonial .col-md-5 {
  padding-left: 0px;
}

.Testimonial h2 {
  padding: 22px 135px 53px 0px;
}

.Testimonial .pt-0 .flex-column:nth-child(2) {
  background: linear-gradient(135.39deg, #2d1157 0%, #c50007 100%);
  padding: 14px 38px 40px;
  border-radius: 20px 0px 0px 20px;
}

.Testimonial .pt-0 figure {
  top: 30px;
  width: fit-content;
}

.Testimonial img[alt="testimonial-comma"] {
  width: 90px;
  height: 69px;
}

.Testimonial p {
  padding: 0px 65px 23px 0px;
}

.Testimonial .h-100 img {
  border-radius: 20px;
}

.TestimonialSlider .slick-dots {
  bottom: -40px;
}

.TestimonialSlider .slick-dots li button:before {
  color: #ffffff;
  width: 14px;
  height: 14px;
  font-size: 30px;
}

.TestimonialSlider li.slick-active button:before {
  border: 1px solid #ffffff !important;
  color: transparent;
}
/* #endregion */
/* ========= End of 1.9. Testimonial section ======== */

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

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

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

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

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

.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 > .container > .row > .col-lg-6 > div > div > figure > .img-mob {display:none;}
	.Blogs > .container > .row > .col-lg-6 > div > div > figure > .img-desc {display:block;}

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

.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 #c50007;
}

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

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

.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, #c50007 0%, #161326 100%);
}
.Blogs .col-lg-6 .p-2:first-child:hover figure img {
	border:2px solid #fff;
}
figure img.noborder {border:none !important;}
.Blogs .row .col-lg-4:nth-last-child(1) h4 {
  padding: 0px 60px 0px 0px;
}

.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 #c50007;
  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.webp");
  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 186px 42px 0px;
}

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

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

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

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

/* #region ========= 1.13. Footer section======== */
footer::before {
  content: "";
  width: 946px;
  height: 913px;
  top: 100px;
  left: 25%;
  background: #c5000775;
  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 60px 15px 0px;
}

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

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

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

footer li {
  width: max-content;
}

footer a {
  font-size: 16px;
}

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

footer .gap-3 .gap-2:hover i {
  background: linear-gradient(135.39deg, #2d1157 0%, #c50007 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;
  left: -445px;
  border-radius: 45%;
  background: #c5000775;
  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%, #c50007 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, #c50007 0%, #9e3cff 100%);
}

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

.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: #c50007;
  width: 0%;
  border-radius: 10px;
}

.Vision .SkillProgress {
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  left: 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;
  right: 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;
  right: 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 #c50007;
  border-radius: 50%;
  background: #261329;
  height: 35px;
  width: 35px;
  box-shadow: 0px 0px 13px 3px #c5000780 inset;
}

.Team .gap-3 a:hover {
  background: linear-gradient(135.39deg, #2d1157 0%, #c50007 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 75px 0px 0px;
}

.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%, #c50007 100%);
}

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

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

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

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

.ContactUs form input,
.ContactUs form textarea {
  width: 100%;
  padding: 18px 0px 18px 38px;
  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 #c50007;
  border-radius: 15px;
  padding: 17px 78px;
  margin: 5px 0px 0px;
}

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

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

/* #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 {
  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 #c50007;
  border-radius: 20px;
  background: transparent;
  transition: all 0.5s ease-in-out;
}

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

.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% 0% 0% 35%;
}

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

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

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

/* #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 #c50007;
  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%, #c50007 100%);
  border: none;
}

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

.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-right: 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 #c50007;
  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;
  left: 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 12px 0px 4px;
}


.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 #c50007;
  border-radius: 15px;
  width: 68%;
}

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

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

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

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

.Coming-soon .gap-sm-4 h2 {
  padding: 22px 24px;
  background: #161326;
  border: 1px solid #c50007;
  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;
  left: -330px;
  border-radius: 50%;
  position: absolute;
  background: #c5000775;
  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 #c50007;
  padding: 17px 53px;
  background: #161326;
}
/* #endregion */
/* ======== End of 12.1. Error 404 section ======== */