/* Mobile Styles - Based on responsive.css */

@media only screen and (min-width: 1024px) and (max-width: 1250px) {
    .cm-templates-heading__title, .cm-templates-heading__title span {
        font-size: 6vw !important;
    }
    .cm-templates-heading__subtitle, .cm-templates-heading__subtitle span {
        font-size: 3.5vw !important;
    }
    #keyvisual, #keyvisual .cm-slides-addon {
        height: 330px;
    }
    #logo {
        height: 150px;
    }
    .cm-templates-logo {
        background-position: center;
        background-size: contain;
    }
    #logo.cm-templates-logo-deprecated-px {
        background-position: center !important;
        background-size: contain !important;
    }
    .main_wrapper {
        width: 947px;
    }
    .sidebar_wrapper {
        width: 947px;
    }
    .cm-kv-0.cm-templates-kv-deprecated-px, .cm-kv-0.cm-templates-kv-deprecated-px .cm-slides-addon, .cm-kv-0 .cm-slides-addon.cm-templates-kv-deprecated-px {
        background-position: center !important;
        background-size: cover !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    #logo {
        height: 150px;
    }
    .cm-templates-logo {
        background-position: center;
        background-size: contain;
    }
    #logo.cm-templates-logo-deprecated-px {
        background-position: center !important;
        background-size: contain !important;
    }
    .title, .subtitle {
        display: block;
    }
    .title {
        margin: 0 0 1em 0;
    }
    #keyvisual, #keyvisual .cm-slides-addon {
        height: 250px;
        outline: none !important;
        box-shadow: none !important;
    }
    .main_wrapper {
        width: 100%;
        padding: 0;
    }
    .table_wrapper {
        display: block;
    }
    .table_cell {
        display: block;
    }
    .table_color_left {
        max-width: none;
        text-align: center;
    }
    .table_color_right {
        width: 100%;
    }
    .subnavigation_wrapper ul {
        padding: 20px 0;
        width: 100%;
    }
    .subnavigation_wrapper ul li {
        display: inline-block;
    }
    .subnavigation_wrapper ul li a {
        padding: 12px 25px 12px 15px;
    }
    .subnavigation_wrapper ul ul {
        position: absolute;
        width: 230px;
        text-align: left;
    }
    .subnavigation_wrapper ul li:hover ul {
        display: block;
    }
    .subnavigation_wrapper ul ul li a {
        padding: 12px 15px 12px 15px;
        width: 200px;
    }
    .sidebar_wrapper {
        width: calc(100% - 80px);
        padding: 40px;
    }
}

@media only screen and (min-width: 1px) and (max-width: 767px) {
    .cm-background {
        background-position: 50% calc(100% + 100px) !important;
    }
    .index-content {
        margin-top: -50px;
    }
    .cm_column {
        width: 80% !important;
        display: block;
        margin: 0 auto 20px auto;
    }
    .cm_column_gap {
        display: none;
    }
    #logo {
        height: 150px;
        width: 64%;
        margin: 0 auto;
    }
    .cm-templates-logo {
        background-position: center;
        background-size: contain;
    }
    #logo.cm-templates-logo-deprecated-px {
        background-position: center !important;
        background-size: contain !important;
    }
    .title, .subtitle {
        display: block;
    }
    .title {
        margin: 0 0 1em 0;
    }
    .navigation_wrapper {
        display: none;
    }
    .header_wrapper {
        z-index: 0;
        position: relative;
    }
    #keyvisual, #keyvisual .cm-slides-addon {
        height: 210px;
        outline: none !important;
        box-shadow: none !important;
    }
    .design_content {
        padding: 25px 20px;
        width: -webkit-calc(100% - 40px);
        width: calc(100% - 40px);
    }
    .cm-templates-empty .design_content {
        padding-top: 60px;
    }
    .main_wrapper {
        width: 100%;
        padding: 0;
    }
    .table_wrapper {
        display: block;
    }
    .table_cell {
        display: block;
    }
    .table_color_left {
        display: none;
    }
    .table_color_right {
        width: 100%;
    }
    .subnavigation_wrapper ul {
        padding: 20px 0;
        width: 100%;
    }
    .subnavigation_wrapper ul li {
        display: inline-block;
    }
    .subnavigation_wrapper ul li a {
        padding: 12px 25px 12px 15px;
    }
    .subnavigation_wrapper ul ul {
        position: absolute;
        width: 230px;
        text-align: left;
    }
    .subnavigation_wrapper ul li:hover ul {
        display: block;
    }
    .subnavigation_wrapper ul ul li a {
        padding: 12px 15px 12px 15px;
        width: 200px;
    }
    .sidebar_wrapper {
        width: calc(100% - 40px);
        padding: 25px 20px;
    }
    .sidebar {
        display: block;
        width: 100%;
        margin: 0 0 35px 0;
    }
    .sidebar:last-child {
        margin: 0;
    }
    .open_navigation .content_wrapper {
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    .content_overlay {
        position: fixed;
        width: 100%;
        top: 0;
        background-color: rgba(0,0,0,0.50);
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }
    .open_navigation .content_overlay {
        height: 100%;
        opacity: 1;
    }
    .navigation_wrapper_mobile,
    #mobile_cm_navigation {
        display: block;
        position: fixed;
        height: 100%;
        top: 0;
        left: -101%;
        width: 70%;
        box-sizing: border-box;
        padding: 65px 0 20px;
        overflow: auto;
        -webkit-transition: left .3s ease-in-out;
        transition: left .3s ease-in-out;
        font-family: 'Oswald', sans-serif !important;
    }
    #mobile_cm_navigation,
    #mobile_cm_navigation *,
    #mobile_cm_mainnavigation,
    #mobile_cm_mainnavigation *,
    #mobile_cm_mainnavigation a,
    #mobile_cm_mainnavigation li,
    #mobile_cm_mainnavigation ul,
    #mobile_cm_navigation .cm_anchor,
    #mobile_cm_mainnavigation .cm_anchor,
    #mobile_cm_navigation a.cm_anchor,
    #mobile_cm_mainnavigation a.cm_anchor,
    #mobile_cm_navigation .cm-templates-container,
    #mobile_cm_navigation .cm-templates-container * {
        font-family: 'Oswald', sans-serif !important;
    }
    .open_navigation .navigation_wrapper_mobile {
        left: 0;
    }
    .navigation_wrapper_mobile ul {
        list-style: none;
        font-family: 'Oswald', sans-serif !important;
    }
    .navigation_wrapper_mobile ul li {
        margin: 0;
        padding: 0;
        font-family: 'Oswald', sans-serif !important;
    }
    .navigation_wrapper_mobile .cm_anchor {
        font-family: 'Oswald', sans-serif !important;
    }
    .navigation_wrapper_mobile * {
        font-family: 'Oswald', sans-serif !important;
    }
    .navigation_wrapper_mobile a {
        display: flex;
        align-items: center;
        text-decoration: none;
        padding: 10px 10px 10px 20px;
        font-family: 'Oswald', sans-serif !important;
    }
    .navigation_wrapper_mobile .menu-item-icon {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        vertical-align: middle;
        flex-shrink: 0;
    }
    .navigation_wrapper_mobile ul li li a {
        padding: 10px 10px 10px 45px;
        font-family: 'Oswald', sans-serif !important;
    }
    .navigation_wrapper_mobile ul li li li a {
        padding: 10px 10px 10px 70px;
        font-family: 'Oswald', sans-serif !important;
    }
    .toggle_navigation {
        display: inline-block !important;
        position: fixed !important;
        height: 40px !important;
        width: 40px !important;
        top: 10px !important;
        left: 10px !important;
        cursor: pointer;
        z-index: 10000 !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        border-radius: 6px;
        padding: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        box-sizing: border-box;
        min-height: 40px !important;
        min-width: 40px !important;
    }
    .toggle_navigation .toggle_navigation--background {
        display: block;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        position: relative;
        box-sizing: border-box;
    }
    .toggle_navigation div[class^="burgerline"] {
        width: 100%;
        height: 4px;
        position: absolute;
        transform-origin: center;
        opacity: 1;
        border-radius: 2px;
        -webkit-transition: all .4s;
        transition: all .4s;
    }
    .toggle_navigation .burgerline1 {
        top: 0;
    }
    .toggle_navigation .burgerline2 {
        top: 50%;
    }
    .toggle_navigation .burgerline3 {
        top: 100%;
    }
    .open_navigation div[class^="burgerline"] {
        width: 115%;
    }
    .open_navigation .burgerline1 {
        -webkit-transform: rotate(41deg);
        transform: rotate(41deg);
        top: 50%;
    }
    .open_navigation div.burgerline2 {
        opacity: 0;
        -webkit-transform: scale(4,0.2);
        transform: scale(4,0.2);
    }
    .open_navigation .burgerline3 {
        -webkit-transform: rotate(-41deg);
        transform: rotate(-41deg);
        top: 50%;
    }
}

@media only screen and (max-width: 479px) {
    #keyvisual, #keyvisual .cm-slides-addon {
        height: 170px;
    }
    .toggle_navigation {
        top: 8px !important;
        left: 8px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 6px !important;
        z-index: 10000 !important;
        min-height: 36px !important;
        min-width: 36px !important;
    }
}

@media only screen and (max-width: 767px) {
    .cm-templates-heading__title, .cm-templates-heading__title span {
        font-size: 10vw !important;
    }
    .cm-templates-heading__subtitle, .cm-templates-heading__subtitle span {
        font-size: 7vw !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cm-templates-heading__title, .cm-templates-heading__title span {
        font-size: 5vw !important;
    }
    .cm-templates-heading__subtitle, .cm-templates-heading__subtitle span {
        font-size: 3vw !important;
    }
}

/* Mobile Styles for Modern Elements */
@media only screen and (max-width: 767px) {
    /* Timeline Mobile */
    .timeline-item {
        padding-left: 70px;
        margin-bottom: 30px;
    }
    
    .timeline-year {
        width: 50px;
        height: 50px;
        font-size: 0.9em;
    }
    
    .timeline-content {
        padding: 20px;
    }
    
    .timeline-content h2 {
        font-size: 1.2em;
    }
    
    .about-highlight {
        padding: 20px;
        margin: 30px 0;
    }
    
    .highlight-text {
        font-size: 1em;
    }
    
    .about-quote {
        padding: 20px;
        margin: 30px 0;
    }
    
    .quote-text {
        font-size: 1em;
    }
    
    /* Service Cards Mobile */
    .services-grid-modern {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px 0;
    }
    
    .service-card {
        padding: 20px;
    }
    
    .service-icon {
        font-size: 2.5em;
    }
    
    /* Reference Cards Mobile */
    .references-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px 0;
    }
    
    .reference-image-container {
        height: 200px;
    }
    
    .reference-content {
        padding: 20px;
    }
    
    .reference-gallery-icon {
        width: 35px;
        height: 35px;
        top: 10px;
        left: 10px;
        padding: 4px;
    }
    
    .reference-gallery-dropdown {
        top: 50px;
        left: 10px;
        max-height: 200px;
        padding: 6px;
        gap: 5px;
        min-width: 56px;
    }
    
    .reference-gallery-thumbnail {
        width: 40px;
        height: 40px;
    }
    
    /* Contact Cards Mobile */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px 0;
    }
    
    .contact-card {
        padding: 20px;
    }
    
    .contact-icon {
        font-size: 2.5em;
    }
    
    /* Recommend Button Mobile */
    .recommend-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .recommend-icon {
        width: 14px;
        height: 14px;
    }
}