/* ===== import font family NOTO SANS ==== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

/* ==== import font family is  POPPINS ====*/
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sixtyfour+Convergence&display=swap");

/* ==== Theme Information 

* Theme Name:     Voxpor
* Version:        1.0.0
* Theme URI:      https://html-templates.evonicmedia.com/voxpor/index.html
* Author:         Evonicmedia
* Author URI:     https://evonicmedia.com/
* Description:    Handles all visual styling including layout, typography, spacing
*                 colors, and responsive design for the Voxpor website.

* [Table of Content]
 01. Reset
 02. Global Style
	01. Index Page Style
        Section Index Page
            1.0. Header Section
            1.1. Hero Section
            1.2. Financial Section
            1.4. Track Section
            1.5. Accounting Section
            1.6. Gallery Section
            1.7. Testimonials Section
            1.8. Download App
            1.9. Pricing Section
            1.10. Blogs Section
            1.11. Footer Section
   
    02. About Page Style
         Section Product Page
            2.1. WhyUseVoxpor Section
            2.2. Our Team Section
            2.3. Faq Section

    03. Features Page Style

    04. Pricing Page Style

    05. Our Blog Page Style

    06. Blog Detail Page Style
          Section Blog Detail Page
             6.1. Blog Detail Section
             6.2. Reply Section

    07. Testimonial Page Style

    08. Faq Page Style

    09. Team Page Style
          Section Team Page
              9.1. Our Team Section  

    10. Contact Page Style 
         Section Contact Page
            10.1. Contact Form Section
              
    11. 404 Page Style
         Section 404 Page
            11.1. Error 404 Section

    12. Coming Soon Page Style
         Section Coming Soon Page
            12.1. Coming Soon Section

==== */

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%;
}

body {
  background-color: #0f131d;
}

/* ===== 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: "Noto Sans", Poppins, sans-serif;
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

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;
}

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

label {
  font-weight: normal;
}

iframe {
  width: 100%;
}

/* =====  End of 01. Reset  ====== */
/* ===== 02. Global Style ===== */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

h1 {
  font-size: 70px;
  font-weight: 700;
  line-height: 78px;
  font-family: "Noto Sans", "sans-serif";
  color: #fff;
}

h2 {
  font-size: 42px;
  font-weight: 600;
  line-height: 54px;
  font-family: "Noto Sans", "sans-serif";
  color: #fff;
}

h3 {
  font-size: 30px;
  font-weight: 600;
  line-height: normal;
  font-family: "Noto Sans", "sans-serif";
  color: #fff;
}

h4 {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  font-family: "Noto Sans", "sans-serif";
  color: #fff;
}

h5 {
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  font-family: "Noto Sans", "sans-serif";
  color: #fff;
}

h6 {
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  font-family: "Noto Sans", "sans-serif";
  color: #fff;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  font-family: "Poppins", "sans-serif";
  color: #fff;
}

button {
  font-family: "Poppins", "sans-serif";
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

a {
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  font-family: "Poppins", "sans-serif";
  color: #fff;
  text-decoration: none;
}

span {
  font-family: "Noto Sans", "sans-serif";
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

i {
  font-size: 16px;
  padding: 5px;
  color: #fff;
}

i:hover {
  transition: 0.3s ease;
}

/* ==== Input area sugguseation color ==== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: transparent;
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

.hover1 {
  font-size: 16px;
  font-weight: 500;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  background-color: transparent;
  color: #fff;
  padding: 16px 40px;
  border-radius: 50px;
  transition: 0.4s ease;
  text-align: center;
}

.hover1:hover {
  color: #030813;
  background-color: #fff;
  border: 1.5px solid #030813;
  transition: 0.4s ease;
}

.hover2 {
  font-size: 16px;
  font-weight: 600;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  padding: 10px 20px;
  cursor: pointer;
}

.hover2:hover {
  background: linear-gradient(280deg, #508ac8 0%, #332a7a 100%);
  transition: 0.4s ease;
}

@keyframes movingUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes movingUpDownIcon {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -20px, 0) rotate(3deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes StarGrow {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: scale(1.3);
    color: #fff6df;
  }
}

.MovingAnimation {
  animation: movingUpDown 2s infinite;
}

.MovingAnimationIcon {
  animation: movingUpDownIcon 3s ease-in-out infinite;
}

.PadTop {
  padding-top: 100px;
}

.PadBottom {
  padding-bottom: 100px;
}

.PadTopBottom {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* ===== End of 02. Global Style ===== */
/* ===== 1.0. Header Section ===== */
header {
  width: 100%;
  padding: 18px 0;
  background-color: #0f131d;
}

header .active {
  color: #8176ff;
}

header .navbar-collapse {
  gap: 120px;
}

header .right-sidbar {
  width: 280px;
  position: fixed;
  height: 100vh;
  top: 0;
  left: -355px;
  overflow-x: hidden;
  transition: 0.5s;
  padding: 20px 20px 20px 0px;
  z-index: 99;
  background: linear-gradient(90deg, #332a7a 0%, #508ac8 100%);
}

/* === Sidebar Dropdown Styles === */
header #slid-btn {
  cursor: pointer;
}

header #slid-btn:hover .page-btn,
header #slid-btn:hover i {
  color: #508ac8;
  transition: color 0.3s ease;
}

header #slid-drop {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

header #slid-drop.aside-dropdwon {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

header .page-btn {
  padding: 8px 0px;
  background-color: transparent;
  border: none;
  font-size: 16px;
}

header .navbar ul li a {
  color: #fff;
  padding: 12px;
}

header .navbar ul li a:hover,
header .navbar ul li a:hover i {
  color: #8176ff;
  transition: 0.3s ease;
}

header .nav-link:focus {
  color: #fff;
}

header .nav-link:hover {
  color: #8176ff;
}

header .dropdown-item.active,
.dropdown-item:active {
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: #8176ff !important;
}

header .dropdown ul {
  width: 200px;
}

header .dropdown-menu {
  padding: 0px;
  display: block;
  overflow: hidden;
  transition: all 0.3s ease-in;
  visibility: hidden;
  background-color: #fff;
}

header .dropdown ul li a {
  color: #030813;
}

header .dropdown ul li a:hover {
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  color: #fff;
}

header .search-icon i::before {
  color: #fff;
}

header .form-control {
  background-color: transparent;
  border: none;
  padding: 0;
  width: 110px;
  color: #ffffff4d;
}

header .form-control:focus {
  background-color: transparent;
  box-shadow: none;
  color: #fff;
}

header .form-control::placeholder {
  color: #ffffff4d;
  opacity: 1;
}

header .fa-bars {
  font-size: 20px;
  color: #fff;
}

header .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

header #mySidenav {
  z-index: 1001;
}

header .open-aside {
  padding: 3px 8px;
  background: linear-gradient(90deg, #508ac8 0%, #508a 100%);
  border: none;
  font-size: 25px;
  color: #fff;
  display: none;
  z-index: 2;
  border-radius: 50%;
  cursor: pointer;
}

header .fa-xmark {
  padding: 8px 10px;
  background: #fff;
  color: #030813;
  border: none;
  border-radius: 50%;
}

header .fa-xmark:hover {
  background: #332a7a;
  color: #fff;
  transition: 0.3s ease;
}

header aside a,
header aside button {
  color: #fff;
}

header aside a.active,
header aside a:hover {
  color: #508ac8 !important;
}

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

header aside li {
  padding: 8px 0;
}

/* ===== End of  1.0. Header Section ===== */
/* ===== 1.1. Hero Section ===== */
.Hero {
  border-bottom: 1px solid #ffffff50;
}

.Hero figure:nth-child(2) {
  top: 0%;
  right: 43%;
}

.Hero figure:nth-child(3) {
  top: 25%;
  left: -35px;
}

.Hero figure:nth-child(4) {
  top: 90%;
  left: -15px;
}

.Hero h6 {
  color: #fff;
}

.Hero .gap-md-4 .align-items-center figure {
  padding: 15px;
  border: 1px solid #508ac8;
  border-radius: 10px;
  cursor: pointer;
}

.Hero .gap-md-4 .align-items-center figure:hover {
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  transition: 0.3s ease;
}

.Hero .gap-md-4 .align-items-center img {
  width: 95%;
}

.Hero .gap-md-4 p {
  width: 90%;
}

/* ==== Hero with Breadcrumbs ==== */
.HeroBreadcrumbs {
  padding: 70px 0;
  background-color: #030813;
}

.HeroBreadcrumbs .breadcrumb-item a:hover {
  color: #508ac8;
}

.HeroBreadcrumbs .breadcrumb-item.active {
  color: #fff;
}

.HeroBreadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: #fff;
}

/* ===== End of 1.1. Hero Section ===== */
/* ===== 1.2. Financial Section ===== */
.Financial .text-center p {
  width: 45%;
  margin: auto;
}

.Financial .h-100 {
  background-color: #000000;
  padding: 20px;
  border-radius: 10px;
}

.Financial .h-100:hover {
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  transition: 0.3s ease;
}

.Financial .justify-content-between {
  width: 94%;
}

/* ===== End of 1.2. Financial Section ===== */
/* ===== 1.4. Track Section ===== */
.Track {
  border-bottom: 1px solid #ffffff50;
}

.Track.border-0 {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.Track .col-lg-5 {
  display: flex;
  align-items: center;
}

.Track .flex-column.gap-3 {
  width: 96%;
}

.Track .align-items-center.gap-3 {
  width: 77%;
}

.Track .align-items-center.gap-4 {
  width: 600px;
  height: 580px;
  border-radius: 50%;
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
}

.Track .align-items-center.gap-4 img {
  width: 100%;
}

/* ===== End of 1.4. Track Section ===== */
/* ===== 1.5. Accounting Section ===== */
.Accounting {
  border-bottom: 1px solid #ffffff50;
}

.Accounting .justify-content-around {
  width: 70%;
}

.Accounting .mt-0 {
  width: 45%;
}

.Accounting img[alt="AccountMobile"] {
  width: 100%;
}

.Accounting .py-0 {
  width: 28%;
}

.Accounting .py-lg-3 {
  background-color: #000000;
  border-radius: 10px;
  cursor: pointer;
}

.Accounting .py-lg-3:hover {
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  transition: 0.3s ease;
}

/* ===== End of 1.5. Accounting Section ===== */
/* ===== 1.6. Gallery Section ===== */
.Gallery .gap-lg-4 p {
  width: 57%;
  margin: auto;
}

.Gallery .gallery-slider .gallery-item {
  padding: 5px;
}

.Gallery .gallery-slider img {
  width: 95%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

.Gallery .slick-track {
  display: flex !important;
  gap: 10px !important;
}

.Gallery .slick-slide {
  margin: 0;
}

.Gallery .slick-dots li.slick-active button:before {
  background-color: #fff;
}

.Gallery .slick-dots li button:before {
  background-color: #fff;
}

/* ===== End of 1.6. Gallery Section ===== */
/* ===== 1.7. Testimonials Section ===== */
.Testimonial .mt-0 {
  width: 86%;
}

.Testimonial .text-lg-start {
  background-color: #030813;
  padding: 40px 20px;
}

.Testimonial .testimonials-slider {
  width: 72%;
}

.Testimonial .testimonial-content i {
  color: #ffd639;
}

.Testimonial .testimonial-content i:nth-child(5) {
  color: #a4c7ca;
}

.Testimonial .testimonial-content i:nth-child(1) {
  animation: StarGrow 1s 0ms ease 1;
  opacity: 1;
}

.Testimonial .testimonial-content i:nth-child(2) {
  animation: StarGrow 1s 100ms ease 1;
  opacity: 1;
}

.Testimonial .testimonial-content i:nth-child(3) {
  animation: StarGrow 1s 200ms ease 1;
  opacity: 1;
}

.Testimonial .testimonial-content i:nth-child(4) {
  animation: StarGrow 1s 300ms ease 1;
  opacity: 1;
}

.Testimonial .testimonial-content {
  display: none;
}

.Testimonial .testimonial-content.active {
  display: flex;
  gap: 12px;
}

.Testimonial .testimonial-content img {
  border-radius: 50%;
}

.Testimonial .pt-lg-5 .align-items-center {
  background-color: #030813;
  border-radius: 5px;
  cursor: pointer;
}

.Testimonial .pt-lg-5 .align-items-center:hover {
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  transition: 0.3s ease;
}

/* ===== End of 1.7. Testimonials Section ===== */
/* ===== 1.8. Download App Section ===== */
.DownloadApp .w-100 {
  top: 15%;
  height: 75%;
  background: #030813;
}

.DownloadApp .z-1 {
  width: 43%;
}

.DownloadApp .justify-content-start figure {
  padding: 15px;
  border: 1px solid #508ac8;
  border-radius: 10px;
}

.DownloadApp .justify-content-start figure:hover {
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  transition: 0.3s ease;
}

.DownloadApp .z-1 img {
  width: 100%;
}

.DownloadApp .border-0 {
  width: 55%;
}

.DownloadApp .border-0 figure {
  width: 100%;
}

.DownloadApp .border-0 image {
  width: 100%;
}

.DownloadApp .border-0 .position-relative {
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  transition: 0.3s ease;
  border-radius: 50%;
  width: 100%;
  height: 88%;
}

/* ===== End  1.8. Download App Section ===== */
/* ===== 1.9. Pricing Section ===== */
.Pricing .p-md-5 {
  border-radius: 10px;
  background-color: #030813;
}

.Pricing .p-md-5 .fa-check {
  width: 20px;
  height: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s ease;
}

.Pricing .p-md-5 .fa-check::before {
  color: #000000;
  font-size: 16px;
}

.Pricing .p-md-5:hover .fa-check {
  background-color: #508ac8;
}

.Pricing .border-0 {
  width: 75%;
}

/* ===== End of 1.9. Pricing Section ===== */
/* ===== 1.10. Blogs Section ===== */
.Blogs .pt-0 {
  width: 70%;
}

.Blogs .pl-0 {
  width: 95%;
}

.Blogs .col-lg-4 {
  flex-direction: column;
}

.Blogs .d-flex.flex-column.gap-3 {
  height: 100%;
}

.Blogs .col-lg-4 hr {
  width: 100%;
  height: 2px;
  background: #a4c7ca;
  border: none;
  position: relative;
  margin: 0;
}

.Blogs .col-lg-4 hr::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  transition: left 0.4s ease;
}

.Blogs .col-lg-4:hover hr::after {
  left: 0;
}

.Blogs .col-lg-4 .border-0 {
  border-radius: 5px;
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
  padding: 10px 20px;
}

/* ===== 1.10. Blogs Section ===== */
/* ===== 1.11. Footer Section ===== */
footer {
  padding: 100px 0 20px 0;
}

footer hr {
  width: 100%;
  border: 1px solid #ffffff50;
  margin: 10px 0;
}

footer .row {
  margin: 40px 0;
}

footer .align-items-start.gap-3 p {
  width: 75%;
}

footer .form-control {
  padding: 12px 10px;
  background-color: transparent;
}

footer .form-control::placeholder {
  color: #fff;
}

footer .form-control:focus {
  background-color: transparent;
  box-shadow: none;
  color: #fff;
  border-color: #fff;
}

footer .align-items-lg-end figure {
  border: 1px solid #fff;
  border-radius: 50%;
  padding: 5px;
  background-color: #fff;
}

footer .align-items-lg-end i {
  font-size: 18px;
  color: #030813;
}

footer .justify-content-start:hover figure {
  background-color: #030813;
}

footer .justify-content-start:hover i {
  color: #fff;
}

/* ===== End of 1.11. Footer Section ===== */
/* ===== 2.1. WhyUseVoxpor Section ===== */
.WhyUseVoxpor {
  background-color: #0f131d;
}

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

.WhyUseVoxpor .position-absolute {
  background-color: #0f131d;
  border-radius: 0 10px 0 0;
  padding: 53px 40px;
}

.WhyUseVoxpor .pl-0 p {
  width: 90%;
}

.WhyUseVoxpor .mt-3 .align-items-start {
  width: 80%;
}
/* ===== End of 2.1. WhyUseVoxpor Section ===== */
/* ===== 2.2. Our Team Section ===== */
.OurTeam .justify-content-between {
  background-color: #030813;
}

.OurTeam .fa-brands {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
}

.OurTeam .fa-brands::before {
  color: #030813;
}

.OurTeam .fa-brands:hover {
  background-color: #508ac8;
  transition: 0.2s ease;
}

.OurTeam .h-100 {
  padding: 20px 50px 20px 0;
}

.OurTeam .h-100 p {
  padding: 0 50px 0 0;
}
/* ===== End of 2.2. Our Team Section ===== */
/* ===== 2.3. Faq Section ===== */
.Faq .accordion {
  justify-content: center;
  --bs-accordion-border-color: none;
  --bs-accordion-btn-icon: none;
}

.Faq .accordion-item {
  background-color: #030813;
  border-radius: 10px;
}

.Faq .accordion-button {
  background-color: #030813;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.Faq .accordion-button::after {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 400;
  color: #fff;
  transition: 0.3s ease-in-out;
}

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

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

.Faq .accordion-button:not(.collapsed) {
  color: #fff;
  background-color: #ffffff00;
  box-shadow: none;
}

.Faq .accordion-collapse {
  border: 2px solid #030813 ;
  background-color: #0f131d;
}
.Faq .py-5 {
  background-color: #030813;
}

/* ===== End of 2.3. Faq Section ===== */
/* ===== 6.1. Blog Detail Section ===== */
.BlogDetail {
  border-bottom: 1px solid #ffffff50;
}
.BlogDetail .p-lg-5 {
  background-color: #030813;
}

.BlogDetail .p-lg-5 p {
  font-family: Noto Sans;
  font-weight: 500;
  font-style: italic;
  font-size: 20px;
  line-height: 28px;
}

/* ===== End of 6.1. Blog Detail Section ===== */
/* =====  6.2. Reply Section ===== */
.ReplySection .gap-lg-3 {
  width: 50%;
}

/* ===== End of 6.2. Reply Section ===== */
/* ===== 9.1. Our Team Section ===== */
.OurTeamPage .m-auto {
  width: 50%;
}

/* ===== End of 9.1. Our Team Section ===== */
/* ===== 10.1. Contact Form Section ===== */
.ContactSection .form-control {
  background-color: #030813;
  border: none;
  color: #fff;
}

.ContactSection .form-control:focus {
  box-shadow: none;
  color: #fff;
}

.ContactSection label {
  color: #fff;
  margin-left: 20px;
}

.ContactSection .form-control::placeholder {
  color: #fcfcfc;
}

.ContactSection .p-2 {
  background-color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
}

.ContactSection i {
  color: #030813;
}

.ContactSection .col-lg-7 .gap-2 {
  width: 100%;
  border-radius: 10px;
  padding: 35px 20px;
  background: linear-gradient(90deg, #508ac8 0%, #332a7a 100%);
}

.ContactSection iframe {
  border-radius: 10px;
  height: 100%;
}

/* ===== End of 10.1. Contact Form Section ===== */
/* ===== 11.1. Error 404 Section ===== */
.ErrorPage .pl-0 img {
  width: 95%;
}

/* =====  End of 11.1. Error 404 Section ===== */
/* =====  12.1. Coming Soon Section ===== */
.ComingSoon h3 {
  padding: 10px 16px;
  background-color: #030813;
}

.ComingSoon .subscribe-form {
  width: 50%;
}

.ComingSoon .form-control {
  background-color: #030813;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px 25px;
}

.ComingSoon .form-control::placeholder {
  color: #fff;
}

.ComingSoon .form-control:focus {
  box-shadow: 0 0 0 0.35rem rgba(13, 110, 253, 0.3);
}

.ComingSoon button {
  color: transparent;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ComingSoon i {
  padding: 8px;
  color: #fff;
  border: none;
  background: transparent;
}

.ComingSoon button:focus i {
  color: #508ac8;
}

.ComingSoon .flex-row a {
  background-color: #fff;
  border-radius: 50%;
}

.ComingSoon .flex-row a i {
  color: #030813;
  width: 30px;
  height: 30px;
  text-align: center;
}

.ComingSoon .flex-row a:hover {
  background-color: #508ac8;
}

.ComingSoon .flex-row a:hover i {
  color: #fff;
}

/* =====  End of 12.1. Coming Soon Section ===== */