/* Extra Small Device */
@media only screen and (max-width: 430px) {
    .mobile-menu .offcanvas-start {
        width: 100%;
    }
}

/* Small Device :550px. */
@media only screen and (min-width: 576px) {
    .container {
        width: 540px;
        padding: 0 12px;
    }

    .hero--section,
    .about--section,
    .product--section,
    .foundation--section,
    .contact__wrapper,
    .news--section {
        padding: 64px 0;
    }
    .card--product {
        padding: 32px 20px;
    }
    .form--contact {
        padding: 32px;
    }
}

/* Medium Device. */
@media only screen and (min-width: 768px) {
    .container {
        width: 720px;
    }

    .fs-1 {
        font-size: 48px !important;
    }
    .fs-2 {
        font-size: 40px !important;
    }
    .pretitle {
        font-size: 16px;
    }
    .pretitle .ellipse {
        width: 8px;
        height: 8px;
    }

    .logo--header {
        max-width: 72px;
    }
    .mobile-menu-open {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .about__thumb {
        height: 320px;
    }
    .card__title {
        font-size: 20px;
    }
    .swiper-button-prev {
        left: -16px;
    }
    .swiper-button-next {
        right: -16px;
    }
    .contact__items {
        gap: 20px;
    }
    .contact--section .contact__item .icon {
        width: 48px;
        height: 48px;
    }
}

/* LG Device. */
@media only screen and (min-width: 992px) {
    .container {
        width: 960px;
    }

    .fs-1 {
        font-size: 56px !important;
    }

    .header__wrapper {
        padding: 24px 0;
    }
    .header__wrapper__inner {
        padding: 10px 24px;
        border-radius: 100px;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
    .hero--section,
    .product--section,
    .news--section,
    .foundation--section {
        padding: 80px 0;
    }
    .hero__pretitle {
        padding: 10px 20px;
    }
    .hero__pretitle .icon {
        max-width: 24px;
    }
    .hero__pretitle .text {
        font-size: 16px;
    }
    .about--section {
        padding: 72px 0;
    }
    .about__content--one {
        max-width: 358px;
    }
    .about__thumb {
        height: 260px;
    }
    .about__para {
        font-size: 18px;
    }
    .card--product {
        padding: 40px 20px;
    }
    .card--product .btn--trans {
        font-size: 22px;
    }
    .news__wrapper {
        padding-bottom: 48px;
    }
    .news__slide__btn {
        width: 40px;
        height: 40px;
    }
    .swiper-button-prev {
        left: -20px;
    }
    .swiper-button-next {
        right: -20px;
    }
    .contact__wrapper {
        padding: 88px 0;
    }
    .contact__content {
        max-width: 487px;
    }
    .contact__object {
        bottom: -12px;
    }
    .footer__wrapper {
        padding: 60px 0 50px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .footer__wrapper__col {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
    .footer__wrapper__col:last-child {
        border: none;
    }
    .footer__widget {
        padding: 0;
        border-bottom: none;
    }
    .footer__widget--social {
        border: none;
    }
    .footer__copyright.py-lg-3 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .logo--footer {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Large Device :992px. */
@media only screen and (min-width: 1200px) {
    .container {
        width: 1140px;
    }

    .fs-1 {
        font-size: 68px !important;
    }
    .fs-2 {
        font-size: 48px !important;
    }
    .fs-lg,
    .fs-xl {
        font-size: 18px;
    }
    .btn {
        height: 56px;
        font-size: 18px;
        padding: 13px 40px;
    }
    .btn__icon--arrow {
        width: 22px;
        height: 22px;
    }

    .nav__wrap--header {
        gap: 16px;
    }
    .hero--section {
        padding: 112px 0;
    }
    .about__para {
        font-size: 22px;
    }
    .card--product {
        height: 408px;
    }
    .card--product .btn--trans {
        font-size: 26px;
    }
    .card__title {
        font-size: 22px;
    }
    .foundation--section {
        padding: 112px 0;
    }
    .contact--section .contact__item,
    .contact--section .contact__item__link {
        font-size: 18px;
    }
    .form--contact {
        padding: 40px;
    }
    .footer__widget {
        max-width: 208px;
    }
}

/* XL Device :1280px. */
@media only screen and (min-width: 1400px) {
    .container {
        width: 1320px;
    }

    body {
        font-size: 18px;
    }

    .fs-1 {
        font-size: 80px !important;
    }
    .fs-2 {
        font-size: 56px !important;
    }

    .header__wrapper__inner {
        padding: 10px 32px;
    }
    .logo--header {
        max-width: 84px;
    }
    .nav__link--header,
    .nav__link--footer,
    .footer--area,
    .footer--area p,
    .footer--area a,
    .footer--area span {
        font-size: 17px;
    }
    .hero--section {
        padding: 144px 0;
    }
    .product--section {
        padding: 96px 0;
    }
    .news--section {
        padding: 108px 0;
    }
    .card__title {
        font-size: 24px;
    }
    .news__wrapper {
        padding-bottom: 64px;
    }
    .swiper-button-prev {
        left: -94px;
    }
    .swiper-button-next {
        right: -94px;
    }
    .foundation--section {
        padding: 136px 0 120px;
    }
    .contact--section .contact__item .icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }
    .contact__object {
        bottom: -16px;
    }
    .footer--area,
    .footer--area p,
    .footer--area a,
    .footer--area span,
    .footer__widget__title,
    .nav__link--footer,
    .contact--footer .contact__item,
    .contact--footer .contact__item__link {
        line-height: 2.59;
    }
}

/* XXL Device. */
@media only screen and (min-width: 1600px) {
    .container {
        max-width: 1440px;
        width: 100%;
    }

    .fs-1 {
        font-size: 90px !important;
    }
    .fs-2 {
        font-size: 60px !important;
    }
    .fs-xl {
        font-size: 20px;
    }
    .btn {
        height: 62px;
        font-size: 20px;
        padding: 15px 52px;
    }
    .btn__icon--arrow {
        width: 28px;
        height: 28px;
    }

    .about__para {
        font-size: 26px;
    }
    .card--news .btn .btn__icon--arrow {
        width: 24px;
        height: 24px;
    }
    .foundation--section {
        padding: 150px 0 120px;
    }
    .contact--section .contact__item,
    .contact--section .contact__item__link {
        font-size: 20px;
    }
    .form--contact {
        padding: 56px 40px;
    }
    .hero--section {
        padding: 176px 0;
    }
}