/* Desktop / smaller laptops */
@media (max-width: 1199px) {
    .hero-section {
        height: calc(75vh + 72px);
    }
}

/* Tablet */
@media (max-width: 991px) {

    .navbar {
        height: 72px;
        position: relative;
    }

    .navbar > .container {
        height: 56px;
        position: relative;
        align-items: center;
    }

    .navbar-brand,
    .navbar-toggler {
        align-self: center;
    }

    .navbar-collapse {
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background-color: rgba(26, 38, 52, 0.90);
        padding: 0 20px;
    }

    .navbar-collapse .navbar-nav {
        padding-top: 16px;
        padding-bottom: 30px;
        align-items: stretch;
    }

    .navbar-nav .btn {
        width: 100%;
        margin-top: 12px;
    }

    .nav-link,
    .nav-link-right {
        transition: color 0.15s ease, background-color 0.15s ease;
        border-radius: 5px;
    }

    .nav-link:active,
    .nav-link-right:active {
        color: #E4912D !important;
        background-color: rgba(228, 145, 45, 0.12);
    }
}

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

    body {
        font-size: 15px;
    }

    .testimonial-scroll {
    padding-left: 0;
    scroll-padding-left: 7.5vw;
    }

    .testimonial-track {
        padding-left: 0px;
        padding-right: 7.5vw;
    }

    .testimonial-box {
        flex: 0 0 85vw;
        padding: 25px;
    }

    .insights-filter-label {
        display: block;
        margin-bottom: 10px;
    }

    .insights-filter-btn {
        margin-bottom: 8px;
    }

    .insights-video-item {
        margin-bottom: 30px;
    }

    .insights-video-image {
        height: auto;
    }

    .insights-item-content {
        padding-left: 0;
        margin-top: 20px;
    }

    .insights-item-image {
        height: auto;
    }

    .insights-item-title {
        font-size: 20px;
    }

    .hero-title {
        font-size: 26px;
        line-height: 1.2;
    }

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

    .hero-container {
        padding-top: 120px;
    }

    .main-btn {
        font-size: 15px;
    }

    .lens-box {
        height: 250px;
    }

    .wow {
        animation-delay: 0s !important;
    }

    .contactus-anna-img {
        position: relative;
        display: block;
        width: 115px;
        top: auto;
        right: auto;
        margin: -100px auto 25px auto;
    }

     .case-study-modal-close {
        position: fixed;
        top: 38px;
        right: calc(5% + 10px);
        margin: 0;
        z-index: 10000;
    }

    .case-study-modal.active .case-study-modal-content {
        animation: mobileModalFade 0.3s ease;
    }

    @keyframes mobileModalFade {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

     #videoModal .modal-dialog {
        width: calc(100% - 40px);
        max-width: none;
        margin: 0 auto;
    }

    .more-insights-section {
        margin-top: 25px;
    }

    .more-insights-card {
        margin-bottom: 20px;
    }

    .more-insights-image {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .diag-bar-title-box {
        border-right:0px;
    }
    
}

/* Small mobile */
@media (max-width: 575px) {
    .leita-logo {
        height: 33px;
    }

    .navbar-nav .btn {
        width: 80%;
        margin-top: 10px;
    }

    .nav-item {
        height: 40px;
        display: flex;
    }

    .nav-link {
        width: 100%;
    }

    .nav-link-right {
        margin-top: 6px;
        width: 100%;
    }

    .btn-contact {
        margin:auto; 
    }

    .m-mt-0 {
        margin-top: 0px;
    }

    .m-mt-10 {
        margin-top: 10px;
    }

    .m-mt-20 {
        margin-top: 20px;
    }

    .m-mt-30 {
        margin-top: 30px;
    }

    .m-mt-50 {
        margin-top: 50px;
    }

    .m-mt-75 {
        margin-top: 75px;
    }

    .m-mb-10 {
        margin-bottom: 10px;
    }

    .m-mb-20 {
        margin-bottom: 20px;
    }

    .m-mb-30 {
        margin-bottom: 30px;
    }

    .m-mb-75 {
        margin-bottom: 75px;
    }

    .m-mb-100 {
        margin-bottom: 100px;
    }

    .m-pb-30 {
        padding-bottom: 30px;
    }

    .m-pb-50 {
        padding-bottom: 50px;
    }

    .m-pb-75 {
        padding-bottom: 75px;
    }

    .m-plr-20 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .m-text-center {
        text-align:center;
    }

    .section-title, .section-title-l {
        font-size: 32px;
        text-align: center;
    }

    .quote-img {
        text-align: center;
        margin-bottom: 20px;
    }

    .quote-name {
        text-align: center;
        margin-top: 10px;
    }

    .client-img {
        height: 220px;
        margin-bottom: 20px;
    }

    .mission-title {
        border-right: none;
    }

    .mission-desc {
        padding:0px 20px; 
        margin:auto;
    }

    .process-bg {
        background-position: 25% 0%;
    }

    .blog-main-post-1 {
        padding:0px 20px;
    }

    .blog-main-text-box {
        border-bottom: 1px solid #E3E3E3;
        padding-bottom: 20px; 
    }

    .contact-section {
        padding: 20px 0px 130px 0px; 
    }

    .contact-title {
        font-size: 32px;
        line-height: 1.2;
    }
    
    .contact-form-box {
        padding-left:20px;
        padding-right: 20px;
    }

    .hero-box-about {
        margin-bottom: 75px;
    }

    .clients-line {
        border-top: 1px solid transparent;
    }

    .clients-desc {
        padding: 0px 20px 0px 20px;
        text-align: center;
    }

    .section-title-about {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .anna-btn {
        margin-left: none;
        margin: auto;
    }

    .anna-desc {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
    }
    
    .anna-bg {
        background-size: 100% 100%;
    }

    .anna-img {
        padding: 30px 0px 0px 30px;
    }

    .anna-container {
        padding: 40px 0px 75px 0px;
    }

    .faq-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .faq-question {
        font-size: 16px;
    }

    .faq-answer {
        padding-right: 20px;
    }

    .contact-header-p {
        padding-right: 0px;
    }

    .contactus-wrapper {
        padding-left:10px;
        padding-right: 10px;
    }

    .contactus-title {
        font-size: 18px;
        text-align:center;
    }

    .contactus-box {
        padding: 40px 20px;
    }

    .contact-submit-btn-orange {
        margin-left: none;
        margin: auto;
        width: 90%;
    }

    .ocio-lens-number, .ocio-lens-desc {
        text-align: center;
    }

    .ocio-lens-title {
        text-align: center;
        margin-bottom: 20px;
    }

    .ocio-lens-bullets1, .ocio-lens-bullets2 {
        display: block;
        text-align: left;
    }

    .ocio-lens-bullets1 {
        margin-top: 20px;
    }

    .process-tab-content {
        padding: 40px 20px 40px 15px;;
    }

    .process-panel-number {
        width: 50px;
        font-size: 45px;
        padding-right: 20px;
    }

    .process-panel-title {
        font-size: 18px;
    }

    .process-panel-copy p {
        font-size: 15px;
    }

    .process-tabs {
        padding-left:0px;
        padding-right: 0px;
    }

    .process-tab {
        font-size: 14px;
        padding: 10px 8px;
    }

    .process-tab-wrap {
        padding-left:4px;
        padding-right: 4px;
    }

    .case-study-desc {
        width: 100%;
    }

    .case-study-bg {
        background-size: 106% 100%;
        margin-bottom: 0px;
    }

    .cs-modal-title {
        text-size: 20px;
        line-height: 1;
        margin-bottom: 10px;
    }

    .cs-modal-label {
        margin-bottom: 15px;
    }

    .cs-modal-subtitle {
        margin-bottom: 5px;
    }

    .cs-modal-facts-list-key {
        display: block;
    }

    .insights-filters {
        margin-bottom: 20px;
    }

    .insights-filter-btn {
        font-size: 14px;
    }

    .insights-item-image {
        height: 200px;
    }

    .insights-item-content {
        margin-top:0px;
        padding: 20px 10px 0px 10px
    }

    .insights-item-line {
        margin: 10px 0px;
    }

    .insights-video-section {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 20px;
    }

    .insights-item-readmore-wrap {
        margin-top: 20px;
    }

    .insights-post-title {
        font-size: 22px;
        margin-top: 20px;
    }

    .insights-post-header {
        margin-bottom: 30px;
    }

}