/*====================================================
    BARAN LANDING PAGE
    RESPONSIVE STYLE
=====================================================*/


/*====================================================
    LARGE DEVICES
    1200px+
=====================================================*/


@media (max-width:1399px){


    .hero-title {

        font-size:58px;

    }


    .hero-visual {

        min-height:650px;

    }


    .phone-frame {

        width:300px;

        height:610px;

    }


    .floating-weather {

        right:-20px;

    }


    .floating-air {

        left:-20px;

    }


    .glass-download-card {

        left:-40px;

    }


}




/*====================================================
    LAPTOP
    992px - 1199px
=====================================================*/


@media (max-width:1199px){


    section {

        padding:80px 0;

    }


    .hero-title {

        font-size:48px;

    }


    .hero-description {

        font-size:16px;

    }


    .hero-stats {

        gap:25px;

    }


    .stat-item strong {

        font-size:26px;

    }


    .phone-frame {

        width:280px;

        height:570px;

    }


    .floating-card {

        transform:scale(.9);

    }


    .floating-weather {

        top:100px;

        right:-40px;

    }


    .floating-air {

        left:-40px;

    }


    .floating-rain {

        right:-20px;

    }


    .section-title h2 {

        font-size:36px;

    }


    .section-heading {

        font-size:36px;

    }


    .download-box {

        padding:50px;

    }


}




/*====================================================
    TABLET
    768px - 991px
=====================================================*/


@media (max-width:991px){


    .main-header {

        padding:15px 0;

        background:

        rgba(255,255,255,.9);

        backdrop-filter:

        blur(15px);

    }


    .navbar-toggler {

        border:none;

        font-size:28px;

        color:

        var(--primary-color);

    }


    .navbar-toggler:focus {

        box-shadow:none;

    }


    .navbar-collapse {

        background:#fff;

        margin-top:20px;

        padding:25px;

        border-radius:25px;

        box-shadow:

        0 20px 50px rgba(0,0,0,.08);

    }


    .nav-link {

        padding:12px 0;

    }


    .header-action {

        margin-top:20px;

    }


    .hero {

        padding-top:120px;

        text-align:center;

    }


    .hero-description {

        margin:auto;

    }


    .hero-buttons {

        justify-content:center;

    }


    .hero-stats {

        justify-content:center;

    }


    .hero-visual {

        margin-top:50px;

        min-height:600px;

    }


    .glass-download-card {

        left:50%;

        transform:

        translateX(-50%);

        bottom:0;

    }


    .floating-weather {

        right:30px;

    }


    .floating-air {

        left:30px;

    }


    .floating-rain {

        right:80px;

    }


    .app-showcase .row {

        flex-direction:column-reverse;

    }


    .mobile-gallery {

        height:550px;

        margin-bottom:50px;

    }


    .download-box {

        text-align:center;

    }


    .download-buttons {

        justify-content:center;

    }


    .footer-bottom {

        flex-direction:column;

        gap:15px;

        text-align:center;

    }


}
/*====================================================
    MOBILE
    BELOW 767px
=====================================================*/


@media (max-width:767px){


    section {

        padding:65px 0;

    }


    .section-title {

        margin-bottom:40px;

    }


    .section-title h2 {

        font-size:30px;

        line-height:1.6;

    }


    .section-title p {

        font-size:14px;

    }


    /* HEADER */


    .navbar-brand {

        font-size:22px;

    }


    .navbar-brand img {

        width:38px;

        height:38px;

    }


    .btn-download {

        width:100%;

        justify-content:center;

    }



    /* HERO */


    .hero {

        min-height:auto;

        padding-top:120px;

        padding-bottom:60px;

    }


    .hero-badge {

        font-size:12px;

        padding:8px 15px;

    }


    .hero-title {

        font-size:36px;

        line-height:1.6;

    }


    .hero-description {

        font-size:15px;

        line-height:2;

    }


    .hero-buttons {

        flex-direction:column;

        width:100%;

    }


    .hero-buttons a {

        width:100%;

    }


    .hero-stats {

        gap:20px;

        flex-wrap:wrap;

        justify-content:center;

    }


    .stat-item {

        min-width:90px;

        text-align:center;

    }


    .stat-item strong {

        font-size:24px;

    }


    /* PHONE */


    .hero-visual {

        min-height:520px;

    }


    .phone-frame {

        width:245px;

        height:500px;

        border-radius:35px;

        transform:

        rotate(-3deg);

    }


    .phone {

        border-radius:28px;

    }


    .floating-card {

        padding:12px;

        border-radius:18px;

        gap:8px;

        transform:scale(.75);

    }


    .floating-icon {

        width:42px;

        height:42px;

        font-size:18px;

        border-radius:14px;

    }


    .floating-card h5 {

        font-size:18px;

    }


    .floating-weather {

        top:50px;

        right:-35px;

    }


    .floating-air {

        bottom:150px;

        left:-35px;

    }


    .floating-rain {

        bottom:30px;

        right:-10px;

    }


    .glass-download-card {

        width:250px;

        bottom:-30px;

    }


    .glass-download-card img {

        width:55px;

        height:55px;

    }



    /* TRUST */


    .trust-box {

        padding:30px 20px;

    }


    .trust-icon {

        width:60px;

        height:60px;

        font-size:25px;

    }


    .trust-box h3 {

        font-size:20px;

    }



    /* FEATURES */


    .feature-card {

        padding:28px 22px;

    }


    .feature-card h4 {

        font-size:20px;

    }


    .feature-icon {

        width:60px;

        height:60px;

        font-size:25px;

    }



    /* APP SHOWCASE */


    .section-heading {

        font-size:30px;

    }


    .mobile-gallery {

        height:430px;

    }


	.gallery-phone {

		width:190px;

		height:390px;

		border-radius:30px;

	}

    .gallery-phone img {

        border-radius:20px;

    }


    .gallery-phone.left {

        right:5%;

    }


    .gallery-phone.right {

        left:5%;

    }



    /* NUMBERS */


    .number-box {

        padding:30px 15px;

    }


    .number-box h2 {

        font-size:38px;

    }



    /* REVIEWS */


    .review-card {

        padding:25px;

    }



    /* FAQ */


    .accordion-button {

        font-size:14px;

        padding:20px;

    }


    .accordion-body {

        font-size:14px;

    }



    /* DOWNLOAD */


    .download-box {

        padding:35px 20px;

        border-radius:30px;

    }


    .download-box h2 {

        font-size:30px;

    }


    .download-buttons {

        flex-direction:column;

    }


    .download-buttons a {

        width:100%;

    }


    .qr-card img {

        width:140px;

        height:140px;

    }



    /* FOOTER */


    .main-footer {

        text-align:center;

        padding-top:60px;

    }


    .social-links {

        justify-content:center;

    }


}



/*====================================================
    SMALL MOBILE
    BELOW 400px
=====================================================*/


@media (max-width:400px){


    .hero-title {

        font-size:31px;

    }


    .phone-frame {

        width:220px;

        height:450px;

    }


    .floating-card {

        display:none;

    }


    .glass-download-card {

        width:220px;

    }


    .hero-stats {

        gap:10px;

    }


    .stat-item strong {

        font-size:21px;

    }


}
