/* Mobile Responsive Styles for Portrait Orientation */
@media (orientation: portrait) and (max-width: 991.98px) {
    html[lang="fa-ir"] .langdiv > div {
        float: right;
      }
      #saba-topbar {
        background: url("../images/toolbarr.webp") no-repeat 50% 100%;
        height: 65px;
        width: 100%;
      }

      #saba-header .navbar .container-fluid #mod-custom120 img {
        width: 15vw !important;
        height: auto;
      }
      #saba-header .navbar.navbar-expand-lg .container-fluid .navbar-toggler.d-none.d-lg-block {
        display: none !important;
      }
    /* Mobile Menu Toggle Button - Hidden on Desktop */
    .mobile-menu-toggle {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: #150958;
        border: 2px solid #b6903e;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        padding: 8px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    /* Ensure hamburger is visible on mobile */
    .mobile-menu-toggle.d-lg-none {
        display: flex !important;
    }
    
    .mobile-menu-toggle span {
        width: 25px;
        height: 3px;
        background: #b6903e;
        display: block;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-toggle:hover {
        background: #b6903e;
    }
    
    .mobile-menu-toggle:hover span {
        background: #150958;
    }
    
    /* Offcanvas Menu Styles */
    .offcanvas {
        background: #150958;
        color: #fff;
    }
    
    .offcanvas-header {
        border-bottom: 2px solid #b6903e;
        padding: 1.5rem;
    }
    
    .offcanvas-title {
        color: #b6903e;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 1.5rem;
    }
    
    .btn-close {
        filter: invert(1) brightness(2);
    }
    
    .offcanvas-body {
        padding: 2rem 1.5rem;
    }
    
    .mobile-menu-section {
        margin-bottom: 2.5rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(182, 144, 62, 0.3);
    }
    
    .mobile-menu-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    /* Main Menu in Offcanvas */
    .offcanvas-body #navbarNav,
    .offcanvas-body #navbarNav ul {
        display: block !important;
        margin: 0;
        padding: 0;
    }
    
    .offcanvas-body #navbarNav ul li {
        list-style: none;
        margin: 0;
        padding: 0;
        margin-bottom: 1rem;
    }
    
    .offcanvas-body #navbarNav ul li a {
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.2rem;
        padding: 0.75rem 1rem;
        display: block;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    
    .offcanvas-body #navbarNav ul li a:hover,
    .offcanvas-body #navbarNav ul li.current.active a {
        color: #b6903e;
        border-left-color: #b6903e;
        padding-left: 1.5rem;
    }
    
    /* Search in Offcanvas */
    .mobile-search .searchDiv {
        float: none;
        width: 100%;
    }
    
    .mobile-search .searchDiv input {
        width: 100%;
        padding: 12px 40px 12px 15px;
        border: 2px solid #b6903e;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-radius: 8px;
        font-size: 1rem;
    }
    
    .mobile-search .searchDiv input::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .mobile-search .searchDiv input:focus {
        background: rgba(255, 255, 255, 0.2);
        outline: none;
        border-color: #b6903e;
    }
    
    /* Social Media in Offcanvas */
    .mobile-social .social {
        float: none;
        margin: 0;
        text-align: center;
    }
    
    .mobile-social .social ul {
        display: flex;
        justify-content: center;
        gap: 1rem;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
    }
    
    .mobile-social .social ul li {
        margin: 0;
    }
    
    .mobile-social .social ul li a {
        display: block;
        transition: transform 0.3s ease;
    }
    
    .mobile-social .social ul li a:hover {
        transform: scale(1.2);
    }
    
    .mobile-social .social ul li img {
        width: 35px;
        height: 35px;
    }
    
    /* Hide desktop menu on mobile */
    #saba-header .navbar-toggler.d-none,
    #saba-header .collapse.navbar-collapse.d-none {
        display: none !important;
    }
    
    /* Top Bar Adjustments */
    .toolbarRight .searchDiv {
        display: none;
    }
    
    .toolbarRight .social {
        display: none;
    }
    
    #saba-topbar .row {
        padding: 13px 15px 0;
    }
    
    .saba-topbar-inner .row {
        padding: 18px 15px 0;
        display: block;
        height: auto;
        min-height: 79px;
    }
    
    .saba-topbar-inner .langdiv {
        width: 100%;
        margin-bottom: 10px;
    }
    
    #saba-topbar .row > div {
        width: 100%;
    }
    
    .col-md-6.toolbarRight {
        text-align: left;
        width: 100%;
    }
    
    /* Header Adjustments */
    .saba-header {
        height: auto;
        min-height: 200px;
        background-size: cover;
        background-position: center;
    }
    
    .saba-header.innerHead {
        height: auto;
        min-height: 250px;
    }
    
    .saba-header .container-fluid {
        padding: 1.5rem 1rem 0 !important;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    /* Logo adjustments for mobile */
    #saba-header-logo {
        text-align: center;
        width: 100%;
    }
    
    #saba-header-logo img {
        max-width: 150px;
        height: auto;
    }
    
    /* Hide vertical menu on homepage mobile */
    #saba-header #navbarNav {
        display: none !important;
    }
    
    /* Ensure navbar doesn't show on mobile */
    .saba-header .navbar {
        width: 100%;
    }
    
    .saba-header .navbar .navbar-toggler {
        display: none !important;
    }
    
    /* Services Section */
    .saba-services {
        height: auto;
        padding: 2rem 0;
    }
    
    #saba-services .moduletable > h3 {
        width: 100%;
        float: none;
        height: auto;
        padding: 2rem 1rem;
        font-size: 2.5em;
        text-align: center;
        background-size: contain;
        background-position: center;
    }
    
    .saba-services .uk-scope ul li div.uk-panel {
        height: auto;
        min-height: 300px;
        display: flex;
        flex-direction: column;
    }
    #saba-services h3 {
        font-size: 1.2em;
        letter-spacing: 0;
        padding-bottom: 0;
      }
    #saba-services .uk-margin.descSection{

        margin-top:0;

      }
    .saba-services .uk-scope ul li div.uk-panel .uk-text-center.uk-margin.uk-margin-remove-top {
        float: none;    
        width: 100vw;
        height: 100vw;
    }
    .saba-services .uk-scope .uk-position-center-left, .saba-services .uk-scope .uk-position-center-right {        
        top: 50vw;
      }
    .saba-services .uk-scope ul li div.uk-panel h3,
    .saba-services .uk-scope ul li div.uk-panel > p {
        float: none;
        width: 100%;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .saba-services .uk-scope ul li div.uk-panel div.descSection {
        width: 100%;
        padding: 1rem;
        height: auto !important;
        margin-top: 0;
        margin-bottom: 30px;
    }
    #saba-services ul li .uk-panel > p:last-child {
        display: block;
        margin: auto;
        padding: 4px;
        clear: both;
      }
    /* About Section */
    #saba-about {
        height: auto;
        padding: 2rem 0;
    }
    
    #saba-about .moduletable > h3 {
        float: none;
        height: auto;
        width: 100%;
        padding: 2rem 1rem;
        font-size: 2.5em;
        text-align: center;
        background-size: contain;
        background-position: center;
    }
    
    #saba-about .layout-default {
        padding: 0 1rem;
    }
    
    #saba-about .layout-default .description {
        width: 100%;
    }
    
    /* Slideshow Section */
    #saba-slideshow {
        height: auto;
        min-height: 300px;
        margin-bottom: 20px;
    }
    
    #saba-slideshow .uk-scope .uk-slideshow-items,
    #saba-slideshow .uk-scope .uk-position-relative {
        height: auto;
    }
    
    /* Content Bottom Section */
    #saba-content-bottom {
        padding-top: 40px;
    }
    
    #saba-content-bottom .container {
        padding: 40px 1rem;
    }
    
    #saba-content-bottom .uk-text-center.uk-margin.uk-margin-remove-top {
        float: none;
        width: 100%;
        height: auto;
        min-height: 250px;
        margin-right: 0;
        margin-bottom: 2rem;
    }
    
    #saba-content-bottom .uk-panel h3 {
        padding-top: 2rem;
        width: 100%;
        margin-right: 0;
        text-align: center;
    }
    
    #saba-content-bottom .uk-margin.descSection {
        height: auto !important;
        width: 100%;
        margin-right: 0;
    }
    
    #saba-content-bottom .uk-panel > p {
        float: none;
        width: 100%;
        margin-right: 0;
        text-align: center;
        background-size: contain;
        padding: 1rem;
    }
    
    /* Footer */
    #saba-footer-content {
        height: auto;
        padding: 2rem 1rem;
    }
    
    #saba-footer-content .zoo-item-list.zoo-list.product-default {
        width: 100%;
        padding: 2rem 1rem;
    }
    
    #saba-footer-content .title {
        font-size: 2em;
        padding: 0;
        margin-bottom: 1.5rem;
        text-align: center;
        background-size: 60px;
        background-position: center top;
        padding-top: 70px;
    }
    
    #saba-footer .container {
        padding: 2rem 1rem;
    }
    
    .footernav,
    .footeraddr,
    .footertesks {
        width: 100%;
        float: none;
        margin: 2rem 0;
        text-align: center;
        background: none;
    }
    
    .footernav ul li {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    /* Main Section */
    .mainSection .container {
        padding: 0 1rem;
    }
    
    /* Yoo Zoo Items */
    #yoo-zoo .width50 {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 2rem;
    }
    
    #yoo-zoo .items div.teaser-item .pos-media {
        float: none;
        width: 100%;
        height: 250px;
        margin: 0 0 1rem 0;
    }
    
    #yoo-zoo .items .teaserDesc {
        padding: 1.5rem !important;
    }
    
    #yoo-zoo .item {
        width: 100%;
        margin: 0 auto 3rem;
        padding: 0 ;
    }
    
    #yoo-zoo .item div.pos-media {
        flex-direction: column;
    }
    
    #yoo-zoo .item div.pos-media .element-image {
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    #yoo-zoo .item div.pos-media .element.element-textarea.last {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Call Button */
    #callbutton {
        width: 50px;
        height: 50px;
        bottom: 1rem;
        right: 1rem;
        background-size: contain;
    }
    
    /* Inner Page Top Bar Menu */
    .saba-topbar-inner .navbar-toggler {
        display: none !important;
    }
    
    .saba-topbar-inner #navbarNav {
        display: none !important;
    }
    
    /* Ensure all desktop menus are hidden on mobile */
    .navbar-collapse:not(.offcanvas-body .navbar-collapse) {
        display: none !important;
    }
    
    /* Hide desktop navbar toggler on mobile */
    .navbar .navbar-toggler:not(.mobile-menu-toggle) {
        display: none !important;
    }
    
    /* Offcanvas backdrop */
    .offcanvas-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    /* Content Top Section */
    #saba-content-top {
        padding:  0;
    }
    
    #saba-content-top .container {
        padding: 0 1rem;
    }
    
    /* Breadcrumb adjustments */
    .saba-breadcrumb {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    /* Message module adjustments */
    .saba-message {
        padding: 1rem;
    }
    
    /* RTL Support for Mobile */
    html[dir="rtl"] .mobile-menu-toggle {
        right: auto;
        left: 20px;
    }
    
    html[dir="rtl"] .offcanvas {
        direction: rtl;
    }
    
    html[dir="rtl"] .offcanvas-body #navbarNav ul li a {
        border-left: none;
        border-right: 3px solid transparent;
    }
    
    html[dir="rtl"] .offcanvas-body #navbarNav ul li a:hover,
    html[dir="rtl"] .offcanvas-body #navbarNav ul li.current.active a {
        padding-left: 1rem;
        padding-right: 1.5rem;
        border-right-color: #b6903e;
    }
    
    html[dir="rtl"] .mobile-search .searchDiv input {
        padding: 12px 15px 12px 40px;
        text-align: right;
    }
    
    html[dir="rtl"] .col-md-6.toolbarRight {
        text-align: right;
    }
    
    html[dir="rtl"] .offcanvas-header {
        flex-direction: row-reverse;
    }
    
    html[dir="rtl"] .mobile-social .social ul {
        direction: ltr;
    }

    .saba-header {
        min-height: 100vw;
      }

      #saba-topbar {
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100vw;
      }
      .mobile-menu-toggle.d-lg-none {
        z-index: 1;
      }
      #saba-header {
        margin-top: 65px;
        box-sizing: border-box;
      }
      #saba-header .navbar .container-fluid #mod-custom120 img {
        width: 15vw !important;
        height: auto;
        position: absolute;
        top: 0;
        left: 18px;
      }
      .footertesks, .footertesks img {
        max-width: 100% !important;
      }
    .mobile-menu-toggle {
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
    }
    
    .mobile-menu-toggle span {
        width: 20px;
    }
    
    .offcanvas-title {
        font-size: 1.2rem;
    }
    
    .offcanvas-body #navbarNav ul li a {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
    
    #saba-services .moduletable > h3, #saba-about .moduletable > h3 {
        font-size: 2em;
        padding-left: 65px;
        font-weight: bold;
        background-position: calc(50% - 30px);
    }     
    #saba-about .element p:first-child {
        display: none;
      }
    #saba-footer-content .title {
        font-size: 1.5em;
    }
    #saba-about img {
        max-width: 100%;
        height: auto;
      }
    #saba-header-logo img {
        max-width: 120px;
    }
    
    .saba-header {
        min-height: 150px;
    }
    
    .saba-header.innerHead {
        min-height: 200px;
    }
    
    html[dir="rtl"] .mobile-menu-toggle {
        left: 28px;
    }
    
    .mobile-menu-section {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
    }
    
    .offcanvas-body {
        padding: 1.5rem 1rem;
    }
    .saba-header {
        min-height: 100vw;
      }

      #saba-slideshow img {
        max-width: 100vw;
        height: auto;
      }
      #saba-slideshow,#saba-slideshow div, #saba-slideshow ul, #saba-slideshow ul li, #saba-slideshow img {
        height: auto !important;
        min-height: initial !important;
        margin: 0 !important;
        min-height: 0 !important;
        padding: 0;
      }
      #saba-content-bottom a {
        top: 120px;
      }
      #saba-content-bottom ul li h3 {
        margin-top: 0 !important;
        padding-top: 0 !important;
      }
      #saba-content-bottom .uk-panel > p a, #saba-content-bottom .uk-panel > p {
        font-size: 1.2em;
        background-position: calc(50% - 53px);
      }

      #saba-footer {
        padding-top: 390px !important;
        border-top: none !important;
        background-size: 100vw;
      }
      #saba-footer-content {
        border-top: none;
      }



      #saba-footer-content .title {
        height: auto;    text-align: center !important;
        letter-spacing: 0;
      }

      .footernav ul li a {
        padding: .3em !important;
        line-height: 1.2em;
        margin: 0;
        font-size: 1em;
      }
      .footernav ul li, .footernav ul, .footernav ul li, .footernav {
        margin: 0;
        padding: 0;
      }
      .sign {
        padding-bottom: 40px;
      }

      .mobile-menu-section ul li {
        display: block;
        width: 100%;
        font-family: iran;
      }
      .mobile-menu-section ul li {
        display: block;
        width: 100%;
        font-family: iran;
        padding: 7px 0;
      }
      .mobile-menu-section ul li.active a {
        color: #fff;
      }
      .mobile-menu-section > ul#mod-menu122 li {
        display: block;
        width: 100%;
        font-family: iran !important;
        padding: 7px 0;
      }
      .mobile-menu-section.mobile-search label {
        display: none;
      }
      .mobile-menu-section.mobile-search input, .mobile-menu-section.mobile-search div {
        width: 100% !important;
      }
      .mobile-menu-section > ul {
        padding: 0;
      }
      .mobile-menu-section.mobile-social ul {
        column-count: 5;
        display: block;
      }
      html[lang="en-gb"] .mobile-menu-section ul li a {
        font-family: agencyb !important;
        font-size: 1.3em;
        text-transform: uppercase;
      }
      #saba-header {
        margin: 0;
        background-size: auto 100%;
        min-height: initial;
        height: 550px;
        background-size: 100% 100%;
      }
      #yoo-zoo .items div.teaser-item .pos-media img {
        width: 100%;
        height: auto;
      }
      #yoo-zoo .items .row:nth-child(2n) div.teaser-item {
        background: #b6903e;
      }
      #yoo-zoo .items .row:nth-child(2n) div.teaser-item h2.pos-title a {
        font-family: agencyb;
        text-transform: capitalize;
        font-size: 1.5em;
        color: #150958;
        line-height: 28px;
      }
      .saba-topbar-inner {
        position: fixed;
        z-index: 1;
        background: #fff;
        height: 67px;
        top: 0;
      }
      #yoo-zoo .item h1.pos-title {
        font-size: 1.5em !important;
        line-height: 1.3em !important;
        background-size: 40px;
      }
      #yoo-zoo .item div.pos-description .element-textarea h3 {
        line-height: 1.5em;
        font-size: 1.2em;
        
      }
      #saba-header {
        margin-top: 67px;
      }
      #yoo-zoo .items div.teaser-item {
        height: auto;
      }
      #yoo-zoo .items div.teaser-item .pos-media {
        height: auto;
      }
      .zoo-gallery-wall.clearfix.margin a {
        width: calc(50% - 20px);
        float: right;
      }


      .socialmobile {
        display: initial;
      }

      #saba-services .uk-margin.descSection p {
        font-size: 1rem;
      }
      .socialmobile {  
        margin: 30px 0 10px;
        width: 100%;
        display: block;
        padding: 0;
        text-align: center;
      }
      .socialmobile ul {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        column-count: 5;
      }
      .socialmobile ul li {
        width: 20%;
      }
      #callbutton.desktop{
        display:none;
      }
      
      #callbutton.mobile{
        display:initial;
      }
      
      .saba-header {
        background: url("../images/home-banner-mob.webp") 50% 0px / cover no-repeat;
          
      }
        
        .saba-header.innerHead {
        background: url("../images/home-banner-mob.webp") 50% 0px / cover no-repeat;
            
        }


}