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

@media (max-width:992px){

/* Header */

.header{

    padding:18px 30px;

}

.desktop-menu{

    gap:20px;

}

/* Hero */

.hero{

    grid-template-columns:1fr;
    text-align:center;
    gap:60px;
    padding:70px 0;

}

.hero-content{

    order:2;

}

.hero-visual{

    order:1;
    display:flex;
    justify-content:center;

}

.hero-buttons{

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

}

/* Dashboard */

.dashboard{

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

}

.graph{

    height:150px;

}

.stats{

    justify-content:center;

}

/* Floating Cards */

.card1{

    top:10px;
    right:-10px;

}

.card2{

    left:-10px;
    bottom:20px;

}

.card3{

    right:20px;
    bottom:-10px;

}

/* Sections */

.services-grid,
.why-grid,
.portfolio-grid,
.process-grid,
.testimonial-grid,
.benefit-grid{

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

}

.section-title{

    font-size:42px;

}

}


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

@media (max-width:768px){

/* Header */

.header{

    padding:16px 20px;

}

.desktop-menu{

    display:none;

}

.menu-btn{

    display:block;

}

.mobile-menu{

    display:none;
    flex-direction:column;
    background:#111118;
    border-top:1px solid rgba(255,255,255,.08);

}

.mobile-menu.show{

    display:flex;

}

.mobile-menu a{

    color:white;
    padding:18px 20px;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.06);

}

/* Hero */

.hero{

    grid-template-columns:1fr;
    text-align:center;
    gap:45px;
    padding:60px 0;

}

.hero h1{

    font-size:40px;
    line-height:1.15;

}

.hero p{

    font-size:16px;
    line-height:1.8;

}

.hero-buttons{

    flex-direction:column;
    align-items:center;
    gap:16px;

}

.hero-buttons .btn{

    width:100%;
    max-width:320px;
    text-align:center;

}

/* Dashboard */

.dashboard{

    width:100%;
    padding:22px;

}

.graph{

    height:120px;
    gap:10px;

}

.stats{

    flex-direction:column;
    gap:15px;

}

.stat-card{

    width:100%;

}

.stat-card h3{

    font-size:22px;

}

/* Floating Cards */

.floating-card{

    font-size:12px;
    padding:10px 16px;

}

.card1{

    top:-10px;
    right:0;

}

.card2{

    left:0;
    bottom:-20px;

}

.card3{

    right:10px;
    bottom:65px;

}

/* Grids */

.services-grid,
.why-grid,
.portfolio-grid,
.process-grid,
.testimonial-grid,
.benefit-grid{

    grid-template-columns:1fr;

}

/* Sections */

.section-title{

    font-size:32px;
    text-align:center;

}

.section-small{

    text-align:center;

}

.section-text{

    text-align:center;
    font-size:16px;

}

/* CTA */

.cta{

    padding:45px 25px;
    margin:80px 0;

}

.cta h2{

    font-size:32px;

}

.cta p{

    font-size:16px;

}

}

@media(max-width:768px){

.phone{

    width:260px;

}

.post{

    height:180px;

}

.social-card{

    font-size:12px;
    padding:10px 14px;

}

.card1{

    right:0;
    top:-10px;

}

.card2{

    left:0;
    bottom:-15px;

}

.card3{

    right:10px;
    bottom:60px;

}

}