/* ==================================================
   Responsive Custom Styles for Tex Logistics
   Mobile, Tablet & Desktop Optimizations
   ================================================== */

/* ==================================================
   MOBILE STYLES (< 576px)
   ================================================== */
@media only screen and (max-width: 575.98px) {
  
  /* Header adjustments */
  header {
    position: relative !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    min-height: auto !important;
  }
  
  header.header-static {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  
  header .logo-mobile {
    max-width: 120px !important;
    display: block !important;
  }
  
  header .logo-main,
  header .logo-scroll {
    display: none !important;
  }
  
  /* Mobile menu button */
  #menu-btn {
    display: block !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  
  #menu-btn:active,
  #menu-btn:focus {
    outline: none !important;
    border: none !important;
  }
  
  #menu-btn:hover {
    opacity: 0.8 !important;
  }
  
  /* Assurer que le bouton menu est cliquable */
  .menu_side_area {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10001 !important;
    position: relative !important;
  }
  
  /* Mobile menu when open */
  header.menu-open {
    height: 100vh !important;
    overflow-y: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: rgba(24, 29, 36, 0.98) !important;
  }
  
  header.menu-open #mainmenu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 60px !important;
    padding: 20px 0 !important;
  }
  
  header.menu-open #mainmenu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  header.menu-open #mainmenu li a {
    display: block !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    text-align: left !important;
    width: 100% !important;
  }
  
  /* Hide menu by default on mobile */
  #mainmenu {
    display: none !important;
  }
  
  header.menu-open #mainmenu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 60px !important;
    padding: 20px 0 !important;
    position: relative !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Assurer que le menu est visible quand ouvert */
  header.menu-open .header-col-mid {
    display: block !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  header.menu-open .header-col-mid #mainmenu {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Assurer que le header-col-mid est visible */
  .header-col-mid {
    width: 100% !important;
  }
  
  header.menu-open .header-col-mid {
    display: block !important;
  }
  
  /* Icône du bouton menu avec Font Awesome (déjà défini plus haut) */
  
  /* Header flex adjustments */
  .de-flex {
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  
  .de-flex-col {
    flex: 0 0 auto !important;
  }
  
  .de-flex-col:first-child {
    flex: 1 1 auto !important;
  }
  
  .header-col-mid {
    display: none !important;
  }
  
  header.menu-open .header-col-mid {
    display: block !important;
    width: 100% !important;
    order: 3 !important;
  }
  
  .menu_side_area {
    order: 2 !important;
    margin-left: auto !important;
  }
  
  /* Hero section */
  #subheader {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }
  
  #subheader h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  #subheader .crumb {
    font-size: 12px !important;
    flex-wrap: wrap !important;
  }
  
  #subheader .crumb li {
    margin-right: 5px !important;
  }
  
  /* Subheader text overflow fix */
  #subheader h1.split {
    white-space: normal !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  
  /* Fix subheader container */
  #subheader .container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  
  #subheader .row {
    margin: 0 !important;
  }
  
  #subheader .col-lg-12 {
    padding: 0 15px !important;
  }
  
  /* Breadcrumb fixes */
  #subheader .crumb {
    margin-top: 10px !important;
    padding: 0 !important;
  }
  
  #subheader .crumb li {
    display: inline-block !important;
    margin-right: 8px !important;
    font-size: 12px !important;
  }
  
  /* Buttons */
  .btn-main {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }
  
  /* Sections spacing */
  section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Typography */
  h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 15px !important;
  }
  
  h2 {
    font-size: 24px !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 15px !important;
  }
  
  h2.split {
    white-space: normal !important;
    word-break: break-word !important;
  }
  
  h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }
  
  h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
  
  /* Fix text justification and spacing issues on mobile */
  p {
    text-align: left !important;
    text-justify: none !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    line-height: 1.6 !important;
  }
  
  /* Fix paragraphs in feature boxes and cards */
  .relative p,
  .ps-100 p,
  .col-lg-4 p,
  .col-md-6 p {
    text-align: left !important;
    text-justify: none !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    line-height: 1.6 !important;
  }
  
  /* Fix feature boxes with icons - spacing and text */
  .relative .ps-100 {
    padding-left: 70px !important;
    padding-right: 15px !important;
  }
  
  .relative .ps-100 h4 {
    margin-bottom: 10px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  
  .relative .ps-100 p {
    margin-bottom: 0 !important;
    text-align: left !important;
    text-justify: none !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
  }
  
  /* Fix icon positioning in feature boxes */
  .relative .abs.icon_check {
    left: 0 !important;
    top: 0 !important;
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Fix spacing in feature sections */
  .col-lg-4.col-md-6 {
    margin-bottom: 30px !important;
  }
  
  .col-lg-4.col-md-6:last-child {
    margin-bottom: 0 !important;
  }
  
  h5 {
    font-size: 16px !important;
  }
  
  p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }
  
  /* Footer */
  footer .row {
    text-align: center !important;
  }
  
  footer .col-md-6 {
    margin-bottom: 30px !important;
  }
  
  footer .social-icons {
    justify-content: center !important;
    margin-top: 20px !important;
  }
  
  /* Contact form */
  .form-control {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Cards and boxes */
  .card, .box-icon {
    margin-bottom: 20px !important;
  }
  
  /* Images */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Statistics */
  .de_count h3 {
    font-size: 32px !important;
  }
  
  /* Testimonials */
  .testimonial-item {
    padding: 20px !important;
  }
  
  /* Service cards */
  .service-item {
    margin-bottom: 30px !important;
  }
  
  /* Padding adjustments */
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Margin adjustments */
  .mb-4, .mb-5 {
    margin-bottom: 20px !important;
  }
  
  .mt-4, .mt-5 {
    margin-top: 20px !important;
  }
  
  /* Spacer adjustments */
  .spacer-single {
    height: 30px !important;
  }
  
  .spacer-double {
    height: 60px !important;
  }
  
  /* Text alignment */
  .text-lg-end, .text-lg-start {
    text-align: center !important;
  }
  
  /* Flex adjustments */
  .d-flex {
    flex-direction: column !important;
  }
  
  .d-flex.align-items-center {
    text-align: center !important;
  }
  
  /* Hero carousel text */
  .hero-text h1 {
    font-size: 28px !important;
  }
  
  .hero-text p {
    font-size: 14px !important;
  }
  
  /* Footer contact info */
  footer h3 {
    font-size: 18px !important;
  }
  
  /* Overlay sidebar */
  #extra-wrap {
    width: 100% !important;
  }
  
  /* Skill bars */
  .skill-bar {
    margin-bottom: 20px !important;
  }
  
  /* Feature boxes */
  .feature-box {
    margin-bottom: 30px !important;
    text-align: center !important;
  }
  
  /* Grid adjustments */
  .row.g-4 > * {
    margin-bottom: 20px !important;
  }
  
  /* CTA sections */
  .bg-color h3 {
    font-size: 20px !important;
  }
  
  .bg-color .row {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .bg-color .col-lg-3 {
    margin-top: 20px !important;
    text-align: center !important;
  }
  
  /* Navigation menu - already handled above */
  
  /* Logo sizes */
  .w-170px {
    width: 140px !important;
  }
  
  .w-200px {
    width: 160px !important;
  }
  
  /* Contact form */
  .bg-light.rounded-1 {
    padding: 30px 20px !important;
  }
  
  /* Contact info boxes */
  .relative.mb-4 {
    margin-bottom: 20px !important;
  }
  
  .ms-80px {
    margin-left: 0 !important;
    padding-left: 60px !important;
  }
  
  /* Hero carousel - Mobile fixes */
  .swiper {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  
  .swiper-wrapper {
    display: flex !important;
    width: 100% !important;
  }
  
  .swiper-slide {
    min-height: 500px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  
  .swiper-inner {
    min-height: 500px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 60px 0 !important;
  }
  
  .sw-caption {
    width: 100% !important;
    padding: 20px 15px !important;
  }
  
  .sw-text-wrapper {
    width: 100% !important;
    padding: 0 !important;
  }
  
  .sw-text-wrapper h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-transform: uppercase !important;
  }
  
  .sw-text-wrapper p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    text-align: left !important;
    text-justify: none !important;
    word-spacing: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Carousel navigation buttons - Mobile */
  .swiper-button-prev,
  .swiper-button-next {
    width: 35px !important;
    height: 35px !important;
    margin-top: 0 !important;
    top: auto !important;
    bottom: 30px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    z-index: 10 !important;
  }
  
  .swiper-button-prev {
    left: 20px !important;
  }
  
  .swiper-button-next {
    right: 20px !important;
  }
  
  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 16px !important;
    color: #fff !important;
    font-weight: bold !important;
  }
  
  /* Carousel pagination - Mobile */
  .swiper-pagination {
    bottom: 20px !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }
  
  .swiper-pagination-bullet-active {
    background: #fff !important;
    width: 12px !important;
    height: 12px !important;
  }
  
  /* Fix carousel container height */
  .mh-800 {
    min-height: 500px !important;
    max-height: 600px !important;
    height: auto !important;
  }
  
  /* Fix carousel overlay */
  .sw-overlay {
    opacity: 0.4 !important;
  }
  
  /* Fix carousel gradient */
  .gradient-edge-start {
    display: none !important;
  }
  
  /* Ensure carousel buttons are touch-friendly */
  .swiper-button-prev,
  .swiper-button-next {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Fix carousel text container */
  .sw-text-wrapper .btn-main {
    margin-top: 10px !important;
    display: inline-block !important;
  }
  
  /* Fix carousel row alignment */
  .sw-caption .row {
    margin: 0 !important;
  }
  
  .sw-caption .col-lg-6 {
    padding: 0 15px !important;
  }
  
  /* Subheader */
  #subheader {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
  }
  
  /* Marquee */
  .marquee-content {
    font-size: 14px !important;
  }
  
  /* Statistics grid */
  .de_count {
    margin-bottom: 30px !important;
  }
  
  /* Testimonial carousel */
  .owl-carousel .item {
    padding: 20px !important;
  }
  
  /* Service cards */
  .service-box {
    padding: 20px !important;
  }
  
  /* Feature icons */
  .icon-box {
    margin-bottom: 20px !important;
  }
  
  /* Tables */
  table {
    font-size: 12px !important;
  }
  
  /* Images in sections */
  .w-100.rounded-1 {
    margin-bottom: 20px !important;
  }
  
  /* Image overlays fix */
  .relative {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .relative .w-40 {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 2 !important;
  }
  
  .relative .w-100 {
    margin-bottom: 0 !important;
    order: 1 !important;
  }
  
  .relative .w-100.pe-5 {
    padding-right: 0 !important;
  }
  
  /* Remove absolute positioning on mobile */
  .relative .abs {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
  }
  
  .relative .end-0 {
    right: auto !important;
  }
  
  .relative .bottom-0 {
    bottom: auto !important;
  }
  
  /* Absolute positioned elements */
  .abs {
    position: relative !important;
    margin-bottom: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Fix for contact info icons */
  .relative.mb-4 {
    position: relative !important;
    padding-left: 0 !important;
  }
  
  .relative.mb-4 .abs {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
  }
  
  .ms-80px {
    margin-left: 50px !important;
    padding-left: 0 !important;
  }
  
  /* Section with images side by side */
  .row.align-items-center {
    flex-direction: column !important;
  }
  
  .row.align-items-center .col-lg-6 {
    margin-bottom: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Text columns */
  .col-lg-9,
  .col-lg-8 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Remove text column constraints on mobile */
  p.col-lg-8,
  p.col-lg-9 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Section content */
  section .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  section .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
  
  section .row > * {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* About section specific fixes */
  section .subtitle {
    margin-bottom: 10px !important;
    display: block !important;
  }
  
  section h2.split {
    margin-top: 10px !important;
    margin-bottom: 15px !important;
  }
  
  section p {
    text-align: left !important;
    line-height: 1.6 !important;
  }
  
  /* Padding adjustments */
  .p-60 {
    padding: 30px 20px !important;
  }
  
  .p-80 {
    padding: 40px 20px !important;
  }
  
  .pe-5 {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .pb-5 {
    padding-bottom: 15px !important;
  }
  
  .ps-lg-3 {
    padding-left: 0 !important;
  }
  
  /* Margin adjustments */
  .me-5 {
    margin-right: 0 !important;
    margin-bottom: 15px !important;
  }
  
  .mb-0 {
    margin-bottom: 15px !important;
  }
  
  /* Flex adjustments */
  .d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Grid columns */
  .col-lg-6,
  .col-lg-5,
  .col-lg-4,
  .col-lg-3 {
    margin-bottom: 30px !important;
  }
  
  /* Offset adjustments */
  .offset-lg-7,
  .offset-lg-6,
  .offset-lg-5 {
    margin-left: 0 !important;
  }
  
  /* Section spacing */
  .spacer-single {
    height: 30px !important;
    clear: both !important;
  }
  
  /* Row adjustments */
  .row.g-4 {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
  
  .row.g-4 > * {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* Container padding */
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Text alignment fixes */
  .text-lg-end,
  .text-lg-start {
    text-align: center !important;
  }
  
  /* Image positioning fixes */
  .relative {
    position: relative !important;
  }
  
  .relative .w-100 {
    width: 100% !important;
  }
  
  /* Prevent text overflow */
  * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Fix for split text */
  .split {
    white-space: normal !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  
  /* Header specific fixes */
  header .de-flex {
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  header .de-flex-col:first-child {
    flex: 0 0 auto !important;
  }
  
  /* Ensure menu button is visible and clickable */
  #menu-btn {
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  
  /* Fix menu button icon */
  #menu-btn:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    content: "\f0c9" !important;
    font-size: 24px !important;
    color: #fff !important;
    display: block !important;
    line-height: 1 !important;
  }
  
  #menu-btn.menu-open:before {
    content: "\f00d" !important;
  }
  
  /* Menu items styling when open */
  header.menu-open #mainmenu li a.menu-item {
    color: #fff !important;
    padding: 15px 20px !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }
  
  header.menu-open #mainmenu li:last-child a {
    border-bottom: none !important;
  }
  
  /* Body scroll lock when menu is open */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  
  /* Content margin when header is fixed */
  #content {
    margin-top: 0 !important;
  }
  
  /* Subheader spacing fix - reduce gap between header and title */
  #subheader {
    margin-top: 20px !important;
    padding-top: 80px !important;
    padding-bottom: 50px !important;
  }
  
  #subheader.sm-mt-90 {
    margin-top: 20px !important;
  }
  
  /* Section margin fixes */
  section.m-3 {
    margin: 0 !important;
  }
  
  /* Header bottom spacing */
  header {
    margin-bottom: 0 !important;
    padding-bottom: 15px !important;
  }
  
  header.header-static {
    margin-bottom: 0 !important;
  }
  
  /* Content spacing */
  #content {
    margin-top: 0 !important;
  }
  
  /* Container max width */
  .container {
    max-width: 100% !important;
  }
}

/* ==================================================
   TABLET STYLES (576px - 991px)
   ================================================== */
@media only screen and (min-width: 576px) and (max-width: 991.98px) {
  
  /* Header */
  header.header-static {
    padding-top: 15px !important;
  }
  
  header .logo-mobile {
    max-width: 150px !important;
  }
  
  /* Hero section */
  #subheader h1 {
    font-size: 42px !important;
  }
  
  /* Typography */
  h1 {
    font-size: 42px !important;
  }
  
  h2 {
    font-size: 36px !important;
  }
  
  h3 {
    font-size: 24px !important;
  }
  
  /* Sections spacing */
  section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  
  /* Footer */
  footer .col-md-6 {
    margin-bottom: 40px !important;
  }
  
  /* Cards grid */
  .row.g-4 > [class*="col-"] {
    margin-bottom: 30px !important;
  }
  
  /* Buttons */
  .btn-main {
    padding: 14px 28px !important;
  }
  
  /* Statistics */
  .de_count h3 {
    font-size: 40px !important;
  }
  
  /* Service items */
  .service-item {
    margin-bottom: 40px !important;
  }
  
  /* Container padding */
  .container {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  
  /* Text alignment */
  .text-lg-end {
    text-align: center !important;
    margin-top: 20px !important;
  }
  
  /* Fix text justification on tablet */
  p {
    text-align: left !important;
    text-justify: none !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
  }
  
  .relative p,
  .ps-100 p,
  .col-lg-4 p,
  .col-md-6 p {
    text-align: left !important;
    text-justify: none !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
  }
  
  /* Hero carousel - Tablet fixes */
  .swiper-slide {
    min-height: 600px !important;
  }
  
  .swiper-inner {
    min-height: 600px !important;
    padding: 80px 0 !important;
  }
  
  .sw-text-wrapper h1 {
    font-size: 36px !important;
    line-height: 1.3 !important;
  }
  
  .sw-text-wrapper p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
  }
  
  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 18px !important;
  }
  
  .mh-800 {
    min-height: 600px !important;
    max-height: 700px !important;
  }
  
  /* Hero carousel */
  .hero-text h1 {
    font-size: 36px !important;
  }
  
  /* Feature boxes */
  .feature-box {
    margin-bottom: 40px !important;
  }
  
  /* CTA sections */
  .bg-color .row {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .bg-color .col-lg-3 {
    margin-top: 20px !important;
  }
  
  /* Footer */
  footer .row.g-4 {
    text-align: center !important;
  }
  
  /* Spacer adjustments */
  .spacer-single {
    height: 40px !important;
  }
  
  /* Images */
  .w-40 {
    width: 100% !important;
    margin-top: 20px !important;
  }
  
  /* Half fluid sections */
  .half-fluid .left-half,
  .half-fluid .right-half {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
  }
  
  .half-fluid .offset-lg-7 {
    margin-left: 0 !important;
  }
  
  /* Contact form adjustments */
  .form-control {
    margin-bottom: 15px !important;
  }
  
  /* Contact info */
  .relative.mb-4 .ms-80px {
    padding-left: 50px !important;
  }
  
  /* Hero sections */
  .mh-800 {
    min-height: 500px !important;
  }
  
  /* Text columns */
  .col-lg-9,
  .col-lg-8 {
    margin-bottom: 20px !important;
  }
  
  /* Buttons in rows */
  .row .btn-main {
    width: 100% !important;
    text-align: center !important;
  }
  
  /* Footer widgets */
  footer .widget {
    margin-bottom: 30px !important;
  }
  
  /* Social icons */
  .social-icons a {
    margin: 5px !important;
  }
  
  /* Skill bars */
  .skill-bar h5 {
    font-size: 14px !important;
  }
  
  /* Counters */
  .de_count {
    text-align: center !important;
  }
  
  /* Images overlay */
  .position-lg-absolute {
    position: relative !important;
  }
  
  /* Text alignment */
  .text-lg-end {
    text-align: center !important;
  }
  
  /* Padding utilities */
  .pe-5 {
    padding-right: 0 !important;
  }
  
  .ps-lg-3 {
    padding-left: 0 !important;
  }
  
  /* Margin utilities */
  .me-lg-3 {
    margin-right: 0 !important;
  }
}

/* ==================================================
   SMALL TABLET STYLES (768px - 991px)
   ================================================== */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  
  /* Header */
  header .logo-main {
    max-width: 180px !important;
  }
  
  /* Typography */
  h1 {
    font-size: 48px !important;
  }
  
  h2 {
    font-size: 40px !important;
  }
  
  /* Container */
  .container {
    max-width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  
  /* Subheader spacing */
  #subheader {
    margin-top: 40px !important;
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }
  
  #subheader.sm-mt-90 {
    margin-top: 40px !important;
  }
  
  /* Header spacing */
  header.header-static {
    margin-bottom: 0 !important;
  }
  
  /* Grid adjustments */
  .col-lg-6 {
    margin-bottom: 30px !important;
  }
  
  /* Footer */
  footer .row.g-4 {
    flex-direction: row !important;
  }
  
  footer .col-md-6:first-child {
    margin-bottom: 0 !important;
  }
  
  /* CTA sections */
  .bg-color .row {
    flex-direction: row !important;
    align-items: center !important;
  }
  
  .bg-color .col-lg-3 {
    margin-top: 0 !important;
    text-align: right !important;
  }
}

/* ==================================================
   DESKTOP STYLES (992px+)
   ================================================== */
@media only screen and (min-width: 992px) {
  
  /* Ensure proper spacing */
  section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  
  /* Container max width */
  .container {
    max-width: 1200px !important;
  }
  
  /* Footer adjustments */
  footer .row.g-4 {
    align-items: flex-start !important;
  }
  
  /* Text alignment */
  .text-lg-end {
    text-align: right !important;
  }
  
  .text-lg-start {
    text-align: left !important;
  }
  
  /* CTA sections */
  .bg-color .row {
    flex-direction: row !important;
  }
}

/* ==================================================
   LARGE DESKTOP STYLES (1200px+)
   ================================================== */
@media only screen and (min-width: 1200px) {
  
  .container {
    max-width: 1304px !important;
  }
  
  section {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
}

/* ==================================================
   LANDSCAPE ORIENTATION (Tablets)
   ================================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* Reduce vertical spacing in landscape */
  section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  
  .spacer-single {
    height: 30px !important;
  }
  
  .spacer-double {
    height: 60px !important;
  }
}

/* ==================================================
   PRINT STYLES
   ================================================== */
@media print {
  
  header,
  footer,
  .btn-main,
  .social-icons,
  #back-to-top {
    display: none !important;
  }
  
  body {
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }
  
  h1, h2, h3 {
    page-break-after: avoid !important;
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid !important;
  }
}

/* ==================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================== */
@media (prefers-reduced-motion: reduce) {
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================================
   HIGH CONTRAST MODE
   ================================================== */
@media (prefers-contrast: high) {
  
  .btn-main {
    border: 2px solid currentColor !important;
  }
  
  a {
    text-decoration: underline !important;
  }
}

/* ==================================================
   UTILITY CLASSES FOR RESPONSIVE
   ================================================== */

/* Hide on mobile */
@media only screen and (max-width: 575.98px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet */
@media only screen and (min-width: 576px) and (max-width: 991.98px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Hide on desktop */
@media only screen and (min-width: 992px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Show only on mobile */
.show-mobile-only {
  display: none !important;
}

@media only screen and (max-width: 575.98px) {
  .show-mobile-only {
    display: block !important;
  }
}

/* Center text on mobile */
@media only screen and (max-width: 575.98px) {
  .text-center-mobile {
    text-align: center !important;
  }
}

/* Full width on mobile */
@media only screen and (max-width: 575.98px) {
  .w-100-mobile {
    width: 100% !important;
  }
}