/* Medium Layout: 1280px. */
@media only screen and (min-width: 992px) and (max-width: 1200px) { 

    
}

/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    

}

/* Mobile Layout: 320px. */
@media only screen and (max-width: 991px) {

.slicknav_menu{ 
    display:block;
}
.menu-bar {
    position: relative;
    left: 0;
    top: 0;
}

h1 {
    font-size: 35px;
}
h1.page-title {
    font-size: 20px;
}
h2 {
    font-size: 28px;
}

 /* Mobile Menu style*/
 nav#site-navigation {
     display: none;
 }

 .mobile-menu-bar {
     display: block;
     padding: 10px 15px;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 999999;
     background: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }

 /* Offset body content so it's not hidden behind the fixed bar */
 header#masthead {
     padding-top: 60px;
 }

 .mobile-menu-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .mobile-logo {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .mobile-logo .site-branding {
     margin: 0;
 }

 .mobile-logo .site-title {
     font-size: 20px;
     margin: 0;
     line-height: 1.2;
 }

 .mobile-logo .site-description {
     display: none;
 }

 .mobile-logo img {
     max-height: 40px;
     width: auto;
 }

 /* Hide desktop header sections on mobile */
 .pxm-style1,
 .portfolio-canvas-logo-section,
 .menu-bar {
     display: none;
 }

 /* Hamburger Button */
 .hamburger-btn {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 40px;
     height: 40px;
     margin-left: auto;
     padding: 6px;
     background: transparent;
     border: none;
     cursor: pointer;
     z-index: 9999;
     position: relative;
     gap: 5px;
 }

 .hamburger-line {
     display: block;
     width: 26px;
     height: 3px;
     background-color: var(--color-heding, #0d1013);
     border-radius: 3px;
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     transform-origin: center;
 }

 /* Hamburger Animation - X shape when active */
 .hamburger-btn.is-active .hamburger-line:nth-child(1) {
     transform: translateY(8px) rotate(45deg);
 }

 .hamburger-btn.is-active .hamburger-line:nth-child(2) {
     opacity: 0;
     transform: scaleX(0);
 }

 .hamburger-btn.is-active .hamburger-line:nth-child(3) {
     transform: translateY(-8px) rotate(-45deg);
 }

 /* Overlay */
 .mobile-menu-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 100000;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }

 .mobile-menu-overlay.is-visible {
     opacity: 1;
     visibility: visible;
 }

 /* Slide-in Panel */
 .mobile-menu-panel {
     position: fixed;
     top: 0;
     right: -320px;
     width: 300px;
     max-width: 85vw;
     height: 100%;
     background: #fff;
     z-index: 100001;
     overflow-y: auto;
     transition: right 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
     padding: 0;
 }

 .mobile-menu-panel.is-open {
     right: 0;
 }

 /* Mobile Menu Header */
 .mobile-menu-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 20px;
     border-bottom: 1px solid #eee;
 }

 .mobile-menu-branding img {
     max-height: 40px;
     width: auto;
 }

 .mobile-site-title {
     font-size: 18px;
     font-weight: 700;
     color: var(--color-heding, #0d1013);
 }

 .mobile-menu-close {
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 5px;
     line-height: 1;
 }

 .close-icon {
     font-size: 28px;
     color: var(--color-heding, #0d1013);
     transition: color 0.2s ease;
 }

 .mobile-menu-close:hover .close-icon {
     color: var(--color-primary, #0200a3);
 }

 /* Mobile Menu Items */
 nav#mobile-navigation {
     position: relative;
 }

 .mobile-menu-panel ul.wsm-menu {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .mobile-menu-panel ul.wsm-menu li {
     border-bottom: 1px solid #f0f0f0;
 }

 .mobile-menu-panel ul.wsm-menu li a {
     padding: 12px 20px;
     text-decoration: none;
     display: block;
     color: var(--color-heding, #0d1013);
     font-size: 15px;
     font-weight: 500;
     transition: background-color 0.2s ease, color 0.2s ease;
 }

 .mobile-menu-panel ul.wsm-menu li a:hover {
     background-color: #f5f5f5;
     color: var(--color-primary, #0200a3);
 }

 .mobile-menu-panel .menu-item-has-children {
     display: flex;
     flex-flow: row wrap;
 }

 .mobile-menu-panel .menu-item-has-children > a {
     width: calc(100% - 50px);
     min-width: auto;
 }

 .mobile-menu-panel .menu-item-has-children > i {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     cursor: pointer;
     transition: transform 0.3s ease;
     color: var(--color-gray, #3c3e41);
     font-size: 12px;
 }

 .mobile-menu-panel .menu-item-has-children.clicked > i,
 .mobile-menu-panel .menu-item-has-children.focus > i {
     transform: rotate(180deg);
 }

 .mobile-menu-panel .menu-item-has-children .sub-menu {
     display: block;
     width: 100%;
 }

 .mobile-menu-panel ul#wsm-menu ul.sub-menu {
     visibility: hidden;
     max-height: 0;
     height: auto;
     opacity: 0;
     transition: 0.3s ease;
     padding-left: 15px;
     overflow: hidden;
 }

 .mobile-menu-panel ul#wsm-menu .menu-item-has-children.clicked > ul.sub-menu,
 .mobile-menu-panel ul#wsm-menu .menu-item-has-children.focus > ul.sub-menu {
     max-height: 1000px;
     visibility: visible;
     opacity: 1;
     height: auto;
 }

 .mobile-menu-panel ul.sub-menu li a {
     padding-left: 35px;
     font-size: 14px;
     color: var(--color-gray-2, #626567);
 }

 span.mclose {
     display: none;
 }

 /* Prevent body scroll when menu is open */
 body.mobile-menu-open {
     overflow: hidden;
 }

}

/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {

h1 {
    font-size: 35px;
}
h1.page-title {
    font-size: 24px;
}
h2 {
    font-size: 30px;
}

}
/* Wide Mobile Layout: 480px. */
@media only screen and (max-width: 479px) {
.header-search-form {
    right: 0;
}

}