/* ===========================================================================
   Responsive layer
   ---------------------------------------------------------------------------
   Loaded after the theme and the skin so it wins on equal specificity.

   The theme itself is a responsive Bootstrap build, so the grid already
   reflows. What it could not do was undo the fixed pixel sizes written
   directly into the section templates, or fill in the tablet breakpoints the
   templates skipped. That is what this file is for.

   Breakpoints match Bootstrap 5 so this file and the markup agree:
     <576   phone
     >=576  large phone
     >=768  tablet
     >=992  small laptop
     >=1200 desktop
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Overflow containment
   ---------------------------------------------------------------------------
   Several sections position decorative artwork absolutely at widths of 600 to
   816px. Inside a container that does not clip, those push the page wider than
   the screen, which is what produces the sideways scroll and the strip of
   background down the right-hand edge on a phone.
--------------------------------------------------------------------------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Images and embedded media never force the page wider than its column. */
img,
svg,
video,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* A long unbroken string (an email address, a URL in body copy) is the other
   common cause of a page that scrolls sideways on a phone. */
p,
li,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
.card-text,
.feature-box-info {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   2. Fluid typography
   ---------------------------------------------------------------------------
   clamp(min, preferred, max) lets a heading shrink with the viewport and stop
   at a readable floor, instead of stepping down at fixed breakpoints. The min
   values are chosen so nothing drops below comfortable reading size on a
   360px phone; the max values preserve the design as it is on desktop.
--------------------------------------------------------------------------- */
h1,
.h1 {
    font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3.25rem);
    line-height: 1.15;
}

h2,
.h2 {
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
    line-height: 1.2;
}

h3,
.h3 {
    font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.05rem);
    line-height: 1.25;
}

h4,
.h4 {
    font-size: clamp(1.15rem, 1rem + 0.75vw, 1.6rem);
    line-height: 1.3;
}

h5,
.h5 {
    font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
}

/* The theme's own display sizes. text-9 through text-12 are the largest and
   are the ones that overflow a phone; the smaller steps are left alone. */
.text-9 {
    font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.75rem) !important;
    line-height: 1.2;
}

.text-10 {
    font-size: clamp(1.85rem, 1.25rem + 2.5vw, 3rem) !important;
    line-height: 1.18;
}

.text-11 {
    font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem) !important;
    line-height: 1.15;
}

.text-12 {
    font-size: clamp(2.1rem, 1.35rem + 3.4vw, 4rem) !important;
    line-height: 1.1;
}

/* Body copy needs a floor of its own: the theme's lead paragraphs sit at
   1.125rem and the small print at 0.8rem, which is below comfortable on a
   phone held at arm's length. */
@media (max-width: 575.98px) {

    body,
    p,
    li {
        font-size: 1rem;
        line-height: 1.65;
    }

    .text-2 {
        font-size: 0.9rem !important;
    }

    .text-1,
    small,
    .small {
        font-size: 0.85rem !important;
    }
}

/* ---------------------------------------------------------------------------
   3. Hero
   ---------------------------------------------------------------------------
   The markup used to carry `height: 100vh` and `font-size: 80px` inline, so
   nothing could override them. On a phone 100vh includes the browser's own
   toolbars, so the call-to-action sat below the fold with no indication it was
   there, under a headline wrapping to four characters a line.
--------------------------------------------------------------------------- */
.hero-carousel,
.hero-carousel .owl-stage-outer,
.hero-carousel .owl-item {
    /* svh tracks the visible viewport as mobile toolbars show and hide;
       the vh line before it is the fallback for browsers without svh. */
    height: 82vh;
    height: 82svh;
    min-height: 30rem;
    max-height: 60rem;
}

.hero-carousel .owl-item {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

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

.digitex-hero-content {
    max-width: 50rem;
    padding-inline: 0.25rem;
}

.hero-title {
    font-family: 'Oswald', sans-serif;
    /* Tops out at the 80px the design called for, and keeps shrinking with
       the viewport below that rather than overflowing. */
    font-size: clamp(2.1rem, 1.1rem + 4.6vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: clamp(0.75rem, 0.4rem + 1vw, 1.6rem);
    text-transform: capitalize;
}

.hero-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.125rem);
    line-height: 1.6;
    color: #ffffff;
    margin-bottom: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
    max-width: 40.625rem;
    font-weight: 400;
}

/* Buttons wrap instead of being forced onto one line and overflowing. */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

.hero-actions .theme-btn-orange {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    background-color: #f94a29;
    padding: 1rem clamp(1.25rem, 0.9rem + 1.6vw, 2.2rem);
    border-radius: 0;
    text-decoration: none;
    border: 2px solid #f94a29;
    /* Never narrower than a comfortable tap target. */
    min-height: 2.75rem;
}

@media (max-width: 575.98px) {
    .hero-carousel,
    .hero-carousel .owl-stage-outer,
    .hero-carousel .owl-item {
        height: auto;
        min-height: 28rem;
    }

    .hero-carousel .owl-item {
        padding-block: 5rem;
    }

    /* A single full-width button reads better than two half-width ones. */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .theme-btn-orange {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   3b. Skywork components
   ---------------------------------------------------------------------------
   The homepage and most inner pages are built from the .sky-* components in
   skywork.css. That file scales the hero headline at two breakpoints but
   leaves the section and call-to-action headings fixed at 42px and 48px, and
   leaves every section band at 100 to 120px of padding top and bottom.

   On a phone that is a 48px headline over roughly 240px of empty space
   between each band: the layout is not broken, but it reads as a desktop page
   that was shrunk rather than one designed for the device.
--------------------------------------------------------------------------- */
.sky-hero-title {
    /* Tops out at the 64px the design uses and scales down smoothly, instead
       of stepping 64 to 48 to 36 at two fixed widths.

       !important because the heading in sky_hero.blade.php also carries the
       theme's .text-12 class, which is set !important in the block above. Two
       rules would otherwise decide this heading's size between them by source
       order, which is not something to leave to chance. */
    font-size: clamp(2.05rem, 1.2rem + 3.6vw, 4rem) !important;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: clamp(1rem, 0.6rem + 1.4vw, 2rem);
}

.sky-section-title {
    font-size: clamp(1.6rem, 1.15rem + 2vw, 2.625rem);
    line-height: 1.2;
}

.sky-cta-title {
    font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
    line-height: 1.15;
}

.sky-feature-title {
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.375rem);
}

.sky-service-title {
    font-size: clamp(1.05rem, 0.97rem + 0.4vw, 1.25rem);
}

.sky-mission-content h3 {
    font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
}

.sky-hero-content p {
    font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.125rem) !important;
    line-height: 1.6 !important;
}

.sky-feature-icon {
    font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
}

/* The hero's two buttons sit in a flex row with no wrap, so on a narrow
   screen the second one is pushed past the edge. */
.sky-hero-content .d-flex.justify-content-center {
    flex-wrap: wrap;
}

.bg-sky-red-btn,
.btn-sky-outline {
    /* A comfortable tap target at every size. */
    min-height: 2.75rem;
    padding: 0.875rem clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
    justify-content: center;
    text-align: center;
}

@media (max-width: 767.98px) {

    /* 100 to 120px top and bottom is most of a phone screen in empty space. */
    .sky-services-section,
    .sky-advantage-section {
        padding-block: 3rem;
    }

    .sky-cta-section {
        padding-block: 3.5rem;
    }

    .sky-mission-section {
        padding-block: 1.5rem;
    }

    .sky-section-header {
        margin-bottom: 2rem;
    }

    .sky-service-card {
        padding: 1.75rem 1.25rem;
    }

    .sky-feature-item {
        padding: 0.75rem 0;
    }

    /* Full-width stacked buttons read better than two cramped ones. */
    .sky-hero-content .d-flex.justify-content-center {
        flex-direction: column;
        align-items: stretch;
    }

    .bg-sky-red-btn,
    .btn-sky-outline {
        width: 100%;
    }

    /* The glow is ornament and is drawn larger than a phone screen. */
    .sky-cta-bg-glow {
        width: 22rem;
        height: 22rem;
    }
}

@media (max-width: 575.98px) {

    /* skywork.css pins the hero to a full viewport height plus 120px of top
       padding on small screens. With the contact bar below it that is more
       than one screen of hero before any content is reached. */
    .sky-hero-section {
        min-height: auto;
        padding-top: 6.5rem;
        padding-bottom: 2rem;
    }

    .sky-hero-contact-bar {
        padding-block: 1rem;
    }

    .sky-contact-item {
        font-size: 0.8125rem;
        gap: 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   4. Tablet grid
   ---------------------------------------------------------------------------
   Most card rows are written `col-md-6 col-lg-3`, which is right. A number use
   `col-lg-*` on its own, and those jump straight from four across to one
   stacked column the moment the viewport drops below 992px, leaving a tablet
   showing a single narrow ribbon of cards down the middle of a wide screen.

   These rules supply the missing middle step without touching the markup. They
   are scoped to the width band where no explicit col-md class applies, so a
   template that already declares one is unaffected.
--------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Four and three across become two across. */
    .row > [class*="col-lg-3"]:not([class*="col-md-"]):not([class*="col-sm-"]),
    .row > [class*="col-lg-4"]:not([class*="col-md-"]):not([class*="col-sm-"]) {
        flex: 0 0 auto;
        width: 50%;
    }

    /* Halves, and the centred text blocks written as col-lg-8/9/10, take the
       full width of the row rather than stacking at an arbitrary measure. */
    .row > [class*="col-lg-6"]:not([class*="col-md-"]):not([class*="col-sm-"]),
    .row > [class*="col-lg-7"]:not([class*="col-md-"]):not([class*="col-sm-"]),
    .row > [class*="col-lg-8"]:not([class*="col-md-"]):not([class*="col-sm-"]),
    .row > [class*="col-lg-9"]:not([class*="col-md-"]):not([class*="col-sm-"]),
    .row > [class*="col-lg-10"]:not([class*="col-md-"]):not([class*="col-sm-"]) {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Between 576 and 767 a two-up row of small cards still reads well, where one
   stacked column wastes most of the screen. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .row > [class*="col-lg-3"]:not([class*="col-sm-"]):not([class*="col-md-"]) {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* Cards in a reflowed row should still line up with each other. */
@media (min-width: 576px) {
    .row > [class*="col-"] > .card,
    .row > [class*="col-"] > .feature-box {
        height: 100%;
    }
}

/* ---------------------------------------------------------------------------
   5. Vertical rhythm
   ---------------------------------------------------------------------------
   The theme's section padding is tuned for desktop. Carried unchanged onto a
   phone it costs most of a screen in empty space between every band of
   content, which is the single thing that most makes a desktop layout feel
   like it was merely shrunk rather than designed for the device.
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .section,
    .section.section-height-1,
    .section.section-height-2,
    .section.section-height-3,
    .section.section-height-4,
    .section.section-height-5 {
        padding-block: 2.75rem;
    }

    .py-5 {
        padding-block: 2rem !important;
    }

    .pt-5 {
        padding-top: 2rem !important;
    }

    .pb-5 {
        padding-bottom: 2rem !important;
    }

    .my-5 {
        margin-block: 2rem !important;
    }

    .mb-5 {
        margin-bottom: 1.75rem !important;
    }

    .mt-5 {
        margin-top: 1.75rem !important;
    }

    /* A consistent gutter so nothing sits flush against the screen edge. */
    .container,
    .container-fluid {
        padding-inline: 1.125rem;
    }
}

/* ---------------------------------------------------------------------------
   6. Touch targets
   ---------------------------------------------------------------------------
   Anything meant to be tapped needs roughly 44px of reachable area. Several
   of the theme's icon buttons and the footer's social links are drawn at 30px.
--------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

    .btn,
    .nav-link,
    .dropdown-item,
    button:not(.owl-dot),
    [role="button"] {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The icon itself keeps its drawn size; the padding supplies the rest of
       the target so the design is unchanged but the tap area is not. */
    .topbar-social-icon,
    .footer-social-icon,
    .social-icons a {
        padding: 0.45rem;
    }

    /* Menu rows in the collapsed mobile navigation. */
    #header .header-nav-main nav > ul > li > a,
    #header .header-nav-main nav ul li a {
        padding-block: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   7. Forms
   ---------------------------------------------------------------------------
   iOS zooms the whole page when a field with a font smaller than 16px takes
   focus, and does not zoom back out. Setting the field text to 16px is the
   documented way to prevent it.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

/* The newsletter row is an input and a button side by side, with the button
   set not to wrap its label. Below about 480px the pair cannot fit. */
@media (max-width: 575.98px) {

    .newsletter-form {
        flex-direction: column;
        gap: 0.75rem;
    }

    .newsletter-form .btn,
    .newsletter-form input {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   8. Tables
   ---------------------------------------------------------------------------
   A table cannot reflow. Rather than let one stretch the page, it scrolls
   inside its own box. -webkit-overflow-scrolling keeps that momentum-scrolling
   on iOS.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .table-responsive,
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tables the markup did not wrap get the same treatment. */
    table:not(.table-responsive table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------------
   9. Elements that opt out of wrapping
   ---------------------------------------------------------------------------
   `white-space: nowrap` is correct on a desktop stat label and wrong on a
   phone, where it is a guaranteed overflow.
--------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    .text-nowrap,
    [style*="white-space: nowrap"],
    [style*="white-space:nowrap"] {
        white-space: normal !important;
    }
}

/* ---------------------------------------------------------------------------
   10. Decorative artwork
   ---------------------------------------------------------------------------
   The footer's glow and map graphics are drawn at 600 to 816px. They are
   ornament, so on a small screen they scale down rather than dominate.
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .footer-glow {
        width: 20rem;
        height: 20rem;
    }

    .footer-webtec .widgets-section:before,
    .footer-webtec:after {
        width: 100%;
        max-width: 25rem;
        height: 15rem;
        opacity: 0.06;
    }
}

/* ---------------------------------------------------------------------------
   11. Carousels
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Side navigation arrows sit outside the frame on a narrow screen and are
       an awkward target next to a swipe surface. Dots are enough. */
    .owl-carousel .owl-nav {
        display: none;
    }

    .owl-carousel .owl-dots {
        margin-top: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   12. Print
--------------------------------------------------------------------------- */
@media print {

    #header,
    footer,
    .owl-nav,
    .owl-dots,
    .btn {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}

/* ---------------------------------------------------------------------------
   13. Motion
   ---------------------------------------------------------------------------
   The theme animates most sections in on scroll. Honour a reader who has asked
   their system for reduced motion.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .appear-animation {
        opacity: 1 !important;
        transform: none !important;
    }
}