/*
====================================
Medium Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1200px) {
}

/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {
  html {
    font-size: 30%;
  }

  .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .policy_wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

/*
====================================
Small Screen - Mobile
====================================
*/
@media screen and (min-width: 576px) and (max-width: 767px) {
  html {
    font-size: 60%;
  }

  .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .main {
    background-image: url(../img/mbg.png);
  }

  #hero {
    padding-top: 6rem;
  }

  .hero_wrapper h3 {
    color: #fff;
    font-size: 1.8rem;
  }

  .hero_wrapper {
    text-align: center !important;
  }

  .hero_wrapper h5 {
    font-size: 2rem;
  }

  .hero_wrapper h1 {
    font-size: 9rem;
    margin: 5rem 0rem;
  }

  .hero_wrapper a {
    font-size: 2.6rem;
    margin-top: 8rem;
    border-radius: 0.8rem;
  }

  .contact_wrapper {
    display: block;
  }

  #contact {
    padding-top: 26rem;
  }

  .contact_left h3 {
    font-size: 4.5rem;
    margin-bottom: 1.2rem;
  }

  #contact .container {
    padding-left: 0;
    padding-right: 0;
  }

  #contact .contact_left {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 12rem;
  }

  .contact_left a {
    font-size: 2.6rem;
  }

  .contact_right {
    padding-left: 10rem;
    padding-right: 10rem;
    padding-top: 10rem;
  }

  .contact_right h4 {
    font-size: 5rem;
  }

  #popservice::after {
    height: 90%;
  }

  .florida_wrapper > h3 {
    font-size: 5rem;
    padding: 4rem 0rem;
  }

  .follow p {
    font-size: 1.8rem;
  }

  .policy_wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

/*
====================================
Xtra Small Screen - Small Mobile
====================================
*/
@media screen and (max-width: 576px) {
  html {
    font-size: 40%;
  }

  .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .main {
    background-image: url(../img/mbg.png);
  }

  #hero {
    padding-top: 6rem;
  }

  .hero_wrapper h3 {
    color: #fff;
    font-size: 1.8rem;
  }

  .hero_wrapper {
    text-align: center !important;
  }

  .hero_wrapper h5 {
    font-size: 2rem;
  }

  .hero_wrapper h1 {
    font-size: 9rem;
    margin: 5rem 0rem;
  }

  .hero_wrapper a {
    font-size: 2.6rem;
    margin-top: 8rem;
    border-radius: 0.8rem;
  }

  .contact_wrapper {
    display: block;
  }

  #contact {
    padding-top: 26rem;
  }

  .contact_left h3 {
    font-size: 4.5rem;
    margin-bottom: 1.2rem;
  }

  #contact .container {
    padding-left: 0;
    padding-right: 0;
  }

  #contact .contact_left {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 12rem;
  }

  .contact_left a {
    font-size: 2.6rem;
  }

  .contact_right {
    padding-left: 10rem;
    padding-right: 10rem;
    padding-top: 10rem;
  }

  .contact_right h4 {
    font-size: 5rem;
  }

  #popservice::after {
    height: 90%;
  }

  .florida_wrapper > h3 {
    font-size: 5rem;
    padding: 4rem 0rem;
  }

  .follow p {
    font-size: 1.8rem;
  }

  .policy_wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}