@media (max-width: 1400px) {

#cssmenu > ul > li > a {
    padding: 12px 12px;
    font-size: 18px;

}
	
#cssmenu
{
		display: none;
}
.contacts {
    font-size: 15px;    
	margin-right: 0px;
}	
	

	
	
}
@media (max-width: 1200px) {
#cssmenu > ul > li > a {
    padding: 12px 10px 12px 10px;
    font-size: 15px;
}

	
.logo {
    position: relative;
    z-index: 9;
}
.logo img {
   width: 160px;
	top: 0;
	position: relative;
    object-fit: contain;
}
	
	
.language {
    font-size: 13px;
    width: 80px;
    height: 35px;
	margin-left: 10px;
    padding: 6px 0;
}

.title {
    font-size: 65px;
    font-weight: 900;
    margin-top: 100px;
    margin-bottom: 30px;
}
	
.text-all {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 40px;
}	
.img-all {
    height: 485px;
}	
	
.color-all {
    margin-right: 0px;
}	
.text-all2 {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 40px;
}	
.img-all2 {
    height: 485px;
}	
	
.color-all2 {
    margin-left: 0px;
}	
.level-item {
    width: 47%;
    padding: 20px 115px 20px 0px;
    margin: 15px 10px;
}
	

}
@media (max-width: 991px) {
	
	
	
	.container-fluid
{
	padding-left: 15px;
	padding-right: 15px;
}
 .language {
            font-size: 13px;
            width: 80px;
            height: 35px;
            margin-left: 0px;
            padding: 6px 0;
            position: fixed;
            left: 175px;        
	        top: 25px;
}
.header {
    border-radius: 0 0 10px 10px;
    padding: 10px 0;
}	
 .contacts {
    display: none;
}		
.text-top {
    margin-top: 0px;
    position: absolute;         
	top: -35px;
    right: 35px;	
	z-index: 9;
}	
.codrops-header__side, .search-wrap {
    margin: 10px 5px 0 0;
}
.logo img {
        width: 160px;
        top: 10px;
        position: relative;
        object-fit: contain;
    }
/*.carousel {
    height: auto;
}*/
}


@media (max-width: 768px) {

	
.section {
    height: auto;
}
.section_3 {
    padding-top: 55px;
}	
.section_4 {
    padding-top: 0px;
}	
	
.carousel {
    height:100%;
    margin-top: 75px;
}

.bg-all-top {
    margin-top: 0px;
}	
	
.bg-all {
    padding: 60px 0 0 0;
}
	
.title {
    margin-top: 5px;
}	
	
.text-all2 {
   margin-bottom: 30px;
}	
	
}




@media (max-width: 767px) {

.level-item {
    width: 100%;
    padding: 20px 115px 20px 0px;
    margin: 15px 0px;
}		
	
.news ul li
{
    margin: 20px 0px;
    width: 100%;

}
	
	
}



@media (max-width: 480px) {
.img-all {
            height: 360px;
}
.img-all2 {
            height: 360px;
}
			
}

/* ============================================================
   Mobile responsiveness — menu / language / slider (2026-09)
   Scoped to phone widths only; desktop layout is untouched.
   ============================================================ */

/* Language switch appears ONLY inside the mobile menu (hidden on desktop) */
.ruby-mobile-lang { display: none !important; }

/* News slider dots: only shown on mobile */
.news-dots { display: none; }

@media (max-width: 767px) {
    html, body { overflow-x: hidden; }

    /* Ruby wrapper transparent so the header shows normally */
    div.ruby-wrapper {
        position: static;
        width: auto;
        background: transparent;
    }

    /* Compact header: pull the logo/search/menu up, remove the empty strip
       above the logo, and keep everything clear of the slider. */
    .header { padding-top: 6px !important; }
    .ruby-wrapper { margin-top: 0 !important; }
    .section_1 { margin-top: -14px !important; }

    /* Hamburger toggle on the RIGHT of the header, clickable */
    .ruby-wrapper .visible-xs,
    .ruby-wrapper .c-hamburger {
        position: absolute !important;
        left: auto !important;
        right: 12px !important;
        top: 10px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        z-index: 1001;
    }
    .c-hamburger span { top: 21px !important; }

    /* Search icon sits neatly to the LEFT of the hamburger (fixed to the header top) */
    .text-top {
        position: fixed !important;
        left: auto !important;
        right: 66px !important;
        top: 12px !important;
        z-index: 1002 !important;
    }
    .text-top .search-wrap,
    .text-top .codrops-header__side { margin: 0 !important; }
    #btn-search { padding: 8px; }
    #btn-search img { width: 24px; height: 24px; }

    /* ---- Clean mobile menu skin (overrides Ruby's messy mobile styles) ---- */
    /* Menu panel: opaque, drops below the header, scrollable.
       The offset parent (.ruby-menu-demo-header) has 0 height, so top:100%
       collapsed to 0 and the panel overlapped the logo. Drop it to the header
       bottom edge (emblem strip 41px + logo row 51px = 92px) instead. */
    div.ruby-wrapper > ul.ruby-menu {
        position: absolute !important;
        top: 51px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        background: #ffffff !important;
        box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        z-index: 1000 !important;
    }

    /* Old fixed top language toggle is now inside the menu */
    .language { display: none !important; }

    /* Hide the fixed Jordan emblem (logo-jo) on phones only */
    .logo-jo { display: none !important; }

    /* The scroll-reveal library (Waypoint/WOW) errors on mobile and leaves
       .wow elements stuck at visibility:hidden, so the counter, news and other
       sections never appear. Force them visible on phones. */
    .wow { visibility: visible !important; }

    /* Top-level items: full-width readable rows */
    ul.ruby-menu > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        position: relative !important;
        border-bottom: 1px solid #eee !important;
    }
    ul.ruby-menu > li > a {
        display: block !important;
        width: 100% !important;
        padding: 0 20px !important;
        line-height: 52px !important;
        background: #fff !important;
        color: #0F9151 !important;
        font-weight: 700 !important;
        text-align: start !important;
    }
    ul.ruby-menu > li > a:hover,
    ul.ruby-menu > li:hover > a {
        background: #f4f4f4 !important;
        color: #0F9151 !important;
    }

    /* Remove Ruby's dark square that sat before every link */
    ul.ruby-menu li > a:before { display: none !important; content: none !important; }

    /* Sub-menu expand chevron on the trailing side */
    ul.ruby-menu span.ruby-dropdown-toggle {
        position: absolute !important;
        top: 0 !important;
        inset-inline-end: 0 !important;
        left: auto !important;
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 6 !important;
    }
    ul.ruby-menu span.ruby-dropdown-toggle:after {
        content: '\f107' !important;
        font-family: "FontAwesome" !important;
        color: #0F9151 !important;
        font-size: 20px !important;
        line-height: 52px !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

    /* Sub-menu: collapsed by default, opens only when its toggle is tapped */
    ul.ruby-menu ul {
        width: 100% !important;
        display: none !important;
        /* Accordion in-flow: kill the desktop absolute+transform that left a big
           empty gap above the sub-items when a section is expanded. */
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        border-top: none !important;
    }
    ul.ruby-menu ul.ruby-mobile-sublevel-show { display: block !important; }
    /* Sub-menu items: indented, light background */
    ul.ruby-menu ul li { display: block !important; width: 100% !important; float: none !important; position: relative !important; }
    ul.ruby-menu ul li a {
        display: block !important;
        padding: 0 34px !important;
        line-height: 46px !important;
        background: #f7f7f7 !important;
        color: #333 !important;
        font-weight: 500 !important;
        border-top: 1px solid #ececec !important;
    }
    ul.ruby-menu ul li a:hover { background: #ececec !important; color: #0F9151 !important; }

    /* Language item inside the mobile menu */
    .ruby-mobile-lang { display: block !important; }
    .ruby-mobile-lang > a {
        display: block !important;
        line-height: 52px !important;
        padding: 0 20px !important;
        background: #0F9151 !important;
        color: #fff !important;
        font-weight: 700 !important;
        text-align: start !important;
    }
    .ruby-mobile-lang > a:hover { background: #0c7a43 !important; color: #fff !important; }
    .ruby-mobile-lang img {
        display: inline-block !important;
        height: 20px !important;
        width: auto !important;
        vertical-align: middle;
        margin-inline-end: 8px;
    }

    /* ---- Generic safety: nothing wider than the screen ---- */
    img, table, iframe, video { max-width: 100% !important; }

    /* ---- Inner-page title/breadcrumb band (caption-inner) ----
       Desktop reserves 124px top + 260px side padding which squeezed the
       breadcrumb to ~85px on phones (each word wrapped). Make it compact.
       Title + breadcrumb use clamp() so they scale with screen width and
       keep several words per line on any phone size. */
    .caption-inner { padding: 74px 15px 16px 15px !important; }
    .caption-inner .breadcrumb { width: auto !important; }
    .caption-inner .breadcrumb,
    .caption-inner .breadcrumb li,
    .caption-inner .breadcrumb li a { font-size: clamp(12px, 3.6vw, 14px) !important; }
    .caption-inner h3,
    .caption-inner h3 span,
    .caption-inner h1,
    .caption-inner h1 span,
    .caption-inner h2,
    .caption-inner h2 span {
        font-size: clamp(20px, 6vw, 28px) !important;
        line-height: 1.25 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* ---- Intro loader video (load.mp4) ----
       The clip is 1920x1080 (landscape); on a portrait phone object-fit:cover
       cropped the logo off both sides. Use contain so the whole logo shows,
       letterboxed on white to match the clip's white background. */
    video.loader-video {
        object-fit: contain !important;
        background: #fff !important;
    }

    /* ---- Product details page: mobile layout ---- */
    /* Desktop reserves 240px on the side of the title/scientific name — drop it */
    .title-new-pro, .product-text2 { padding-right: 0 !important; padding-left: 0 !important; }
    /* Big 600px product image → contained on phones */
    .img-p { height: auto !important; max-height: 300px !important; width: auto !important; }
    /* Dosage-form icon was absolutely pushed off-screen (right:-230px) for desktop;
       bring it back into normal flow under the title on phones */
    .product-title-wrapper { position: static !important; flex-wrap: wrap !important; }
    .dosage-form-row {
        position: static !important;
        right: auto !important; left: auto !important; top: auto !important;
        margin: 6px 0 0 0 !important;
        pointer-events: auto !important;
    }
    .dosage-form-img { width: 90px !important; height: 90px !important; }
    /* Variation badges: one per row */
    .label-code-badge { flex: 1 1 100% !important; }
    /* Read more button flows normally */
    .product-more-btn { float: none !important; display: block !important; clear: both !important; width: 100% !important; text-align: center !important; margin: 14px 0 0 0 !important; }

    /* ---- Products catalogue tabset -> mobile accordion ----
       Desktop is a 25%/75% sidebar+panel. On phones mobile-menu.js relocates
       each panel to sit directly under its own category name and toggles it
       open/closed, so the details read as a clear sub-section of that name.
       The emptied .tab-panels wrapper collapses to nothing. */
    .tabset { min-height: 0 !important; }
    .tabset .tab-panels {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        min-height: 0 !important;
    }
    .tabset .tab,
    .tabset .products-list {
        width: 100% !important;
        float: none !important;
        position: static !important;
    }
    .tabset .products-list { display: flex !important; flex-direction: column !important; }

    /* Category name row: full width, neat, arrow pinned to the side */
    .tabset > label {
        width: 100% !important;
        display: block !important;
        position: relative !important;
        padding: 14px 44px 14px 16px !important;
        margin: 0 0 6px 0 !important;
        border: 1px solid #e6e6e6 !important;
        border-radius: 6px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    .tabset > label i,
    .tabset > label .acc-caret {
        position: absolute !important;
        right: 16px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: transform .25s ease !important;
    }
    /* CSS chevron for names that have no <i> arrow (e.g. Categories page) */
    .tabset > label .acc-caret {
        width: 9px; height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-65%) rotate(-45deg) !important;
    }
    /* Open state: highlight the name + point the arrow down */
    .tabset > label.acc-open {
        background-color: #28388f !important;
        color: #fff !important;
        border-color: #28388f !important;
    }
    .tabset > label.acc-open i { transform: translateY(-50%) rotate(90deg) !important; }
    .tabset > label.acc-open .acc-caret { transform: translateY(-50%) rotate(45deg) !important; }

    /* Only the open panel shows; it is visually nested under its name */
    .tabset .tab-panel { display: none !important; }
    .tabset .tab-panel.mobile-acc-panel.open {
        display: block !important;
        background: #f6f7fb !important;
        border-left: 3px solid #28388f !important;
        border-radius: 0 0 6px 6px !important;
        margin: -6px 0 10px 6px !important;
        padding: 4px 10px 8px 10px !important;
    }
    .tabset .tab-panel .products-list { padding: 10px 0 !important; }
    .tabset .tab-panel .product-link,
    .tabset .tab-panel .product-group,
    .tabset .tab-panel .product-group-header {
        display: block !important;
        width: 100% !important;
    }

    /* Variant list opens BELOW the row on mobile (not beside) */
    .product-group { position: static !important; }
    .product-group-variants {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        box-shadow: none !important;
        max-height: none !important;
        margin-top: 6px !important;
    }

    /* ---- Home content sections: stack cleanly, no overlap ----
       Root cause of the overlap: each .section was locked to 100vh while its
       content is taller, so it spilled onto the next section. Let them grow. */
    .section_2, .section_3, .section_4 { height: auto !important; }

    .section_2 .bg-all, .section_3 > div, .section_4 { padding: 22px 0 !important; }
    .bg-all-top { margin-top: 0 !important; }

    /* Force a single readable column: text first, then image */
    .section_2 .row { display: flex !important; flex-direction: column !important; }
    .section_2 .row > div { width: 100% !important; float: none !important; }
    .section_2 .row > [class*="col-"]:has(.color-all),
    .section_2 .row > [class*="col-"]:has(.color-all2) { order: 1 !important; }
    .section_2 .row > [class*="col-"]:has(.img-all),
    .section_2 .row > [class*="col-"]:has(.img-all2) { order: 2 !important; }
    .section_2 .col-sm-1, .section_2 .col-md-1 { display: none !important; }

    /* Text block spacing / sizing */
    .color-all, .color-all2 { margin: 0 0 6px 0 !important; }
    .section_2 .title { font-size: 26px !important; line-height: 1.25 !important; margin: 6px 0 12px !important; }
    .text-all, .text-all2 { font-size: 16px !important; line-height: 1.9 !important; }

    /* Images: contained height, spacing, rounded */
    .img-all, .img-all2 {
        height: 220px !important;
        margin: 10px 0 0 0 !important;
        border-radius: 16px !important;
        background-position: center !important;
    }

    /* ---- News: horizontal slider with dots ---- */
    .news ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        list-style: none !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .news ul::-webkit-scrollbar { display: none; }
    .news ul li {
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        scroll-snap-align: center !important;
    }
    .news-dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 14px 0 0 0;
    }
    .news-dots button {
        width: 9px; height: 9px;
        padding: 0; border: none; border-radius: 50%;
        background: #c9c9c9; cursor: pointer;
        transition: all .2s ease;
    }
    .news-dots button.active { background: #0F9151; width: 22px; border-radius: 5px; }

    /* ---- Footer: kill the huge 222px top gap above the logo ---- */
    .footer { padding: 24px 0 24px 0 !important; }

    /* ---- Counter (section_3): one tidy row, icon on top ---- */
    .counter-bg { padding: 24px 0 !important; }
    .level {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin: 0 !important;
    }
    .level-item {
        flex: 1 1 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 8px 2px !important;
        margin: 0 !important;
        text-align: center !important;
        overflow: visible !important;
    }
    .level-item .icon {
        position: static !important;
        height: auto !important;
        width: auto !important;
        margin: 0 auto 6px !important;
    }
    .level-item .icon img {
        position: static !important;
        height: 42px !important;
        width: 42px !important;
    }
    .level-item .title-counter {
        font-size: 30px !important;
        text-align: center !important;
        line-height: 1 !important;
        margin: 4px 0 !important;
    }
    .level-item p:not(.title-counter), .level-item .heading {
        font-size: 12px !important;
        text-align: center !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    /* Slider: reasonable height on phones */
    .section_1,
    .section_1 #myCarousel.carousel,
    .section_1 .carousel-inner,
    .section_1 .item,
    .section_1 .fill,
    .section_1 .fill-img {
        height: 210px !important;
    }
    .section_1 .fill-img img {
        height: 210px !important;
        object-fit: cover;
    }
}

/* Desktop header: align the horizontal menu with the LOGO's vertical center.
   The logo height (and so its center) changes per breakpoint, so the menu's
   top offset is tuned to match at each range. */
@media (min-width: 1201px) {
    .ruby-wrapper { margin-top: 19px !important; }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .ruby-wrapper { margin-top: 5px !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .ruby-wrapper { margin-top: 15px !important; }
}

/* Language toggle: keep the flag + language name on ONE line.
   "English" is longer than "عربي", and the old fixed width:80px made it wrap
   (flag on top, text below) — so the Arabic side looked misaligned. */
.language { width: auto !important; height: auto !important; white-space: nowrap !important; }