/* Extra small devices (phones, less than 576px) */
@media (min-width: 320px) and (max-width: 575.98px) {
  .navbar-brand {
    margin-right: -33px !important;
    white-space: nowrap;
  }
  .logo {
    width: 50%;
  }
  .why-need p {
    font-size: 16px;
  }
  .hero h1 {
    font-size: 20px;
  }
.img-float{
  margin-top: 2rem !important;
}
  .hero p,
  .about p {
    font-size: 16px !important;
  }

  .hero button {
    margin-left: -2rem !important;
  }
  .icon-box img {
    height: 7rem;
  }
  .arc-circle {
    display: none;
  }
  .why-it-matter {
    margin-top: 5rem !important;
  }
  .circle-wrapper {
    margin: 3rem !important;
    width: 100px !important;
    margin-left: 5rem !important;
    height: 100px !important;
  }

  .inner-circle {
    width: 150px;
    height: 150px;
    padding: 15px 10px;
  }

  .inner-circle h1 {
    font-size: 36px;
  }

  .inner-circle h2 {
    font-size: 16px;
  }

  .inner-circle p {
    font-size: 13px;
  }

  .arc-svg {
    width: 240px !important;
    height: 240px !important;
  }

  .arc-circle {
    cx: 120;
    cy: 120;
    r: 90;
    stroke-width: 30;
    stroke-dasharray: 450;
    stroke-dashoffset: 120;
  }

  .red .arc-svg {
    top: 2rem !important;
    left: -2rem;
  }

  .blue .arc-svg {
    top: 2rem;
    left: 2rem;
  }

  .yellow .arc-svg {
    bottom: -2rem;
    left: 0rem;
  }

  .dark-blue .arc-svg {
    top: -3rem;
    right: -2rem;
  }

  section.arc-section {
    padding: 0px !important;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .arc-circle {
    display: none;
  }

  .hero h1 {
    font-size: 20px !important;
  }

  .logo {
    width: 70%;
  }
  .hero p {
    font-size: 15px !important;
    line-height: 1rem;
  }
  .about h2 {
    font-size: 16px !important;
  }
  .about p {
    font-size: 16px !important;
    line-height: 1.5rem !important;
  }
  .icon-box img {
    height: 7rem;
  }
  .why-need p {
    font-size: 13px !important;
  }
  .cintels-section p {
    font-size: 15px !important;
  }
  .faq-section button {
    font-size: 15px !important;
  }
  .map-section-img {
    display: none !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .arc-circle {
    display: none;
  }

  .hero h1 {
    font-size: 20px !important;
  }

  .logo {
    width: 70%;
  }
  .hero p {
    font-size: 15px !important;
    line-height: 1rem;
  }
  .about h2 {
    font-size: 16px !important;
  }
  .about p {
    font-size: 16px !important;
    line-height: 1.5rem !important;
  }
  .icon-box img {
    height: 7rem;
  }
  .why-need p {
    font-size: 13px !important;
  }
  .cintels-section p {
    font-size: 15px !important;
  }
  .faq-section button {
    font-size: 15px !important;
  }

  .inner-circle {
    width: 150px;
    height: 150px;
    padding: 15px 10px;
  }

  .inner-circle h1 {
    font-size: 36px;
  }

  .inner-circle h2 {
    font-size: 16px;
  }

  .inner-circle p {
    font-size: 13px;
  }

  .arc-svg {
    width: 240px !important;
    height: 240px !important;
  }

  .arc-circle {
    cx: 120;
    cy: 120;
    r: 90;
    stroke-width: 30;
    stroke-dasharray: 450;
    stroke-dashoffset: 120;
  }

  .red .arc-svg {
    top: 2rem !important;
    left: -2rem;
  }

  .blue .arc-svg {
    top: 2rem;
    left: 2rem;
  }

  .yellow .arc-svg {
    bottom: -2rem;
    left: 0rem;
  }

  .dark-blue .arc-svg {
    top: -3rem;
    right: -2rem;
  }
  section.arc-section {
    padding: 0px !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .inner-circle {
    width: 150px;
    height: 150px;
    padding: 15px 10px;
  }
  .arc-svg {
    width: 240px !important;
    height: 240px !important;
  }
  .circle-wrapper {
    width: 209px !important;
  }
  .inner-circle h1 {
    font-size: 36px;
  }

  .inner-circle h2 {
    font-size: 16px;
  }

  .inner-circle p {
    font-size: 13px;
  }

  .arc-svg {
    width: 300px !important;
    height: 246px !important;
  }

  .arc-circle {
    cx: 153 !important;
    cy: 134 !important;
    r: 145 !important;
    stroke-width: 30;
    stroke-dasharray: 450;
    stroke-dashoffset: 120;
  }

  .red .arc-svg {
    top: 1.9rem !important;
    left: -3.4rem !important;
    transform: rotate(7deg) !important;
  }

  .blue .arc-svg {
    top: 0.5rem !important;
    transform: rotate(181deg) !important;
    left: -2.5rem !important;
  }
  .yellow .arc-svg {
    bottom: 0rem !important;
    left: -2.8rem !important;
    transform: rotate(16deg) !important;
  }

  .dark-blue .arc-svg {
    top: 0.4rem !important;
    right: -3rem !important;
    transform: rotate(165deg) !important;
  }

  section.arc-section {
    padding: 0px !important;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399.99px) {
  .inner-circle {
    width: 150px;
    height: 150px;
    padding: 15px 10px;
  }

  .circle-wrapper {
    width: 190px !important;
    margin-left: 2rem !important;
  }
  .inner-circle h1 {
    font-size: 36px;
  }

  .inner-circle h2 {
    font-size: 16px;
  }

  .inner-circle p {
    font-size: 13px;
  }

  .arc-svg {
    width: 300px !important;
    height: 246px !important;
  }

  .arc-circle {
    cx: 140 !important;
    cy: 124 !important;
    r: 145 !important;
    stroke-width: 30;
    stroke-dasharray: 450;
    stroke-dashoffset: 120;
  }

  .red .arc-svg {
    top: 2.6rem !important;
    left: -2.5rem !important;
    transform: rotate(-1deg) !important;
  }

  .blue .arc-svg {
    top: -0.2rem !important;
    transform: rotate(185deg) !important;
    left: -3.8rem !important;
  }
  .yellow .arc-svg {
    bottom: -0.6rem !important;
    left: -3.7rem !important;
    transform: rotate(13deg) !important;
  }

  .dark-blue .arc-svg {
    top: -0.4rem !important;
    right: -2rem !important;
    transform: rotate(169deg) !important;
  }

  section.arc-section {
    padding: 0px !important;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}