/* import font family is == Maven Pro ==*/
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&display=swap");
/* import font family is == Lato ==*/
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
/* import font family is == Saira ==*/
@import url("https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap");

/* 
Theme Name:     Optimistix
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. Features section
            1.4. Goal section
            1.5. Services section
            1.6. Company section
            1.7. Video section
            1.8. Stats section
            1.9. Products section
            1.10. Agency section
            1.11. Testimonials section
            1.12. Blog section
            1.13. Partners section
            1.14. ContactUs section
            1.15. Footer section
   
    02. About Page Style
        section About Page
            2.1. About_Hero section
            2.2. Team section

    03. Contact Page Style
        section Contact Page
            3.1. Map section

    04. Projects Page Style
        section Project Page
            4.1. SubPage_Hero section

    05. Servics Page Style
        section Services Page
            5.1. Solutions section

    06. ServicsDetail Page Style
        section ServicsDetail Page
            6.1. Quote section

    07. FAQ Page Style
        section FAQ Page
             7.1. FAQ section

    08. Team Page Style

    09. Blog Page Style
          
    10. Testimonial Page Style

    11. 404 Page Style

    12. Comming Page Style

    
 */

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: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

/* HTML5 display-role reset for older browsers */
/* =====  01. Reset  ====== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  font-family: "Maven Pro", sans-serif;
  line-height: 1;
  background: #171626;
  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: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

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

label {
  font-weight: normal;
}

iframe {
  width: 100%;
}

/* =====  End of 01. Reset  ====== */
/* ===== 02. Global Style ===== */

h1 {
  font-size: 100px;
  line-height: 85px;
  font-weight: 700;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.05em;
}

h2 {
  font-size: 75px;
  line-height: 70px;
  font-weight: 900;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.05em;
}

h3 {
  font-size: 65px;
  line-height: 70px;
  font-weight: 900;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.05em;
}

h4 {
  font-size: 45px;
  line-height: 45px;
  font-weight: 900;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.05em;
}

h5 {
  font-size: 34px;
  line-height: 40px;
  font-weight: 700;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.05em;
}

h6 {
  font-size: 24px;
  line-height: 29px;
  font-weight: 700;
  font-family: "Lato", sans-serif;
}

p {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  font-family: "Lato", sans-serif;
}

a {
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
  text-decoration: none;
  font-family: "Lato", sans-serif;
}

button {
  font-size: 18px;
  line-height: 19px;
  font-weight: 600;
  padding: 14px 22px;
  font-family: "Lato", sans-serif;
  border: none;
  outline: none;
}

.hover1 {
  padding: 12px 30px;
  background-color: transparent;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.5s ease;
  font-weight: 400;
  font-size: 17px;
  border: 1px solid;
  font-family: "Lato";
  color: #2cffc0;
  z-index: 1;
  display: inline-block;
}

.hover1::before,
.hover1::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  background-color: #2cffc0;
  transition: 1s ease;
}

.hover1::before {
  top: -16px;
  left: -16px;
}

.hover1::after {
  left: calc(100% + 16px);
  top: calc(100% + 16px);
}

.hover1:hover::before,
.hover1:hover::after {
  height: 410px;
  width: 410px;
}

.hover1:hover {
  color: rgb(10, 25, 30);
}

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

.hover2 {
  display: inline-block;
  overflow: hidden;
  position: relative;
  color: #ffffff;
  border-radius: 10px;
  z-index: 2;
  cursor: pointer;
  padding: 16px 30px;
  width: max-content;
  background: linear-gradient(297.02deg, #bd2bd4 6.06%, #722bf5 36.7%, #118dff 64.68%, #2cffc0 92.21%);
  font-size: 18px;
}

.hover2:hover {
  color: #ffffff;
}

.hover2::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 80%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  transition: all 0.7s ease;
  transform: rotate(45deg) translateY(-25%);
  z-index: 2;
}

.hover2:hover::after {
  left: 100%;
  top: 100%;
}

.hover3 {
  color: #2cffc0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: 0.5s ease;
}

.hover3 i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #2cffc0;
  color: #2cffc0;
  font-size: 16px;
  transform: rotate(-30deg);
  transition: 0.5s ease;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.hover3:hover {
  color: #2cffc0;
}

.hover3:hover i {
  background: #2cffc0;
  color: #171626;
}

.hover4 {
  color: #fbec5d;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: 0.5s ease;
}

.hover4 i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #fbec5d;
  color: #fbec5d;
  font-size: 16px;
  transition: 0.5s ease;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.hover4:hover {
  color: #fbec5d;
}

.hover4:hover i {
  color: #171626;
  background-color: #fbec5d;
}

.hover5 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 30px;
  background-image: linear-gradient(to right, #CFCCFF 50%, #171626 50%);
  background-size: 201% 105%;
  background-position: right bottom;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.5s ease;
}

.hover5:hover {
  background-position: left bottom;
  color: #171626;
}

.hover5 i {
  transition: 0.3s ease;
}

.hover5:hover i {
  transform: translateX(50%);
}

/* form validation modal */

.modal-content {
  padding: 40px;
  background: rgba(23, 22, 38, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-content img {
  margin: auto;
  width: 100px;
}

.modal-content div {
  padding: 40px 0px;
  width: 350px;
  margin: auto;
}

.modal-content h4,
.modal-content h6 {
  margin: auto;
  color: #ffffff;
  text-align: center;
}

.modal-content h6 {
  margin: 15px auto;
}

.modal .hover1 {
  width: 100px;
  padding: 12px 24px;
}


/* Scroll To Top Button */
.scrollToTopButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #03030b;
  background: #CFCCFF;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 50%;
  z-index: 999;
  transition: 1s ease all;
  border: 0;
  width: 65px;
  height: 65px;
  display: none;
  justify-content: center;
  align-items: center;
}

.scrollToTopButton:hover {
  transition: 1s ease all;
  transform: translateY(-15%);
}

.scrollToTopButton.show-btn {
  display: flex;
  transition: 1s ease all;
}

.scrollToTopButton .icon::before {
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  transition: 1s ease all;
  font-size: 20px;
}

.scrollToTopButton:hover .icon::before {
  content: "\f102";
}

.progress-ring {
  position: absolute;
  top: -13px;
  left: -2px;
  transform: rotate(-90deg);
  width: 80px;
  height: 80px;
}

.progress-ring__circle {
  transition: stroke-dashoffset 0.3s;
  stroke: #211F3C;
  stroke-width: 5;
}

/* ===== End of 02. Global Style ===== */
/* ========= 1.1. Header section ======== */

.nav-logo img {
  width: 156px;
}

header hr {
  width: 100%;
  margin: 0 0 1rem;
  border-right: var(--bs-border-width) solid;
  border: 1px solid #39375A;
  opacity: 1;
}

.navbar-collapse {
  justify-content: center;
}

.right-sidbar {
  width: 280px;
  position: fixed;
  height: 100vh;
  top: 0;
  left: -355px;
  overflow-x: hidden;
  transition: 0.5s;
  padding: 10px 20px 10px 5px;
  background: #171626;
  z-index: 999999;
}

.navbar-brand img {
  width: 130px;
}

.open-aside {
  display: none;
  z-index: 2;
}

aside .fa-xmark {
  padding: 8px 13px;
  background-color: #2cffc0;
  color: #171626;
  border: none;
  border-radius: 10px;
  font-size: 22px;
}

aside .fa-caret-down {
  color: #ffffff;
  font-size: 18px;
}

.right-sidbar a:focus,
aside a {
  color: #1b1117;
}

aside a:hover {
  color: #2cffc0;
}

#slid-drop {
  display: none;
}

aside li {
  padding: 12px;
}

#slid-drop li {
  padding: 12px 0px;
}

.aside-dropdwon {
  display: block !important;
}

.page-btn {
  padding: 0px 0px 10px;
  color: #ffffff;
  font-weight: 400;
  background-color: transparent;
  border: none;
  font-size: 16px;
}

.navbar ul li a:focus,
.navbar ul li a {
  color: #ffffff;
  padding: 15px;
  font-weight: 400;
}

.navbar ul li a i {
  color: #2cffc0;
}

.dropdown ul .active {
  background: none;
}

.right-sidbar a:active,
.right-sidbar a:focus,
.right-sidbar .nav-item a {
  font-weight: 400;
  color: #ffffff;
}

aside .nav-item .active,
.right-sidbar .active a,
.right-sidbar a:hover,
.navbar ul .active,
.navbar ul li a:hover {
  color: #2cffc0;
  font-weight: 400;
}

.dropdown ul {
  width: 200px;
}

.dropdown-menu {
  padding: 15px 10px;
  background: #171626;
  display: block;
  overflow: hidden;
  transition: all 0.3s ease-in;
  visibility: hidden;
  border-radius: 10px;
}

.dropdown ul li a {
  color: #ffffff;
  border-radius: 10px;
  background: transparent;
}

.dropdown ul li a:hover {
  background-color: transparent;
}

.open-aside {
  padding: 9px 14px;
  background-color: #2cffc0;
  border: none;
  border-radius: 10px;
  font-size: 25px;
  color: #171626;
}

aside .fa-xmark:hover,
.open-aside:hover {
  background: linear-gradient(322.86deg, #8600ef 7.9%, #2cffc0 87.18%);
  color: #ffffff;
}

header .navbar-collapse .Search_Icon {
  border-radius: 50%;
  color: #ffffff;
}

.Search_Icon {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
}

.Search_box {
  box-sizing: border-box;
  position: relative;
  width: 45px;
  height: 45px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  border-radius: 160px;
  transition: all 0.3s ease;
  background-color: #118DFF;
}

.Search_checkbox:focus {
  border: none;
  outline: none;
  right: 20px;
  top: 25px;
}

.Search_checkbox:not(:checked) {
  right: 0px;
  top: 0px;
  width: 45px;
  height: 45px;
}

.Search_checkbox:checked~.Search_box {
  width: 205px;
}

.Search_checkbox:checked~.Search_box .search_input {
  height: 100%;
  width: 160px;
}

.Search_checkbox:checked~.Search_box .iconContainer {
  padding-right: 0px;
}

.Search_checkbox {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 17px;
  top: 10px;
  z-index: 9;
  cursor: pointer;
  appearance: none;
}

.search_input {
  box-sizing: border-box;
  width: 0;
  height: 0px;
  background-color: transparent;
  border: none;
  outline: none;
  padding-bottom: 4px;
  padding-left: 10px;
  font-size: 16px;
  color: white;
  transition: all 0.3s ease;
  font-family: "Lato";
}

.search_input::placeholder {
  color: #FFFFFF;
}

.iconContainer {
  box-sizing: border-box;
  width: fit-content;
  transition: all 0.3s ease;
  padding-right: 10px;
  color: #ffffff;
}

.iconContainer i {
  font-size: 20px;
}

.search_icon {
  box-sizing: border-box;
  fill: #FFFFFF;
  font-size: 20px;
}

/* ========= End of 1.1. Header section ======== */
/* ========= 1.2. Hero section ======== */

.Hero {
  padding: 100px 0px;
  background-color: #211f3c;
  border-radius: 30px;
  display: flex;
  margin: auto;
  max-width: 1400px;
  width: 95%;
}

.Hero h1 {
  background: linear-gradient(322.86deg, #8600ef 7.9%, #2cffc0 87.18%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
}

.Hero h4 {
  color: #ffffff;
  padding: 20px 45px 0 0;
}

.Hero form input::placeholder {
  color: #ffffff;
}

.Hero form input {
  padding: 20px 23px;
  background-color: #252247;
  color: #ffffff;
  border-radius: 10px;
  border: 1px solid #5c569a;
}

.Hero .position-absolute:nth-child(1) {
  left: 4%;
  top: 15%;
}

.Hero .position-absolute:nth-child(2) {
  top: 9%;
  left: 30%;
}

.Hero figure img {
  width: 100%;
}

.Hero .gradient_cirlce1 {
  background: conic-gradient(from -35.12deg at 50% 50%,
      #bd2bd4 0deg,
      #722bf5 124.2deg,
      #118dff 237.6deg,
      #2cffc0 349.2deg,
      #bd2bd4 360deg);
  border-radius: 50%;
  width: 97px;
  height: 97px;
  position: absolute;
  top: 1%;
  rotate: 180deg;
}

.Hero .gradient_cirlce2 {
  background: conic-gradient(from -35.12deg at 50% 50%,
      #bd2bd4 0deg,
      #722bf5 124.2deg,
      #118dff 237.6deg,
      #2cffc0 349.2deg,
      #bd2bd4 360deg);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  position: absolute;
  bottom: 0%;
  right: 42%;
}

.Hero .Contact_Info {
  position: absolute;
  bottom: -22%;
  left: 0%;
  z-index: 999;
}

.Hero .Contact_Info i {
  color: #2cffc0;
  font-size: 18px;
}

.Hero .Contact_Info a:hover p,
.Hero .Contact_Info a:hover i {
  color: #fbec5d;
}

.Hero .Contact_Info a {
  display: flex;
}

.Hero .Contact_Info p {
  color: #aaa7d0;
  font-size: 18px;
  font-weight: 400;
  width: max-content;
}

.Hero .Contact_Info hr {
  border: 0;
  width: 2px;
  height: 33px;
  background: #5c569a;
  margin: auto;
  opacity: 1;
}

.Hero .mt-4 {
  background: url("../images/bg/hero_Img_bg.webp");
  height: 553px;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 270px;
  background-size: cover;
  border-radius: 135px;
}

.Hero img[alt="MagnifyingGlass"] {
  position: absolute;
  bottom: 5%;
  left: 22%;
  width: 163px;
}

.Hero img[alt="pink_block"] {
  position: absolute;
  left: 5%;
  width: 100px;
}

.Hero .m-0 {
  background: url("../images/bg/hero_img2_bg.webp");
  height: 707px;
  width: 173px;
  background-repeat: no-repeat;
  overflow: hidden;
  background-size: cover;
  border-radius: 155px;
}

/* ========= End of 1.2. Hero section ======== */
/* ========= 1.3. Features section ======== */

.Features {
  padding: 100px 0;
}

.Features h4 {
  color: #cfccff;
}

.Features .mx-auto {
  width: 75%;
}

.Features .text-center p {
  color: #b6b5c2;
  padding: 15px 140px 40px;
  transition: all 0.5s ease;
}

.Features h3 {
  -webkit-text-stroke: 1px #fbec5d;
  color: transparent;
  letter-spacing: unset;
  transition: all 0.5s ease;
}

.Features h6 {
  color: #ffffff;
  flex-grow: 1;
}

.Features .col-lg-3 .flex-column {
  padding: 30px;
  border: 1px solid #118dff;
  border-radius: 10px;
  background: #171626;
  transition: all 0.5s ease;
}

.Features .col-lg-3 .flex-column:hover {
  transform: scale(1.05);
  background: #118dff;
}

.Features .col-lg-3 .flex-column:hover h3 {
  color: #fbec5d;
}

.Features .col-lg-3 .flex-column:hover p {
  color: #ffffff;
}

.Features .col-lg-3 .flex-column p {
  font-size: 14px;
  padding: 0 25px 0 0px;
  color: #B6B5C2;
  flex-grow: 2;
}

.Features .gap-2 i {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #2cffc0;
  color: #2cffc0;
  font-size: 16px;
  transform: rotate(-30deg);
}

.Features .gap-2 a {
  color: #2cffc0;
  font-size: 14px;
}

.Features .gap-2:hover i {
  color: #171626;
  background-color: #2cffc0;
}

.Features_Star img {
  top: 88px;
  left: -7%;
  z-index: -1;
}

.Features img[alt="Star_About"] {
  top: -69px;
  left: unset;
  z-index: -1;
  right: -6%;
}

/* ========= End of 1.3. Features section ======== */
/* ========= 1.4. Goal section ======== */

.Goal h4 {
  color: #cfccff;
}

.Goal .pe-lg-2 {
  color: #fbec5d;
  font-weight: 800;
}

.Goal .pe-lg-2 {
  width: 80%;
}

.Goal p {
  color: #b6b5c2;
  padding: 0 95px 0 0px;
}

.Goal .hover2 {
  background: linear-gradient(204.84deg, #9303D7 20.62%, #118DFF 79.18%);
}

.Goal .gap-lg-3 h6 {
  color: #ffffff;
  padding: 6px 20px;
  border: 1px solid #ffffff;
  border-radius: 10px;
  font-size: 20px;
  transition: all 0.3s ease-out;
}

.Goal .gap-lg-3 h6:hover {
  color: #2cffc0;
  border: 1px solid #2cffc0;
}

.Goal .w-100 {
  object-fit: cover;
  object-position: top;
}

.ServicesDetail_Goal .w-100 {
  border-radius: 10px;
}

.Goal figure:nth-child(1) {
  top: -16px;
  right: 10%;
}

.Goal .position-absolute {
  left: -30%;
  bottom: -12%;
}

.About_Goal {
  padding: 100px 0px 0px;
}

.Goal .z-0 {
  z-index: -1;
}

/* ========= End of 1.4. Goal section ======== */
/* ========= 1.5. Services section ======== */

.Services {
  padding: 100px 0;
}

.Services .container {
  background: url("../images/icons/Services_bg.svg");
  background-repeat: no-repeat;
  background-position: 90% 0%;
}

.Services h4 {
  color: #cfccff;
}

.Services .pe-lg-5 p {
  color: #b6b5c2;
  padding: 0 201px 40px 0px;
}

.Services .flex-wrap .flex-column {
  padding: 25px 50px 25px 40px;
  background-color: #722bf5;
  border-radius: 10px;
  width: 45%;
  flex-grow: 1;
  transition: all 0.5s ease;
}

.Services .flex-wrap .flex-column:nth-child(2) {
  background-color: #2cffc0;
}

.Services .flex-wrap .flex-column:nth-child(3) {
  background-color: #fbec5d;
}

.Services .flex-wrap .flex-column:nth-child(4) {
  background-color: #bd2bd4;
}

.Services .gap-3 img {
  width: 81px;
  height: 81px;
}

.Services .flex-wrap h6 {
  color: #ffffff;
  font-weight: 800;
}

.Services .flex-wrap p {
  color: #ffffff;
  flex-grow: 1;
}

.Services .flex-column:nth-child(2) h6,
.Services .flex-column:nth-child(2) p {
  color: #171626;
}

.Services .flex-column:nth-child(3) h6,
.Services .flex-column:nth-child(3) p {
  color: #171626;
}

.Services .flex-wrap p {
  font-size: 14px;
  padding: 0 45px 0 0;
}

.Services .mt-lg-4 a {
  padding: 16px 40px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  color: #ffffff;
  background: transparent;
  transition: 0.3s ease;
}

.Services .mt-lg-4 a:hover {
  background: #118dff;
  border: 1px solid #118dff;
}

.Services .justify-content-between {
  background: linear-gradient(11.9deg, #9303d7 4.31%, #118dff 75.42%);
  border-radius: 10px;
  transition: all 0.5s ease;
}

.Services .text-center {
  padding: 75px 82px 10px;
}

.Services .justify-content-between h4,
.Services .justify-content-between p {
  color: #ffffff;
}

.Services .justify-content-center img {
  width: 85%;
}

.Services .hover4 i {
  transform: rotate(-38deg);
}

.Services .gy-4 .col-lg-4:nth-child(even) p,
.Services .gy-4 .col-lg-4:nth-child(even) h6 {
  color: #171626;
}

.Services .pt-3 {
  color: #ffffff !important;
}

.Services .gy-4 .col-lg-4:nth-child(2) .w-100 {
  background-color: #2CFFC0;
}

.Services .gy-4 .col-lg-4:nth-child(3) .w-100 {
  background-color: #118DFF;
}

.Services .gy-4 .col-lg-4:nth-child(4) .w-100,
.Services .gy-4 .col-lg-4:nth-child(6) .w-100 {
  background-color: #FBEC5D;
}

.Services .gy-4 .col-lg-4:nth-child(5) .w-100 {
  background-color: #BD2BD4;
}

.ServicesPage_Services .container {
  background: none;
}

.ServicesPage_Services .position-absolute {
  bottom: -20%;
  right: 0px;
  z-index: -1;
}

.ServicesPage_Services {
  padding: 100px 0 200px;
}

/* ========= End of 1.5. Services section ======== */
/* ========= 1.6. Company section ======== */

.Company {
  padding: 0px 0px 100px;
}

.Company h4 {
  color: #cfccff;
}

.Company p {
  color: #b6b5c2;
  transition: all 0.5s ease;
}

.Company h6 {
  color: #ffffff;
}

.Company .flex-column {
  padding: 25px 30px;
  background: transparent;
  border: 1px solid #6e68b2;
  transition: all 0.5s ease;
}

.Company .flex-column:hover {
  transform: scale(1.05);
  background: linear-gradient(11.9deg, #9303d7 4.31%, #118dff 75.42%);
}

.Company .flex-column:hover p {
  color: #ffffff;
}

.Company img[alt="CompanyImg"] {
  -webkit-mask-image: url("../images/bg/Companymask.webp");
  mask-image: url("../images/bg/Companymask.webp");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  object-fit: cover;
  transition: all 0.3s ease;
}

.Company img[alt="CompanyImg"]:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
  transform: scale(1.05);
}

.Company .Gradient_Circle {
  position: absolute;
  background: conic-gradient(from -35.12deg at 50% 50%,
      #bd2bd4 0deg,
      #722bf5 124.2deg,
      #118dff 237.6deg,
      #2cffc0 349.2deg,
      #bd2bd4 360deg);
  border-radius: 50%;
  width: 78px;
  height: 78px;
  top: 4%;
  left: 20%;
}

.Company .m-0 .position-absolute {
  left: 48%;
  top: 9%;
}

.Company .m-0 .bottom-0 {
  position: absolute;
  left: 43%;
  bottom: 5% !important;
}

.Company.pt-0 .flex-column:hover {
  transform: scale(1.05);
  background: linear-gradient(300.59deg, #BD2BD4 13.57%, #722BF5 42.05%, #118DFF 68.05%, #2CFFC0 93.64%);
}

.Company.pt-0 .m-0 .bottom-0 {
  left: 39%;
}

.Company.pt-0 .Gradient_Circle {
  left: 18%;
}

.Company.pt-0 .m-0 .position-absolute {
  left: 43%;
}

/* ========= End of 1.6. Company section ======== */
/* ========= 1.7. Video section ======== */

.Video {
  padding: 140px 0 100px;
  position: relative;
}

.Video::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/index/Cta.webp") no-repeat center center / cover;
  opacity: 0.5;
  z-index: -1;
  background-attachment: fixed;
  background-size: cover;
}

.Video h2 {
  color: #ffffff;
}

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

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

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

.Video a i {
  border-radius: 50%;
  border: 5px solid #ffffff;
  width: 80px;
  height: 80px;
  font-size: 40px;
  color: #ffffff;
  animation: pulse 2s infinite;
  transition: 0.3s ease all;
}

.Video a i:hover {
  color: #fbec5d;
  border: 5px solid #fbec5d;
}

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

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

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

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

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

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

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

.Team_Video {
  z-index: 1;
}

.Team_Video::before {
  background: url("../images/bg/Join_bg.webp") no-repeat center center / cover;
  background-attachment: fixed;
  z-index: -1;
}

.Team_Video p {
  color: #ffffff;
  padding: 15px 260px 0px;
}

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

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

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

/* ========= End of 1.7. Video section ======== */
/* ========= 1.8. Stats section ======== */

.Stats {
  padding: 100px 0;
  background: #03030b url("../images/bg/Stats_bg.webp") no-repeat center center / cover;
  background-attachment: fixed;
}

.Stats .mx-auto {
  width: 75%;
}

.Stats h4 {
  color: #cfccff;
}

.Stats h3,
.Stats p {
  color: #ffffff;
}

.Stats .text-center p {
  padding: 15px 172px;
}

.Stats .pe-lg-5 {
  font-size: 14px;
  padding: 35px 44px;
}

.Stats .gap-lg-3 {
  border-radius: 10px;
  border: 1px solid #6761c0;
  background: #17162699;
  padding: 45px 20px;
  transition: 0.3s ease all;
}

.Stats .gap-lg-3:hover {
  background: #118dff;
  border: 1px solid #118dff;
  transform: scale(1.05);
}

.Stats .gap-lg-3 p {
  font-size: 20px;
  font-weight: 700;
}

.Stats .gap-3 {
  margin-top: 82px;
}

/* ========= End of 1.8. Stats section ======== */
/* ========= 1.9. Product section ======== */

.Product {
  padding: 100px 0;
}

.Product .mx-auto {
  width: 75%;
}

.Product h3 {
  color: #cfccff;
}

.Product .text-center p {
  color: #ffffff;
  padding: 15px 172px;
}

.Product img {
  border-radius: 10px;
}

.Product .Product_Hover {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-blend-mode: multiply;
}

.Product .Product_Hover::after,
.Product .Product_Hover::before {
  content: "";
  position: absolute;
  z-index: 1;
}

.Product .Product_Hover::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.Product .Product_Hover::before {
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease 0.2s;
  box-sizing: border-box;
}

.Product .Product_Hover:hover::after {
  background: rgba(227, 58, 255, 0.5);
}

.Product .Product_Hover:hover::before {
  border: 2px solid #ffffff;
  width: 90%;
  height: 90%;
}

.Product .Product_Hover .flex-sm-column {
  position: absolute;
  bottom: 8%;
  width: 80%;
  z-index: 999;
  transition: transform 0.3s ease;
  flex-direction: column;
  transition: visibility 0s, opacity 1s linear 1s;
  text-align: center;
}

.Product .Product_Hover:hover .flex-sm-column {
  animation: hoverAnimation 1.5s ease forwards;
  opacity: 1;
}

@keyframes hoverAnimation {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

.Product .Product_Hover p {
  color: #ffffff;
  font-size: 14px;
  line-height: 17px;
}

.Product .Product_Hover p,
.Product .Product_Hover a {
  text-align: center;
  display: none;
  opacity: 0;
  transform: translateY(100%);
  transition: all ease 0.5s,
}


.Product .Product_Hover:hover .flex-sm-column p,
.Product .Product_Hover:hover .flex-sm-column a {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0s;
}

.Product .Product_Hover h6 {
  transform: translateY(0);
  color: #ffffff;
}

.Product .hover4 i {
  transform: rotate(-30deg);
}

.Product .flex-column:last-child {
  background-color: #722bf5;
  border-radius: 10px;
  padding: 30px 65px;
}

.Product h4 {
  color: #ffffff;
}

.Product .w-100 a {
  border: 1px solid #ffffff;
  padding: 16px 40px;
  color: #ffffff;
  width: 100%;
  border-radius: 10px;
  transition: 0.3s ease;
}

.Product .w-100 a:hover {
  background-color: #118dff;
  border: 1px solid transparent;
}

.Product .position-absolute {
  left: -7%;
  top: 4%;
}

.Product .m-0 {
  top: -12%;
}

/* ========= End of 1.9. Product section ======== */
/* ========= 1.10. Agency section ======== */

.Agency h4 {
  color: #cfccff;
}

.Agency h6,
.Agency p {
  color: #ffffff;
}

.Agency .w-75 p {
  padding: 15px 56px 10px 0px;
}

.Agency .align-items-center h6 {
  border: 2px solid #fbec5d;
  border-radius: 50%;
  padding: 13px;
}

.Agency .align-items-center p {
  font-size: 20px;
  font-weight: 700;
}

.Agency img[alt="Agency_Img1"] {
  -webkit-mask-image: url("../images/bg/AgencyMask.webp");
  mask-image: url("../images/bg/AgencyMask.webp");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  object-fit: cover;
  background: #2cffc0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

.Agency img[alt="Agency_Img1"]:hover {
  filter: brightness(1.1) saturate(1.2);
  transform: translateY(-5px);
}

.Agency .flex-column figure {
  width: 100%;
  height: 80%;
}

.Agency .flex-column img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.Agency .flex-column img:hover {
  transform: scale(1.1) rotate(5deg);
}

.Agency .position-absolute:nth-child(1) {
  top: -4%;
  left: 51%;
}

.Agency .position-absolute:nth-child(2) {
  bottom: -10%;
  left: -7%;
  z-index: -1;
}

.ServicesDetail_Agency {
  padding: 100px 0px;
}

.ServicesDetail_Agency img {
  flex-basis: fit-content;
}

.ServicesDetail_Agency .position-absolute {
  left: -4% !important;
  top: -28% !important;
  z-index: -1;
}

/* ========= End of 1.10. Agency section ======== */
/* ========= 1.11. Testimonial section ======== */

.Testimonial {
  padding: 100px 0;
}

.Testimonial .mx-auto p,
.Testimonial .mx-auto {
  width: 75%;
}

.Testimonial h3 {
  color: #cfccff;
}

.Testimonial p {
  color: #ffffff;
}

.Testimonial .text-center p {
  padding: 15px 80px;
}

.Testimonial figure img {
  border-radius: 30px;
  width: 180px;
  transition: all 0.5s ease;
}

.Testimonial figure i {
  color: #e6b938;
}

.Testimonial .py-3 {
  font-size: 14px;
  color: #b6b5c2;
}

.Testimonial h6 {
  color: #118dff;
  font-size: 20px;
}

.Testimonial .gap-lg-5 {
  padding: 50px 35px;
  border: 1px solid #fefefe;
  border-radius: 10px;
  width: unset !important;
  gap: 45px !important;
  transition: all 0.5s ease;
}

.Testimonial .gap-lg-5:hover {
  border: 1px solid #118DFF;
}

.Testimonial .gap-lg-5:hover img {
  transform: scale(1.05);
}

/* ========= End of 1.11. Testimonial section ======== */
/* ========= 1.12. Blog section ======== */

.Blog h3 {
  color: #cfccff;
}

.Blog .mx-auto p,
.Blog .mx-auto {
  width: 75%;
}

.Blog .text-center p {
  color: #ffffff;
  padding: 15px 80px 0;
}

.Blog .position-relative {
  width: 33%;
  overflow: hidden;
  transition: 0.5s ease all;
}

.Blog .position-absolute {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px 45px;
  background: linear-gradient(0deg, #722bf5 8.6%, rgba(114, 43, 245, 0) 63.44%);
}

.Blog .position-absolute p {
  font-family: "Saira", sans-serif;
  padding: 16px;
  background: #2cffc0;
  color: #171626;
  font-size: 18px;
  font-weight: 700;
  width: max-content;
}

.Blog figure img {
  width: 100%;
  object-fit: cover;
  object-position: top;
  transition: 1s ease all;
}

.Blog .position-relative:hover img {
  transform: scale(1.1);
}

.Blog .position-absolute h5 {
  color: #ffffff;
  padding: 20px 0 30px;
}

.Blog form {
  gap: 30px;
  padding: 100px 0px;
}

.Blog form input::placeholder {
  color: #ffffff;
}

.Blog form input {
  border-radius: 10px;
  border: 1px solid #5C569A;
  background: #252247;
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  width: 60%;
}

.Editors_Blog {
  padding: 100px 0px 0px;
}

.Editors_Blog .text-center h4 {
  color: #CFCCFF
}

.Editors_Blog .text-center p {
  padding: 10px 140px 40px;
}

.Editors_Blog .position-absolute {
  background: linear-gradient(90deg, #722BF5 10.98%, rgba(114, 43, 245, 0) 76.32%);
}

/* ========= End of 1.12. Blog section ======== */
/* ========= 1.13. Partners section ======== */

.Partners {
  padding: 100px 0px;
}

.Partners .mx-auto p,
.Partners .mx-auto {
  width: 75%;
}

.Partners h4 {
  color: #cfccff;
}

.Partners p {
  color: #ffffff;
  padding: 15px 80px 20px;
}

.Partners figure {
  border: 1px solid #ffffff;
  padding: 15px;
  width: 90% !important;
  display: flex !important;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.Partners img {
  width: 140px;
  height: 26px;
  transition: 0.5s ease all;
}

.Partners figure::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #2cffc0;
  transition: width 0.5s ease;
}

.Partners figure:hover::after {
  width: 100%;
}

.Partners figure:hover {
  border: 1px solid transparent;
}

.Partners figure:hover img {
  transform: scale(1.1);
}

/* ========= End of 1.13. Partners section ======== */
/* ========= 1.14. ContactUs section ======== */

.ContactUs {
  padding: 100px 0px;
  position: relative;
}

.ContactUs:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/bg/ContactUs_Bg.webp") no-repeat center center / cover;
  opacity: 0.15;
  z-index: -1;
  background-attachment: fixed;
}

.ContactUs h1 {
  background: linear-gradient(to top left,
      #bd2bd4 30.67%,
      #722bf5 51.22%,
      #118dff 72.37%,
      #2cffc0 85.13%);

  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
}

.ContactUs p {
  color: #ffffff;
  padding: 20px 102px 20px 0;
}

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

.ContactUs form textarea,
.ContactUs form input {
  padding: 16px 0px 16px 0px;
  background: transparent;
  outline: none;
  color: #ffffff;
  border: none;
  border-bottom: 1px solid #ffffff;
  font-size: 14px;
  width: 100%;
}

.ContactUs form button {
  padding: 16px 40px;
  color: #ffffff;
  border-radius: 10px;
  background: #118dff;
  outline: none;
  border: none;
  transition: 0.3s ease;
  border: 1px solid #118dff;
}

.ContactUs form button:hover {
  background: transparent;
}

/* ========= End of 1.14. ContactUs section ======== */
/* ========= 1.15. footer section ======== */

footer {
  padding: 100px 0 20px;
}

footer h6 {
  color: #2cffc0;
  font-size: 22px;
}

footer p {
  color: #ffffff;
}

footer .gap-lg-4 figure {
  font-size: 18px;
  color: #2cffc0;
  border-radius: 50%;
  border: 1px solid #2cffc0;
  width: 47px;
  height: 47px;
  transition: 0.3s ease;
}

footer .gap-lg-4:hover figure {
  background: #2cffc0;
  color: #171626;
}

footer .justify-content-between:nth-child(1) {
  padding: 0 110px;
}

footer hr {
  width: 100%;
  border: 1px solid #636363;
  margin: 35px 0;
  border-right: var(--bs-border-width) solid;
  opacity: 1;
}

footer img {
  width: 156px;
}

footer form input::placeholder {
  color: #ffffff;
}

footer form input {
  border: none;
  border-bottom: 1px solid #ffffff;
  background: transparent;
  padding: 20px 0;
  color: #ffffff;
  font-size: 14px;
  width: 315px;
}

footer form .hover2 {
  padding: 16px 40px;
  font-size: 16px;
}

footer .fa-brands {
  font-size: 25px;
  color: #ffffff;
  transition: all ease 0.5s;
}

footer .fa-brands:hover {
  color: #2CFFC0;
}

footer hr:nth-of-type(2) {
  margin: 35px 0 20px;
}

footer .justify-content-between:last-child p {
  color: #aaaaaa;
  font-size: 14px;
}

/* ========= End of 1.15. footer section ======== */
/* ========= 2.1. About_Hero section ======== */

.About_Hero {
  padding: 100px 0px;
  background-color: #211f3c;
  border-radius: 30px;
  display: flex;
  margin: auto;
  max-width: 1400px;
  width: 95%;
}

.About_Hero p {
  color: #FFFFFF;
  padding: 25px 80px 40px 0px;
}

.About_Hero h3 {
  color: #FFFFFF;
}

.About_Hero img {
  width: 100%;
}

.About_Hero .rounded-circle {
  transition: 0.3s ease all;
}

.About_Hero .rounded-circle:hover {
  transform: scale(1.1) rotate(5deg);
}

.About_Hero img[alt="About_Hero_Img3"] {
  -webkit-mask-image: url("../images/bg/AgencyMask.webp");
  mask-image: url("../images/bg/AgencyMask.webp");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  object-fit: cover;
  background: #118DFF;
  height: 100%;
  transition: 0.3s ease all;
}

.About_Hero img[alt="About_Hero_Img3"]:hover {
  filter: brightness(1.1) saturate(1.2);
  transform: translateY(-5px);
}

/* ========= End of 2.1. About_Hero section ======== */
/* ========= 2.2. Team section ======== */

.Team {
  padding: 100px 0;
  overflow-y: hidden;
}

.Team h4 {
  color: #CFCCFF;
}

.Team .w-75 p {
  color: #B6B5C2 !important;
  padding: 20px 121px 50px;
}

.Team .text-center h6 {
  flex-grow: 1;
}

.Team .text-center h6,
.Team .text-center p {
  color: #ffffff;
}

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

.Team .col-md-3 .text-center {
  background: #722BF533;
  padding: 25px 40px;
  border-radius: 0px 0px 20px 20px;
  flex-grow: 1;
}

.Team figure {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.Team figure img {
  transition: background-color 0.5s ease;
}

.Team figure .Team_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #E33AFFA1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.Team figure:hover .Team_overlay {
  opacity: 1;
}

.Team figure .Team_social_icons {
  display: flex;
  gap: 10px;
}

.Team figure .Team_social_icons i {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #171626;
  background-color: #FBEC5D;
  font-size: 16px;
  transition: 0.3s ease;
}

.Team figure .Team_social_icons i:hover {
  background-color: #171626;
  color: #fbec5d;
}

.Team figure:hover img {
  background-color: rgba(255, 255, 255, 0.5);
}

.Team .position-absolute {
  left: -7%;
  z-index: -10;
}

/* ========= End of 2.2. Team section ======== */
/* ========= 4.1. SubPage_Hero section ======== */

.SubPage_Hero {
  padding: 50px 0;
  background-color: #211f3c;
  border-radius: 30px;
  display: flex;
  margin: auto;
  max-width: 1400px;
  width: 95%;
}

.SubPage_Hero h1 {
  background: linear-gradient(344.94deg, #BD2BD4 5.67%, #722BF5 35.22%, #118DFF 52.37%, #2CFFC0 86.13%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
}

.SubPage_Hero p {
  color: #B6B5C2;
  padding: 20px 380px 10px;
}

/* ========= End of 4.1. SubPage_Hero section ======== */
/* ========= 5.1. Solutions section ======== */

.Solutions {
  padding: 100px 0px;
}

.Solutions .text-center h4 {
  color: #CFCCFF;
}

.Solutions .text-center p {
  color: #B6B5C2;
  padding: 15px 140px 50px;
}

.Solutions .gap-2 {
  background: linear-gradient(297.94deg, #BD2BD4 7.01%, #722BF5 37.78%, #118DFF 65.53%, #2CFFC0 96.2%);
  border-radius: 10px;
  padding: 40px 35px 35px;
}

.Solutions .gap-2 h4 {
  color: #ffffff;
  font-size: 48px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: unset;
  line-height: 48px;
}

.Solutions .gap-2 p {
  font-size: 14px;
  color: #ffffff;
}

.Solutions .gap-2 i {
  transform: rotate(-30deg);
}

.Solutions .gap-2:nth-child(2) {
  background: #E33AFF;
  padding: 0;
}

.Solutions .gap-2:nth-child(2) .gap-lg-3 {
  padding: 45px 35px 35px 0;
}

.Solutions .rounded-circle {
  background-color: #ffffff;
  box-shadow: 0px 7.8px 10.15px 0px #00000021;
  width: 92px;
  height: 92px;
  margin: 40px 118px 35px 35px;
}

.Solutions .rounded-circle h6 {
  font-size: 18px;
  font-family: "Maven Pro";
}

.Solutions .rounded-circle h6,
.Solutions .rounded-circle h5 {
  color: #E33AFF;
  font-weight: 800;
  line-height: 25px;
}

.Solutions .col-lg-5 .position-absolute {
  transform: rotate(14.55deg);
  width: 262px;
  top: -79px;
  left: -36px;
}

.Solutions .col-lg-7 img {
  max-height: 697px;
  object-fit: cover;
  border-radius: 10px;
}

.Solutions .col-lg-7 .position-absolute {
  padding: 0 35px 0 40px;
  bottom: 15%;
}

.Solutions .col-lg-7 .position-absolute h1 {
  background: linear-gradient(312.94deg, #BD2BD4 8.67%, #722BF5 49.8%, #118DFF 56.91%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
}

.Solutions .col-lg-7 .position-absolute h4 {
  color: #ffffff;
}

.Solutions .col-lg-7 .position-absolute a {
  padding: 16px 30px;
  border-radius: 15px;
  background-color: #171626;
  color: #ffffff;
  transition: 0.3s ease;
  border: 1px solid #171626;
}

.Solutions .col-lg-7 .position-absolute a:hover {
  color: #171626;
  background-color: transparent;
}

/* ========= End of 5.1. Solutions section ======== */
/* ========= 6.1. Quote section ======== */

.Quote {
  padding: 100px 0px;
}

.Quote h4 {
  color: #CFCCFF;
}

.Quote p {
  color: #ffffff;
}

.Quote .col-lg-7 .flex-column:nth-child(1) {
  padding: 40px 60px;
  background-color: #201F3B;
  border-radius: 10px;
  gap: 30px;
}

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

.Quote form textarea,
.Quote form input {
  padding: 6px 20px;
  border-radius: 10px;
  border: 1px solid #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 40px;
  color: #ffffff;
  background: transparent;
  font-family: "Lato";
}

.Quote button {
  font-size: 18px;
  border-radius: 10px;
  padding: 16px 40px;
  border-radius: 15px;
  background-color: #118DFF;
  color: #ffffff;
  transition: 0.3s ease;
  border: 1px solid #118DFF;
}

.Quote button:hover {
  background: none;
  color: #118DFF;
}

.Quote .col-lg-5 p {
  padding: 0 81px;
}

/* ========= End of 6.1. Quote section ======== */
/* ========= 7.1. FAQ section ======== */

.FAQ {
  padding: 100px 0px 0px;
}

.FAQ .accordion-header:focus {
  background-color: transparent;
}

.FAQ .accordion {
  width: 95%;
}

.FAQ .accordion,
.FAQ .accordion-item,
.FAQ .accordion-header {
  background-color: transparent;
  border-radius: 10px;
}

.FAQ .accordion-body {
  padding: 15px 141px 0px 20px;
}

.FAQ .accordion-item {
  margin: 35px 0px 0px;
}

.FAQ .accordion p {
  color: #ffffff;
}

.FAQ .accordion-button {
  color: #ffffff;
  font-family: "Saira";
  font-size: 18px;
  font-weight: 700;
  justify-content: space-between;
  background-color: transparent;
  padding: 25px 20px;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  gap: 10px;
}

.FAQ .accordion-button:active,
.FAQ .accordion-button:focus {
  box-shadow: none;
  outline: none;
}

.FAQ .accordion-item:last-of-type .accordion-button,
.FAQ .accordion-item:first-of-type .accordion-button {
  border-radius: 10px;
}

.FAQ .accordion-button:not(.collapsed) {
  border-radius: 10px;
  color: #171626;
  padding: 25px 20px;
  background-color: #2CFFC0;
  border: 1px solid transparent;
}

.FAQ .accordion-button:not(.collapsed)::after {
  background-image: url("../images/icons/Accordian_Minus.svg");
  background-position: -100%;
}

.FAQ .accordion-button::after {
  background-image: url("../images/icons/Accordian_Plus.svg");
}

.FAQ figure img {
  border-radius: 10px;
}

.FAQ .position-absolute {
  left: -33px;
  top: -1px;
}

/* ========= End of 7.1. FAQ section ======== */
/* ========= 9.1. Clients section ======== */

.Clients {
  padding: 100px 0px 0px;
}

.Clients .h-100 {
  border-radius: 10px;
  padding: 50px 105px 50px 50px;
  border: 1px solid #FEFEFE;
  gap: 45px;
  transition: 0.3s ease all;
}

.Clients .h-100:hover {
  border: 1px solid #118DFF;
}

.Clients .h-100:hover img {
  transform: scale(1.05);
}

.Clients p {
  color: #B6B5C2;
}

.Clients .flex-column div p {
  color: #ffffff;
}

.Clients h6 {
  color: #118DFF;
  font-size: 20px;
}

.Clients figure {
  width: 40%;
}

.Clients .flex-column {
  width: 60%;
}

.Clients figure img {
  border-radius: 30px;
  transition: 0.3s ease all;
}

.Clients figure i {
  color: #E6B938;
}

/* ========= End of 9.1. Clients section ======== */
/* ========= 10.1. Error_404 section ======== */

.Error_404 {
  padding: 100px 0px;
  background: url("../images/icons/Services_bg.svg");
  background-repeat: no-repeat;
  background-position: 83% 34%;
}

.Error_404 p,
.Error_404 h4 {
  color: #ffffff;
  width: 40%;
}

.Error_404 h1 {
  font-size: 420px;
  background: linear-gradient(302.94deg, #BD2BD4 8.67%, #722BF5 36.22%, #118DFF 61.37%, #2CFFC0 86.13%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========= End of 10.1. Error_404 section ======== */
/* ========= 11.1. ComingSoon section ======== */

.ComingSoon {
  padding: 100px 0px;
}

.ComingSoon p,
.ComingSoon h4 {
  color: #ffffff;
  width: 55%;
}

.ComingSoon h1 {
  font-size: 135px;
  background: linear-gradient(302.94deg, #BD2BD4 8.67%, #722BF5 36.22%, #118DFF 61.37%, #2CFFC0 86.13%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  line-height: 0.8;
}

.ComingSoon img[alt="404_drawing"] {
  border-radius: 300px;
}

.ComingSoon img[alt="Hero_img1"] {
  background: url("../images/bg/hero_Img_bg.webp");
  background-repeat: no-repeat;
  overflow: hidden;
  background-size: cover;
  border-radius: 150px;
  height: 100%;
}

.ComingSoon .position-absolute {
  top: 40%;
  left: -20%;
  width: 40px;
}

/* ========= End of 11.1. ComingSoon section ======== */