@media only screen and (max-width: 430px) {
    .mobile-menu .offcanvas-start {
        width: 100%;
    }
}


@media only screen and (min-width: 576px) {
    .container {
        padding: 0 12px;
        max-width: none;
        width: 90%;
    }

    .garden__card__title {
        padding: 30px 24px;
    }

    .garden__card__inner {
        padding: 30px 24px 40px;
    }

    .testimonial__card {
        padding: 24px;
    }

    .collection__item {
        padding: 24px;
    }

    .installed__item__content {
        padding: 30px;
    }

    .faq--section .accordion-button .text {
        font-size: 18px;
    }

    .faq--section .accordion-button {
        gap: 32px;
    }
}


@media only screen and (min-width: 768px) {
    .container {
        max-width: 900px;
        width: 100%;
    }
    .fs-1 {
        font-size: 40px!important;
    }
    .fs-2 {
        font-size: 30px!important;
    }
    .fs-3 {
        font-size: 26px!important;
    }

    .hero__wrapper {
        min-height: 600px;
    }

    .hero__subtitle {
        font-size: 22px;
    }

    .outdoorSpace--section,
    .contact__wrapper,
    .garden--section,
    .collection--section .section__top,
    .siteBlock__col__head,
    .installed--section .section__top,
    .installed__wrapper,
    .faq--section {
        padding: 30px 0;
    }

    .outdoorSpace--section .section__top {
        /**margin-bottom: 56px;**/
    }

    .collection__wrapper,
    .contact--section .section__top {
        padding: 60px 0 65px;
    }
    .collection__tab__buttons .nav,
    .collection__item {
        gap: 20px;
    }
    .siteBlock__col {
        padding-bottom: 60px;
    }
    .siteBlock__col__thumb {
        height: 360px;
    }
    .footer__text {
        padding: 40px;
        padding-left: 0;
        border-bottom: none;
    }
    .footer__inner__content {
        width: clamp(336px, 41%, 436px);
        flex-shrink: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.15);
    }

    .footer__contact {
        padding: 40px;
    }

    .footer__ratings__wrap {
        padding: 40px 40px 40px 10px;
    }

    .footer__contact__links {
        margin-bottom: 40px;
    }

    /* decking.html Page Responsive Start */
    .collection__slide {
        height: 400px;

        &.displayTypeTall {
            height: 600px;
        }

        &.displayTypeExtraTall {
            height: 800px;
        }
    }

    .siteBlock__inner__content {
        padding: 48px 0;
    }

    .installed__content {
        gap: 40px;
    }

    .installed__item__thumb {
        flex-shrink: 0;
        width: 220px;
        height: auto;
    }

    .installed__item__content {
        flex: 1;
    }
    /* decking.html Page Responsive End */
}

/* LG Device. */
@media only screen and (min-width: 992px) {
    .container {
        width: 960px;
    }

    .common-gap {
        gap: 16px;
    }
    .section__thumb__radius {
        border-radius: 30px 0;
    }

    .hero__wrapper {
        min-height: 700px;
    }
    .hero__slider .hero__content {
        padding-bottom: 100px;
    }

    .hero__slider__navigation .swiper-slide {
        width: auto !important;
        flex: 1;
    }

    .hero__slider__navigation .swiper-slide {
        margin-bottom: 0;
    }
    .hero__top__bar__text,
    .hero__bottom__bar__text {
        font-size: 16px;
    }
    .hero__bottom__bar__link .icon svg {
        width: 17px;
        height: 17px;
    }
    .logo--footer {
        margin-bottom: 0;
    }
    .section__head--outdoorSpace {
        max-width: 604px;
    }
    .outdoorSpace__section__top__row.g-md-4,
    .outdoorSpace__wrapper__row.g-md-4 {
        --bs-gutter-x: 40px;
        --bs-gutter-y: 40px;
    }
    .outdoorSpace__item__title {
        padding: 18px 0 20px;
    }
    .garden__wrapper__row.gx-md-4 {
        --bs-gutter-x: 40px;
    }
    .garden__card__thumb {
        height: 320px;
    }
    .garden__card__title {
        padding: 40px 30px;
    }
    .garden__card__inner {
        padding: 40px 30px 60px;
    }
    .garden__bottom__title {
        font-size: 20px;
    }
    .collection__content__top {
        padding: 42px 0;
    }
    .collection__tab__buttons {
        padding: 68px 0 40px;
    }
    .collection__content__info__box {
        padding: 20px 24px;
        gap: 24px;
    }
    .triangle-icon {
        width: 24px;
        height: 21px;
        top: -20px;
    }
    .triangle-icon::before {
        border-left-width: 12px;
        border-right-width: 12px;
        border-bottom-width: 19px;
    }
    .triangle-icon::after {
        border-left-width: 11px;
        border-right-width: 11px;
        border-bottom-width: 19.5px;
    }
    .testimonial__wrapper {
        gap: 20px;
    }
    .siteBlock--section {
        padding-top: 60px;
    }
    .siteBlock__wrapper {
        border-bottom: 1px solid rgba(16, 23, 42, 0.5);
    }
    .siteBlock__col__head {
        padding: 0 0 60px;
    }
    .siteBlock__col--one {
        padding-right: 32px;
        border-bottom: none;
        border-right: 1px solid rgba(16, 23, 42, 0.5);
    }
    .siteBlock__col__head {
        padding: 0 0 60px;
    }
    .siteBlock__col__thumb {
        height: 440px;
    }
    .siteBlock__col--two {
        padding-inline: 32px;
    }
    .star-icon {
        width: 25px;
        height: 25px;
    }
    .contact--section .form {
        height: 100%;
    }
    .contact__info {
        border-top: none;
        border-left: 1px solid rgba(16, 23, 42, 0.1);
        height: 100%;
    }
    .contact__item {
        padding: 32px;
    }
    .contact__item:last-child {
        border: none;
    }

    .hero--decking .hero__wrapper {
        padding: 60px 0;
    }

    .hero--decking .hero__content__bottom {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .hero__content__bottom__logo {
        max-width: 68px;
    }

    .outdoorSpace__thumb {
        height: 420px;
    }

    .collection__slide {
        height: 556px;

        &.displayTypeTall {
            height: 800px;
        }

        &.displayTypeExtraTall {
            height: 1150px;
        }
    }

    .collection__slider__navigation {
        left: 56px;
        bottom: 56px;
    }

    .siteBlock--decking {
        padding: 60px 0;
    }

    .siteBlock--decking .siteBlock__wrapper {
        border-bottom: none;
    }

    .siteBlock--decking .siteBlock__col {
        padding-bottom: 0;
    }

    .faq--section .accordion-button {
        padding: 24px 0;
    }

    .faq--section .accordion-button .text {
        font-size: 20px;
    }

    .accordion__icon {
        width: 16px;
        height: 16px;
    }

    .accordion__icon__bar {
        height: 3px;
    }

    .faq--section .accordion-body {
        padding: 0 0 42px;
    }
    /* decking.html Page Responsive End */
}

/* Large Device :992px. */
@media only screen and (min-width: 1200px) {

    .container {
        width: 1140px;
    }

    .fs-1 {
        font-size: 60px !important;
    }

    .fs-2 {
        font-size: 40px !important;
    }

    .fs-3 {
        font-size: 30px !important;
    }
    
    .fs-4 {
        font-size: 20px !important;
    }

    .section__pretitle,
    .section__subtitle,
    .text-lg,
    .contact__item__text,
    .section__para,
    .collection__item .text__two {
        font-size: 18px;
    }

    .logo {
        max-width: 100px;
    }
    .nav {
        gap: 42px;
    }
    .nav__menu__link {
        font-size: 16px;
    }
    .nav__menu {
        gap: 24px;
    }
    .hero__wrapper {
        min-height: 860px;
    }
    .hero__title__content {
        padding: 40px 0;
    }
    .hero__subtitle {
        font-size: 36px;
    }
    .hero__slide__thumb {
        padding: 16px 0 0;
    }
    .hero__slide__thumb {
        border-width: 5px;
    }
    .hero__slide__thumb::after {
        top: -5px;
        height: 5px;
    }
    .outdoorSpace--section {
        padding: 60px 0 70px;
    }
    .outdoorSpace--section .section__top {
        /**margin-bottom: 60px;**/
    }
    .outdoorSpace__btns__wrap {
        gap: 0 72px;
    }
    .outdoorSpace__item {
        border-width: 5px;
    }
    .collection__tab__buttons .nav {
        gap: 30px;
    }
    .collection__item {
        gap: 24px;
    }
    .collection__item__thumb {
        max-width: 136px;
    }
    .siteBlock__col--one {
        padding-right: 46px;
    }
    .siteBlock__col--two {
        padding-left: 46px;
        padding-right: 46px;
    }
    .form__row.g-md-4 {
        --bs-gutter-x: 32px;
        --bs-gutter-y: 32px;
    }
    .contact__item {
        padding: 40px;
    }
    .form__input--textarea {
        height: 180px;
    }
    .form__input {
        height: 60px;
        font-size: 16px;
    }
    *::-moz-placeholder {
        font-size: 16px;
    }
    *::placeholder {
        font-size: 16px;
    }
    .footer--area {
        padding: 50px 0 60px;
    }

    /* decking.html Page Responsive Start */
    .outdoorSpace__thumb {
        height: 500px;
    }
    .siteBlock__inner__content {
        padding: 60px 0;
    }
    .installed__wrapper {
        padding: 80px 0;
    }
    .installed__content {
        gap: 60px;
    }
    .faq--section {
        padding: 60px 0 90px;
    }
    .faq--section .accordion-button {
        gap: 40px;
    }
    /* decking.html Page Responsive End */
}

@media only screen and (min-width: 1400px) {
    .container {
        max-width: 1360px;
        width: 100%;
    }

    .fs-2 {
        font-size: 48px !important;
    }
    .common-gap {
        gap: 20px;
    }
    .section__thumb__radius {
        border-radius: 40px 0;
    }

    .outdoorSpace--section .section__para {
        font-size: 20px;
    }
    .outdoorSpace__btns__wrap {
        gap: 0 112px;
    }

    .garden__card__thumb {
        /**height: 380px;**/
        height: 510px;
    }

    .garden__card__inner {
        padding: 40px 30px 76px;
    }
    .collection__content__info__box {
        padding: 24px 30px;
        gap: 28px;
    }
    .collection__tab__buttons .nav {
        gap: 40px;
    }
    .collection__item {
        padding: 30px 30px 16px;
        gap: 30px;
    }
    .collection__item__thumb {
        max-width: 170px;
    }
    .triangle-icon {
        width: 32px;
        height: 28px;
        top: -26px;
    }
    .triangle-icon::before {
        border-left-width: 16px;
        border-right-width: 16px;
        border-bottom-width: 25px;
    }
    .triangle-icon::after {
        border-left-width: 15px;
        border-right-width: 15px;
        border-bottom-width: 26px;
    }
    .siteBlock__col--one {
        padding-right: 60px;
    }
    .siteBlock__col--two {
        padding-left: 60px;
    }
    .testimonial__card {
        padding: 30px;
    }
    .form__row.g-md-4 {
        --bs-gutter-x: 40px;
        --bs-gutter-y: 40px;
    }
    .form__input--textarea {
        height: 220px;
    }
    .contact__wrapper__row.g-md-5 {
        --bs-gutter-x: 60px;
        --bs-gutter-y: 60px;
    }

    /* decking.html Page Responsive Start */
    .hero__content__bottom__logo {
        max-width: 80px;
    }
    .outdoorSpace__thumb {
        height: 580px;
    }
    .collection__slider__navigation {
        bottom: 70px;
    }
    .siteBlock__inner__content__row.g-4 {
        --bs-gutter-x: 38px;
        --bs-gutter-y: 48px;
    }
    .siteBlock__inner__item__icon {
        width: 56px;
    }
    .siteBlock__inner__item__icon img {
        max-height: 56px;
    }
    .installed__content {
        gap: 80px;
    }
    .faq--section .accordion-button {
        padding: 30px 0;
    }
    .faq--section .accordion-button .text {
        font-size: 22px;
    }
    .accordion__icon {
        width: 18px;
        height: 18px;
    }
    .accordion__icon__bar {
        height: 4px;
    }
    .faq--section .accordion-body {
        padding: 0 0 48px;
    }
    /* decking.html Page Responsive End */
}
