/* 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;
    }

    /* PreLoader Start */
    #loader {
        width: 128px;
    }
    /* PreLoader End */

    .fs-1,
    .main__title {
        font-size: 48px !important;
    }
    .fs-2 {
        font-size: 34px !important;
    }
    .fs-3 {
        font-size: 30px !important;
    }
    .fs-4 {
        font-size: 24px !important;
    }
    .fs-5 {
        font-size: 20px !important;
    }

    .logo__wrap {
        max-width: 78px;
    }

    .hero--section {
        padding: 80px 0;
    }

    .expertise--section {
        padding: 64px 0;
    }

    .customer__slider .swiper-slide {
        width: 104px;
    }

    .success--section {
        padding-top: 64px;
    }

    .experience--section {
        margin-top: 64px;
        padding: 64px 0;
    }

    .contact--section {
        padding: 64px 0;
    }

    .nav--footer {
        gap: 40px;
    }
}

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

    .btn {
        --btn-height: 40px;
    }
    .btn__text {
        font-size: 18px;
    }
    .btn__icon svg {
        width: 18px;
        height: 18px;
    }

    .hero--section {
        min-height: 512px;
    }

    .expertise__card {
        padding: 40px 28px;
    }

    .customer__slider {
        padding: 32px 0;
    }

    .tab__wrap {
        gap: 24px;
    }

    .succes__card__inner {
        padding: 28px;
    }

    .contact__info__icon,
    .footer__social__link {
        width: 30px;
        height: 30px;
    }
    .form--contact {
        padding: 32px;
        padding-bottom: 48px;
        clip-path: polygon(
            24px 0%,
            100% 0%,
            100% calc(100% - 24px),
            calc(100% - 24px) 100%,
            0% 100%,
            0% 24px
        );
    }

    .footer__top__wrapper {
        gap: 40px;
    }
    .logo--footer {
        max-width: 174px;
    }
    .nav__link--footer,
    .footer__text,
    .footer__link,
    .footer__copyright {
        font-size: 20px;
    }
}

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

    /* PreLoader Start */
    #loader {
        width: 144px;
    }
    #loader-inner {
        padding: 16px;
        clip-path: polygon(
            12px 0%,
            100% 0%,
            100% calc(100% - 12px),
            calc(100% - 12px) 100%,
            0% 100%,
            0% 12px
        );
    }
    #loader-logo {
        clip-path: polygon(
            6px 0%,
            100% 0%,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0% 100%,
            0% 6px
        );
    }
    /* PreLoader End */

    body {
        font-size: 18px;
    }
    .fs-1,
    .main__title {
        font-size: 56px !important;
    }
    .fs-2 {
        font-size: 40px !important;
    }
    .fs-3 {
        font-size: 36px !important;
    }
    .fs-4 {
        font-size: 28px !important;
    }
    .fs-5 {
        font-size: 22px !important;
    }
    .section-overlay::after {
        background: linear-gradient(
            to right,
            rgba(13, 18, 22, 0.96) 25%,
            rgba(13, 18, 22, 0) 100%
        );
        opacity: 1;
    }
    /* Hero: pull the fade further across for better text readability */
    .hero--section.section-overlay::after {
        background: linear-gradient(
            to right,
            rgba(13, 18, 22, 0.97) 0%,
            rgba(13, 18, 22, 0.9) 45%,
            rgba(13, 18, 22, 0) 85%
        );
    }

    .header--area {
        border: none;
    }
    .header__wrapper {
        padding: 0;
    }
    .logo--header {
        padding: 10px 0;
        padding-right: 48px;
    }
    .logo--header::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 999999%;
        height: 100%;
        background-color: #d9d9d9;
        z-index: -1;
        transform: skewX(141deg);
    }
    .logo__wrap {
        max-width: 100px;
    }
    .header--area .action-btn__contact {
        width: 144px;
    }
    .search-btn {
        width: 30px;
        height: 30px;
    }

    .hero--section {
        min-height: 608px;
        padding: 112px 0;
    }

    .expertise--section {
        padding: 80px 0;
    }
    .expertise__icon__box {
        width: 74px;
        height: 74px;
    }

    .customer__slider .swiper-slide {
        width: 128px;
    }

    .tab__inner__content,
    .tab__thumb {
        padding: 30px;
    }

    .success--section {
        padding-top: 80px;
    }

    .experience--section {
        margin-top: 80px;
    }

    .contact--section {
        padding: 80px 0;
    }
    .form__wrapper__row.g-md-4 {
        --bs-gutter-x: 48px;
        --bs-gutter-y: 28px;
    }
    .form .title {
        font-size: 30px;
    }
    .form__label {
        font-size: 21px;
    }
    .form__input {
        font-size: 18px;
    }

    .footer__top__wrapper {
        gap: 96px;
    }
    .logo--footer {
        max-width: 198px;
    }
    .nav--footer {
        gap: 64px;
    }
}

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

    .btn {
        --btn-height: 44px;
    }
    .btn__text {
        font-size: 20px;
    }
    .btn__icon svg {
        width: 20px;
        height: 20px;
    }

    .logo--header {
        padding-right: 68px;
    }
    .logo__wrap {
        max-width: 132px;
    }
    .nav__wrapper--header {
        gap: 40px;
    }
    .nav__item--header::after {
        right: -21px;
    }
    .header--area .action-btn__contact {
        width: 148px;
    }

    .expertise__card {
        padding: 52px 32px;
    }

    .customer__slider {
        padding: 48px 0;
    }

    .tab__wrap {
        gap: 32px;
    }
    .nav-tabs .nav-link,
    .nav-tabs .nav-link.active {
        padding: 12px 30px;
        font-size: 20px;
    }

    .succes__card__inner {
        padding: 28px;
        padding-bottom: 32px;
    }

    .contact__info__icon,
    .footer__social__link {
        width: 34px;
        height: 34px;
    }
    .contact__info__item {
        gap: 20px;
    }

    .footer__top__wrapper {
        gap: 144px;
    }
    .nav__link--footer,
    .footer__text,
    .footer__link,
    .footer__copyright {
        font-size: 24px;
    }
}

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

    /* PreLoader Start */
    #loader {
        width: 192px;
    }
    #loader-inner {
        padding: 24px;
        clip-path: polygon(
            13px 0%,
            100% 0%,
            100% calc(100% - 13px),
            calc(100% - 13px) 100%,
            0% 100%,
            0% 13px
        );
    }
    #loader-logo {
        clip-path: polygon(
            7px 0%,
            100% 0%,
            100% calc(100% - 7px),
            calc(100% - 7px) 100%,
            0% 100%,
            0% 7px
        );
    }
    /* PreLoader End */

    body {
        font-size: 20px;
    }
    .fs-1,
    .main__title {
        font-size: 64px !important;
    }
    .fs-2 {
        font-size: 48px !important;
    }
    .fs-3 {
        font-size: 40px !important;
    }
    .fs-4 {
        font-size: 32px !important;
    }
    .fs-5 {
        font-size: 25px !important;
    }

    .logo__wrap {
        max-width: 168px;
    }
    .nav__wrapper--header {
        gap: 48px;
    }
    .nav__item--header::after {
        right: -25px;
    }

    .hero--section {
        min-height: 656px;
        padding: 144px 0;
    }

    .expertise--section {
        padding: 96px 0;
    }
    .expertise__cards__row.g-md-4,
    .success__cards__row.g-md-4 {
        --bs-gutter-x: 32px;
        --bs-gutter-y: 32px;
    }
    .expertise__icon__box {
        width: 88px;
        height: 88px;
    }

    .customer__slider .swiper-slide {
        width: 150px;
    }

    .tab__thumb {
        padding: 30px 48px;
    }

    .success--section {
        padding-top: 114px;
    }
    .success__card__subtitle,
    .success__card__para {
        font-size: 18px;
    }

    .experience--section {
        margin-top: 96px;
    }

    .contact--section {
        padding: 120px 0;
    }
    .form--contact {
        padding: 48px;
        padding-bottom: 64px;
        clip-path: polygon(
            32px 0%,
            100% 0%,
            100% calc(100% - 32px),
            calc(100% - 32px) 100%,
            0% 100%,
            0% 32px
        );
    }
    .form .title {
        font-size: 32px;
    }
    .form__label {
        font-size: 24px;
    }
    .form__input {
        font-size: 20px;
    }
    .form__wrapper__row.g-md-4 {
        --bs-gutter-x: 64px;
    }

    .footer__top__wrapper {
        gap: 192px;
    }
    .logo--footer {
        max-width: 222px;
    }
    .nav--footer {
        gap: 88px;
    }
}

/* XXL Device */
@media only screen and (min-width: 1600px) {
    .hero--section {
        min-height: 800px;
    }
}