@media only screen and (max-width: 1024px) {
    :root {
        /* font-size */
        --font-size-h1: 46px;
        --font-size-h2: 30px;
        --font-size-h3: 28px;
        --font-size-h4: 24px;
        --font-size-h5: 22px;
        --font-size-h6: 18px;
        --font-size-body-text: 16px;
        --font-size-asset: 16px;
    }

    #top__bar a.header__btn {
        padding: 0;
        border: none;
    }

    #top__bar a.header__btn span.phone__text {
        display: none !important;
    }

    #top__bar .topbar__buttons {
        gap: 5px;
    }

    #top__bar {
        padding: 10px 34px;
    }

    #top__bar a {
        font-size: 14px;
    }

    #hero__section {
        min-height: 500px;
    }

    .hero__main h1 {
        max-width: 480px;
    }

    #hero__section h5 {
        margin-top: 10px;
    }

    #hero__section a.hero__btn {
        margin: 20px auto 0;
        line-height: 22px;
    }

    #header__outer .menubar__icon {
        display: block;
    }

    #header__outer .header__menu.mobile__hide {
        display: none;
    }

    #header__outer {
        padding: 24px 34px;
    }

    #header__outer img.header__logo {
        max-width: 300px;
    }

    #nitrous__section {
        padding: 50px 34px;
    }

    #nitrous__section .nitrous__main {
        gap: 30px;
        align-items: center;
    }

    #nitrous__section .nitrous__image {
        width: calc(50% - 15px);
    }

    #nitrous__section .nitrous__content {
        width: calc(50% - 15px);
        gap: 5px;
    }

    #cdcp__section {
        padding: 50px 34px;
    }

    #cdcp__section .cdcp__main {
        gap: 30px;
        align-items: center;
    }

    #cdcp__section .cdcp__image {
        width: calc(50% - 15px);
    }

    #cdcp__section .cdcp__content {
        width: calc(50% - 15px);
        gap: 5px;
    }

    .fill__btn {
        padding: 8px 24px;
        line-height: 22px;
        margin-top: 8px;
    }

    .border__btn {
        padding: 8px 24px;
        line-height: 22px;
        margin-top: 8px;
    }

    #contact__section {
        padding: 50px 34px;
    }

    #contact__section .contact__info {
        gap: 6px;
    }

    #contact__section .contact__info .contact__text {
        line-height: 24px;
        font-size: 16px;
    }

    #contact__section .contact__main {
        gap: 30px;
    }

    #contact__section .contact__info {
        width: 100%;
    }

    #contact__section .contact__box {
        width: calc(50% - 15px);
        padding: 20px;
        gap: 8px;
    }

    #map__section iframe {
        width: 100%;
        height: 350px;
    }

    #book__section {
        padding: 50px 34px;
    }

    #book__section .book__main {
        padding: 40px;
        min-height: 350px;
    }

    #service__section {
        padding: 40px 34px;
    }

    #service__section .service__main {
        gap: 30px;
    }

    #service__section .service__col {
        width: calc(50% - 15px);
    }

    #service__section .service__list {
        gap: 30px;
        margin-top: 30px;
    }

    #service__section .service__img {
        width: calc(50% - 15px);
    }

    #service__section .list__content {
        width: calc(50% - 15px);
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 30px 0;
    }

    #review__section {
        padding: 50px 34px;
    }

    #review__section .review__slider .swiper-pagination {
        margin-top: 20px;
    }

    #review__section .review__slider {
        margin-top: 30px;
    }

    #member__section {
        padding: 50px 34px;
    }

    #member__section .member__heading {
        padding-right: 40px;
    }

    #member__section .member__slider .swiper-slide {
        padding: 16px;
        height: 100px;
    }

    #appointment__section {
        padding: 50px 34px;
        min-height: 300px;
    }

    #footer .footer__main {
        padding: 40px 34px 30px;
    }

    .copy__right {
        padding: 20px 34px;
    }

    /* banner css start  */
    #banner__section {
        padding: 40px 34px;
        min-height: 320px;
    }

    /* banner css end  */

    /* review page css start  */
    #client__review {
        padding: 40px 34px;
    }

    #client__review .testimonial__col {
        gap: 20px;
        margin-top: 40px;
    }

    #client__review .review__box {
        width: calc(50% - 10px);
    }

    #client__review .testimonial__col .review__inner img.review__img {
        width: 70px;
        height: 70px;
        border: 2px solid var(--secondary-color);
    }

    /* review page css end  */

    /* Service page css start  */
    #pricing__section {
        padding: 40px 34px;
    }

    #pricing__section .pricing__heading {
        max-width: 430px;
        margin: 0 auto 30px;
    }

    #pricing__section .pricing__box {
        width: calc(33.33% - 16px);
        padding: 20px;
    }

    #book__yours {
        padding: 40px 34px;
    }

    #book__yours .book__main {
        gap: 30px;
    }

    #book__yours .book__col {
        width: calc(50% - 15px);
    }

    #book__yours .book__col .book__acontent p {
        margin-bottom: 10px;
    }

    #form-map__section {
        padding: 0 34px 40px;
    }

    #form-map__section .form-map__main {
        gap: 30px;
    }

    #form-map__section .map__column {
        width: calc(50% - 15px);
    }

    #form-map__section .form__column {
        width: calc(50% - 15px);
    }

    #form-map__section .map__column iframe {
        height: 500px;
    }

    /* Service page css end  */

    /* Contact us page css start  */
    #contact__section .contact__outer {
        gap: 30px;
        margin-bottom: 0px;
    }

    #contact__section .contact__outer .contact__column {
        width: calc(50% - 15px);
    }

    #parking__section {
        padding: 40px 34px;
    }

    #parking__section .parking__main {
        gap: 30px;
    }

    #parking__section .parking__col {
        width: calc(50% - 15px);
    }

    /* Contact us page css end  */

    /* Know us page start  */
    #know__us .know-us__outer {
        padding: 40px 34px;
    }

    #know__us .know-us__main {
        gap: 30px;
    }

    #know__us .know-us__column {
        width: calc(50% - 15px);
    }

    #know__us .know-us__column img {
        height: 340px;
    }

    /* Know us page end  */

    /* Our team page css start  */
    #our__team {
        padding: 40px 34px;
    }

    #our__team .team__main {
        gap: 40px 24px;
    }

    #our__team .team__column {
        width: calc(33.33% - 16px);
    }

    #our__team .team__img {
        height: 300px;
    }

    /* Our team page css end  */

    /* Canadian Dental Care Plan css start */
    #phase__section {
        padding: 40px 34px;
    }

    #phase__section .phase__column {
        width: calc(50% - 15px);
    }

    #info__section {
        padding: 40px 34px;
    }

    #info__section .info__main {
        gap: 30px;
    }

    #info__section .info__column {
        width: calc(50% - 15px);
    }

    #what__section {
        padding: 40px 34px;
    }

    #what__section .what__main {
        padding: 40px;
        min-height: 350px;
    }

    #who__section {
        padding: 40px 34px;
    }

    #who__section .who__boxes {
        margin: 20px 0;
        gap: 20px;
    }

    #who__section .who__column {
        width: calc(33.33% - 14px);
        padding: 20px;
    }

    #coverage__section {
        padding: 40px 34px;
    }

    #coverage__section .coverage__heading {
        margin-bottom: 20px;
    }

    #more__section {
        padding: 40px 34px;
    }

    #more__section .more__boxes {
        margin: 20px 0 0;
        gap: 20px;
    }

    #more__section .more__column {
        width: calc(50% - 10px);
        padding: 20px;
    }

    #faq__section {
        padding: 40px 34px;
    }

    #faq__section .faq__main {
        gap: 30px;
    }

    #faq__section .faq__inner {
        padding: 24px 0;
    }

    /* Canadian Dental Care Plan css end  */

    /* How We Work Page css start  */
    #welcome__section {
        padding: 40px 34px;
    }

    /* How We Work Page css end  */

    /* Payment Plan Page css start */
    #payment__section {
        padding: 40px 34px;
    }

    #payment__section .payment__main {
        gap: 30px;
    }

    #payment__section .payment__column {
        width: calc(50% - 15px);
    }

    #payment__section .payment__content p {
        margin-bottom: 10px;
    }

    #plan__section {
        padding: 40px 34px;
    }

    #plan__section .plan__main {
        gap: 30px;
    }

    #plan__section .plan__column {
        width: calc(50% - 15px);
    }

    #plan__section .plan__content p {
        margin-bottom: 10px;
    }

    #question__section {
        padding: 50px 34px;
    }

    #payment__section.dental__loan img.beautifi__logo {
        max-width: 250px;
    }

    /* Payment Plan Page css End  */

    /* Insurance Policies Page css start  */
    #policies__content {
        padding: 20px 34px 40px;
    }

    #policies__content a.wp-element-button {
        padding: 8px 24px;
        line-height: 22px;
        margin-top: 8px;
    }

    /* Insurance Policies Page css end  */

    /* Referral Program section css start  */
    #incentive__section {
        padding: 40px 34px;
    }

    #referral__section {
        padding: 40px 34px;
    }

    #referral__section .referral__main {
        gap: 30px;
    }

    #referral__section .referral__column {
        width: calc(50% - 15px);
    }

    /* Referral Program section css end  */

    /* Blog Page css start  */
    #blog__section {
        padding: 40px 34px;
    }

    /* Blog Page css end  */

    /* Blog Single Page css single  */
    #blog__content {
        padding: 40px 34px;
    }

    /* Blog Single Page css end  */

}

@media only screen and (max-width: 992px) {
    #footer .footer__outer {
        flex-wrap: wrap;
        gap: 20px;
    }

    #footer .footer__col {
        max-width: 100%;
        width: calc(50% - 10px);
    }

    /* Blog Page css start  */
    #blog__section .blog__main {
        gap: 24px;
    }

    #blog__section .blog__item {
        width: calc(50% - 12px);
    }

    /* Blog Page css end  */
}

@media only screen and (max-width: 767px) {
    :root {
        /* font-size */
        --font-size-h1: 32px;
        --font-size-h2: 26px;
        --font-size-h3: 24px;
        --font-size-h4: 22px;
        --font-size-h5: 20px;
        --font-size-h6: 16px;
        --font-size-body-text: 16px;
        --font-size-asset: 16px;
    }

    #top__bar {
        padding: 10px 25px;
    }

    #top__bar a {
        font-size: 12px;
    }

    #header__outer {
        padding: 20px 25px;
    }

    #header__outer img.header__logo {
        max-width: 240px;
    }

    #hero__section {
        min-height: 400px;
        padding: 25px;
        background-attachment: unset;
    }

    #hero__section a.hero__btn {
        border: 1px solid #fff;
        padding: 10px 24px;
        margin: 15px auto 0;
        line-height: 22px;
    }

    #nitrous__section {
        padding: 40px 25px;
    }

    #nitrous__section .nitrous__main {
        gap: 16px;
    }

    #nitrous__section .nitrous__image {
        width: 100%;
    }

    #nitrous__section .nitrous__content {
        width: 100%;
        gap: 5px;
    }

    #cdcp__section {
        padding: 40px 25px;
    }

    #cdcp__section .cdcp__main {
        gap: 16px;
    }

    #cdcp__section .cdcp__image {
        width: 100%;
    }

    #cdcp__section .cdcp__content {
        width: 100%;
        gap: 5px;
    }

    #contact__section {
        padding: 30px 25px;
    }

    #contact__section .contact__main {
        gap: 20px;
    }

    #contact__section .contact__box {
        width: 100%;
    }

    #contact__section .contact__icon {
        width: 48px;
        height: 48px;
    }

    #contact__section .contact__icon img {
        height: 24px;
        width: 40px;
    }

    #map__section iframe {
        width: 100%;
        height: 300px;
    }

    #book__section {
        padding: 30px 25px;
    }

    #book__section .book__main {
        padding: 20px;
        min-height: 300px;
        gap: 10px;
    }

    #service__section {
        padding: 30px 25px;
    }

    #service__section .service__main {
        gap: 14px;
    }

    #service__section .service__col {
        width: 100%;
    }

    #service__section .service__list {
        gap: 20px;
        margin-top: 30px;
    }

    #service__section .service__img {
        width: 100%;
    }

    #service__section .list__content {
        width: 100%;
        gap: 8px;
        padding: 0;
    }

    #service__section .list__content .list__ul {
        gap: 6px;
    }

    #review__section {
        padding: 30px 25px;
    }

    #review__section .review__slider {
        margin-top: 20px;
    }

    #review__section .review__slider .swiper-slide {
        gap: 10px;
        padding: 16px;
    }

    #review__section .review__slider .slide__img {
        width: 50px;
    }

    #review__section .review__slider .slide__content {
        width: calc(100% - 60px);
    }

    #member__section {
        padding: 30px 0px;
    }

    #member__section .member__heading {
        padding-right: 0;
        width: 100%;
        justify-content: center;
    }

    #member__section .member__slider {
        width: 100%;
    }

    #member__section .member__slider {
        width: 100%;
        margin-top: 10px;
    }

    #appointment__section {
        padding: 40px 25px;
    }

    #appointment__section .appointment__main {
        gap: 10px;
    }

    #footer .footer__main {
        padding: 30px 25px 20px;
    }

    #footer .footer__col {
        max-width: 100%;
        width: 100%;
    }

    #footer .footer__outer {
        flex-wrap: wrap;
        gap: 16px;
    }

    #footer ul.footer__links li {
        margin-bottom: 6px;
    }

    #footer .footer__heading {
        margin-bottom: 10px;
    }

    .copy__right {
        padding: 16px 25px;
    }

    /* banner css start  */
    #banner__section {
        padding: 30px 25px;
        min-height: 260px;
    }

    #banner__section .banner__heading {
        margin-bottom: 10px;
    }

    /* banner css end  */

    /* review page css start  */

    #client__review {
        padding: 30px 25px;
    }

    #client__review .testimonial__col {
        gap: 16px;
        margin-top: 24px;
    }

    #client__review .review__box {
        width: 100%;
        padding: 10px 20px 20px;
    }

    #client__review .testimonial__col .review__inner {
        gap: 10px;
        margin-top: 10px;
    }

    #client__review .testimonial__col .review__inner img.review__img {
        width: 60px;
        height: 60px;
    }

    /* review page css end  */

    /* Service page css start  */

    #pricing__section {
        padding: 30px 25px;
    }

    #pricing__section .pricing__heading {
        margin: 0 auto 16px;
    }

    #pricing__section .pricing__outer {
        gap: 16px;
    }

    #pricing__section .pricing__box {
        width: calc(50% - 8px);
        padding: 16px;
    }

    #pricing__section .price__content {
        font-size: 14px;
    }

    #book__yours {
        padding: 30px 25px;
    }

    #book__yours .book__main {
        gap: 16px;
    }

    #book__yours .book__col {
        width: 100%;
    }

    #form-map__section {
        padding: 0 25px 30px;
    }

    #form-map__section .map__column {
        width: 100%;
    }

    #form-map__section .map__column iframe {
        height: 260px;
        border-radius: 20px;
    }

    #form-map__section .form__column {
        width: 100%;
    }

    #form-map__section .form__column .contact__form__main .form__row p {
        gap: 20px;
    }

    #form-map__section .form__column .contact__form__main .form__row label {
        width: calc(50% - 10px);
    }

    #form-map__section .form__column .form__main__heading {
        margin-bottom: 20px;
    }

    #form-map__section .form__column .contact__form__main {
        gap: 30px;
    }

    /* Service page css end  */

    /* Contact us page css start  */
    #contact__section .contact__outer {
        gap: 16px;
    }

    #contact__section .contact__outer .contact__column {
        width: 100%;
    }

    #contact__section .contact__outer .contact__column .contact__sub__heading {
        margin: 6px 0 10px;
    }

    #contact__section .contact__outer .contact__column .contact__text {
        gap: 8px;
    }

    #parking__section {
        padding: 30px 25px;
    }

    #parking__section .parking__main {
        gap: 16px;
    }

    #parking__section .parking__col {
        width: 100%;
    }

    /* Contact us page css end  */


    /* Know us page start  */
    #know__us .know-us__outer {
        padding: 30px 25px;
    }

    #know__us .know-us__main {
        gap: 16px;
    }

    #know__us .know-us__column {
        width: 100%;
    }

    #know__us .know-us__column img {
        height: 200px;
    }

    /* Know us page end  */

    /* Our team page css start  */
    #our__team {
        padding: 30px 25px;
    }

    #our__team .team__column {
        width: 100%;
    }

    #our__team .team__main {
        gap: 24px;
    }

    #our__team .team__popup .team__outer {
        padding: 20px;
    }

    /* Our team page css end  */

    /* Canadian Dental Care Plan css start  */
    #phase__section {
        padding: 30px 25px;
    }

    #phase__section .phase__column {
        width: 100%;
    }

    #info__section {
        padding: 30px 25px;
    }

    #info__section .info__main {
        gap: 16px;
    }

    #info__section .info__column {
        width: 100%;
    }

    #what__section {
        padding: 30px 25px;
    }

    #what__section .what__main {
        padding: 30px 20px;
    }

    #who__section {
        padding: 30px 25px;
    }

    #who__section .who__boxes {
        gap: 16px;
    }

    #who__section .who__column {
        width: 100%;
    }

    #coverage__section {
        padding: 30px 25px;
    }

    #coverage__section .coverage__heading {
        margin-bottom: 16px;
    }

    #more__section {
        padding: 30px 25px;
    }

    #more__section .more__boxes {
        gap: 16px;
    }

    #more__section .more__column {
        width: 100%;
    }

    #faq__section {
        padding: 30px 25px;
    }

    #faq__section .faq__main {
        gap: 16px;
    }

    #faq__section .faq__heading {
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    #faq__section .faq__outer {
        width: 100%;
    }

    #faq__section .faq__inner {
        padding: 20px 0;
        gap: 10px;
    }

    /* Canadian Dental Care Plan css end  */

    /* How We Work Page css start  */
    #welcome__section {
        padding: 30px 25px;
    }

    /* How We Work Page css end  */

    /* Payment Plan Page css Start  */
    #payment__section {
        padding: 30px 25px;
    }

    #payment__section .payment__main {
        gap: 16px;
    }

    #payment__section .payment__column {
        width: 100%;
    }

    #payment__section .payment__column .payment__heading {
        margin-bottom: 16px;
    }

    #plan__section {
        padding: 30px 25px;
    }

    #plan__section .plan__main {
        gap: 16px;
    }

    #plan__section .plan__column {
        width: 100%;
    }

    #question__section {
        padding: 40px 25px;
    }

    #payment__section.dental__loan img.beautifi__logo {
        max-width: 220px;
    }

    /* Payment Plan Page css End  */

    /* Insurance Policies Page css start  */
    #policies__content {
        padding: 10px 25px 30px;
    }

    #policies__content .policies__main h1,
    #policies__content .policies__main h2,
    #policies__content .policies__main h3,
    #policies__content .policies__main h4,
    #policies__content .policies__main h5,
    #policies__content .policies__main h6,
    #policies__content .policies__main p,
    #policies__content .policies__main ul,
    #policies__content .policies__main ol {
        margin-bottom: 10px;
    }

    #policies__content .policies__main h2,
    #policies__content .policies__main h3,
    #policies__content .policies__main h4 {
        margin-top: 20px;
    }

    /* Insurance Policies Page css end  */

    /* Referral Program section css start  */
    #incentive__section {
        padding: 30px 25px;
    }

    #referral__section {
        padding: 30px 25px;
    }

    #referral__section .referral__main {
        gap: 16px;
    }

    #referral__section .referral__column {
        width: 100%;
    }

    #referral__section .referral__heading {
        margin-bottom: 10px;
    }

    /* Referral Program section css end  */

    /* Blog Page css start  */
    #blog__section {
        padding: 30px 25px;
    }

    #blog__section .blog__main {
        gap: 16px;
    }

    #blog__section .blog__item {
        width: 100%;
    }

    #blog__section .blog__content {
        padding: 20px;
        gap: 6px;
    }

    /* Blog Page css end  */

    /* Blog Single Page css single  */
    #blog__content {
        padding: 30px 25px;
    }

    #blog__content .social__share svg {
        width: 20px;
        height: 20px;
    }

    #blog__content .social__share ul {
        gap: 8px;
    }

    #blog__content .b-detail__date svg {
        width: 20px;
    }

    #blog__content .b-detail__date {
        gap: 6px;
    }

    #blog__content .b-detail__content h1,
    #blog__content .b-detail__content h2,
    #blog__content .b-detail__content h3,
    #blog__content .b-detail__content h4,
    #blog__content .b-detail__content h5,
    #blog__content .b-detail__content h6,
    #blog__content .b-detail__content p,
    #blog__content .b-detail__content ul,
    #blog__content .b-detail__content ol {
        margin-bottom: 10px;
    }

    #blog__content .b-detail__content h2,
    #blog__content .b-detail__content h3,
    #blog__content .b-detail__content h4 {
        margin-top: 20px;
    }

    /* Blog Single Page css end  */
}