/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* Styles */
}


/* Smartphones (landscape) ----------- */

@media only screen and (max-width: 320px) {
    /* Styles */
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 320px) {
    /* Styles */
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Styles */
}


/* iPads (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
}


/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* Styles */
}


/**********
    iPad 3
    **********/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
}


/* Desktops and laptops ----------- */

@media only screen and (max-width: 1199px) {}

@media only screen and (max-width: 1246px) {
    .backgrounds .cd-el .big-text {
        font-size: 26px;
        font-weight: 400;
        padding: 15px;
    }

    header .social-media ul li {
        padding: 0px 45px;
    }
}

@media only screen and (max-width: 1024px) {
    .backgrounds .cd-el .big-text {
        font-size: 20px;
        padding: 6px;
    }

    .backgrounds {
        margin: 0px 5px;
    }

    .offer-section .offer-text p,
    .offer-section .offer_btn p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 991px) {
    .navbar-nav {
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0;
        background: white;
        text-align: center;
    }

    .navbar-nav .nav-item {
        padding: 15px 0px;
        border-bottom: 1px solid ghostwhite;
    }

    header .social-media ul li {
        padding: 0px 30px;
    }
}


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
    /* Styles */
}


/* iPhone 4 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
}


/* iPhone 5 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}


/* iPhone 6, 7, 8 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}


/* iPhone 6+, 7+, 8+ ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}


/* iPhone X ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}


/* iPhone XS Max, XR ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}


/* Samsung Galaxy S3 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}


/* Samsung Galaxy S4 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}


/* Samsung Galaxy S5 ----------- */

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 485px) {
    .m-w-100 {
        width: 100%;
        text-align: center !important;
        margin-top: 5px;
    }
}


/* all mobile ----------- */

@media only screen and (max-width: 557px) {
    header .social-media ul li {
        padding: 0px 6px;
        font-size: 14px;
    }


}

@media only screen and (max-width: 767px) {


    .form-box {

        padding: 1.125rem 0.75rem;

    }

    .heading h1 span {
        border: none;
    }

    .heading h1 span:after, .heading h1 span::before {
        display: none;
    }

    .backgrounds .cd-el .big-text {
        font-size: 22px;
        padding: 15px;
    }

    .backgrounds .cd-el .big-text {
        font-size: 22px;
        padding: 15px;
    }

    .backgrounds {
        margin: 15px 6px;
    }

    header .social-media ul li {
        padding: 0px 9px;
    }

    .navbar-expand-lg {
        padding: 0px !important;
    }

    .offer-section {
        padding: 15px 0px;
    }

    :root {
        --heading: 35px;
        --sub-heading: 25px;
        --text: 18px;
        --sub-text: 14px;
        --small-text: 10px;
    }

    .banner-section .heading .main-heading {
        line-height: 48px;
    }

    .banner-section .banner-content p {
        line-height: 39px;
        margin-top: 20px;
    }

    .terms-header .social-media ul li {
        padding: 0px 5px;
    }

    .terms .terms-box {
        padding: 20px;
    }
}

/* new */

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    .slide .carousel-control-prev {
        left: 37%;
    }

    .slide .carousel-control-next {
        right: 37%;
    }

}

@media only screen and (min-device-width:420px) and (max-device-width:768px) {}

@media only screen and (max-width:1199px) {
    header .navbar .navbar-collapse {
        position: absolute;
        background: #fff;
        width: 100%;
        top: 100%;
        z-index: 999;
    }
    .about {
        height: auto;
        background-size: 114% 108%;
    }

}

@media only screen and (max-width:991px) {
    .price_section {
        margin-top: 2rem !important;
    }


}



@media only screen and (max-width:575px) {

    .navbar-brand img {
        width: 175px;
    }

    .attr-nav a {
        font-size: var(--text);
        padding: 8px 4px;
    }

    header .navbar .attr-nav .navbar-toggler {
        padding: 0;
        border: none;
        margin: 0 6px;
    }
    .carousel .carousel-item img 
    {
        min-height: 200px;
    }
    .slide .active .carousel-caption div{
        transform: translate3d(10%, 0px, 0px);
    }
}

@media only screen and (max-width:1199px) {

    header .navbar .navbar-nav .nav-item {
        display: block;
        width: 100%;
    }

    header .navbar .navbar-nav .nav-item .nav-link {
        padding: 16px 15px;
        border-bottom: 1px solid #dcdcdc;
    }

    header .navbar .navbar-nav .dropdown-menu {
        display: none;

        transition-duration: 0.4ms;
    }

    header .navbar .navbar-nav .dropdown-menu.show {
        display: block;
        top: 0;
        margin: 0;
        box-shadow: none;
        border: 1px solid var(--primary-clr);
        margin: 0px 2px;
    }



}

@media only screen and (max-width:767px) {
    :root {
        --text: 14px;
        --sub-text: 16px;
        --small-font: 10px;
        --heading: 1.8rem;
        --sub-heading: 1.2rem;
    }

    .banner_section .bnnr-img {
        width: 50%;
        padding-bottom: 20px;
    }

    .banner_des {
        text-align: center;
    }

    .Benefit_section h1 {
        text-align: center;
    }

    .plan .counter {
        padding-bottom: 20px;
    }

    .slide .carousel-control-prev {
        left: 0;
        bottom: 30%;
    }

    .slide .carousel-control-next {
        right: 0;
        bottom: 30%;
    }

    .about {
        height: auto;
        background-size: 114% 108%;
    }



}

@media only screen and (max-width:420px) {
    :root {
        --text: 14px;
        --sub-text: 16px;
        --small-font: 10px;
        --heading: 1.2rem;
        --sub-heading: 1rem;
    }

    .attr-nav a {
        font-size: var(--small-font);
        padding: 4px 2px;
    }

    .navbar-brand img {
        width: 150px;
    }

    .slide .carousel-caption h5 {
        padding-bottom: 5px;
    }

    .slide .carousel-caption p {
        line-height: 20px;
        padding-bottom: 15px;
    }
}

@media only screen and (min-device-width:1199px) and (max-device-width:1359px) {

    .about{
        height: 400px;
    }
}