/* ===== import font family INTER ==== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;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:     safeTcode
* Version:        1.0.0
* Theme URI:      https://safetcode.com
* Author:         safeTcode Team
* Author URI:     https://safetcode.com
* Description:    Emergency Voice Assistant App - Dark theme with cyan/neon accents
*                 for emergency safety application.

* [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: #0a0e1a;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 153, 204, 0.1) 0%, transparent 50%);
}

/* ===== 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: "Inter", "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: "Inter", "Noto Sans", "sans-serif";
  color: #fff;
}

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

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

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

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

h6 {
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  font-family: "Inter", "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: "Inter", "Noto Sans", "sans-serif";
  background: linear-gradient(45deg, hwb(3 4% 7%), #df2006);
  -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, #e01f1f 0%, #e01f1f 100%);
  padding: 10px 20px;
  cursor: pointer;
}

.hover2:hover {
  background: linear-gradient(280deg, #e01f1f 0%, rgb(227, 60, 26) 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: #0a0e1a;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

header .active {
  color: #00d4ff;
}

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, #0a0e1a 0%, #1a1f2e 100%);
  border-right: 1px solid rgba(0, 212, 255, 0.3);
}

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

header #slid-btn:hover .page-btn,
header #slid-btn:hover i {
  color: #00d4ff;
  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: #00d4ff;
  transition: 0.3s ease;
}

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

header .nav-link:hover {
  color: #00d4ff;
}

header .dropdown-item.active,
.dropdown-item:active {
  background: linear-gradient(90deg, #00d4ff 0%, #0099cc 100%);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: #00d4ff !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, #00d4ff 0%, #0099cc 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, #00d4ff 0%, #0099cc 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: #00d4ff;
  color: #fff;
  transition: 0.3s ease;
}

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

header aside a.active,
header aside a:hover {
  color: #00d4ff !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: #1a1f2e;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.Financial .h-100:hover {
  background: linear-gradient(90deg, #00d4ff 0%, #0099cc 100%);
  transition: 0.3s ease;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.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, #00d4ff 0%, #0099cc 100%);
  box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
}

.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: #1a1f2e;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.Accounting .py-lg-3:hover {
  background: linear-gradient(90deg, #00d4ff 0%, #0099cc 100%);
  transition: 0.3s ease;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

/* ===== 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: #1a1f2e;
  padding: 40px 20px;
  border-radius: 10px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.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: #1a1f2e;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.Testimonial .pt-lg-5 .align-items-center:hover {
  background: linear-gradient(90deg, #e01f1f 0%, #e01f1f 100%);
  transition: 0.3s ease;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
}

/* ===== End of 1.7. Testimonials Section ===== */
/* ===== 1.8. Download App Section ===== */
.DownloadApp .w-100 {
  top: 15%;
  height: 75%;
  background: #1a1f2e;
  border-radius: 20px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

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

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

.DownloadApp .justify-content-start figure:hover {
  background: linear-gradient(90deg, #00d4ff 0%, #0099cc 100%);
  transition: 0.3s ease;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.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, #00d4ff 0%, #0099cc 100%);
  transition: 0.3s ease;
  border-radius: 50%;
  width: 100%;
  height: 88%;
  box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
}

/* ===== 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;
}

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

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

/* ===== End of 1.11. Footer Section ===== */
/* ===== FAQ Accordion Custom Styling ===== */
.accordion-item {
  background-color: #1a1f2e !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  border-radius: 10px !important;
  margin-bottom: 10px;
}

.accordion-button {
  background-color: #1a1f2e !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 20px !important;
}

.accordion-button:not(.collapsed) {
  background-color: #1a1f2e !important;
  color: #00d4ff !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.25) !important;
}

.accordion-button::after {
  background-image: none !important;
  content: "+" !important;
  font-size: 24px !important;
  color: #e01f1f !important;
  font-weight: bold !important;
}

.accordion-button:not(.collapsed)::after {
  content: "-" !important;
  background-image: none !important;
}

.accordion-body {
  background-color: #0a0e1a !important;
  color: #fff !important;
  padding: 20px !important;
  border-radius: 0 0 10px 10px !important;
}

/* ===== End of FAQ Accordion Custom Styling ===== */
/* ===== 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 ===== */

p{
 font-family: "Inter", "Noto Sans", "sans-serif";
}