/* Extra Small Device */
@media only screen and (max-width: 430px) {
}

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

    .sectionBlock__thumb {
        height: 400px;
    }
}

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

    .fs-1 {
        font-size: 48px !important;
    }
    .fs-2 {
        font-size: 40px !important;
    }
    .fs-3 {
        font-size: 38px !important;
    }
    .fs-4 {
        font-size: 32px !important;
    }

    .hero--section {
        padding: 144px 0 80px;
    }
    .sectionBlock__content,
    .welcome--section,
    .stay__content,
    .testimonial--section,
    .gallery--section {
        padding: 64px 0;
    }
    .stay__thumbs {
        height: 304px;
    }
    .card--testimonial {
        padding: 32px 24px;
    }
    .slider-slide-btn {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }
    .gallery__wrapper .swiper-slide {
        height: 406px;
    }
    .contact__item--footer {
        gap: 12px;
    }
    .footer__widget--logo {
        margin-bottom: 16px;
    }
    .footer__form__item {
        padding: 0;
    }
    .footer__mail__wrap {
        width: 100%;
        padding: 5px 15px;
        background-color: var(--white);
    }
}

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

    .fs-1 {
        font-size: 56px !important;
    }
    .fs-2 {
        font-size: 48px !important;
    }
    .fs-3 {
        font-size: 42px !important;
    }
    .fs-4 {
        font-size: 36px !important;
    }
    .btn {
        min-width: 210px;
        height: 56px;
        padding: 14px 20px;
        gap: 6px;
        font-size: 16px;
        font-weight: 600;
    }
    .btn__icon--arrow {
        width: 16px;
        height: 16px;
    }

    .header--area {
        padding: 0;
    }
    .hero--section {
        padding: 208px 0 128px;
    }
    .sectionBlock__thumb {
        height: 100%;
    }
    .sectionBlock__sm__thumb {
        position: absolute;
        left: -17%;
        bottom: 0;
        width: clamp(160px, 54%, 368px);
        height: clamp(172px, 46%, 392px);
        z-index: 2;
    }
    .sectionBlock__content {
        padding: 64px 40px;
        padding-right: 16px;
    }
    .sectionBlock__content__inner {
        max-width: 520px;
    }
    .sectionBlock__bg__obj {
        width: 50%;
    }
    .welcome--section,
    .testimonial--section,
    .gallery--section {
        padding: 80px 0 96px;
    }
    .card__circle__btn {
        width: 40px;
        height: 40px;
    }
    .stay__content {
        padding: 64px 0;
        padding-right: 40px;
    }
    .logo-icon__img {
        max-width: 64px;
    }
    .stay__thumbs {
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        height: 100%;
    }
    .sectionBlock__main__thumb img,
    .stay__main__thumbs img,
    .sectionBlock__absolute__main__thumb img {
        transform: scale(1.0425);
    }
    .stay__sm__thumbs,
    .sectionBlock__absolute__sm__thumb {
        position: absolute;
        left: 24px;
        bottom: 28px;
        width: clamp(200px, 45%, 364px);
        height: clamp(224px, 44%, 400px);
    }
    .sectionBlock__absolute__sm__thumb::after {
        content: '';
        position: absolute;
        right: -5%;
        bottom: 0;
        width: 100%;
        height: 90%;
        background-color: var(--primary);
        z-index: -1;
    }
}

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

    body {
        font-size: 18px;
    }

    .fs-1 {
        font-size: 68px !important;
    }
    .fs-2 {
        font-size: 60px !important;
    }
    .fs-3 {
        font-size: 48px !important;
    }
    .fs-4 {
        font-size: 40px !important;
    }

    .logo--header {
        max-width: 156px;
    }
    .nav--header,
    .nav__wrapper--header {
        gap: 46px;
    }
    .nav__link--header {
        padding: 25px 0;
    }
    .btn.btn--header {
        min-width: auto;
        height: 40px;
        font-size: 14px;
        padding: 8px 26px;
    }
    .hero__buttons,
    .stay--section .section__buttons {
        gap: 22px;
    }
    .hero__para {
        font-size: 21px;
    }
    .sectionBlock__content {
        padding: 64px;
        padding-right: 16px;
    }
    .card__content--welcome {
        padding: 24px 28px 0;
    }
    .card__title {
        font-size: 26px;
    }
    .stay__content {
        padding: 92px 0;
        padding-right: 60px;
    }
    .logo-icon__img {
        max-width: 80px;
    }
    .gallery__wrapper .swiper-slide {
        height: 444px;
    }
    .nav__wrapper--footer {
        gap: 12px;
    }
    .section__title--footer {
        font-size: 56px;
    }
    .contact--footer {
        gap: 22px;
    }
    .copyright {
        padding: 22px 0;
    }
    .copyright__text {
        font-size: 16px;
    }
}

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

    .fs-1 {
        font-size: 84px !important;
    }
    .fs-2 {
        font-size: 64px !important;
    }
    .fs-3 {
        font-size: 54px !important;
    }
    .fs-4 {
        font-size: 44px !important;
    }
    .btn {
        min-width: 240px;
        height: 62px;
        padding: 17px 19px;
        font-size: 17px;
    }

    .hero--section {
        padding: 280px 0 196px;
    }
    .sectionBlock__content {
        padding: 72px;
        padding-right: 16px;
    }
    .sectionBlock__main__thumb::after {
        content: '';
        position: absolute;
        left: -19.5%;
        bottom: 0;
        width: 50%;
        height: 367px;
        background-color: var(--white);
        z-index: -1;
    }
    .sectionBlock__sm__thumb::after {
        content: '';
        position: absolute;
        right: -8px;
        top: 16px;
        width: 50%;
        height: 100%;
        background-color: var(--primary);
        z-index: -1;
    }
    .welcome--section,
    .testimonial--section,
    .gallery--section {
        padding: 104px 0 128px;
    }
    .card__circle__btn {
        width: 44px;
        height: 44px;
    }
    .card--testimonial {
        min-height: 405px;
        padding: 42px 30px;
    }
    .slider-slide-btn {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }
    .section__title--footer {
        font-size: 72px;
    }
    .logo--footer {
        max-width: 228px;
        margin-bottom: 40px;
    }
}

/* XXL Device. */
@media only screen and (min-width: 1600px) {
    .fs-1 {
        font-size: 100px !important;
    }
    .fs-2 {
        font-size: 70px !important;
    }
    .fs-3 {
        font-size: 60px !important;
    }
    .fs-4 {
        font-size: 50px !important;
    }

    .logo--header {
        max-width: 184px;
    }
    .nav--header {
        gap: 72px;
    }
    .nav__wrapper--header {
        gap: 60px;
    }
    .nav__link--header {
        padding: 30px 0;
    }
    .hero__buttons,
    .stay--section .section__buttons {
        gap: 28px;
    }
    .hero__para {
        font-size: 24px;
    }
    .sectionBlock__content {
        padding: 104px;
        padding-right: 16px;
    }
    .sectionBlock__main__thumb::after {
        height: 368px;
    }
    .card__circle__btn {
        width: 44px;
        height: 44px;
    }
    .card__title {
        font-size: 32px;
    }
    .stay__content {
        padding: 120px 0;
        padding-right: 80px;
    }
    .logo-icon__img {
        max-width: 98px;
    }
    .testimonial--section {
        padding: 120px 0 160px;
    }
    .card__para--testimonial,
    .guest-name,
    .footer__widget__title {
        font-size: 20px;
    }
    .sectionBlock__absolute__sm__thumb {
        left: 48px;
        bottom: 48px;
    }
    .gallery--section {
        padding: 120px 0 128px;
    }
    .gallery__wrapper .swiper-slide {
        height: 490px;
    }
    .section__title--footer {
        font-size: 90px;
    }
    .copyright {
        padding: 26px 0;
    }
    .copyright__text {
        font-size: 17px;
    }
}