/* ==========================================================================
   RESPONSIVE STYLES (MEDIA QUERIES)
   ========================================================================== */

@media screen and (max-width:1367px) {
    .f-100 {
        font-size: 90px;
        text-align: right
    }

    .f-55 {
        font-size: 50px
    }

    body {
        font-size: 14px
    }

    .f-24 {
        font-size: 22px
    }

    .f-45 {
        font-size: 30px;
    }

    .f-40 {
        font-size: 35px
    }

    .f-30 {
        font-size: 28px
    }

    img.bann {
        height: 500px
    }
}

@media screen and (max-width:1181px) {
    .pelikan-pen {
        top: 90px;
        height: 400px
    }

    .process-line {
        width: 950px
    }

    .cta-bird.lozad {
        height: 300px
    }

    .f-55 {
        font-size: 45px
    }

    .f-45 {
        font-size: 40px
    }

    .f-40 {
        font-size: 35px
    }

    .f-30 {
        font-size: 25px
    }

    .f-24 {
        font-size: 20px
    }

    .f-18 {
        font-size: 17px
    }

    .bann-books img {
        width: 400px
    }

    img.bann {
        height: 450px;
        width: 100%;
        margin-top: -90px
    }
}

@media screen and (max-width:1179px) {
    .inner-bann {
        height: 300px
    }

    .process-sec .item-1,
    .process-sec .item-2,
    .process-sec .item-3,
    .process-sec .item-4 {
        margin-top: 0
    }

    .f-100 {
        font-size: 100px
    }

    .pelikan-pen {
        top: 150px;
        height: 350px
    }

    .sub-services .pelikan-pen {
        top: 40%
    }

    .cta-bird.lozad {
        height: 250px
    }

    .inenr-banner .pelikan-pen {
        height: 200px
    }

    .sub-inner-side {
        bottom: 0;
        left: 0;
        height: 100px;
        width: 100px
    }
}

@media screen and (max-width:992px) {
    .cta-bird.lozad {
        height: 100px
    }

    .f-45 {
        font-size: 36px
    }

    .f-100 {
        font-size: 80px
    }

    .bann-books img {
        width: 350px;
        height: auto
    }

    .nav-bar.active {
        transform: translateX(0)
    }

    .submenu {
        position: relative;
        top: auto;
        left: auto;
        background: 0 0;
        width: 100%;
        padding: 10px;
        display: none;
        box-shadow: unset;
        z-index: 999;
        backdrop-filter: none;
        border-radius: unset
    }

    .form-control,
    input,
    select,
    select input {
        padding: 0.40rem 1rem !important;
    }

    .submenu.open {
        display: block
    }

    .arrow {
        font-size: 20px;
        margin-left: 5px;
        float: right
    }

    .f-60 {
        font-size: 50px
    }

    img.logo {
        object-position: center
    }

    .box {
        height: auto;
        min-height: 100px;
        margin-bottom: 20px;
    }

    .nav-pills button {
        font-size: 10px;
        padding: 0.65rem !important;
        width: 10rem;
        margin: 0px 6px;
    }

    .nav-bar {
        background: rgba(var(--dark-color), 1);
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transform: translateX(200%);
        z-index: 99999999;
        transition: .8s;
        padding-left: 20px;
        padding-right: 20px;
        color: rgba(var(--light-color), 1);
        overflow-y: scroll
    }

    .nav-bar li a:not(.icona) {
        font-size: 16px;
    }

    ul.submenu li {
        margin: 0;
        padding: 0;
    }

    .nav-bar li {
        margin: 10px auto 20px
    }
}

@media screen and (max-width:576px) {
    .inenr-banner .pelikan-pen {
        height: 100px;
        top: 10%
    }

    .pen,
    .sub-services .pelikan-pen {
        top: auto;
        bottom: 0
    }

    .sub-inner-side {
        bottom: 0
    }

    .pen {
        right: 0;
        height: 30px
    }

    .contact-bann {
        margin-top: -28px;
        height: 250px
    }

    .side-image {
        height: 200px
    }

    img.lozad.payment {
        object-position: center
    }

    .typwriter {
        height: 350px
    }

    .reading-bird {
        height: 250px
    }

    .pelikan-pen {
        top: 250px;
        height: 300px
    }

    .f-18 {
        font-size: 14px
    }

    img.bann {
        height: 313px;
        width: 100%;
        margin-top: -275px
    }

    .f-100 {
        font-size: 34px;
        text-align: center
    }

    .f-55,
    .f-60 {
        font-size: 40px;
    }

    .f-45 {
        font-size: 24px;
    }

    .f-40 {
        font-size: 30px;
    }

    .f-30 {
        font-size: 20px;
    }
}

@media screen and (max-width:431px) {
    body {
        font-size: 12px
    }

    .btn,
    button {
        padding: 10px !important
    }
}

@media (max-width: 991px) {
    .nav-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(var(--dark-color), 0.98);
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
        z-index: 99999;
        padding: 25px;
        overflow-y: auto;
    }

    .nav-bar.active {
        transform: translateX(0);
    }

    .nav-bar a {
        color: #fff !important;
    }

    .submenu {
        display: none;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 10px 15px;
        margin-top: 8px;
    }

    .submenu.show,
    .submenu.open {
        display: block;
    }

    .submenu li a {
        color: rgba(var(--light-color), 0.9) !important;
    }

    section.cta img {
        display: none;
    }
}

@media (max-width: 768px) {
    .slick-prev {
        left: 5px !important;
    }

    .slick-next {
        right: 5px !important;
    }
}

@media (max-width: 992px) {

    .reviews-silder .slick-list,
    .reviews-slider .slick-list {
        overflow: hidden !important;
    }
}