/* ==========================================================
   VOGOW RESPONSIVE DESIGN
   Mobile / Tablet / Desktop
========================================================== */

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

@media (max-width: 1400px) {


    .premium-hero h1 {

        font-size:78px;

    }


    .section-heading h2 {

        font-size:56px;

    }


    .dark-section h2 {

        font-size:60px;

    }


    .final-cta h2 {

        font-size:60px;

    }


}

/* ==========================
   TABLET LANDSCAPE
========================== */

@media (max-width: 992px) {


    .vogow-navbar {

        padding:18px 0;

    }



    .navbar-nav {

        padding-top:25px;

        text-align:center;

    }



    .nav-link {

        margin:10px 0;

    }



    .vogow-btn {

        display:inline-block;

        margin-top:20px;

    }






    .premium-hero {

        padding:160px 0 100px;

        text-align:center;

    }




    .premium-hero h1 {


        font-size:64px;

        letter-spacing:-3px;

    }





    .premium-hero p {


        margin-left:auto;

        margin-right:auto;

        font-size:20px;

    }





    .dashboard-glass {


        margin-top:40px;

    }







    .section-padding {


        padding:90px 0;

    }





    .section-heading h2 {


        font-size:48px;

    }





    .dark-section {


        padding:100px 0;

    }




    .dark-section h2 {


        font-size:52px;

    }






    .final-cta {


        padding:100px 0;

    }




    .final-cta h2 {


        font-size:52px;

    }






    .ecosystem-box {


        margin-top:40px;

    }




    .pricing-banner {


        padding:45px;

        text-align:center;

    }



}


/* ==========================
   TABLET PORTRAIT
========================== */

@media (max-width: 768px) {



    .navbar-brand {


        font-size:30px;

    }





    .premium-hero {


        padding:130px 0 80px;

    }





    .premium-hero h1 {


        font-size:48px;

        letter-spacing:-2px;

    }





    .premium-hero p {


        font-size:18px;

    }





    .primary-btn,
    .secondary-btn {


        width:100%;

        margin-bottom:15px;

    }





    .section-heading h2 {


        font-size:40px;

        letter-spacing:-1px;

    }





    .section-heading p {


        font-size:18px;

    }






    .trust-section {


        padding:50px 0;

    }





    .trust-section h4 {


        font-size:24px;

    }





    .feature-card {


        padding:30px;

    }





    .feature-card h3 {


        font-size:24px;

    }






    .dark-section h2 {


        font-size:42px;

        letter-spacing:-2px;

    }





    .dark-section p {


        font-size:18px;

    }





    .ecosystem-box {


        grid-template-columns:1fr;

    }





    .ecosystem-item {


        font-size:18px;

    }







    .benefit-card {


        padding:35px;

    }





    .benefit-card span {


        font-size:42px;

    }







    .pricing-banner h2 {


        font-size:38px;

    }





    .final-cta h2 {


        font-size:42px;

    }



}


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

@media (max-width:576px) {



    body {


        overflow-x:hidden;

    }




    .premium-hero {


        padding-top:110px;

    }




    .badge-pill {


        font-size:12px;

        padding:8px 18px;

    }






    .premium-hero h1 {


        font-size:40px;

        line-height:1.05;

    }





    .premium-hero p {


        font-size:17px;

    }





    .dashboard-glass {


        padding:25px;

        border-radius:25px;

    }





    .metric-card {


        padding:25px;

    }





    .metric-card h2 {


        font-size:34px;

    }





    .mini-card {


        padding:18px;

    }





    .mini-card h4 {


        font-size:22px;

    }






    .section-padding {


        padding:70px 0;

    }





    .section-heading h2 {


        font-size:34px;

    }





    .feature-card {


        border-radius:22px;

    }





    .industry-card {


        padding:30px;

    }





    .dark-section {


        padding:80px 0;

    }





    .dark-section h2 {


        font-size:36px;

    }






    .pricing-banner {


        padding:35px 25px;

        border-radius:25px;

    }





    .pricing-banner h2 {


        font-size:32px;

    }





    .final-cta {


        padding:80px 0;

    }





    .final-cta h2 {


        font-size:34px;

    }





    .vogow-footer {


        padding:60px 0 30px;

        text-align:center;

    }





}