/* ===== Global Design ===== */
/* Responsive container widths */
@media (max-width: 374px) {
  .container {
    max-width: 320px;
  }
}

@media (min-width: 375px) and (max-width: 479px) {
  .container {
    max-width: 360px;
  }
}

@media (min-width: 480px) and (max-width: 599px) {
  .container {
    max-width: 420px;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .container {
    max-width: 810px;
  }
}

@media (min-width: 900px) and (max-width: 1024px) {
  .container {
    max-width: 950px;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .container {
    max-width: 1080px;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .container {
    max-width: 1260px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
}

/* Typography adjustments for screens smaller */

@media screen and (max-width: 1024px) {
  h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 45px;
  }

  h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
  }

  h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
  }

  h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
  }

  h5 {
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
  }

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

  p,
  button {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
  }
}

@media screen and (max-width: 768px) {
  .container,
  .container-sm {
    max-width: unset;
  }

  h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
  }

  h2 {
    font-size: 26px;
    font-weight: 600;
    line-height: 34px;
  }

  h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
  }

  h4 {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
  }

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

  h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
  }

  .hover1,
  .hover2 {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
  }
}

/* ===== Section's Top Bottom Padding */
@media screen and (max-width: 991px) {
  .PadTopBottom {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .PadTop {
    padding-top: 70px;
  }

  .PadBottom {
    padding-bottom: 70px;
  }
}

@media screen and (max-width: 768px) {
  .PadTopBottom {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .PadTop {
    padding-top: 50px;
  }

  .PadBottom {
    padding-bottom: 50px;
  }
}

/* ===== End of Global Design ===== */
/* ===== 1.0. Header Section ===== */

@media screen and (max-width: 1399px) {
  header .navbar-collapse {
    gap: 70px;
  }
}

@media screen and (max-width: 1199px) {
  header .navbar-collapse {
    gap: 50px;
  }

  header .form-control {
    width: 80px;
  }
}

@media screen and (max-width: 991px) {
  header .open-aside {
    display: block;
  }
}

/* ===== End of  1.0. Header Section ===== */
/* =====  1.1. Hero Section ===== */
@media screen and (max-width: 1299px) {
  .Hero figure:nth-child(3) {
    top: 25%;
    left: -10px;
  }
}

@media screen and (max-width: 1024px) {
  .Hero figure:nth-child(2) {
    right: 40%;
  }
}

@media screen and (max-width: 991px) {
  .Hero .position-absolute {
    width: 50px;
  }

  .Hero figure:nth-child(3) {
    width: 25px;
    height: 35px;
  }

  .Hero figure:nth-child(2) {
    right: 37%;
  }

  .Hero figure:nth-child(4) {
    top: 85%;
    right: 80%;
  }

  .Hero .justify-content-center.align-items-center figure {
    padding: 10px;
  }

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

@media screen and (max-width: 768px) {
  .Hero figure:nth-child(2) {
    right: 43%;
  }

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

@media screen and (max-width: 580px) {
  .Hero .gap-md-4 .align-items-center img {
    width: 95%;
  }

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

  .Hero figure:nth-child(3) {
    width: 9px;
    height: 33px;
  }
}

/* =====  End of 1.1. Hero Section ===== */
/* =====  1.2. Financial Section ===== */
@media screen and (max-width: 1024px) {
  .Financial .text-center p {
    width: 70%;
  }

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

@media screen and (max-width: 768px) {
  .Financial .text-center p {
    width: 90%;
  }
}

/* =====  End of 1.2. Financial Section ===== */
/* =====  1.4. Track Section ===== */
@media screen and (max-width: 1399px) {
  .Track .align-items-center.gap-3 {
    width: 85%;
  }

  .Track .col-lg-7 {
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width: 1199px) {
  .Track .align-items-center.gap-4 img {
    width: 90%;
  }

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

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

@media screen and (max-width: 991px) {
  .Track .flex-column.gap-3 {
    width: 75%;
  }

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

@media screen and (max-width: 768px) {
  .Track .flex-column.gap-3 {
    width: 100%;
  }
}

/* =====  1.4. Track Section ===== */
/* =====  1.5. Accounting Section ===== */
@media screen and (max-width: 991px) {
  .Accounting .justify-content-around {
    width: 100%;
  }

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

  .Accounting .py-0 {
    flex-wrap: wrap;
    width: unset;
  }

  .Accounting .py-lg-3 {
    width: 47%;
  }
}

@media screen and (max-width: 768px) {
  .Accounting .mt-0 {
    padding-right: 20px;
  }

  .Accounting .py-lg-3 {
    width: 100%;
  }
}

@media screen and (max-width: 580px) {
  .Accounting .mt-0 {
    width: 100%;
  }

  .Accounting .mt-0 a {
    width: 100%;
  }
}

/* =====  End of 1.5. Accounting Section ===== */
/* ===== 1.6. Gallery Section ===== */
@media screen and (max-width: 768px) {
  .Gallery .gap-lg-4 p {
    width: 90%;
  }

  .Gallery .gallery-slider img {
    width: 70%;
    height: auto;
    margin: 0 auto;
  }

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

/* ===== End of 1.6. Gallery Section ===== */
/* ===== 1.7. Testimonials Section ===== */
@media screen and (max-width: 1399px) {
  .Testimonial .mt-0 {
    width: 100%;
  }

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

@media screen and (max-width: 991px) {
  .Testimonial .testimonials-slider {
    width: 100%;
  }
}

@media screen and (max-width: 580px) {
  .Testimonial a {
    width: 100%;
  }

  .Testimonial .h-100 .align-items-start {
    width: 150px;
  }
}

/* ===== End of 1.7. Testimonials Section ===== */
/* ===== 1.8. Download App Section ===== */
@media screen and (max-width: 1399px) {
  .DownloadApp .z-1 {
    width: 50%;
  }
}

@media screen and (max-width: 991px) {
  .DownloadApp .w-100 {
    top: 0;
    height: 100%;
    background: #030813;
  }
}

@media screen and (max-width: 768px) {
  .DownloadApp .w-100 {
    top: -35px;
    height: 80%;
  }

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

  .DownloadApp .border-0 {
    width: 100%;
    margin: 20px 0;
  }
}

/* ===== End of 1.8. Download App Section ===== */
/* ===== 1.9. Pricing Section ===== */
@media screen and (max-width: 768px) {
  .Pricing .border-0 {
    width: 90%;
  }
}

/* ===== End of 1.9. Pricing Section ===== */
/* ===== 1.10. Blogs  Section ===== */
@media screen and (max-width: 768px) {
  .Blogs .pt-0 {
    width: 95%;
  }
}

/* ===== End of 1.10. Blogs Section ===== */
/* ===== 1.11. Footer Section ===== */
@media screen and (max-width: 1399px) {
  footer .align-items-start.gap-3 p {
    width: 90%;
  }
}

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

@media screen and (max-width: 768px) {
  footer .align-items-start img {
    width: 80%;
  }

  footer {
    padding: 50px 0 20px 0;
  }

  footer .row {
    margin: 20px 0;
  }
}

/* ===== End of 1.11. Footer Section ===== *
/* ===== 2.1. WhyUseVoxpor Section ===== */
@media screen and (max-width: 768px) {
  .WhyUseVoxpor .position-absolute {
    padding: 63px 50px;
  }
}

@media screen and (max-width: 580px) {
  .WhyUseVoxpor .position-absolute {
    padding: 43px 40px;
  }
}

/* ===== End of 2.1. WhyUseVoxpor Section ===== */
/* ===== 2.2. Our Team Section ===== */
@media screen and (max-width: 991px) {
  .OurTeam .h-100 {
    padding: 20px 20px 20px 0;
  }

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

@media screen and (max-width: 575px) {
  .OurTeam .fa-brands {
    width: 25px;
    height: 25px;
  }

  .OurTeam .h-100 {
    padding: 16px;
  }
}

/* ===== End of 2.2. Our Team Section ===== */
/* ===== 6.1. Blog Detail Section ===== */
@media screen and (max-width: 1024px) {
  .BlogDetail .p-lg-5 p {
    font-size: 18px;
    line-height: 26px;
  }
}

@media screen and (max-width: 768px) {
  .BlogDetail .p-lg-5 p {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ===== End of 6.1. Blog Detail Section ===== */
/* =====  6.2. Reply Section ===== */
@media screen and (max-width: 768px) {
  .ReplySection .gap-lg-3 {
    width: 100%;
  }
}

/* ===== End of  6.2. Reply Section ===== */
/* ===== 9.1. Our Team Section ===== */
@media screen and (max-width: 768px) {
  .OurTeamPage .m-auto {
    width: 60%;
  }
}

@media screen and (max-width: 480px) {
  .OurTeamPage .m-auto {
    width: 90%;
  }
}

/* ===== End of 9.1. Our Team Section ===== */
/* ===== 10.1. Contact Form Section ===== */
@media screen and (max-width: 991px) {
  .ContactSection iframe {
    border-radius: 10px;
    height: 400px;
  }
}

/* ===== End of 10.1. Contact Form Section ===== */
/* ===== 12.1. Coming Soon Section ===== */
@media screen and (max-width: 1024px) {
  h1 {
    font-size: 55px;
    line-height: 70px;
  }
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 40px;
    line-height: 55px;
  }

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

@media screen and (max-width: 580px) {
  h1 {
    font-size: 32px;
    line-height: 45px;
  }

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

  h6 {
    font-size: 12px;
    line-height: 18px;
  }

  .ComingSoon h3 {
    padding: 6px 10px;
  }
}

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