/* Reset and Base Styles */ * {padding: 0; margin: 0; box-sizing: border-box; } .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 Alignment Utilities */ .text-center {text-align: center; } .text-left {text-align: left; } .text-right {text-align: right; } /* Pseudo-Element Utilities */ .before:before, .after:after {content: ''; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 5; } /* Flexbox Utilities */ .flex-center {display: flex; flex-wrap: wrap; 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; align-items: center; } .flex-between {display: flex; justify-content: space-between; flex-wrap: wrap; } .flex-column {display: flex; flex-direction: column; } .flex-1 {flex: 1; } /* Display Utilities */ .hide {display: none; } /* Image Styles */ img {max-width: 100%; width: 100%; font-size: 0; height: auto; position: relative; } /* List Styles */ .list-unstyled {list-style: none; } /* Clearfix */ .clearfix:after {content: ''; display: block; clear: both; } /* Links */ a {color: inherit; text-decoration: none; } /* Modern CSS Grid System */ .container {margin: 0 auto; } .h-100 {height: 100% } .grid {display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin: 0 -0.5rem; /* Adjust for padding if needed */ } .col-1 {grid-column: span 1; } .col-2 {grid-column: span 2; } .col-3 {grid-column: span 3; } .col-4 {grid-column: span 4; } .col-5 {grid-column: span 5; } .col-6 {grid-column: span 6; } .col-7 {grid-column: span 7; } .col-8 {grid-column: span 8; } .col-9 {grid-column: span 9; } .col-10 {grid-column: span 10; } .col-11 {grid-column: span 11; } .col-12 {grid-column: span 12; } .w-100 {width: 100%; } /* Base: Mobile-first (default full width) */ [class*="col-"] {grid-column: span 12; } /* Small devices (≥ 576px) */ @media (min-width: 176px) {.col-sm-1 { grid-column: span 1; } .col-sm-2 { grid-column: span 2; } .col-sm-3 { grid-column: span 3; } .col-sm-4 { grid-column: span 4; } .col-sm-5 { grid-column: span 5; } .col-sm-6 { grid-column: span 6; } .col-sm-7 { grid-column: span 7; } .col-sm-8 { grid-column: span 8; } .col-sm-9 { grid-column: span 9; } .col-sm-10 { grid-column: span 10; } .col-sm-11 { grid-column: span 11; } .col-sm-12 { grid-column: span 12; } } /* Medium devices (≥ 768px) */ @media (min-width: 768px) {.col-md-1 { grid-column: span 1; } .col-md-2 { grid-column: span 2; } .col-md-3 { grid-column: span 3; } .col-md-4 { grid-column: span 4; } .col-md-5 { grid-column: span 5; } .col-md-6 { grid-column: span 6; } .col-md-7 { grid-column: span 7; } .col-md-8 { grid-column: span 8; } .col-md-9 { grid-column: span 9; } .col-md-10 { grid-column: span 10; } .col-md-11 { grid-column: span 11; } .col-md-12 { grid-column: span 12; } } /* Large devices (≥ 992px) */ @media (min-width: 992px) {.col-lg-1 { grid-column: span 1; } .col-lg-2 { grid-column: span 2; } .col-lg-3 { grid-column: span 3; } .col-lg-4 { grid-column: span 4; } .col-lg-5 { grid-column: span 5; } .col-lg-6 { grid-column: span 6; } .col-lg-7 { grid-column: span 7; } .col-lg-8 { grid-column: span 8; } .col-lg-9 { grid-column: span 9; } .col-lg-10 { grid-column: span 10; } .col-lg-11 { grid-column: span 11; } .col-lg-12 { grid-column: span 12; } } /* Extra large devices (≥ 1200px) */ @media (min-width: 1200px) {.col-xl-1 { grid-column: span 1; } .col-xl-2 { grid-column: span 2; } .col-xl-3 { grid-column: span 3; } .col-xl-4 { grid-column: span 4; } .col-xl-5 { grid-column: span 5; } .col-xl-6 { grid-column: span 6; } .col-xl-7 { grid-column: span 7; } .col-xl-8 { grid-column: span 8; } .col-xl-9 { grid-column: span 9; } .col-xl-10 { grid-column: span 10; } .col-xl-11 { grid-column: span 11; } .col-xl-12 { grid-column: span 12; } } @media (min-width: 1025px) {.hide-pc {display: none !important; } } @media (max-width: 1024px) {.hide-mobile {display: none !important; } }