/* ===== import font family Poppins ==== */
@import url('https://fonts.googleapis.com/css2?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&display=swap');

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

/* =====  01. Reset  ====== */
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%;
}

/* =====  01. Reset  ====== */

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

body {
  font-family: "Noto Sans", 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 ===== */
body {
  background-color: #0F0E0E;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  font-family: "Poppins", "sans-serif";
  color: #fff;
}

.site-wrapper {
  padding: 0 14px;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0px;
}

h1 {
  font-size: 90px;
  font-weight: 700;
  line-height: 1.3em;
}

h2 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2em;
}

h3 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2em;
}

h4 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2em;
}

h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2em;
}

h6 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2em;
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2em;
  color: #b7b7b7;
}

a {
  font-size: 18px;
  line-height: 1.2em;
  text-decoration: none;
}

span {
  color: #15A5F8;
}

.hover-1 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  width: 170px;
  color: #fff;
  padding: 16px 24px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(90deg, #00D4FF, #090979);
  background-size: 200% 100%;
  background-position: left center;
  transition: background-position 0.5s ease;
  z-index: 10;
}

.hover-1:hover {
  background-position: right center;
}

.hover-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-25deg);
}

.hover-1:hover::before {
  left: 125%;
  transition: left 0.6s ease;
}

.hover-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  width: 170px;
  color: #0F0E0E;
  padding: 16px 24px;
  border-radius: 50px;
  background-color: #fff;
  z-index: 10;
}

.hover-2:hover {
  background-color: #15A5F8;
  color: #fff;
  background-position: right center;
  transition: background-color 0.5s ease;
}

.hover-3 {
  color: #fff;
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-transform: capitalize;
}

i {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.Padtop {
  padding-top: 100px;
}

.Padbottom {
  padding-bottom: 100px;
}

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

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

/* ==== End of Input area color ==== */
/* ===== End of 02. Global Style ===== */

/* ===== 1.0. Header Section ===== */
header {
  width: 100%;
  padding: 24px 0;
}

header .nav-logo img {
  width: 150px;
  height: auto;
}

header .active {
  color: #15A5F8 !important;
}

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

header .nav-link:hover {
  color: #15A5F8;
  transition: 0.4s ease;
}

header .border-2 {
  border: 2px solid #15A5F8;
  border-radius: 50px;
}

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

header .open-aside {
  padding: 10px 12px;
  border-radius: 5px;
  position: relative;
  background-color: #fff;
  border: none;
  z-index: 100;
  font-size: 18px;
  color: #0F0E0E;
}

header .open-aside:active {
  background-color: #15A5F8;
  color: #fff;
}

header .fa-xmark {
  font-size: 18px;
  color: #fff;
  background-color: #15A5F8;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  z-index: 1000;
}

header .fa-xmark:active {
  background-color: #0F0E0E;
  transform: scale(0.85);
}

header #mySidenav {
  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-color: #fff;
}

header #mySidenav a {
  font-size: 18px;
  color: #0F0E0E;
  transition: 0.3s;
}

header #mySidenav a:hover {
  color: #15A5F8;
}

/* ===== End of 1.0. Header Section ===== */
/* ===== 1.1. Hero Section ===== */
.Hero .bluish-bg {
  position: absolute;
  bottom: -100;
  left: 50%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, #00D4FF 0%, #090979 100%);
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.35;
  transform: translate(-50%, -50%);
  z-index: -10;
}

.Hero .gap-lg-4 {
  max-width: 900px;
}

.Hero i {
  font-size: 38px;
  color: #15A5F8;
  opacity: 0.30;
}

@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.Hero i:nth-child(1) {
  top: -50px;
  left: -50px;
  transform: rotate(330deg);
  animation: spin-slow 6s linear infinite;
}

.Hero i:nth-child(2) {
  top: 150px;
  left: -100px;
  transform: rotate(30deg);
  animation: spin-slow 8s linear infinite reverse;
}

.Hero i:nth-child(3) {
  top: 100px;
  right: -70px;
  transform: rotate(350deg);
  animation: spin-slow 7s linear infinite;
}

.Hero i:nth-child(4) {
  top: 300px;
  right: -40px;
  transform: rotate(10deg);
  animation: spin-slow 9s linear infinite reverse;
}

/* ===== End of 1.1. Hero Section ===== */
/* ===== 1.2. Video Component Section ===== */
.Video img {
  border-radius: 20px;
  border: 1px solid #3A3A3A;
  width: 80%;
}

.Video .position-absolute {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(21, 165, 248, 0.8);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: #fff;
}

.Video .position-absolute:hover {
  background-color: rgba(21, 165, 248, 1);
}

/* ===== End of 1.2. Video Component Section ===== */
/* ===== 1.3. Partners Section ===== */
.partners-slider {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.partners-slider .slide-track {
  display: flex;
  animation: scroll-left 15s linear infinite;
}

.partners-slider .slide {
  flex: 0 0 calc(100% / 8);
  padding: 6px 8px;
}

.partners-slider .slide img {
  width: 100px;
  max-height: 60px;
  height: auto;
  object-fit: contain;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ===== End of 1.3. Partners Section ===== */
/* ===== 1.4. Industries Section ===== */
.Industies .m-auto {
  max-width: 900px;
}

.Industies .row {
  justify-content: center;
}

.Industies img {
  width: 200px;
  height: auto;
  object-fit: contain;
}

.Industies .col-6:nth-last-child(1) {
  margin-top: 110px;
  margin-left: -100px;
}

.Industies .flex-row hr {
  width: 120px;
  border: 2px solid #fff;
  opacity: 1;
  margin: 20px 0;
}

/* ===== End of 1.4. Industries Section ===== */
/* ===== 1.5. How We Work Section ===== */
.HowWeWork .justify-content-between {
  position: relative;
}

.HowWeWork .justify-content-between .carousel img {
  opacity: 0.5;
}

.HowWeWork .justify-content-between:hover .carousel img {
  opacity: 1;
}

.HowWeWork .slide-text,
.HowWeWork .slide-text>*,
.HowWeWork .slide-text h5,
.HowWeWork .carousel,
.HowWeWork .carousel img {
  transition: transform 0.8s cubic-bezier(.22, .9, .35, 1), opacity 0.35s ease;
}

.HowWeWork .slide-text,
.HowWeWork .carousel {
  width: 33%;
}

.HowWeWork .carousel .carousel-inner,
.HowWeWork .carousel img {
  border-radius: 20px;
  object-fit: cover;
  overflow: hidden;
}

.HowWeWork .carousel img {
  width: 100%;
  height: auto;
  place-content: center;
}

.HowWeWork .slide-text {
  padding: 0 20px;
}

.HowWeWork .slide-text h5 {
  display: block;
  width: 100%;
  transition: transform 0.8s cubic-bezier(.22, .9, .35, 1), text-align 0.2s ease;
}

/* ===== End of  1.5. How We Work Section ===== */
/* ===== Our Progress Section ===== */
.Progress .m-auto {
  max-width: 900px;
}

.Progress .row {
  width: 100%;

}

.Progress .count-up {
  height: 240px;
  background-color: #1A1A1A;
  border: 1px solid #3A3A3A;
  border-radius: 12px;
  padding: 30px 20px;

}

.Progress .count-up span {
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 2px;
  color: transparent;
  -webkit-text-stroke: 2px #15A5F8;
  text-transform: none;
  margin: 20px;
}

/* ===== End of Our Progress Section ===== */
/* ===== 1.6. Graph Section ===== */
.Graph .col-lg-5,
.Graph .col-lg-7 {
  display: flex;
  justify-content: center;
}

.Graph .Tags div:nth-child(1) {
  background-color: #15A5F8;
  color: #fff;
  padding: 8px 12px;
  border-radius: 50px;
}

.Graph .Tags div:nth-child(2) h6 {
  background-color: transparent;
  color: #fff;
  padding: 8px 12px;
  border: 2px solid #15A5F8;
  border-radius: 50px;
}

.Graph .chart-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  height: fit-content;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.Graph .chart-title {
  margin-bottom: 1rem;
  color: #6c757d;
  font-weight: 500;
}

.Graph .chart-card canvas {
  width: 100% !important;
  height: 300px !important;
}

.Graph .col-lg-7 .fa-circle {
  font-size: 8px;
  color: #fff;
}

.Graph .col-lg-7 .fa-arrow-right {
  padding: 8px;
  border-radius: 50%;
  background-color: rgb(21, 165, 248);
}

.Graph .col-lg-7 .fa-arrow-right::before {
  font-size: 18px;
  color: #fff;
}

/* ===== End of 1.6. Graph Section ===== */
/* ===== 1.7. Testimonials Section ===== */
.Testimonials .row {
  justify-content: space-around;
}

.Testimonials .col-lg-5 {
  border-radius: 30px;
  padding: 30px 20px;
  box-shadow: 0 4px 18px rgba(21, 165, 248, 0.2);
}

.Testimonials .position-relative {
  width: 100%;
  height: 300px;
}

.Testimonials img {
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.Testimonials button {
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  background-color: #15A5F8;
  opacity: .8;
  cursor: pointer;
}

.Testimonials button:hover {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.Testimonials button i {
  color: #fff;
  font-size: 24px;
}

.Testimonials .fa-star {
  color: #15A5F8;
}

.Testimonials .col-lg-5:hover .fa-star {
  animation: grow 1s ease 1;
}

@keyframes grow {

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

  40% {
    transform: scale(1.3);
  }

}

.Testimonials .flex-row .fa-star:nth-child(1) {
  animation-delay: 0ms;
}

.Testimonials .flex-row .fa-star:nth-child(2) {
  animation-delay: 100ms;
}

.Testimonials .flex-row .fa-star:nth-child(3) {
  animation-delay: 200ms;
}

.Testimonials .flex-row .fa-star:nth-child(4) {
  animation-delay: 300ms;
}

.Testimonials .flex-row .fa-star:nth-child(5) {
  animation-delay: 400ms;
}

/* ===== End of 1.7. Testimonials Section ===== */
/* ===== Vision Section ===== */
.Vision .m-auto {
  max-width: 900px;
}

.Vision .row .flex-column {
  border: 2px solid #3A3A3A;
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(21, 165, 248, 0.2);
  cursor: pointer;
}

.Vision .row .flex-column:hover {
  border: 2px solid #15A5F8;
  transition: border 0.3s ease;
}

.Vision .row .flex-column:hover i {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.Vision .row .flex-column i {
  font-size: 58px;
  color: #15A5F8;
}

/* ===== End of  Vision Section ===== */
/* ===== 1.8. Faq Section ===== */
.Faq .accordion>* {
  background: transparent;
}

.Faq .accordion-item {
  background: transparent;
  border: none;
}

.Faq .accordion-item h1 {
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 2px;
  color: transparent;
  -webkit-text-stroke: 2px #15A5F8;
  text-transform: none;
  margin: 20px;
}

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

.Faq .accordion-button {
  background: transparent;
  box-shadow: none;
  color: #fff;
  padding: 0;
}

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

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

.Faq .accordion-body {
  color: #fff;
  padding: 0;
}

.Faq .accordion-body li {
  list-style-type: disc;
  margin-left: 20px;
  text-decoration: dotted;
}

.Faq hr {
  width: 100%;
  border: 1px solid #fff;
  opacity: 1;
}

/* ===== End of 1.8. Faq Section ===== */
/* ===== Calender Section ===== */
.Calender .m-auto {
  max-width: 900px;
}

.Calender .book {
  width: 100%;
  height: 700px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.Calender .book iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ===== End of Calender Section ===== */
/* ===== 1.9. Footer Section ===== */
footer .col-lg-3 img {
  width: 220px;
  height: auto;
  margin-bottom: 8px;
}

footer .col-lg-3 i {
  font-size: 24px;
  color: #b7b7b7;
}

footer .col-lg-3 i:hover {
  color: #fff;
  transform: translateY(3px);
}

footer .col-lg-2 a {
  color: #b7b7b7;
}

footer .col-lg-2 a:hover {
  color: #fff;
  text-decoration: underline;
  transition: color 0.3s ease;
}

footer .col-lg-4 form input {
  background-color: #1A1A1A;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 12px 20px;
  color: #fff;
}

footer .col-lg-4 form input::placeholder {
  color: #fff;
}

footer .col-lg-4 form input:focus-visible {
  outline: none;
  box-shadow: none;
}

footer .col-lg-4 form .hover-1 {
  border-radius: 8px;
  right: 0;
}

footer hr {
  width: 100%;
  border: 1px solid #fff;
  opacity: 1;
  margin-top: 40px;
  margin-bottom: 20px;
}