/* =========================
Tablet
========================= */
@media (max-width:1024px){

    body{
        font-size:14px;
    }

    section{
        padding:80px 0;
    }

    .hero-grid{
        gap:40px;
    }

    .hero h1{
        font-size:2.5rem;
    }

    .flow-card{
        width:180px;
        padding:22px;
    }

    .cases-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .accordion{
        grid-template-columns:1fr;
    }

    nav{
        gap:14px;
    }
}


/* =========================
Mobile
========================= */
@media (max-width:768px){

    body{
        font-size:16px;
    }

    section{
        padding:70px 0;
    }

    .container{
        width:92%;
    }

    /* ------------------------
    Header
    ------------------------ */

    .logo{
        display:flex;
    }

    nav{

        position:fixed;

        top:0;
        left:0;

        width:100%;
        height:100vh;

        background:#fff;

        display:flex;
        flex-direction:column;

        justify-content:center;
        align-items:center;

        gap:40px;

        opacity:0;
        visibility:hidden;

        transform:translateY(-30px);

        transition:.4s;

        z-index:1500;
    }

    nav.active{

        opacity:1;
        visibility:visible;

        transform:translateY(0);
    }

    nav a,
    .nav-btn{

        font-size:2rem;
        color:var(--primary);
    }

    nav a::after,
    .nav-btn::after{
        height:2px;
    }

    .hamburger{

        display:flex;
        flex-direction:column;

        gap:5px;

        background:none;
        border:none;

        cursor:pointer;

        z-index:2000;
    }

    .hamburger span{

        width:26px;
        height:2px;

        background:var(--primary);

        transition:.3s;
    }

    .hamburger.active span:nth-child(1){
        transform:rotate(45deg) translateY(10px);
    }

    .hamburger.active span:nth-child(2){
        opacity:0;
    }

    .hamburger.active span:nth-child(3){
        transform:rotate(-45deg) translateY(-10px);
    }

    .mobile-contact{

        background:var(--primary);

        color:#fff !important;

        padding:14px 32px;

        border-radius:14px;

        text-decoration:none;

        box-shadow:
            0 10px 25px rgba(63,78,161,.18);
    }

    /* ------------------------
    Title
    ------------------------ */

    .container h2{
        font-size:2rem;
        padding:0 25px;
    }

    .container h2::before,
    .container h2::after{
        width:20px;
    }

    /* ------------------------
    Hero
    ------------------------ */

    .hero{
        padding-top:110px;
        min-height:auto;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .hero-content{
        text-align:center;
    }

    .hero-badge-wrap{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-points{
        align-items:center;
    }

    .btns{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-visual{

        position:relative;

        display:flex;
        justify-content:center;
        align-items:center;

        gap:10px;

        padding-bottom:140px;
    }

    .hero-bg-mock{

        position:absolute;
        inset:0;

        width:100%;
        height:100%;

        object-fit:cover;

        opacity:.08;

        border-radius:24px;
    }

    .flow-card{

        width:42%;

        padding:18px;

        border-radius:16px;

        position:relative;
        z-index:2;
    }

    .flow-card.before{
        transform:rotate(-2deg);
    }

    .flow-card.after{
        transform:rotate(2deg);
    }

    .flow-card h3{
        font-size:1rem;
        margin-bottom:10px;
    }

    .flow-card li{
        font-size:.85rem;
        line-height:1.6;
    }

    .flow-arrow{

        font-size:1.8rem;

        position:relative;
        z-index:2;
    }

    .result-card{

        position:absolute;

        left:50%;
        bottom:45px;

        transform:translateX(-50%);

        width:220px;

        text-align:center;

        z-index:3;
    }

    .result-card strong{
        font-size:1rem;
    }

    .hero-flow-btn{

        position:absolute;

        left:50%;
        bottom:-25px;

        transform:translateX(-50%);

        width:220px;

        z-index:3;
    }

    /* ------------------------
    Accordion
    ------------------------ */

    .accordion{
        grid-template-columns:1fr;
        gap:18px;
    }

    .accordion-header{
        font-size:1rem;
    }

    /* ------------------------
    Cards
    ------------------------ */

    .cases-grid,
    .grid{
        grid-template-columns:1fr;
    }

    .case-card,
    .card{
        padding:24px;
    }

    .case-card h3{
        text-align:center;
    }

    /* ------------------------
    Modal
    ------------------------ */

    .modal-content{

        width:95%;

        margin:40px auto;

        padding:28px;

        max-height:85vh;

        overflow-y:auto;
    }

    .flow-step{
        text-align:center;
    }

    /* ------------------------
    Contact Form
    ------------------------ */

    .wpcf7-checkbox{
        flex-direction:column;
    }

    .wpcf7-list-item label{
        width:100%;
    }

    .cf7-form input[type="text"],
    .cf7-form input[type="email"],
    .cf7-form textarea{
        padding:14px;
    }
}


/* =========================
Small Mobile
========================= */
@media (max-width:480px){

    .hero h1{
        font-size:1.8rem;
    }

    h2{
        font-size:1.8rem;
    }

    h3{
        font-size:1.4rem;
    }

    .hero-badge{
        font-size:.75rem;
        padding:6px 12px;
    }

    .result-card,
    .hero-flow-btn{

        position:static;

        transform:none;

        width:100%;
        max-width:280px;

        margin:0 auto;
    }

    .flow-card{
        padding:18px;
    }

    .result-card strong{
        font-size:1.1rem;
    }

    .cases-note{
        padding:20px;
    }

    .modal-content{
        padding:22px;
    }

    /* Contact */

    .contact-page{
        padding:90px 0;
    }

    .contact-heading h1{
        font-size:2.2rem;
    }

    .contact-intro h2{
        font-size:1.5rem;
    }

    .contact-note{
        padding:24px;
    }

    .cf7-form{
        padding:30px 24px;
        border-radius:20px;
    }

    .cf7-form input[type="submit"]{
        width:100%;
    }
}