/* Expert responsive polish layer.
   Loaded after the theme CSS to preserve the current design while fixing
   spacing, hero proportions, mobile readability, and carousel ergonomics. */

:root {
    --dw-navy: #073965;
    --dw-ink: #0b1429;
    --dw-orange: #f85603;
    --dw-muted: #64748b;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

main {
    background: #fff;
}

.container {
    position: relative;
}

.row {
    min-width: 0;
}

[class*="col-"] {
    min-width: 0;
}

p {
    overflow-wrap: break-word;
}

.section-padding,
.section-padding2 {
    padding-top: clamp(64px, 7vw, 110px);
    padding-bottom: clamp(64px, 7vw, 110px);
}

.section-padding30 {
    padding-top: clamp(42px, 5vw, 80px);
    padding-bottom: clamp(42px, 5vw, 80px);
}

.mb90,
.mb-90 {
    margin-bottom: clamp(34px, 5vw, 82px) !important;
}

.section-title {
    margin-bottom: clamp(26px, 4vw, 56px);
}

.section-title h2,
.section-title h3 {
    line-height: 1.08;
    overflow-wrap: break-word;
}

.section-title p {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.header-area,
.header-area .header-bottom,
.header-sticky {
    z-index: 1000;
}

.main-header .logo img {
    width: min(300px, 64vw);
    height: auto;
}

.main-header .main-menu ul li a {
    white-space: nowrap;
}

.header-right-btn .btn {
    min-height: 46px;
    line-height: 1.1;
    padding: 14px 18px;
}

.mobile_menu {
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1002;
}

.slicknav_menu {
    padding: 0;
}

.slicknav_btn {
    position: absolute;
    top: -58px;
    right: 15px;
}

.slicknav_menu .slicknav_nav {
    margin: 0 15px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
}

.single-slider {
    isolation: isolate;
    background-size: cover;
    background-repeat: no-repeat;
}

.slider-height {
    min-height: clamp(620px, 84vh, 820px) !important;
}

.slider-height2 {
    min-height: clamp(360px, 52vh, 520px) !important;
    background-size: cover;
}

.hero-overly::before {
    z-index: -1;
    background: linear-gradient(90deg, rgba(4, 14, 31, 0.82) 0%, rgba(4, 14, 31, 0.62) 45%, rgba(4, 14, 31, 0.34) 100%);
}

.slider-area .hero__caption {
    margin-left: clamp(16px, 3vw, 40px);
    padding-top: clamp(92px, 16vh, 148px);
    max-width: 1100px;
}

.slider-area .hero__caption h1 {
    font-size: clamp(72px, 10.2vw, 136px);
    line-height: 0.94;
    letter-spacing: 0;
    max-width: 100%;
}

.slider-area .hero__caption .stock-text {
    left: clamp(140px, 22vw, 290px);
    top: clamp(-24px, -1.4vw, -10px);
    min-height: clamp(72px, 8.5vw, 138px);
    pointer-events: none;
}

.slider-area .hero__caption .stock-text h2 {
    font-size: clamp(62px, 9.2vw, 132px);
    line-height: 0.96;
}

.slider-area .hero__caption .hero-text1 span,
.slider-area .hero__caption .hero-text1 a,
.slider-area .hero__caption .hero-text2 span,
.slider-area .hero__caption .hero-text2 a {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.35;
    max-width: min(650px, 88vw);
}

.slider-area .hero__caption .hero-text2 {
    margin-top: clamp(56px, 8vw, 104px) !important;
}

.slider-area .hero__caption .hero-text2 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.slider-area .slick-dots {
    bottom: clamp(18px, 4vh, 34px) !important;
}

.slider-area .hero-cap {
    position: relative;
    z-index: 2;
    padding-top: clamp(86px, 12vh, 118px) !important;
}

.slider-area .hero-cap h2,
.slider-area .hero-cap.hero-cap2 h2 {
    font-size: clamp(34px, 6vw, 66px);
    line-height: 1.05;
    max-width: 100%;
    overflow-wrap: break-word;
}

.slider-area .hero-cap nav {
    padding-left: clamp(46px, 9vw, 95px);
}

.slider-area .hero-cap nav::before {
    width: clamp(34px, 7vw, 75px);
}

.breadcrumb {
    flex-wrap: wrap;
}

.btn,
.white-btn,
button,
input,
select,
textarea {
    max-width: 100%;
}

.btn,
.white-btn {
    white-space: normal;
    line-height: 1.12;
}

.owl-carousel .owl-stage {
    display: flex;
}

.owl-carousel .owl-item {
    display: flex;
    min-height: 1px;
}

.owl-carousel .owl-item > * {
    width: 100%;
}

.owl-carousel .owl-nav button,
.owl-carousel .owl-nav div {
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(7, 57, 101, 0.18);
}

.owl-carousel .owl-nav div.owl-next {
    right: 8px;
}

.owl-carousel .owl-nav div.owl-prev {
    left: 8px;
}

.owl-dots,
.slick-dots {
    line-height: 1;
}

.owl-dots button,
.slick-dots button {
    cursor: pointer;
}

.single-service-cap,
.single-blog,
.single-team,
.single-project,
.pricing-phone,
.blog_item,
.portfolio-item {
    height: 100%;
}

.single-service-cap img,
.single-blog img,
.blog_item_img img,
.portfolio-img img,
.project-img img,
.service-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.laptop-screen-glass,
.phone-screen,
.pricing-phone-body,
.testimonial-card,
.hero-tool-card {
    min-width: 0;
}

.footer-area,
.footer-wrapper {
    overflow: hidden;
}

.footer-area img {
    height: auto;
}

@media (min-width: 1400px) {
    .slider-height {
        min-height: 800px !important;
    }
}

@media (max-width: 1199px) {
    .header-area .header-top {
        display: none;
    }

    .header-area .header-bottom {
        padding: 14px 0;
    }

    .slider-height {
        min-height: clamp(560px, 76vh, 700px) !important;
    }
}

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

    .slider-height {
        min-height: clamp(500px, 72vh, 620px) !important;
    }

    .slider-height2 {
        min-height: clamp(330px, 48vh, 440px) !important;
    }

    .slider-area .hero__caption {
        margin-left: 0;
        padding-top: 88px;
    }

    .slider-area .hero__caption h1 {
        font-size: clamp(58px, 12vw, 94px);
    }

    .slider-area .hero__caption .stock-text {
        left: clamp(48px, 15vw, 150px);
        min-height: clamp(54px, 11vw, 88px);
    }

    .slider-area .hero__caption .stock-text h2 {
        font-size: clamp(48px, 10vw, 82px);
    }

    .hero-overly::before {
        background: linear-gradient(90deg, rgba(4, 14, 31, 0.86) 0%, rgba(4, 14, 31, 0.68) 62%, rgba(4, 14, 31, 0.42) 100%);
    }
}

@media (max-width: 767px) {
    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .section-padding,
    .section-padding2 {
        padding-top: 54px;
        padding-bottom: 54px;
    }

    .section-title {
        margin-bottom: 28px;
    }

    .section-title h2,
    .section-title h3 {
        font-size: clamp(28px, 8vw, 38px);
    }

    .section-title p,
    p {
        font-size: 15px;
        line-height: 1.65;
    }

    .slider-height {
        min-height: 520px !important;
        background-position: center center;
    }

    .slider-height2 {
        min-height: 315px !important;
        background-position: center center;
    }

    .slider-area .hero__caption {
        padding-top: 72px;
    }

    .slider-area .hero__caption h1 {
        font-size: clamp(42px, 14vw, 68px);
        line-height: 1;
    }

    .slider-area .hero__caption .stock-text {
        left: 0;
        top: 6px;
        min-height: 52px;
    }

    .slider-area .hero__caption .stock-text h2 {
        font-size: clamp(32px, 10vw, 48px);
    }

    .slider-area .hero__caption .hero-text1 span,
    .slider-area .hero__caption .hero-text1 a,
    .slider-area .hero__caption .hero-text2 span,
    .slider-area .hero__caption .hero-text2 a {
        padding-left: 24px;
    }

    .slider-area .hero__caption .hero-text1 span::before,
    .slider-area .hero__caption .hero-text1 a::before,
    .slider-area .hero__caption .hero-text2 span::before,
    .slider-area .hero__caption .hero-text2 a::before {
        left: 0;
        width: 18px;
    }

    .slider-area .hero__caption .hero-text2 {
        margin-top: 32px !important;
    }

    .slider-area .slick-dots {
        bottom: 24px !important;
    }

    .slider-area .hero-cap {
        padding-top: 72px !important;
    }

    .slider-area .hero-cap h2,
    .slider-area .hero-cap.hero-cap2 h2 {
        font-size: clamp(28px, 9vw, 42px);
    }

    .owl-carousel .owl-nav div {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 17px;
    }

    #scrollUp {
        right: 16px;
        bottom: 88px;
        width: 42px;
        height: 42px;
        line-height: 40px;
    }

    .about_section_one,
    .about_section_one .container,
    .founder,
    .office_area,
    .core-value,
    .key-advantages {
        overflow-x: clip;
    }

    .about_section_one .row,
    .founder .row,
    .office_area .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .about-photo-frame {
        max-width: min(100%, 430px) !important;
        margin-left: auto;
        margin-right: auto;
        transform: none !important;
    }

    .about-img {
        display: block;
        width: 100%;
        height: auto;
        transform: none !important;
    }

    .about-photo-frame > .d-flex[style*="position:absolute"] {
        position: static !important;
        max-width: 100% !important;
        margin: 14px auto 0;
        transform: none !important;
    }

    .vm-glass-card,
    .office-item,
    .app-tablet,
    .tablet-frame,
    .phone-mockup,
    .office-culture-slide-frame {
        max-width: 100%;
        transform: none !important;
    }

    .phone-mockup {
        margin-left: auto;
        margin-right: auto;
    }

    .app-tablet {
        margin-top: 10px;
    }
}

@media (max-width: 575px) {
    .main-header .logo img {
        width: min(230px, 58vw);
    }

    .slicknav_btn {
        top: -52px;
        right: 12px;
    }

    .slider-height {
        min-height: 500px !important;
    }

    .slider-height2 {
        min-height: 290px !important;
    }

    .hero-overly::before {
        background: linear-gradient(90deg, rgba(4, 14, 31, 0.9) 0%, rgba(4, 14, 31, 0.74) 72%, rgba(4, 14, 31, 0.52) 100%);
    }

    .slider-area .hero__caption {
        padding-top: 62px;
    }

    .slider-area .hero__caption .hero-text1 span,
    .slider-area .hero__caption .hero-text1 a,
    .slider-area .hero__caption .hero-text2 span,
    .slider-area .hero__caption .hero-text2 a {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .slider-area .hero__caption .hero-text2 {
        margin-top: 26px !important;
    }

    .slider-area .hero-cap nav {
        padding-left: 0;
    }

    .slider-area .hero-cap nav::before {
        display: none;
    }

    .breadcrumb {
        gap: 4px 0;
    }

    .btn,
    .white-btn {
        width: auto;
        min-height: 44px;
        padding: 13px 18px;
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .slider-height {
        min-height: 470px !important;
    }

    .slider-area .hero__caption h1 {
        font-size: 38px;
    }
}
