* {padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } /* Defining CSS custom properties for reusability */ :root {--grid-columns: 12; --gutter: 1.5rem; --container-max-width: 1260px; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --padding: 75px; } button, form, input, select, textarea {font-family: inherit; } [lang*="en"] h1, [lang*="en"] h2, [lang*="en"] h3, [lang*="en"] h4 {text-transform: capitalize; } [lang*="ar"] body {direction: rtl; } .pd {padding: var(--padding) 0; } .disabled {display: none !important; } .owl-item {display: inline-block; vertical-align: text-top; } button, form, input, select, textarea {border: 0; background: 0; outline: 0; } .text-center {text-align: center; } .text-left {text-align: left; } .text-right {text-align: right; } .before:before {content: ""; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 5; } .after:after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 5; } .flex-center {display: flex; flex-wrap: wrap; justify-content: center; } .flex-column {display: flex; flex-direction: column; justify-content: center; } .flex-start {display: flex; flex-wrap: wrap; justify-content: flex-start; } .align-center {align-items: center; } .flex-end {display: flex; flex-wrap: wrap; justify-content: flex-end; } .flex-1 {flex: 1; } .d-flex {display: flex; } .flex-wrap{flex-wrap: wrap; } .hide {display: none; } .pull-right {float: right; } .pull-left {float: left; } .flex-between {display: flex; justify-content: space-between; flex-wrap: wrap; } .list-unstyled {list-style: none; } .clearfix:after {content: ""; display: block; clear: both; } a {color: inherit; text-decoration: none; } .container {margin: auto; } .w-100 {min-width: 100%; } .h-100 {height: 100%; } @media (min-width: 1025px) {.hide-pc {display: none !important; } } @media (max-width: 1024px) {.hide-mobile {display: none !important; } } /* Container styles for centering content */ .container {width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); } /* Row styles using Flexbox */ .row {display: flex; flex-wrap: wrap; margin-left: calc(var(--gutter) / -2); margin-right: calc(var(--gutter) / -2); } /* Base column styles */ [class*="col-"] {padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); box-sizing: border-box; } /* Mobile-first column widths */ .col-1 {width: calc((1 / var(--grid-columns)) * 100%); } .col-2 {width: calc((2 / var(--grid-columns)) * 100%); } .col-3 {width: calc((3 / var(--grid-columns)) * 100%); } .col-4 {width: calc((4 / var(--grid-columns)) * 100%); } .col-5 {width: calc((5 / var(--grid-columns)) * 100%); } .col-6 {width: calc((6 / var(--grid-columns)) * 100%); } .col-7 {width: calc((7 / var(--grid-columns)) * 100%); } .col-8 {width: calc((8 / var(--grid-columns)) * 100%); } .col-9 {width: calc((9 / var(--grid-columns)) * 100%); } .col-10 {width: calc((10 / var(--grid-columns)) * 100%); } .col-11 {width: calc((11 / var(--grid-columns)) * 100%); } .col-12 {width: 100%; } /* Small devices (sm) */ @media (min-width: var(--breakpoint-sm)) {.col-sm-1 {width: calc((1 / var(--grid-columns)) * 100%); } .col-sm-2 {width: calc((2 / var(--grid-columns)) * 100%); } .col-sm-3 {width: calc((3 / var(--grid-columns)) * 100%); } .col-sm-4 {width: calc((4 / var(--grid-columns)) * 100%); } .col-sm-5 {width: calc((5 / var(--grid-columns)) * 100%); } .col-sm-6 {width: calc((6 / var(--grid-columns)) * 100%); } .col-sm-7 {width: calc((7 / var(--grid-columns)) * 100%); } .col-sm-8 {width: calc((8 / var(--grid-columns)) * 100%); } .col-sm-9 {width: calc((9 / var(--grid-columns)) * 100%); } .col-sm-10 {width: calc((10 / var(--grid-columns)) * 100%); } .col-sm-11 {width: calc((11 / var(--grid-columns)) * 100%); } .col-sm-12 {width: 100%; } } /* Medium devices (md) */ @media (min-width: var(--breakpoint-md)) {.col-md-1 {width: calc((1 / var(--grid-columns)) * 100%); } .col-md-2 {width: calc((2 / var(--grid-columns)) * 100%); } .col-md-3 {width: calc((3 / var(--grid-columns)) * 100%); } .col-md-4 {width: calc((4 / var(--grid-columns)) * 100%); } .col-md-5 {width: calc((5 / var(--grid-columns)) * 100%); } .col-md-6 {width: calc((6 / var(--grid-columns)) * 100%); } .col-md-7 {width: calc((7 / var(--grid-columns)) * 100%); } .col-md-8 {width: calc((8 / var(--grid-columns)) * 100%); } .col-md-9 {width: calc((9 / var(--grid-columns)) * 100%); } .col-md-10 {width: calc((10 / var(--grid-columns)) * 100%); } .col-md-11 {width: calc((11 / var(--grid-columns)) * 100%); } .col-md-12 {width: 100%; } } /* Large devices (lg) */ @media (min-width: var(--breakpoint-lg)) {.col-lg-1 {width: calc((1 / var(--grid-columns)) * 100%); } .col-lg-2 {width: calc((2 / var(--grid-columns)) * 100%); } .col-lg-3 {width: calc((3 / var(--grid-columns)) * 100%); } .col-lg-4 {width: calc((4 / var(--grid-columns)) * 100%); } .col-lg-5 {width: calc((5 / var(--grid-columns)) * 100%); } .col-lg-6 {width: calc((6 / var(--grid-columns)) * 100%); } .col-lg-7 {width: calc((7 / var(--grid-columns)) * 100%); } .col-lg-8 {width: calc((8 / var(--grid-columns)) * 100%); } .col-lg-9 {width: calc((9 / var(--grid-columns)) * 100%); } .col-lg-10 {width: calc((10 / var(--grid-columns)) * 100%); } .col-lg-11 {width: calc((11 / var(--grid-columns)) * 100%); } .col-lg-12 {width: 100%; } } /* Extra large devices (xl) */ @media (min-width: var(--breakpoint-xl)) {.col-xl-1 {width: calc((1 / var(--grid-columns)) * 100%); } .col-xl-2 {width: calc((2 / var(--grid-columns)) * 100%); } .col-xl-3 {width: calc((3 / var(--grid-columns)) * 100%); } .col-xl-4 {width: calc((4 / var(--grid-columns)) * 100%); } .col-xl-5 {width: calc((5 / var(--grid-columns)) * 100%); } .col-xl-6 {width: calc((6 / var(--grid-columns)) * 100%); } .col-xl-7 {width: calc((7 / var(--grid-columns)) * 100%); } .col-xl-8 {width: calc((8 / var(--grid-columns)) * 100%); } .col-xl-9 {width: calc((9 / var(--grid-columns)) * 100%); } .col-xl-10 {width: calc((10 / var(--grid-columns)) * 100%); } .col-xl-11 {width: calc((11 / var(--grid-columns)) * 100%); } .col-xl-12 {width: 100%; } } /* Utility classes */ .hide-mobile {display: none; } @media (min-width: var(--breakpoint-sm)) {.hide-mobile {display: block; } } /* Mobile Menu Styles */ .mobile-menu-container {position: fixed; top: 0; left: 100%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 1000; overflow-y: auto; transition: transform 0.3s ease-in-out; } .mobile-menu-container.active {transform: translateX(-100%); } .mobile-menu-container ul {list-style: none; padding: 20px; margin: 0; } .mobile-menu-container ul li {margin: 10px 0; } .mobile-menu-container ul li a {color: #fff; text-decoration: none; font-size: 1.2rem; display: block; padding: 10px; } .mobile-menu-container ul .sub-menu {padding-left: 20px; display: none; /* Hidden by default */ } .mobile-menu-close {position: absolute; top: 15px; right: 15px; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; } .mobile-menu-close i {transition: color 0.2s; } .mobile-menu-close:hover i {color: #ccc; } body.mobile-menu-open {overflow: hidden; } /* Ensure menu behaves normally on desktop */ @media (min-width: 10234px) {.mobile-menu-container {position: static; transform: none; background: none; height: auto; overflow: visible; } .mobile-menu-container ul {display: block !important; /* Override jQuery hide */ } .mobile-menu-close {display: none; } }