/* ==========================================================
   HRTECHIFY DESIGN SYSTEM
   Module 11
   Responsive
   Version : v1.0.0
========================================================== */


/* ==========================================================
   GLOBAL RESPONSIVE FOUNDATION
========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    overflow-x:hidden;
}

img,
picture,
svg,
video,
canvas{
    display:block;
    max-width:100%;
    height:auto;
}

iframe{
    max-width:100%;
    border:0;
}

table{
    width:100%;
    border-collapse:collapse;
    display:block;
    overflow-x:auto;
}

button,
input,
select,
textarea{
    max-width:100%;
    font:inherit;
}

input,
textarea,
select{
    width:100%;
}


/* ==========================================================
   LARGE DESKTOPS
========================================================== */

@media (min-width:1600px){

    .container{
        width:min(92%,1440px);
        margin-inline:auto;
    }

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width:1400px){

    .container{
        width:min(92%,1280px);
        margin-inline:auto;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    .hero-layout{

        display:grid;
        grid-template-columns:1fr;
        gap:64px;
        text-align:center;

    }

    .hero-content{

        margin-inline:auto;
        max-width:760px;

    }

    .hero-description{

        margin-inline:auto;

    }

    .hero-actions{

        justify-content:center;
        flex-wrap:wrap;

    }

    .trust-strip{

        justify-content:center;
        flex-wrap:wrap;

    }

    .hero-workspace{

        order:2;

    }

    .workspace-window{

        width:100%;
        max-width:700px;
        margin-inline:auto;

    }

    .grid-4,
    .grid-3,
    .capability-grid,
    .dashboard-grid,
    .trust-grid{

        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    }

}


/* ==========================================================
   TABLETS
========================================================== */

@media (max-width:992px){

    .container{

        width:92%;

    }

    .grid-4,
    .grid-3,
    .grid-2,
    .capability-grid,
    .dashboard-grid,
    .how-grid,
    .trust-grid{

        grid-template-columns:1fr;

    }

    .company-dna{

        grid-template-columns:repeat(2,1fr);

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .hero-actions{

        justify-content:center;
        flex-wrap:wrap;

    }

    .section-heading{

        text-align:center;

    }

    .workspace-window{

        width:100%;

    }

    .workspace-toolbar{

        flex-wrap:wrap;

    }

    .dashboard-header{

        flex-direction:column;
        align-items:flex-start;
        gap:18px;

    }

    .dashboard-actions{

        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:12px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .container{

        width:94%;

    }

    .section,
    .compact-section{

        padding:72px 0;

    }

    h1{

        font-size:clamp(2rem,8vw,2.8rem);

    }

    h2{

        font-size:clamp(1.6rem,6vw,2.2rem);

    }

    h3{

        font-size:1.3rem;

    }

    p{

        font-size:1rem;

        line-height:1.7;

    }

    .hero{

        min-height:auto;
        padding-top:110px;
        padding-bottom:70px;

    }

    .hero-badge{

        margin-inline:auto;
        margin-bottom:24px;

    }

    .hero-actions{

        flex-direction:column;
        width:100%;
        gap:16px;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

    }

    .wizard-progress{

        flex-wrap:wrap;
        gap:16px;

    }

    .wizard-line{

        display:none;

    }

    .assessment-panel{

        padding:28px 22px;

    }

    .assessment-group{

        padding:24px;

    }

    .workspace-header{

        flex-wrap:wrap;

    }

    .workspace-toolbar{

        flex-wrap:wrap;

    }

    .workspace-body{

        padding:20px;

    }

    .workspace-card{

        width:100%;
    }

    .summary-grid{

        grid-template-columns:1fr;

    }

    .dashboard-header{

        flex-direction:column;
        align-items:flex-start;

    }

    .dashboard-actions{

        flex-direction:column;

    }

    .dashboard-actions>*{

        width:100%;

    }

    .modal{

        padding:16px;

    }

    .modal-content{

        width:100%;
        max-height:90vh;
        overflow-y:auto;
        padding:24px;

    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width:480px){

    .container{

        width:95%;
        padding-inline:8px;

    }

    h1{

        font-size:1.9rem;

    }

    h2{

        font-size:1.5rem;

    }

    h3{

        font-size:1.15rem;

    }

    p{

        font-size:.95rem;

    }

    .hero-badge{

        width:100%;
        justify-content:center;
        text-align:center;
        font-size:.75rem;

    }

    .workspace-body{

        padding:18px;

    }

    .workspace-card,
    .summary-card,
    .dashboard-section,
    .capability-card,
    .how-card,
    .assessment-group{

        padding:20px;

    }

    .assessment-panel{

        padding:20px;
        border-radius:20px;

    }

    .primary-btn,
    .secondary-btn{

        min-height:48px;

    }

    table{

        font-size:.9rem;

    }

}


/* ==========================================================
   EXTRA SMALL DEVICES
========================================================== */

@media (max-width:360px){

    h1{

        font-size:1.65rem;

    }

    h2{

        font-size:1.35rem;

    }

    h3{

        font-size:1.1rem;

    }

    .section,
    .compact-section{

        padding:56px 0;

    }

    .hero{

        padding-top:100px;

    }

    .primary-btn,
    .secondary-btn{

        padding:14px 18px;
        font-size:.9rem;

    }

    .workspace-card,
    .summary-card{

        padding:16px;

    }

}