/* 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: 21px;
  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 #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;
  left: 731px;
  border-radius: 50%;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.hero-bg::before {
  content: "";
  width: 946px;
  height: 946px;
  top: -443px;
  left: -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;
  left: 1473px;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.hero::after {
  content: "";
  width: 648px;
  height: 648px;
  border-radius: 50%;
  top: 839px;
  left: 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;
  left: -370px;
  background: #b8184466;
  filter: blur(180px);
  position: absolute;
  z-index: -1;
}

.thirdsec-bg::before {
  content: "";
  width: 946px;
  height: 946px;
  border-radius: 50%;
  top: 550px;
  left: 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;
  left: 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;
  left: 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;
  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%, #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;
  left: 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: #b81844;
  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 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 #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;
  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 #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 {
  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 #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 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 #b81844;
  border-radius: 15px;
  padding: 18px 36px;
  right: 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;
  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, #b81844 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 #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;
  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: #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 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;
}

.About li i {
  font-size: 18px;
  color: #b81878;
  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 #b81878;
  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 #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 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%, #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 100px 0px 0px;
}

.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;
  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 #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 9px 30px 0px;
}

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

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

.Plan .pt-0 a {
  padding: 17px 52px;
  border: 1px solid #b81878;
  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%, #b81844 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 #b81878;
}

.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 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 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, #b81844 0%, #9e3cff 100%);
}

.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 #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.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 #b81844;
  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 #b81844;
  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: #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 60px 15px 0px;
}

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;
  left: -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 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: #b81844;
  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 #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 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%, #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 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 #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 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 #b81844;
  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 #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: 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 #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;
  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 #b81844;
  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 #b81844;
  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 #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;
  left: -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 ======== */
/* #region ======== Global Styling ======== */
@media screen and (max-width: 1440px) {
  .hero-bg::before {
    width: 900px;
    height: 900px;
  }

  .twosec-bg::before {
    width: 900px;
    height: 900px;
    left: -500px;
  }

  .thirdsec-bg::before {
    width: 900px;
    height: 900px;
    left: 1100px;
  }

  .hero-bg::after {
    left: 1280px;
  }

  .hero::after {
    left: 90px;
  }
}

@media screen and (max-width: 1399px) {
  .hero-bg::after {
    left: 1200px;
  }

  .twosec-bg::before {
    top: 400px;
  }
}

@media screen and (max-width: 1199px) {
  header aside .overflow-hidden::before {
    left: 590px;
  }

  .hero-bg::after {
    left: 1000px;
    top: 740px;
  }

  .thirdsec-bg::before {
    left: 1015px;
    top: 660px;
  }

  .about-bg::before {
    width: 300px;
    height: 500px;
    top: 800px;
    left: -200px;
  }
}

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

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 990px;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 60px;
    line-height: 72px;
  }

  h2 {
    font-size: 34px;
    line-height: 44px;
  }

  h3 {
    font-size: 28px;
    line-height: 38px;
  }

  h4 {
    font-size: 24px;
    line-height: 30px;
  }

  h5 {
    font-size: 18px;
    line-height: 24px;
  }

  h6 {
    font-size: 16px;
    line-height: 20px;
  }

  .p,
  p {
    font-size: 14px;
    line-height: 18px;
  }

  a {
    font-size: 16px;
    line-height: 20px;
  }

  button {
    font-size: 16px;
    line-height: 20px;
  }

  header aside .overflow-hidden::before {
    left: 300px;
    top: 470px;
  }

  .hero-bg::before {
    width: 625px;
    height: 625px;
    top: -200px;
    left: 500px;
  }

  .hero-bg::after {
    left: -340px;
    top: 1160px;
  }

  .hero::after {
    display: none;
  }

  .twosec-bg::before,
  .about-bg::before {
    display: none;
  }

  .thirdsec-bg::before {
    left: 560px;
    top: 260px;
  }
}

@media screen and (max-width: 768px) {
  .hero-bg::before {
    width: 625px;
    height: 625px;
    top: -272px;
    left: 249px;
  }

  .thirdsec-bg::before {
    left: 450px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 42px;
    line-height: 48px;
  }

  h2 {
    font-size: 30px;
    line-height: 40px;
  }

  h3 {
    font-size: 28px;
    line-height: 38px;
  }

  h4 {
    font-size: 22px;
    line-height: 28px;
  }

  h5 {
    font-size: 18px;
    line-height: 23px;
  }

  h6 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }

  .p,
  p {
    font-size: 14px;
    line-height: 18px;
  }

  a {
    font-size: 16px;
    line-height: 20px;
  }

  button {
    font-size: 16px;
    line-height: 20px;
  }

  .hero-bg::before {
    width: 379px;
    height: 379px;
    top: -131px;
    left: -121px;
    filter: blur(130px);
  }

  .hero-bg::after {
    display: none;
  }

  .twosec-bg::before,
  .about-bg::before {
    display: block;
    width: 379px;
    height: 379px;
    top: 240px;
    left: 107px;
    filter: blur(130px);
  }

  .thirdsec-bg::before {
    display: none;
  }

  /* form validation modal */
  #HeaderModal div,
  #NewsletterModal div,
  #ContactModal div,
  #FeedbackModal div,
  #ComingsoonModal div {
    width: 290px;
  }
}

/* #endregion */
/* ======== End of Global Styling ======== */

/* #region ========= 1.1. Header section ========= */
@media screen and (max-width: 1199px) {
  .menu-bar .p-0 img {
    width: 150px;
  }
}

@media screen and (max-width: 991px) {
  header .w-75 {
    width: 40% !important;
  }

  header nav a {
    font-size: 14px;
  }

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

  header .menu-icon {
    height: 35px;
    width: 43px;
  }

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

  header nav .gap-lg-5 {
    gap: 36px;
  }

  header .search i {
    padding: 0px;
  }

  /*====== mobile menu drawer ======*/
  header .menu-bar{
    display: none;
  }

  header .offcanvas {
    transition: transform 0.5s ease-in-out;
    background: linear-gradient(135.39deg, #2D1157 0%, #B81844 100%);
  }

  header .offcanvas .btn-close{
    color: #ffff;
    font-size: 24px;
    background: none;
  }

  header .offcanvas .btn-close:hover{
    color: #ffff;
  }

  header .offcanvas .btn-close:focus{
    box-shadow: none;
  }

  header .offcanvas ul{
  transition: 0.5s ease-in-out;
}
}

@media screen and (max-width: 768px) {
  header .w-75 {
    width: 50% !important;
  }

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

  header .offcanvas{
    width: 300px;
  }
}

@media screen and (max-width: 480px) {
  header .container-fluid {
    flex-wrap: unset !important;
  }

  header .menu-icon {
    height: 38px;
    width: 60px;
  }

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

@media screen and (max-width: 425px) {
  header .menu-icon {
    width: 66px;
  }
}

@media screen and (max-width: 375px) {
  header .menu-icon {
    width: 75px;
  }
}

@media screen and (max-width: 360px) {
  header .menu-icon {
    width: 80px;
  }
}

@media screen and (max-width: 320px) {
  header .menu-icon {
    height: 37px;
    width: 92px;
  }
}

/* #endregion */
/* ========= End of 1.1. Header section ========= */

/* #region ========= 1.2. Hero section ========= */
@media screen and (max-width: 1399px) {
  .hero p {
    padding: 0px 0px 39px;
  }

  .hero::before {
    top: 793px;
  }

  .hero hr {
    height: 167px;
  }
}

@media screen and (max-width: 1199px) {
  .hero .m-auto {
    grid-template-columns: 54% 44%;
    grid-gap: 12px;
  }
}

@media screen and (max-width: 1024px) {
  .hero::before {
    display: none;
  }

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

@media screen and (max-width: 991px) {
  .hero::before {
    display: block;
    top: 615px;
    left: 0;
    transform: rotate(180deg);
  }

  .hero .align-items-end .position-relative::before {
    top: -47px;
    right: -60px;
    width: 560px;
    height: 560px;
  }

  .hero {
    padding: 58px 0px 0px;
    margin: 0px 0px -77px;
  }

  .hero .m-auto {
    grid-template-columns: 100%;
    grid-gap: 0px;
  }

  .hero h1 {
    padding: 0px 130px 20px;
    text-align: center;
  }

  .hero p {
    padding: 0px 184px 40px;
    text-align: center;
  }

  .hero .fa-play {
    height: 50px;
    width: 50px;
  }

  .hero .modal-body {
    width: 600px;
  }

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

  .hero .flex-column p {
    padding: 5px 40px 0px 0px;
  }

  .hero .gap-lg-3 {
    margin: 0px;
    padding: 37px 47px 38px;
    grid-row-start: 3;
    grid-row-end: 4;
    top: -140px;
  }

  .hero .align-items-end {
    grid-row-start: 2;
    padding: 80px 0px 0px;
    z-index: -999;
  }

  .hero .align-items-end .position-relative {
    width: 65% !important;
  }
}

@media screen and (max-width: 768px) {
  .hero .align-items-end .position-relative::before {
    top: -40px;
    right: -60px;
    width: 440px;
    height: 440px;
  }

  .hero {
    margin: 0px 0px -40px;
  }

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

  .hero p {
    padding: 0px 15px 40px;
  }

  .hero .flex-column p {
    padding: 5px 0px 0px;
  }

  .hero .gap-lg-3 {
    top: -105px;
  }
}

@media screen and (max-width: 480px) {
  .hero .align-items-end .position-relative::before {
    right: 0px;
    width: 450px;
    height: 450px;
  }

  .hero::before {
    display: none;
  }

  .hero {
    padding: 38px 0px 0px;
    margin: 0px;
  }

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

  .hero p {
    padding: 0px 10px 41px;
  }

  .hero .hover1 {
    padding: 17px 101px;
  }

  .hero .fa-play {
    height: 45px;
    width: 45px;
  }

  .hero .modal-body {
    width: 400px;
  }

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

  .hero .gap-lg-3 {
    padding: 28px 51px;
    top: 0px;
  }

  .hero .flex-column p {
    padding: 5px 100px 0px;
  }

  .hero hr {
    height: 1px;
    width: 100%;
  }

  .hero .align-items-end {
    padding: 65px 0px 0px;
  }

  .hero .align-items-end .position-relative {
    width: 100% !important;
  }
}

@media screen and (max-width: 425px) {
  .hero .flex-column p {
    padding: 5px 63px 0px;
  }

  .hero .align-items-end .position-relative::before {
    top: -33px;
    width: 400px;
    height: 400px;
  }
}

@media screen and (max-width: 375px) {
  .hero h1 {
    padding: 0px 0px 15px;
  }

  .hero .flex-column p {
    padding: 5px 40px 0px;
  }

  .hero .align-items-end .position-relative::before {
    right: -12px;
    width: 360px;
    height: 360px;
  }

  .hero .modal-body {
    width: 300px;
  }
}

@media screen and (max-width: 320px) {
  .hero .hover1 {
    padding: 17px 95px;
  }

  .hero .flex-column p {
    padding: 5px 20px 0px;
  }

  .hero .align-items-end .position-relative::before {
    right: -10px;
    width: 315px;
    height: 315px;
  }
}

/* #endregion */
/* ========= End of 1.2. Hero section ========= */

/* #region ======== 1.3. About Us Section ======== */
@media screen and (max-width: 1399px) {
  .About p {
    padding: 0px 33px 40px 0px;
  }
}

@media screen and (max-width: 1199px) {
  .About h2 {
    font-size: 46px;
  }

  .About p {
    padding: 0px 0px 30px;
  }

  .About button {
    padding: 17px 38px;
  }
}

@media screen and (max-width: 991px) {
  .About {
    padding: 70px 0px;
  }

  .About h2 {
    font-size: 34px;
    padding: 23px 25px 18px 0px;
  }

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

  .About li i {
    font-size: 16px;
  }

  .About .flex-sm-row {
    padding: 26px 0px 0px;
  }

  .About .hover1 {
    padding: 17px 32px;
  }
}

@media screen and (max-width: 768px) {
  .About h2 {
    padding: 14px 0px 12px;
  }

  .About p {
    padding: 0px 15px 26px 0px;
  }

  .About li i {
    margin: 0px 20px 0px 0px;
  }

  .About .flex-sm-row {
    gap: 20px;
  }
}

@media screen and (max-width: 767px) {
  .About .flex-sm-row {
    padding: 26px 0px 30px;
  }
}

@media screen and (max-width: 480px) {
  .About {
    padding: 50px 0px;
  }

  .About h2 {
    padding: 15px 20px 8px;
  }

  .About p {
    padding: 0px 10px 22px;
  }

  .About li i {
    margin: 0px 13px 0px 0px;
    font-size: 16px;
  }

  .About .hover1 {
    width: 90%;
  }
}

@media screen and (max-width: 360px) {
  .About h2 {
    padding: 15px 0px 8px;
  }
}

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

/* #region ======== 1.4. Services section ======== */
@media screen and (max-width: 991px) {
  .Services {
    padding: 0px 0px 70px;
  }

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

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

  .Services .align-items-lg-start {
    padding: 50px 30px;
  }

  .Services .m-auto {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-gap: 25px;
  }

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

  .Services .m-auto .align-items-lg-start:nth-child(3),
  .Services .m-auto .align-items-lg-start:nth-child(4) {
    padding: 20px 30px;
  }

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

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

@media screen and (max-width: 480px) {
  .Services {
    padding: 0px 0px 50px;
  }

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

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

  .Services h2 {
    padding: 0px 75px 0px;
  }

  @media (max-width: 480px) {
    .Services .m-auto {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-gap: 20px;
    }

    .Services .m-auto .align-items-lg-start:nth-child(1),
    .Services .m-auto .align-items-lg-start:nth-child(2),
    .Services .m-auto .align-items-lg-start:nth-child(3),
    .Services .m-auto .align-items-lg-start:nth-child(4),
    .Services .pt-md-3,
    .Services .m-0 {
      grid-column: 1 / 2;
      grid-row: auto;
    }
  }


  .Services .align-items-lg-start,
  .Services .m-auto .align-items-lg-start:nth-child(3),
  .Services .m-auto .align-items-lg-start:nth-child(4) {
    padding: 30px 15px;
  }
}

@media screen and (max-width: 375px) {
  .Services h2 {
    padding: 0px 20px 0px;
  }
}

@media screen and (max-width: 320px) {
  .Services h2 {
    padding: 0px;
  }
}

/* #endregion */
/* ======== End of 1.4. Services section ======== */

/* #region ========= 1.5. Choose Us section ========= */
@media screen and (max-width: 1399px) {
  .ChooseUs .align-items-md-start p {
    padding: 0px 12px 0px 0px;
  }

  .ChooseUs .flex-column p {
    padding: 0px;
  }
}

@media screen and (max-width: 1199px) {
  .ChooseUs .align-items-md-start p {
    padding: 0px;
  }
}

@media screen and (max-width: 991px) {
  .ChooseUs {
    padding: 0px 0px 70px;
  }

  .ChooseUs.mx-auto {
    padding: 0px 0px 15px;
  }
}

@media screen and (max-width: 768px) {
  .ChooseUs .align-items-md-start {
    padding: 20px 0px;
    gap: 13px;
  }

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

  .ChooseUs .flex-column .hover3 {
    padding: 20px;
  }

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

@media screen and (max-width: 767px) {
  .ChooseUs .flex-column {
    padding: 0px 0px 30px;
  }

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

@media screen and (max-width: 480px) {
  .ChooseUs {
    padding: 0px 0px 50px;
  }

  .ChooseUs.mx-auto {
    padding: 0px;
  }

  .ChooseUs .align-items-md-start {
    padding: 0px 0px 30px;
    gap: 10px;
  }

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

  .ChooseUs h2 {
    padding: 0px 28px;
  }

  .ChooseUs .flex-column .hover3 {
    padding: 16px 10px;
    gap: 10px;
  }
}

@media screen and (max-width: 320px) {
  .ChooseUs h2 {
    padding: 0px;
  }

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

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

/* #region ========= 1.6. Achievement section ======== */
@media screen and (max-width: 1399px) {
  .Achievement .justify-content-center hr {
    width: 34%;
  }

  .Achievement h1 {
    left: 25px;
  }

  .Achievement p {
    left: 181px;
  }
}

@media screen and (max-width: 1199px) {
  .Achievement .justify-content-center hr {
    width: 31%;
  }

  .Achievement h1 {
    left: 9px;
  }

  .Achievement p {
    left: 165px;
  }
}

@media screen and (max-width: 991px) {
  .Achievement.mt-0 {
    padding: 70px 0px;
  }

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

  .Achievement .justify-content-center hr {
    width: 37%;
  }

  .Achievement h1 {
    left: 12px;
    font-size: 100px;
  }

  .Achievement p {
    top: 37px;
    left: 155px;
  }

  .Achievement .gap-5 {
    gap: 14px !important;
  }
}

@media screen and (max-width: 768px) {
  .Achievement .justify-content-center {
    padding: 0px 0px 27px;
  }

  .Achievement .justify-content-center hr {
    width: 33%;
  }

  .Achievement h1 {
    left: 12px;
    font-size: 64px;
  }

  .Achievement p {
    top: 37px;
    left: 118px;
  }

  .Achievement .row .col-6:nth-child(4) p {
    left: 111px;
  }
}

@media screen and (max-width: 480px) {
  .Achievement {
    padding: 0px 0px 50px;
  }

  .Achievement.m-0 {
    padding: 50px 0px;
  }

  .Achievement .justify-content-center hr {
    width: 22%;
  }

  .Achievement h1 {
    left: 12px;
    font-size: 48px;
  }

  .Achievement p,
  .Achievement .row .col-6:nth-child(4) p {
    top: 25px;
    left: 115px;
  }
}

@media screen and (max-width: 425px) {
  .Achievement .justify-content-center hr {
    width: 18%;
  }

  .Achievement p,
  .Achievement .row .col-6:nth-child(4) p {
    left: 106px;
  }
}

@media screen and (max-width: 375px) {
  .Achievement .justify-content-center hr {
    width: 14%;
  }

  .Achievement p,
  .Achievement .row .col-6:nth-child(4) p {
    left: 98px;
  }
}

@media screen and (max-width: 360px) {
  .Achievement .justify-content-center hr {
    width: 13%;
  }

  .Achievement .row .col-6:nth-child(4) p {
    left: 95px;
  }
}

@media screen and (max-width: 320px) {
  .Achievement .justify-content-center hr {
    width: 8%;
  }
}

/* #endregion */
/* ========= 1.6. End of Achievement section ======== */

/* #region ========= 1.7. Discover section ======== */
@media screen and (max-width: 1399px) {
  .Discover h2 {
    padding: 0px 44px;
  }

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

@media screen and (max-width: 1199px) {
  .Discover p {
    padding: 30px 40px 50px;
  }
}

@media screen and (max-width: 991px) {
  .Discover {
    padding: 65px 0px;
  }

  .Discover .d-flex {
    padding: 40px 0px 36px;
  }

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

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

@media screen and (max-width: 768px) {
  .Discover {
    padding: 55px 0px;
  }

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

  .Discover p {
    padding: 15px 15px 25px;
  }
}

@media screen and (max-width: 480px) {
  .Discover {
    padding: 70px 0px;
  }

  .Discover .d-flex {
    padding: 33px 0px 36px;
  }

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

  .Discover p {
    padding: 6px 10px 27px;
  }

  .Discover a {
    padding: 14px 53px;
  }
}

@media screen and (max-width: 320px) {
  .Discover h2 {
    padding: 0px;
  }
}

/* #endregion */
/* ========= 1.7. End of Discover section ======== */

/* #region ======== 1.8. Pricing Plan section ======== */
@media screen and (max-width: 1399px) {
  .Plan .pt-0 p {
    padding: 0px 0px 50px;
  }

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

@media screen and (max-width: 1199px) {
  .Plan .flex-column p {
    padding: 0px 0px 30px;
  }

  .Plan li i {
    margin: 0px 10px 0px 0px;
    font-size: 16px;
  }

  .Plan li {
    font-size: 13px;
  }
}

@media screen and (max-width: 991px) {
  .Plan {
    padding: 70px 0px;
  }

  .Plan .pt-0 h2 {
    padding: 23px 0px 12px;
  }

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

  .Plan .gap-4 .flex-column:nth-child(-n + 2) {
    padding: 34px 24px 33px;
  }
}

@media screen and (max-width: 768px) {
  .Plan .flex-column .align-items-center {
    padding: 32px 0px 22px;
  }
}

@media screen and (max-width: 480px) {
  .Plan {
    padding: 50px 0px;
  }

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

  .Plan li {
    font-size: 16px;
  }

  .Plan .pt-0 h2 {
    padding: 20px 55px 14px;
  }

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

@media screen and (max-width: 360px) {
  .Plan .pt-0 h2 {
    padding: 20px 0px 14px;
  }

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

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

@media screen and (max-width: 320px) {
  .Plan .pt-0 p {
    padding: 0px 0px 32px;
  }

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

  .Plan li {
    font-size: 13px;
  }
}

/* #endregion */
/* ========= 1.8. End of Pricing Plan section ======== */

/* #region ======== 1.9. Testimonial section ======== */
@media screen and (max-width: 1399px) {
  .Testimonial h2 {
    padding: 22px 45px 53px 0px;
  }

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

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

@media screen and (max-width: 1199px) {
  .Testimonial h2 {
    padding: 22px 35px 30px 0px;
  }

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

  .Testimonial .pt-0 .flex-column:nth-child(2) {
    padding: 0px 18px 20px;
  }

  .Testimonial .h-100 {
    bottom: -60px;
  }
}

@media screen and (max-width: 991px) {
  .Testimonial {
    padding: 70px 0px;
  }

  .Testimonial.mx-auto {
    padding: 70px 0px 15px;
  }

  .Testimonial h2 {
    padding: 14px 230px 25px 0px;
  }

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

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

  .Testimonial .h-100 {
    bottom: 0px;
  }
}

@media screen and (max-width: 768px) {
  .Testimonial h2 {
    padding: 14px 105px 25px 0px;
  }

  .Testimonial .pt-0 .flex-column:nth-child(2) {
    padding: 0px 10px 20px;
  }

  .Testimonial .h-100 {
    bottom: -65px;
  }
}

@media screen and (max-width: 767px) {
  .Testimonial .col-md-7 {
    padding-right: 12px;
  }

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

  .Testimonial .h-100 {
    bottom: 0px;
  }

  .Testimonial .pt-0 .flex-column:nth-child(2) {
    border-radius: 20px;
    padding: 0px 20px 50px;
  }
}

@media screen and (max-width: 480px) {
  .Testimonial {
    padding: 50px 0px;
  }

  .Testimonial.mx-auto {
    padding: 50px 0px 0px;
  }

  .Testimonial h2 {
    padding: 16px 80px 18px;
  }

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

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

  .Testimonial .pt-0 .flex-column:nth-child(2) {
    padding: 0px 4px 50px;
  }

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

  .TestimonialSlider .slick-dots li button:before {
    width: 12px;
    height: 12px;
    font-size: 25px;
  }

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

@media screen and (max-width: 425px) {
  .Testimonial h2 {
    padding: 16px 52px 18px;
  }
}

@media screen and (max-width: 375px) {
  .Testimonial h2 {
    padding: 16px 28px 18px;
  }
}

@media screen and (max-width: 320px) {
  .Testimonial h2 {
    padding: 16px 0px 18px;
  }
}

/* #endregion */
/* ======== 1.9. End of Testimonial section ======== */

/* #region ======== 1.10. Blog section ======== */
@media screen and (max-width: 1399px) {
  .Blogs .h-100 p {
    padding: 0px 0px 40px;
  }

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

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

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

@media screen and (max-width: 1199px) {
  .Blogs .gap-4 p {
    padding: 0px;
  }

  .Blogs .w-lg-100 .h-100 {
    padding: 30px 12px 46px;
  }
}

@media screen and (max-width: 991px) {
  .Blogs.mx-auto {
    padding: 70px 0px;
  }

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

  .Blogs .gap-4 .flex-column {
    padding: 32px 10px 6px;
  }

  .Blogs .h-100 h4 {
    padding: 17px 130px 14px 0px;
  }

  .Blogs .h-100 p {
    padding: 0px 159px 36px 0px;
  }

  .Blogs .w-lg-100 .h-100 {
    padding: 36px 25px 40px;
  }

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

@media screen and (max-width: 768px) {
  .Blogs .h-100 p {
    padding: 0px 50px 30px 0px;
  }
}

@media screen and (max-width: 480px) {
  .Blogs.mx-auto {
    padding: 50px 0px;
  }

  .Blogs .pb-4 h2 {
    padding: 0px 22px;
  }

  .Blogs .h-100 div {
    padding: 16px 12px 30px;
  }

  .Blogs .h-100 h4 {
    padding: 17px 0px 14px;
  }

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

  .Blogs .gap-4 .flex-column {
    padding: 16px 12px 6px;
  }

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

  .Blogs .w-lg-100 .h-100 {
    padding: 37px 20px 37px;
  }

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

  .Blogs .w-lg-100 .h-100 p {
    padding: 0px 95px 26px 0px;
  }
}

@media screen and (max-width: 360px) {
  .Blogs .pb-4 h2 {
    padding: 0px;
  }
}

@media screen and (max-width: 320px) {
  .Blogs .flex-sm-row .h-100:first-child h4 {
    padding: 15px 0px 12px;
  }

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

  .Blogs .w-lg-100 .h-100 p {
    padding: 0px 12px 26px 0px;
  }
}

/* #endregion */
/* ======== End of 1.10. Blog section ======== */

/* #region ======== 1.11. Partners section ======== */
@media screen and (max-width: 991px) {
  .Partners {
    padding: 70px 0px;
  }
}

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

  .Partners .PartnersSlider1 .align-items-center,
  .Partners .PartnersSlider2 .align-items-center {
    width: 162px;
    height: 64px;
  }

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

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

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

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

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

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

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

@media screen and (max-width: 480px) {
  .Partners {
    padding: 50px 0px;
  }

  .Partners h2 {
    padding: 0px 50px;
  }

  .Partners .PartnersSlider1 .align-items-center,
  .Partners .PartnersSlider2 .align-items-center {
    width: 130px;
    height: 51px;
  }

  .Partners img[alt="partnerslogo1"],
  .Partners img[alt="partnerslogo3"],
  .Partners img[alt="partnerslogo4"],
  .Partners img[alt="partnerslogo5"],
  .Partners img[alt="partnerslogo7"] {
    width: 85px;
    height: 20px;
  }

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

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

/* #endregion */
/* ======== 1.11. End of Partners section ======== */

/* #region ======== 1.12. Newsletter section ======== */
@media screen and (max-width: 1399px) {
  .Newsletter .row p {
    padding: 0px 80px 42px 0px;
  }

  .Newsletter form .d-flex {
    width: 90%;
  }
}

@media screen and (max-width: 1199px) {
  .Newsletter .row p {
    padding: 0px 0px 42px;
  }

  .Newsletter form .d-flex {
    width: 100%;
  }

  .Newsletter input[type="email"] {
    padding: 25px 0px 20px 24px;
  }

  .Newsletter button {
    padding: 18px 36px;
  }
}

@media screen and (max-width: 991px) {
  .Newsletter {
    padding: 35px 0px 0px;
  }

  .Newsletter .pb-4 {
    padding: 0px 0px 0px 20px;
  }

  .Newsletter input[type="email"] {
    padding: 19px 0px 18px 16px;
  }

  .Newsletter button {
    padding: 17px 36px;
  }
}

@media screen and (max-width: 768px) {
  .Newsletter .row h4 {
    padding: 21px 0px 10px;
  }

  .Newsletter .row p {
    padding: 0px 0px 26px;
  }

  .Newsletter figure {
    top: 15px;
  }
}

@media screen and (max-width: 480px) {
  .Newsletter {
    padding: 48px 0px 0px;
  }

  .Newsletter .pb-4 {
    padding: 0px;
  }

  .Newsletter .row h4 {
    padding: 14px 10px 10px;
  }

  .Newsletter .row p {
    padding: 0px 10px 32px;
  }

  .Newsletter form .d-flex {
    gap: 10px;
    border: none;
    width: 90%;
  }

  .Newsletter input[type="email"] {
    border: 1px solid #b81844;
    border-radius: 15px;
    padding: 19px 0 16px 18px;
  }

  .Newsletter form button {
    position: relative !important;
  }

  .Newsletter button {
    padding: 16px 0px;
  }

  .Newsletter figure {
    top: 0px;
  }
}

/* #endregion */
/* ======== 1.12. End of Newsletter section ======== */

/* #region ======== 1.13. Footer section ======== */
@media screen and (max-width: 1536px) {
  footer::before {
    top: 130px;
    width: 850px;
    height: 850px;
  }
}

@media screen and (max-width: 1399px) {
  footer::before {
    width: 800px;
    height: 800px;
    left: 22%;
  }

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

@media screen and (max-width: 1199px) {
  footer::before {
    width: 700px;
    height: 700px;
  }
}

@media screen and (max-width: 991px) {
  footer::before {
    top: 350px;
    left: 14%;
  }

  footer {
    padding: 55px 0px 30px;
  }

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

  footer a {
    font-size: 14px;
  }

  footer .justify-content-lg-between {
    gap: 150px;
  }
}

@media screen and (max-width: 768px) {
  footer::before {
    left: 5%;
  }

  footer img {
    width: 125px;
  }

  footer .justify-content-lg-between {
    gap: 100px;
  }
}

@media screen and (max-width: 767px) {
  footer .row .col-lg-4:nth-child(1) {
    order: 1;
  }

  footer .row .col-lg-4:nth-child(2) {
    order: 3;
  }

  footer .row .col-lg-4:nth-child(3) {
    order: 2;
  }

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

  footer .align-items-lg-start .gap-md-4 a {
    height: 30px;
    width: 30px;
    font-size: 12px;
  }

  footer .gap-3 .gap-2 .justify-content-center {
    height: 30px;
    width: 30px;
    font-size: 12px;
  }
}

@media screen and (max-width: 480px) {
  footer::before {
    width: 480px;
    height: 480px;
    left: unset;
    top: 400px;
  }

  footer {
    padding: 60px 0px 15px;
  }

  footer .text-center p {
    padding: 0px 15px;
    font-size: 12px;
  }
}

@media screen and (max-width: 320px) {
footer .justify-content-lg-between{
  gap: 64px;
}
}

/* #endregion */
/* ======== 1.13. Footer section ======== */

/* #region ======== 2.2. Subpages-hero section ======== */
@media screen and (max-width: 1399px) {
  .Subpages-hero p {
    padding: 0px 115px;
  }
}

@media screen and (max-width: 1199px) {
  .Subpages-hero p {
    padding: 0px 22px;
  }
}

@media screen and (max-width: 991px) {
  .Subpages-hero {
    padding: 70px 0px;
  }
}

@media screen and (max-width: 768px) {
  .Subpages-hero .bg::before {
    left: -620px;
  }
}

@media screen and (max-width: 480px) {
  .Subpages-hero .bg::before {
    top: 210px;
    left: -770px;
  }

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

  .Subpages-hero h2 {
    padding: 0px 35px;
  }

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

@media screen and (max-width: 375px) {
  .Subpages-hero .bg::before {
    top: 230px;
  }

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

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

/* #region ======== 2.4. States section ======== */
@media screen and (max-width: 1399px) {
  .States p {
    padding: 0px;
  }
}

@media screen and (max-width: 1199px) {
  .States .flex-sm-row .flex-column {
    padding: 35px 15px;
  }
}

@media screen and (max-width: 991px) {
  .States {
    padding: 0px 0px 70px;
  }
}

@media screen and (max-width: 480px) {
  .States {
    padding: 0px 0px 50px;
  }
}

/* #endregion */
/* ======== End of 2.4. States section ======== */

/* #region ======== 2.5. Vision section ======== */
@media screen and (max-width: 1399px) {
  .Vision hr {
    margin: 40px 0px 50px;
  }

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

@media screen and (max-width: 1199px) {
  .Vision .align-items-center p {
    padding: 0px;
  }
}

@media screen and (max-width: 1199px) {
  .Vision h2 {
    padding: 0px 52px 24px 0px;
  }
}

@media screen and (max-width: 991px) {
  .Vision {
    padding: 70px 0px;
  }

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

@media screen and (max-width: 768px) {
  .Vision .gap-4 figure {
    padding: 18px;
  }
}

@media screen and (max-width: 767px) {
  .Vision h2 {
    padding: 0px 18px;
  }
}

@media screen and (max-width: 480px) {
  .Vision {
    padding: 50px 0px;
  }
}

@media screen and (max-width: 425px) {
  .Vision h2 {
    padding: 0px;
  }

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

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

/* #region ======== 3.3. Contact Us section ======== */
@media screen and (max-width: 1399px) {

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

@media screen and (max-width: 991px) {
  .ContactUs {
    padding: 70px 0px;
  }

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

@media screen and (max-width: 480px) {
  .ContactUs {
    padding: 50px 0px;
  }

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

  .ContactUs i {
    height: 60px;
    width: 60px;
  }

  .ContactUs form {
    padding: 30px 15px 35px;
  }

  .ContactUs .gap-sm-5 .gap-4 {
    padding: 25px 20px;
  }
}

@media screen and (max-width: 375px) {
  .ContactUs form button {
    width: 100%;
  }

  .ContactUs .gap-sm-5 .gap-4 {
    flex-direction: column !important;
  }

  .ContactUs .gap-sm-5 .gap-2 {
    align-items: center;
    text-align: center;
  }
}

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

/* #region ======== 3.4. Map section section ======== */
@media screen and (max-width: 991px) {
  .Map {
    padding: 0px 0px 15px;
  }
}

@media screen and (max-width: 480px) {
  .Map {
    padding: 0px;
  }

  .Map iframe {
    height: 350px;
  }
}

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

/* #region ======== 5.3. Faq's Section ======== */
@media screen and (max-width: 1399px) {
  .Faq .accordion-body {
    padding: 0px 75px 40px 26px;
  }

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

@media screen and (max-width: 1199px) {
  .Faq .accordion-body {
    padding: 0px 40px 40px 26px;
  }
}

@media screen and (max-width: 991px) {
  .Faq {
    padding: 70px 0px 15px;
  }

  .Faq .accordion-body {
    padding: 0px 60px 25px 26px;
  }
}

@media screen and (max-width: 480px) {
  .Faq {
    padding: 50px 0px 0px;
  }

  .Faq .accordion-body {
    padding: 0px 22px 25px 18px;
  }

  .Faq .row .col-lg-6:nth-child(4) .px-3 {
    padding: 45px 0px;
  }

  .Faq .row .col-lg-6:nth-child(4) .px-3 {
    gap: 20px;
  }

  .Faq .px-3 .justify-content-center {
    transform: scale(0.7);
  }
}

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

/* #region ======== 7.3. Blog Details section ======== */
@media screen and (max-width: 991px) {
  .Blog-details {
    padding: 70px 0px 24px;
  }

  .Blog-details i {
    height: 45px;
    width: 45px;
    font-size: 20px;
  }

  .Blog-details .col-sm-10 .pb-4::first-letter {
    font-size: 60px;
    padding: 0px 15px 12px 0px;
  }

  .Blog-details .gap-2 li {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .Blog-details {
    padding: 50px 0px 35px;
  }

  .Blog-details i {
    height: 35px;
    width: 35px;
    font-size: 16px;
  }

  .Blog-details .col-sm-10 .pb-4::first-letter {
    font-size: 50px;
  }

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

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

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

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

/* #region ======== 7.4. Feedback section ======== */
@media screen and (max-width: 991px) {
  .Feedback {
    padding: 0px 0px 25px;
  }

  .Feedback form input::placeholder,
  .Feedback form textarea::placeholder {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .Feedback .gap-sm-5 {
    width: 100%;
  }

  .Feedback form {
    width: 100%;
  }

  .Feedback textarea {
    padding: 20px 15px;
  }

  .Feedback input {
    width: 100%;
    height: 60px;
    padding: 15px;
  }
}

@media screen and (max-width: 480px) {
  .Feedback {
    padding: 0px;
  }
}

@media screen and (max-width: 375px) {
  .Feedback form button {
    width: 100%;
  }
}

/* #endregion */
/* ======== End of 7.4. Feedback section ======== */

/* #region ======== 9.3. Our Team section ======== */
@media screen and (max-width: 991px) {
  .Team.mx-auto {
    padding: 70px 0px 15px;
  }
}

@media screen and (max-width: 480px) {
  .Team.mx-auto {
    padding: 50px 0px 0px;
  }
}

/* #endregion */
/* ======== 9.3. Our Team section ======== */

/* #region ======== 10.3. Portfolio section ======== */
@media (max-width: 1199px) {
  .Portfolio .position-absolute {
    gap: 5px;
    padding: 15px 8px;
  }
}

@media (max-width: 991px) {
  .Portfolio {
    padding: 70px 0px 15px;
  }

  .Portfolio .col-lg-4 {
    display: none;
  }

  .Portfolio .position-absolute {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .Portfolio {
    padding: 50px 0px 0px;
  }

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

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

/* #region ======== 11.1. Coming Soon section ======== */
@media screen and (max-width: 1199px) {
  .Coming-soon .text-center p {
    padding: 0px 35px;
  }

  .Coming-soon input[type="email"] {
    padding: 26px 0px 20px 24px;
  }

  .Coming-soon button {
    padding: 18px 36px;
  }
}

@media screen and (max-width: 991px) {
  .Coming-soon {
    padding: 70px 0px;
  }

  .Coming-soon .d-flex.text-center {
    gap: 18px;
    padding: 0px 0px 45px;
  }

  .Coming-soon input[type="email"] {
    padding: 20px 0px 18px 16px;
  }

  .Coming-soon button {
    padding: 17px 36px;
  }

  .Coming-soon #comingsoonTimer {
    transform: scale(0.8);
    padding: 50px 0px 0px;
  }

  .Coming-soon span {
    bottom: 30px;
  }
}

@media screen and (max-width: 480px) {
  .Coming-soon {
    padding: 50px 0px 15px;
  }

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

  .Coming-soon form .d-flex {
    border: none;
    gap: 12px;
    width: 85%;
  }

  .Coming-soon input[type="email"] {
    border: 1px solid #b81844;
    border-radius: 15px;
    padding: 19px 0 16px 18px;
  }

  .Coming-soon form button {
    position: relative !important;
    padding: 16px 0px;
  }

  .Coming-soon #comingsoonTimer {
    transform: scale(0.6);
    padding: 25px 0px 0px;
  }
}

@media screen and (max-width: 375px) {
  .Coming-soon #comingsoonTimer {
    transform: scale(0.5);
    padding: 15px 0px 0px;
  }

  .Coming-soon form .d-flex {
    width: 95%;
  }
}

@media screen and (max-width: 320px) {
  .Coming-soon form .d-flex {
    width: 100%;
  }

  .Coming-soon #comingsoonTimer {
    transform: scale(0.45);
  }
}

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

/* #region ======== 12.1. Error 404 section ======== */
@media screen and (max-width: 1399px) {
  .Error p {
    padding: 0px 125px;
  }
}

@media screen and (max-width: 1199px) {
  .Error .bg::before {
    top: 410px;
    left: -470px;
  }

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

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

@media screen and (max-width: 991px) {
  .Error h1 {
    font-size: 200px;
    line-height: 160px;
  }

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

@media screen and (max-width: 768px) {
  .Error::before {
    left: -585px;
  }

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

@media screen and (max-width: 480px) {
  .Error .bg::before {
    top: 410px;
    left: -760px;
  }

  .Error {
    padding: 50px 0px;
  }

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

  .Error h1 {
    font-size: 120px;
    line-height: 115px;
  }
}

@media screen and (max-width: 375px) {
  .Error .bg::before {
    top: 490px;
  }

  .Error h1 {
    font-size: 100px;
    line-height: 100px;
  }
}

/* #endregion */
/* ======== End of 12.1. Error 404 section ======== */