/* Shared responsive refinements */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

.navbar .container {
    flex-wrap: nowrap;
}

.menu-icon {
    color: #fff;
    line-height: 1;
}

.hamenu > .logo {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 90px;
    z-index: 4;
}

.shape2 {
    pointer-events: none;
}

.shape2 img {
    position: absolute;
    right: 4%;
    bottom: 12%;
    left: auto;
}

.contact-pg input,
.contact-pg textarea {
    width: 100%;
}

.contact-pg .morinfo a,
.contact-pg .morinfo a:visited {
    color: #c4c4c4;
}

.contact-pg .morinfo a:hover,
.contact-pg .morinfo a:focus {
    color: var(--main-color);
}

footer p,
footer a,
.contact-pg p {
    overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }

    .header3 .caption h1,
    .caption span {
        font-size: 64px !important;
    }

    .hero-content {
        margin-left: 50px;
    }
}

@media (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }

    .navbar {
        top: 20px;
        padding: 0 12px;
    }

    .navbar.nav-scroll {
        top: -80px;
        padding: 12px;
    }

    .navbar .logo {
        width: 80px;
    }

    .navbar .menu-icon {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 50%;
    }

    .header3 .container.mt-120 {
        margin-top: 80px !important;
    }

    .header3 .caption {
        margin-bottom: 50px !important;
    }

    .header3 .caption h1,
    .caption span {
        font-size: 54px !important;
    }

    .header3 .caption h1 {
        text-align: center !important;
    }

    .header3 .fit-img {
        margin-bottom: 35px !important;
    }

    .hero-content {
        margin: 0 0 20px !important;
    }

    .intro3 .cont h2 {
        font-size: 40px !important;
    }

    .intro3 .cont > h2 img,
    .hero-content h3 img {
        width: 52px;
        height: 52px;
        object-fit: cover;
    }

    .header-pg {
        padding: 170px 0 90px;
    }

    .header-pg .caption2 h1 {
        font-size: 72px;
    }

    .intro-ab .cont {
        padding-top: 0;
    }

    .pricing-pg .row.py-5,
    .contact-pg .container.py-5,
    .intro3 .row.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    footer .row > [class*="col-"] {
        margin-bottom: 38px;
    }

    footer .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

    footer .title {
        margin-bottom: 20px !important;
    }
}

@media (max-width: 767.98px) {
    .container {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }

    .section-padding {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .hamenu > .logo {
        left: 20px;
        width: 76px;
    }

    .hamenu .close-menu {
        top: 20px;
        right: 20px;
        left: auto;
        width: 48px;
        height: 48px;
        line-height: 48px;
    }

    .hamenu .menu-links {
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        padding: 110px 20px 30px;
    }

    .hamenu .menu-links .main-menu > li .link {
        padding: 13px 8px;
        font-size: 26px;
    }

    .header3 .container.mt-120 {
        margin-top: 60px !important;
    }

    .header3 .caption {
        margin-bottom: 35px !important;
    }

    .header3 .caption h1,
    .caption span {
        font-size: clamp(38px, 11vw, 52px) !important;
        line-height: 1.12;
        letter-spacing: -1.5px;
    }

    .header3 .fit-img {
        border-radius: 80px;
    }

    .hero-content h3 {
        font-size: 28px;
    }

    .intro3 .cont h2,
    .sec-head2 h2,
    .pricing-heading h2 {
        font-size: 34px !important;
        line-height: 1.2;
    }

    .header-pg {
        padding: 145px 0 75px;
        border-radius: 0 0 28px 28px;
    }

    .header-pg .caption2 h1 {
        font-size: clamp(48px, 15vw, 64px);
    }

    .sec-head2 {
        margin-bottom: 45px !important;
    }

    .process2 .item,
    .pricing-pg .item {
        margin-bottom: 30px;
    }

    .pricing-pg .item {
        padding: 38px 24px;
    }

    .pricing-pg .item .head h2 {
        font-size: 48px !important;
    }

    .contact-pg .offset-lg-1 {
        margin-left: 0;
    }

    footer {
        border-radius: 28px 28px 0 0;
    }

    .it-copyright-area {
        padding: 22px 16px;
    }
}

@media (max-width: 479.98px) {
    .navbar {
        top: 15px;
        padding: 0 6px;
    }

    .navbar .logo {
        width: 70px;
    }

    .header3 .container.mt-120 {
        margin-top: 45px !important;
    }

    .header3 .caption h1,
    .caption span {
        font-size: clamp(33px, 10.5vw, 44px) !important;
    }

    .header3 .fit-img {
        border-radius: 55px;
    }

    .hero-content h3 {
        font-size: 25px;
    }

    .hero-content h3 img,
    .intro3 .cont > h2 img {
        width: 42px;
        height: 42px;
    }

    .intro3 .cont h2,
    .sec-head2 h2,
    .pricing-heading h2 {
        font-size: 29px !important;
    }

    .header-pg .caption2 h1 {
        font-size: 46px;
    }

    .header-pg .caption2 h6 {
        font-size: 13px;
    }

    .pricing-pg .item {
        padding: 32px 18px;
    }

    .pricing-pg .item .recom {
        right: 12px;
    }

    .contact-pg .morinfo p {
        font-size: 14px;
    }

    .contact-pg input,
    .contact-pg textarea {
        padding: 14px 16px;
    }
}