/* ==========================================
   Responsive Design
========================================== */

/* Large Tablets */
@media (max-width: 992px){

    .hero h1{
        font-size:52px;
    }

    .hero p{
        font-size:20px;
    }

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

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

}

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

    .container{
        width:92%;
    }

    nav{
        padding:0 10px;
    }

    .nav{
        height:72px;
    }

    .logo span{
        font-size:22px;
    }

    .logo img{
        width:38px;
        height:38px;
    }

    .hero{

        padding-top:140px;
        padding-bottom:80px;

    }

    .hero h1{

        font-size:42px;
        line-height:1.2;

    }

    .hero p{

        font-size:18px;
        margin:25px auto;

    }

    .hero-buttons{

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

    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{

        width:250px;
        text-align:center;

    }

    .section-title{

        font-size:34px;
        margin-bottom:50px;

    }

    .features{

        grid-template-columns:1fr;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .card{

        padding:30px;

    }

    .cta h2{

        font-size:36px;

    }

    .cta p{

        font-size:18px;

    }

}

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

    .hero h1{

        font-size:32px;

    }

    .hero p{

        font-size:16px;

    }

    .logo span{

        font-size:20px;

    }

    .btn,
    .btn-outline{

        padding:13px 25px;
        font-size:15px;

    }

    .stats-grid div{

        padding:25px;

    }

    .stats-grid h2{

        font-size:34px;

    }

    .section-title{

        font-size:28px;

    }

    .card h3{

        font-size:22px;

    }

    .cta h2{

        font-size:30px;

    }

    footer{

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

    }

}

/* Why Section */

@media(max-width:992px){

    .why-grid{

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

    }

}

@media(max-width:768px){

    .why-grid{

        grid-template-columns:1fr;

    }

    .section-subtitle{

        font-size:18px;

    }

}

/* Viewer Preview */

@media(max-width:992px){

.viewer-preview .container{

grid-template-columns:1fr;

text-align:center;

}

.preview-left h2{

font-size:38px;

}

.preview-list{

text-align:left;

display:inline-block;

}

}