/**
 * Design Creatify — responsive fixes
 * Mobile, tablet, and desktop (incl. scrollbar-safe floating UI)
 */

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    overflow-x: clip;
    max-width: 100%;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}

/* Safe areas (iPhone notch, home indicator) */
@supports (padding: max(0px)) {
    .container {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
}

/* —— Header & logo —— */
@media (max-width: 991px) {
    header.main-header {
        top: 0;
        padding: 10px 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.75) 70%, transparent 100%);
    }

    header.main-header .container {
        max-width: 100%;
    }

    header.main-header .row {
        align-items: center;
        margin: 0;
        min-height: 52px;
        flex-wrap: nowrap;
    }

    header.main-header .row > .col-sm-6:first-child {
        flex: 1 1 auto;
        width: auto;
        max-width: calc(100% - 56px);
        padding-right: 8px;
    }

    header.main-header .row > .col-sm-6:last-child {
        flex: 0 0 52px;
        width: 52px;
        max-width: 52px;
        padding: 0;
    }

    .logo-side {
        max-width: min(200px, 58vw);
        flex: 0 1 auto;
        z-index: 2;
        position: relative;
    }

    .logo-side img {
        width: 100%;
        max-width: 200px;
        height: auto;
        display: block;
    }

    .menu-side {
        position: absolute;
        top: 50%;
        right: max(8px, env(safe-area-inset-right, 8px));
        transform: translateY(-50%);
        width: auto;
        z-index: 3;
    }

    .hambergur {
        float: none;
        width: 44px;
        height: 44px;
        line-height: 40px;
        font-size: 18px;
        margin: 0;
    }

    /* Decorative triangles overlap logo on small screens */
    .magic > img.redt,
    .magic > img.bluet,
    .magic > img.orgt {
        display: none;
    }

    section.main:not(.inner-pg) > .container {
        padding-top: 88px;
    }

    .main > .container {
        padding-top: 88px;
    }
}

@media (max-width: 480px) {
    .logo-side {
        max-width: min(160px, 52vw);
    }

    .main > .container,
    section.main:not(.inner-pg) > .container {
        padding-top: 72px;
    }
}

/* —— Home hero copy —— */
@media (max-width: 991px) {
    .home-slide h5,
    .for-animination-css h5 {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 0;
        line-height: 1.35 !important;
    }

    .for-animination-css p {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.5;
    }

    .top-sec .sty-head h2 {
        text-align: center;
        word-break: break-word;
    }
}

@media (max-width: 767px) {
    .home-slide h3,
    .top-sec h3 {
        font-size: clamp(1.75rem, 8vw, 2.75rem) !important;
        line-height: 1.15 !important;
    }

    .home-slide h5,
    .for-animination-css h5 {
        font-size: clamp(1rem, 4.2vw, 1.125rem) !important;
    }

    .top-sec .sty-head h2 {
        font-size: clamp(4.5rem, 28vw, 7rem) !important;
        line-height: 0.9 !important;
    }

    .menu-side {
        top: 50% !important;
        right: max(8px, env(safe-area-inset-right, 8px)) !important;
        transform: translateY(-50%) !important;
    }

    .side-content,
    section.main:not(.inner-pg) .side-content {
        margin: 24px 0 20px;
    }

    .holder-af::after {
        display: none;
    }
}

/* —— Home contact form —— */
@media (max-width: 991px) {
    section.main:not(.inner-pg) .home-hero-row {
        flex-direction: column;
    }

    section.main:not(.inner-pg) .home-form-col {
        width: 100%;
        margin-top: 20px;
        justify-content: center;
        padding-left: 12px;
        padding-right: 12px;
    }

    section.main:not(.inner-pg) #hdr-form .form-top,
    section.main:not(.inner-pg) #hdr-form .home-top-form {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    section.main:not(.inner-pg) #hdr-form .home-top-form {
        padding: 28px 20px;
        border-radius: 36px;
        box-shadow: 0 0 0 14px rgba(4, 109, 233, 0.35);
    }

    section.main:not(.inner-pg) #hdr-form .home-top-form h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
}

@media (max-width: 767px) {
    .three-col form,
    section.main:not(.inner-pg) #hdr-form .home-top-form {
        margin-left: auto !important;
        margin-right: auto !important;
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        box-shadow: 0 0 0 14px rgba(4, 109, 233, 0.35) !important;
    }

    section.main:not(.inner-pg) .three-col {
        margin-top: -60px;
    }
}

@media (max-width: 380px) {
    section.main:not(.inner-pg) #hdr-form .home-top-form {
        padding: 22px 14px;
        border-radius: 28px;
    }
}

/* —— WhatsApp widget (bottom-left; live chat uses bottom-right) —— */
.dc-whatsapp-widget {
    right: auto;
    max-width: calc(100vw - 48px);
}

.dc-whatsapp-chat {
    width: min(300px, calc(100vw - max(48px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + (100vw - 100%))));
    max-width: 100%;
    box-sizing: border-box;
}

.dc-whatsapp-chat__close {
    top: 6px;
    right: 6px;
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
    .dc-whatsapp-widget {
        left: max(24px, env(safe-area-inset-left, 0px));
        right: auto;
        bottom: 24px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .dc-whatsapp-widget {
        left: max(40px, env(safe-area-inset-left, 0px));
        right: auto;
        bottom: 40px;
    }

    .dc-whatsapp-chat {
        width: 320px;
        max-width: 320px;
    }

    .dc-whatsapp-float {
        padding: 14px 20px;
    }

    /* Inner pages: decor shapes top-left — clear of menu (top-right) */
    section.main.inner-pg .magic {
        position: relative;
        height: 0;
        overflow: visible;
        pointer-events: none;
        z-index: 1;
    }

    section.main.inner-pg .magic > img {
        top: 6px;
        max-width: 68px;
        width: auto;
        height: auto;
    }

    section.main.inner-pg img.redt {
        right: auto;
        left: 0;
    }

    section.main.inner-pg img.bluet {
        right: auto;
        left: 74px;
    }

    section.main.inner-pg img.orgt {
        right: auto;
        left: 148px;
    }

    header.main-header .container {
        padding-right: calc(24px + (100vw - 100%));
        padding-left: 24px;
    }

    .logo-side {
        max-width: 280px;
    }

    .hambergur {
        margin-right: 4px;
    }

    .dc-cookie-banner {
        padding-left: 24px;
        padding-right: calc(24px + (100vw - 100%));
    }

    .side-content.about-content p,
    section.main.inner-pg .top-sec .side-content p {
        max-width: 720px;
    }
}

@media (min-width: 1400px) {
    .dc-whatsapp-widget {
        left: max(48px, env(safe-area-inset-left, 0px));
        right: auto;
        bottom: 48px;
    }
}

@media (max-width: 575px) {
    .dc-whatsapp-widget {
        left: max(12px, env(safe-area-inset-left, 12px));
        right: auto;
        bottom: max(12px, env(safe-area-inset-bottom, 12px));
        align-items: flex-start;
        width: auto;
        max-width: calc(100vw - 24px);
    }

    .dc-whatsapp-chat {
        width: 100%;
        max-width: 100%;
    }

    .dc-whatsapp-chat__body {
        min-height: 100px;
    }

    .dc-whatsapp-chat__bubble p {
        font-size: 13px;
    }

    .dc-whatsapp-float {
        align-self: flex-start;
        padding: 12px 16px;
        font-size: 22px;
    }
}

/* Cookie + WhatsApp stack on small screens */
@media (max-width: 575px) {
    .dc-cookie-banner {
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    }

    body:has(.dc-whatsapp-chat.is-visible) .dc-cookie-banner {
        bottom: 72px;
    }
}

/* —— Mobile / tablet: one centered content pattern —— */
@media (max-width: 991px) {
    /* Footer */
    .f-top .row > [class*="col-"] {
        margin-bottom: 24px;
        text-align: center;
    }

    .ftr-logo img {
        max-width: 200px;
        margin: 0 auto;
        display: block;
    }

    footer h4 {
        text-align: center;
    }

    footer .s-links,
    footer .c-data,
    footer .soc-icn {
        padding-left: 0;
        margin-left: auto;
        margin-right: auto;
    }

    footer .s-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    footer .c-data {
        list-style: none;
        max-width: 340px;
    }

    footer .c-data li {
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    footer .c-data i {
        min-width: 24px;
        text-align: center;
    }

    footer .c-data span,
    footer .c-data a {
        text-align: center;
    }

    footer .soc-icn {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    footer .soc-icn li {
        margin-right: 0;
    }

    footer .f-top p {
        text-align: center;
    }

    .f-bot,
    .f-bot .col-md-6 {
        text-align: center;
    }

    .f-bot ul {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px;
        padding: 0;
        margin: 8px 0 0;
    }

    .f-bot li:not(:last-child) {
        border-right: none;
        margin: 0;
        padding: 0;
    }

    /* Home — two column copy block */
    section.two-col .lft-side,
    section.two-col .ryt-side,
    section.two-col h3,
    section.two-col p,
    section.two-col a {
        text-align: center;
    }

    section.two-col .ryt-side a {
        display: inline-block;
        margin-top: 8px;
    }

    section.two-col .lft-side p {
        margin-left: auto;
        margin-right: auto;
    }

    section.two-col .color-txt p {
        margin-left: auto;
        margin-right: auto;
    }

    /* Home — services list (we-do) when image slider is hidden */
    .we-do .sec-head,
    .we-do > .container > a {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .we-do .slider-nav {
        width: 100%;
        text-align: center;
    }

    .we-do .slider-nav .slick-slide,
    .we-do .slider-nav .slick-slide > div,
    .we-do .slider-nav h2,
    .we-do .slider-nav h2 a {
        text-align: center;
    }

    .we-do .slider-nav h2 a {
        display: inline-block;
    }

    .we-do .slider-nav .slick-list {
        margin: 0 auto;
    }

    .we-do .verticle-slider > .row {
        flex-direction: column;
        align-items: center;
    }

    .we-do .slider-nav.col-md-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .we-do--mobile-list .slider-nav > div {
        margin: 0 0 14px;
        padding: 0 12px;
    }

    .we-do--mobile-list .slider-nav > div:last-child {
        margin-bottom: 0;
    }

    /* Home — projects intro + cards */
    .projects .sec-head,
    .projects > .container > p {
        text-align: center;
    }

    .projects .shape-div {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .projects .shape-div h3,
    .projects .shape-div p,
    .projects .shape-div a {
        text-align: center;
    }

    /* Inner pages — hero / side copy */
    .side-content,
    .top-sec .about-content,
    .about-content,
    .serv-inn-bnr .side-content,
    .serv-detail h3,
    .serv-detail p {
        text-align: center;
    }

    .top-sec .about-content p,
    .side-content.project-content p {
        margin-left: auto;
        margin-right: auto;
    }

    /* Tech icons row */
    .tech .row > [class*="col-"],
    .tech h4 {
        text-align: center;
    }

    /* Trust / testimonials / CTA blocks */
    .dc-trust-stats,
    .dc-client-voices,
    .dc-client-voices__intro,
    .dc-quote-card,
    .talk,
    .tes-sec .content-holder {
        text-align: center;
    }

    .dc-trust-stats .row > [class*="col-"] {
        text-align: center;
    }

    /* Service enhanced sections */
    .dc-svc-cta__inner,
    .dc-svc-benefits,
    .dc-svc-process,
    .dc-svc-faq {
        text-align: center;
    }

    /* Contact page */
    .contact-content,
    .contact-info {
        text-align: center;
    }

    .contact-info li {
        justify-content: center;
    }

    /* Keep form fields left-aligned for readability while block stays centered */
    .contact-form .form-control,
    .home-top-form .form-control,
    .home-top-form textarea,
    #reused_form .form-control,
    #reused_form textarea {
        text-align: left;
    }
}

@media (max-width: 767px) {
    footer .c-data li {
        flex-direction: column;
    }
}

/* —— Service / inner pages —— */
@media (max-width: 767px) {
    .serv-pg h3,
    .serv-inn-bnr h1,
    .serv-inn-bnr h3,
    .about-content h1,
    .about-content h3 {
        width: 100% !important;
        font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
        line-height: 1.2 !important;
    }

    .dc-svc-cta__inner {
        text-align: center;
    }

    .dc-svc-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dc-svc-cta__btn {
        width: 100%;
        text-align: center;
    }
}

/* —— Project cards & tables —— */
@media (max-width: 767px) {
    .dc-project-card,
    .shape-div {
        max-width: 100%;
    }

}

/* Featured projects slider — uniform image boxes (no staggered sizes) */
.fea-slider .slick-slide {
    margin-top: 0 !important;
}

.fea-slider .slick-slide .img-holder {
    aspect-ratio: 16 / 10;
}

.fea-slider .slick-slide .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

@media (max-width: 767px) {
    .fea-slider .slick-slide .img-holder {
        border-radius: 24px;
    }
}

/* Touch targets */
@media (max-width: 991px) {
    .hambergur,
    .dc-whatsapp-float,
    .dc-whatsapp-chat__close,
    .dc-cookie-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* —— Desktop layout polish —— */
@media (min-width: 992px) {
    section.main.inner-pg > .container {
        padding-top: 160px;
    }

    .st-pro {
        z-index: 5;
    }

    .work-card-images .container,
    .three-col .container {
        max-width: 100%;
    }

    .fea-slider .slick-slide {
        padding: 0 12px;
    }

    .dc-svc-projects__grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    footer .f-top .container {
        padding-right: calc(24px + (100vw - 100%));
    }
}

@media (min-width: 1200px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Trust stats + client quotes */
.dc-trust-stats {
    margin: 40px 0;
    padding: 28px 16px;
    border-radius: 16px;
    background: rgba(4, 109, 233, 0.12);
    border: 1px solid rgba(94, 242, 183, 0.25);
}

.dc-trust-stats__num {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: #5ef2b7;
    margin: 0 0 6px;
    font-family: 'century-gothic-bold', sans-serif;
}

.dc-trust-stats__label {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.dc-client-voices__intro {
    max-width: 640px;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, 0.8);
}

.dc-client-voices__intro a {
    color: #5ef2b7;
}

.dc-quote-card {
    margin: 0;
    padding: 24px 20px;
    height: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(94, 242, 183, 0.2);
    border-radius: 14px;
    color: #f2f2f2;
}

.dc-quote-card p {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #e8e8e8;
}

.dc-quote-card footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dc-quote-card footer strong {
    color: #fff;
    font-size: 0.95rem;
}

.dc-quote-card footer span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Typography: Century Gothic primary; Alfa Slab only for hero words + menu */
body,
button,
input,
textarea,
select {
    font-family: "century-gothic-regular", "Century Gothic", system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.sec-head {
    font-family: "century-gothic-bold", "Century Gothic", system-ui, sans-serif;
}

.home-slide .word,
.fullscreen ul li a {
    font-family: 'Alfa Slab One', serif;
}

.packages-styling .portfolio .sec-head,
.packages-styling .sec-head {
    font-family: "century-gothic-bold", "Century Gothic", system-ui, sans-serif !important;
}