/*
TemplateMo 574 Mexant - MODIFIED FOR AESURUS (UPSCALE VERSION)
Theme: Blue, Black, White, Red-Orange
*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio
--------------------------------------------- */

/* ---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");

/* ---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 26px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #0a0a0a; 
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 24px; /* Scaled Up */
  line-height: 38px; /* Scaled Up */
  color: #333333; 
}

img {
  width: 100%;
  overflow: hidden;
}

/* ---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #ff4500; 
  color: #fff;
}

::-moz-selection {
  background: #ff4500; 
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.green-button a {
  font-size: 20px; /* Scaled Up */
  color: #fff;
  background-color: #0d6efd; 
  padding: 16px 40px; /* Scaled Up */
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.green-button a:hover {
  opacity: 0.9;
}

.orange-button a {
  font-size: 20px; /* Scaled Up */
  color: #fff;
  background-color: #ff4500; 
  padding: 16px 40px; /* Scaled Up */
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.orange-button a:hover {
  opacity: 0.9;
}

section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 70px;
}

.section-heading h6 {
  font-size: 22px; /* Scaled Up */
  text-transform: uppercase;
  color: #ff4500; 
  font-weight: 700;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 60px; /* Scaled Up */
  font-size: 52px; /* Scaled Up */
  font-weight: 700;
  text-transform: capitalize;
  color: #0a0a0a; 
}

.section-heading p {
  margin-top: 30px;
}


/* ---------------------------------------------
header
--------------------------------------------- 
*/
.background-header {
  background-color: #0a0a0a; 
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3)!important;
}
.header-logo {
  max-height: 70px; /* Keeps the logo contained */
  width: auto; /* Maintains the aspect ratio */
  margin-top: 0px; /* Centers it vertically before scrolling */
  border-radius: 8px; /* Optional: adds a slight smooth curve to the image corners */
  transition: all 0.3s ease;
}
.background-header .header-logo {
  max-height: 50px;
  margin-top: 12px;
}

/* Mobile adjustment */
@media (max-width: 767px) {
  .header-logo {
    max-height: 50px;
    margin-top: 25px;
  }
}
.header-area {
  background-image: url(../images/header-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  height: 110px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 120px;
  color: #fff;
  font-size: 36px; /* Scaled Up */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 80px;
  width: 160px;
}

.background-header .nav {
  margin-top: 18px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 40px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 25px;
  padding-right: 25px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 400; /* Increased weight slightly for larger text */
  font-size: 20px; /* Scaled Up */
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:last-child a {
  font-size: 18px; /* Scaled Up */
  color: #fff;
  background-color: #0d6efd; 
  padding: 12px 24px !important; /* Scaled Up */
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  height: auto;
  line-height: 25px;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.header-area .main-nav .nav li:last-child a:hover {
  color: #fff;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 0px;
  padding-top: 0px !important;
  height: 50px;
}


.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 25px !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #ff4500; 
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #ff4500; 
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 16px; /* Scaled Up */
  color: #fff;
  position: absolute;
  right: 2px;
  top: 12px;
}

/* MASSIVELY INCREASED DROPDOWN BOX WIDH */
.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 260px; /* Scaled up from 140px to fit bigger text */
  background-color: #fff;
  box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.15); /* Stronger shadow */
  overflow: hidden;
  top: 50px; /* Adjusted spacing */
  border-radius: 8px; /* Softer rounded corners */
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

/* BIGGER DROPDOWN TEXT */
.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #0a0a0a!important;
  padding-left: 25px;
  height: 50px; /* Taller links */
  line-height: 50px; /* Taller links */
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 18px; /* Scaled Up from 12px! */
  font-weight: 500;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #ff4500!important; 
  padding-left: 30px; /* Increased indent on hover */
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 4px; /* Thicker hover line */
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #ff4500; 
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #0a0a0a;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #ff4500!important; 
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
    line-height: 80px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 60px !important;
    line-height: 60px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
    font-size: 22px !important; /* Larger mobile menu links */
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #ff4500!important; 
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 18px; /* Larger mobile submenu text */
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #0a0a0a;
    right: 30px;
    font-size: 18px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* ---------------------------------------------
banner
--------------------------------------------- 
*/

.swiper-container {
  height: calc(100vh - 0px);
  margin: 0px;
  background-color: #0a0a0a; 
}

.swiper-slide {
  overflow: hidden;
}

.slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}

.swiper-slide-active h2 {
  animation: fadeInLeft .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active p {
  animation: fadeInRight .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active .div-dec {
  animation: fadeIn .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active .buttons .green-button,
.swiper-slide-active .buttons .orange-button {
  animation: fadeInUp .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.slide-inner .header-text {
  position: absolute;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
}
/* Fix for Logo/Images placed inside the Hero Slider */
.slide-inner .header-text img {
  max-width: 400px; /* This stops the logo from blowing up. Adjust this number to make it bigger or smaller! */
  width: 100%; 
  height: auto;
  display: block;
  margin-bottom: 30px; /* Adds breathing room between the logo and the text/buttons below it */
  border-radius: 12px; /* Smooths the sharp corners of your .jpg */
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Optional: Gives the logo a cool floating shadow */
}

/* Mobile fix for the slider logo */
@media (max-width: 767px) {
  .slide-inner .header-text img {
    max-width: 250px; /* Shrinks the logo so it fits perfectly on phone screens */
    margin-left: auto;
    margin-right: auto; /* Centers it on mobile */
  }
}

.slide-inner .header-text h2 {
  position: relative;
  z-index: 2;
  font-size: 68px; /* Scaled Up */
  color: #fff;
  font-weight: 700;
  opacity: 1;
  visibility: visible;
  line-height: 84px; /* Scaled Up */
  margin-bottom: 40px;
}

.slide-inner .header-text .div-dec {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background-color: #0d6efd; 
  margin-bottom: 40px;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text p {
  color: #fff;
  margin-right: 60px;
  margin-bottom: 50px;
  opacity: 1;
  visibility: visible;
  font-size: 24px; /* Scaled Up */
}

.slide-inner .header-text h2 em {
  font-style: normal;
  color: #ff4500; 
}
.slide-inner .header-text .buttons {
  display: flex;
  gap: 20px; /* Creates perfect, even spacing between the buttons */
  opacity: 1;
  visibility: visible;
  margin-top: 30px; /* Adds breathing room below your text/logo */
}

.slide-inner .header-text .buttons .green-button,
.slide-inner .header-text .buttons .orange-button {
  margin: 0; /* Clears out the old messy margins */
  float: none; /* Kills the float that was breaking the layout */
  padding-left: 20px;
  padding-right: 30px;
}

/*
---------------------------------------------
services
---------------------------------------------
*/ 

section.services {
  margin-top: 90px;
}

.services .service-item {
  border-radius: 5px;
  padding: 40px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.services .service-item:hover i {
  margin-top: 15px;
}

.services .service-item h4 {
  font-size: 32px; /* Scaled Up */
  font-weight: 600;
  margin-bottom: 20px;
}

.services .service-item i {
  transition: all .5s;
  float: left;
  font-size: 64px;
  color: #0d6efd; 
  margin-bottom: 30px;
  margin-right: 30px;
}



/*
---------------------------------------------
cta
---------------------------------------------
*/

section.simple-cta {
  background-image: url(../images/cta-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 80px 0px;
}

section.simple-cta .left-image {
  margin-right: 45px;
}

section.simple-cta h4 {
  font-size: 44px; /* Scaled Up */
  font-weight: 700;
  color: #fff;
  line-height: 60px; /* Scaled Up */
}

section.simple-cta h4 em {
  font-style: normal;
  color: #0d6efd; 
}

section.simple-cta h4 strong {
  color: #ff4500; 
  font-weight: 700;
}

section.simple-cta p {
  color: #fff;
  margin-top: 30px;
  margin-bottom: 40px;
}

section.simple-cta .buttons {
  display: flex;
  justify-content: end;
}

section.simple-cta .buttons .orange-button {
  margin-left: 20px;
}

section.simple-cta .buttons .orange-button,
section.simple-cta .buttons .green-button {
  margin-top: 25px;
}



/*
---------------------------------------------
about us
---------------------------------------------
*/

section.about-us {
  margin-top: 90px;
}

section.about-us .section-heading {
  padding-top: 30px;
}

section.about-us .naccs {
  position: relative;
}

section.about-us .naccs .menu div {
  padding: 15px 30px;
  display: inline-block;
  text-align: center;
  border-radius: 5px !important;
  margin-right: 30px;
  font-size: 24px; /* Scaled Up */
  color: #0a0a0a;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 600;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

section.about-us .naccs .menu div.active {
  color: #ff4500; 
}

section.about-us ul.nacc {
  margin-top: 50px !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

section.about-us ul.nacc li {
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.about-us ul.nacc li .main-list,
section.about-us ul.nacc li .list-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 25px;
  padding-bottom: 25px;
}

section.about-us ul.nacc li .last-item {
  margin-bottom: 0px;
}

section.about-us ul.nacc li span.title {
  font-size: 22px; /* Scaled Up */
  color: #0a0a0a;
  font-weight: 600;
  display: inline-block;
  width: 24%;
}

section.about-us ul.nacc li span.item-title {
  color: #0d6efd !important; 
  font-weight: 600 !important;
}

section.about-us ul.nacc li span.item {
  font-size: 20px; /* Scaled Up */
  color: #333;
  font-weight: 400;
  display: inline-block;
  width: 24%;
}

section.about-us ul.nacc li.active {
  position: relative;
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

section.about-us .right-content {
  margin-left: 60px;
}

section.about-us .right-content h4 {
  font-size: 32px; /* Scaled Up */
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 40px;
}

section.about-us .right-content p {
  margin-bottom: 50px;
}


/*
---------------------------------------------
calculator
---------------------------------------------
*/

section.calculator {
  margin-top: 150px;
  background-image: url(../images/calculator-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 80px 0px;
}

section.calculator .left-image {
  margin: -110px 45px -80px 0px;
}

section.calculator .section-heading {
  text-align: left;
}

section.calculator .section-heading h4 {
  color: #fff;
}

#calculate label {
  color: #fff;
  font-size: 20px; /* Scaled Up */
  margin-bottom: 8px;
}

#calculate input,
#calculate select {
  background-color: rgba(26, 26, 26, 0.7); 
  border: none;
  border-radius: 5px;
  width: 100%;
  height: 56px; /* Taller input fields */
  color: #fff;
  font-size: 20px; /* Scaled Up */
  margin-bottom: 30px;
  outline: none;
  padding-left: 15px; /* Better padding for larger text */
}

#calculate select {
  cursor: pointer;
  color: #fff;
}
#calculate select option {
  color: #333;
}

#calculate button.orange-button {
  font-size: 20px; /* Scaled Up */
  color: #fff;
  background-color: #ff4500; 
  padding: 16px 40px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border: none;
  transition: all .3s;
  width: 100%; /* Makes button stretch fully */
}

#calculate button.orange-button:hover {
  opacity: 0.9;
}



/* ---------------------------------------------
testimonials
--------------------------------------------- 
*/

section.testimonials {
  margin-top: 90px;
}

section.testimonials .section-heading {
  padding-top: 30px;
}

.testimonials .item {
  border-radius: 15px;
  padding: 50px 320px 50px 50px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  margin: 15px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  padding-top: 35px;
}

.testimonials .item i {
  width: 70px;
  height: 70px;
  background-color: #0d6efd; 
  display: inline-block;
  text-align: center;
  line-height: 70px;
  color: #fff;
  font-size: 44px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.testimonials .item p {
  font-size: 22px; /* Scaled Up */
  line-height: 34px;
  font-style: italic;
}

.testimonials .item h4 {
  margin-top: 30px;
  font-size: 30px; /* Scaled Up */
  font-weight: 600;
  position: relative;
}

.testimonials .item span {
  margin-top: 5px;
  display: block;
  font-size: 22px; /* Scaled Up */
  font-weight: 600;
  color: #0d6efd; 
}

.testimonials .item img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 300px;
  border-radius: 5px;
}

.testimonials .owl-dots {
  text-align: center;
  margin-top: 30px;
}

.testimonials .owl-dots .owl-dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 69, 0, 0.4); 
  border-radius: 50%;
  margin: 0px 6px;
}

.testimonials .owl-dots .active {
  background-color: #ff4500; 
}



/* ---------------------------------------------
partners
--------------------------------------------- 
*/

section.partners {
  background-color: #0a0a0a; 
  padding: 80px 0px;
}

section.partners .item {
  margin: 0px 15px;
  cursor: pointer;
  transition: all .3s;
}

section.partners .item:hover {
  opacity: 0.75;
}



/* ---------------------------------------------
footer 
--------------------------------------------- 
*/

footer {
  background-color: #050505; 
  text-align: center;
  padding: 30px 0px;
  border-top: 2px solid #0d6efd;
}

footer p {
  color: #fff;
  font-weight: 400;
  font-size: 20px; /* Scaled Up */
}

footer p a {
  color: #ff4500; 
}



/* ---------------------------------------------
page heading
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/heading-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 215px 0px 120px 0px;
  text-align: center;
}

.page-heading h2 {
  font-size: 68px; /* Scaled Up */
  color: #fff;
  font-weight: 700;
}

.page-heading .div-dec {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background-color: #fff;
  margin: 20px auto 0 auto;
}



/* ---------------------------------------------
about us page
--------------------------------------------- 
*/

section.top-section .left-image img {
  border-radius: 10px;
}

section.top-section .accordions {
  border-radius: 5px;
  padding: 50px 40px;
  background-color: #fff;
  margin-left: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.accordions .accordion {
  border-bottom: 1px solid #eee;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 35px 0px !important;  
  font-size: 28px; /* Scaled Up */
  font-weight: 600;
  color: #0a0a0a;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  
}
@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.5rem; /* Scaled Up */
  }
}
.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}
.accordion-head.is-open {
  color: #0d6efd; 
  border-bottom: none;
}
.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  padding: 0px;
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}
.accordion-body > .content p {
  padding: 0px 0px 30px 0px;
  padding-top: 0;
}

section.what-we-do {
  margin-bottom: -30px;
}

.what-we-do .left-content {
  margin-right: 60px;
}

.what-we-do .left-content h4 {
  font-size: 32px; /* Scaled Up */
  font-weight: 700;
  line-height: 44px;
  margin-bottom: 40px;
}

.what-we-do .left-content p {
  margin-bottom: 40px;
}

.what-we-do .right-items .item {
  border-radius: 5px;
  padding: 40px 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  position: relative;
}

.what-we-do .right-items .item em {
  position: absolute;
  font-style: normal;
  font-size: 52px; /* Scaled Up */
  color: #0d6efd; 
  font-weight: 600;
  right: 15px;
  top: 5px;
  transition: all .3s;
}

.what-we-do .right-items .item h4 {
  font-size: 28px; /* Scaled Up */
  font-weight: 600;
  margin-bottom: 22px;
}

.what-we-do .right-items .item:hover em {
  top: 10px;
}



/* ---------------------------------------------
services page
--------------------------------------------- 
*/

.main-services .service-item {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #f0f7ff; 
}

.main-services .last-service {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.main-services  .left-image {
  margin-right: 15px;
}

.main-services  .left-image img {
  border-radius: 5px;
}

.main-services  .right-image {
  margin-left: 15px;
}

.main-services  .right-image img {
  border-radius: 5px;
}

.main-services .right-text-content {
  margin-left: 15px;
}

.main-services .left-text-content {
  margin-right: 15px;
}

.main-services .right-text-content i,
.main-services .left-text-content i {
  font-size: 72px; /* Scaled Up */
  color: #0d6efd; 
  background-color: #f0f7ff; 
  width: 140px;
  height: 140px;
  text-align: center;
  display: inline-block;
  line-height: 140px;
  border-radius: 5px;
}

.main-services .right-text-content h4,
.main-services .left-text-content h4 {
  font-size: 46px; /* Scaled Up */
  font-weight: 700;
  color: #0a0a0a;
  margin-top: 40px;
  margin-bottom: 30px;
}

section.service-details .naccs {
  position: relative;
}

section.service-details .naccs .menu {
  text-align: center;
}

section.service-details .naccs .menu div {
  padding: 15px 30px;
  display: inline-block;
  text-align: center;
  border-radius: 5px !important;
  margin-right: 30px;
  font-size: 24px; /* Scaled Up */
  color: #0a0a0a;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 600;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

section.service-details .naccs .menu div.active {
  color: #ff4500;
}

section.service-details ul.nacc {
  margin-top: 50px !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

section.service-details ul.nacc li {
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.service-details ul.nacc li .left-image {
  position: absolute;
  margin-right: 50px;
  top: 50%;
  transform: translateY(-50%);
}

section.service-details ul.nacc li .left-image img {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

section.service-details ul.nacc li .right-content {
  padding: 50px 50px 50px 0px;
  margin-left: 470px;
}

section.service-details ul.nacc li .right-content h4 {
  font-size: 32px; /* Scaled Up */
  color: #0a0a0a;
  margin-bottom: 25px;
  font-weight: 700;
  line-height: 44px;
  margin-right: 120px;
}

section.service-details ul.nacc li .right-content ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

section.service-details ul.nacc li .right-content span {
  display: block;
  font-size: 20px; /* Scaled Up */
  font-weight: 500;
  color: #0a0a0a;
  font-style: italic;
  margin-bottom: 12px;
}

section.service-details ul.nacc li .right-content .last-span {
  margin-bottom: 0px;
}

section.service-details ul.nacc li .right-content p {
  margin-bottom: 30px;
}

section.service-details ul.nacc li.active {
  position: relative;
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}



/* ---------------------------------------------
contact us page
--------------------------------------------- 
*/

section.map .info-item {
  text-align: center;
  padding: 40px 30px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: -60px;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
  z-index: 2;
  transition: all .5s;
}

section.map .info-item:hover {
  margin-top: -70px;
}

section.map .info-item i {
  font-size: 42px; /* Scaled Up */
  color: #0d6efd; 
  margin-bottom: 25px;
}

section.map .info-item h4 {
  font-size: 26px; /* Scaled Up */
  color: #0a0a0a;
  font-weight: 600;
  margin-bottom: 12px;
}

section.map .info-item a {
  font-size: 22px; /* Scaled Up */
  font-weight: 600;
  color: #0d6efd; 
  transition: all 0.3s;
}

section.map .info-item a:hover {
  color: #ff4500; 
}

#contact input {
  width: 100%;
  height: 60px; /* Taller input fields */
  background-color: #f7f7f7;
  color: #0a0a0a;
  border-radius: 5px;
  border: none;
  padding: 0px 15px;
  font-size: 20px; /* Scaled Up */
  outline: none;
  margin-bottom: 30px;
}

#contact textarea {
  width: 100%;
  height: 200px; /* Taller textarea */
  min-height: 180px;
  background-color: #f7f7f7;
  color: #0a0a0a;
  border-radius: 5px;
  border: none;
  padding: 15px 15px;
  font-size: 20px; /* Scaled Up */
  outline: none;
  margin-bottom: 30px;
}

#contact input::placeholder, 
#contact textarea::placeholder {
  color: #666;
}
#contact button.orange-button {
  font-size: 20px; /* Scaled Up */
  color: #fff;
  background-color: #ff4500; 
  padding: 16px 40px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border: none;
  transition: all .3s;
  width: 100%;
}

#contact button.orange-button:hover {
  background-color: #0d6efd; 
}


/* ---------------------------------------------
responsive
--------------------------------------------- 
*/

/* ---------------------------------------------
responsive
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li ul li:last-child {
    display: inline-block;
  }
  .header-area {
    background-color: #0a0a0a;
  }
  .slide-inner .header-text {
    width: 90%;
  }
  .slide-inner .header-text h2 {
    font-size: 48px; /* Scaled down for tablet */
    line-height: 60px;
  }
  .simple-cta {
    text-align: center;
  }
  section.simple-cta .buttons {
    justify-content: center;
  }
  section.about-us .naccs .menu div,
  section.service-details .naccs .menu div {
    margin-right: 15px;
    font-size: 16px; 
    padding: 12px 15px;
  }
  section.about-us .right-content {
    margin-left: 0px;
    margin-top: 60px;
  }
  section.calculator .left-image {
    display: none;
  }
  .testimonials .item img {
    max-width: 200px;
    right: 50px;
  }
  section.partners .item {
    margin:15px; 
  }
  section.top-section .accordions {
    margin-left: 0px;
    margin-top: 45px;
  }
  .what-we-do .left-content {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  .main-services .left-image {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .main-services .right-text-content {
    margin-left: 0px;
  }
  .main-services .right-image {
    margin-left: 0px;
    margin-top: 30px;
  }
  section.service-details ul.nacc li .left-image {
    position: relative;
    margin-right: 0px;
    transform: translateY(0px);
  }
  section.service-details ul.nacc li .left-image img {
    border-radius: 15px;
  }
  section.service-details ul.nacc li .right-content {
    padding: 30px;
    margin-left: 0px;
  }
  section.service-details ul.nacc li .right-content h4 {
    margin-right: 0px;
  }
  section.service-details ul.nacc li.active {
    display: inline-block;
  }
  section.service-details ul.nacc li {
    display: none;
  }
  section.map .info-item {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  /* GLOBAL MOBILE FONT REDUCTIONS */
  p { font-size: 16px !important; line-height: 26px !important; }
  h4 { font-size: 26px !important; line-height: 36px !important; }
  .section-heading h4 { font-size: 32px !important; line-height: 42px !important; }
  .page-heading h2 { font-size: 42px !important; }
  
  /* HEADER & NAV */
  .header-logo { max-height: 45px !important; margin-top: 18px !important; }
  .header-area .main-nav .logo { line-height: 80px; font-size: 24px; }
  .background-header .main-nav .logo { line-height: 80px; }
  .header-area { background-color: #f7f7f7; padding: 0px 15px; height: 80px; text-align: left; }
  .header-area .menu-trigger { display: block !important; top: 20px; }
  .header-area .main-nav .nav li.has-sub ul.sub-menu { display: none; }
  .header-area.header-sticky .nav { margin-top: 80px !important; }
  .header-area .main-nav .nav li a { font-size: 18px !important; height: 50px !important; line-height: 50px !important; }
  
  /* HERO BANNER FIXES */
  .slide-inner .header-text { text-align: center; width: 100%; margin-left: 0; padding: 0 20px; }
  .slide-inner .header-text h2 { font-size: 38px !important; line-height: 50px !important; margin-bottom: 20px; }
  .slide-inner .header-text p { display: block !important; margin-right: 0; margin-bottom: 25px; }
  .slide-inner .header-text .div-dec { margin-left: auto; margin-right: auto; }
  
  /* MOBILE BUTTONS */
  .slide-inner .header-text .buttons { display: flex; flex-direction: column; gap: 15px; width: 100%; }
  .slide-inner .header-text .buttons .green-button { margin-right: 0; float: none; }
  .green-button a, .orange-button a, #calculate button.orange-button { font-size: 16px !important; padding: 14px 20px !important; width: 100%; text-align: center; display: block; }
  
  /* SERVICES & CONTENT GRIDS */
  .services .service-item { padding: 30px 20px; text-align: center; }
  .services .service-item i { float: none; display: inline-block; margin-right: 0; margin-bottom: 20px; font-size: 50px; }
  .services .service-item h4 { font-size: 22px !important; }
  
  .main-services .right-text-content h4, .main-services .left-text-content h4 { font-size: 26px !important; margin-top: 20px; }
  .main-services .right-text-content i, .main-services .left-text-content i { width: 80px; height: 80px; line-height: 80px; font-size: 40px; margin-bottom: 15px; }
  
  /* ACCORDIONS & TABS */
  .accordion-head { font-size: 20px !important; }
  section.about-us .naccs .menu div { display: block; width: 100%; margin-right: 0; margin-bottom: 10px; font-size: 16px; padding: 12px; }
  section.about-us ul.nacc li span.title, section.about-us ul.nacc li span.item { font-size: 14px !important; width: 48%; display: inline-block; margin-bottom: 10px; }
  
  /* TESTIMONIALS & FORMS */
  .testimonials .item { padding: 30px 20px !important; text-align: center; }
  .testimonials .item i { margin-bottom: 20px; }
  .testimonials .item img { position: relative; max-width: 120px; right: auto; top: auto; transform: none; margin-top: 20px; }
  
  #contact input, #contact textarea, #calculate input, #calculate select { font-size: 16px !important; height: auto !important; padding: 15px !important; }
}
/* =========================================
   AESURUS GLOBAL MOBILE ARMOR
   ========================================= */

/* 1. Prevent Horizontal Scrolling (The #1 Mobile Bug) */
html, body {
    max-width: 100vw;
    overflow-x: clip !important; /* CHANGED FROM hidden TO clip */
}

/* 2. Responsive Image & Video Failsafe */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* 3. Mobile Navigation Menu Tweaks & Failsafe */
@media (max-width: 991px) {
    /* Force the burger icon to stay on top and be clickable */
    .header-area .main-nav .menu-trigger {
        display: block !important;
        z-index: 9999 !important; /* Forces it to the very top layer */
        position: absolute;
        right: 20px;
        top: 30px; 
    }
    
    /* Ensure the logo doesn't cover the burger menu */
    .header-area .main-nav .logo {
        z-index: 9990 !important;
        position: relative;
    }

    /* Style the dropdown menu and position it correctly */
    .header-area .main-nav .nav {
        position: absolute;
        top: 80px; /* Pushes dropdown right below the header */
        width: 100%;
        background-color: #0a0a0a !important;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.8);
        padding: 15px !important;
        z-index: 9995 !important;
        /* Do NOT use display: flex or block here, let the jQuery slideToggle handle it! */
    }
    
    .header-area .main-nav .nav li a {
        color: #fff !important;
        border-bottom: 1px solid #222;
        padding: 15px 0 !important;
        display: block;
    }
    
    .header-area .main-nav .nav li:last-child a {
        border-bottom: none;
    }
}

/* 4. Touch-Target Optimization for Phones */
@media (max-width: 767px) {
    /* Makes buttons bigger and easier to tap with a thumb */
    .btn, button {
        padding: 15px 25px !important;
        font-size: 16px !important;
        width: 100%; /* Makes main calls-to-action full width on phones */
        margin-bottom: 10px;
    }
    
    /* Adds more breathing room between sections on small screens */
    section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Fix for form inputs on iOS (prevents auto-zooming) */
    input[type="text"], 
    input[type="email"], 
    select, 
    textarea {
        font-size: 16px !important; 
    }
}/* =========================================
   AESURUS DESKTOP NAVBAR ENHANCEMENTS
   ========================================= */

@media (min-width: 992px) {
    /* 1. Make the links larger, bolder, and space them out */
    .header-area .main-nav .nav li a {
        font-size: 17px !important; /* Bumps up the text size so it's highly readable */
        font-weight: 600 !important; /* Makes the text thicker and more commanding */
        padding-left: 25px !important; /* Adds horizontal breathing room between links */
        padding-right: 25px !important;
        letter-spacing: 0.5px; /* Slight letter spacing for a premium look */
    }

    /* 2. Give the dark scrolling header a bit more vertical height */
    .background-header {
        height: 90px !important; 
    }
    .background-header .main-nav .logo,
    .background-header .main-nav .nav {
        height: 90px !important;
        display: flex;
        align-items: center;
    }

    /* 3. Make the active/hover state pop aggressively */
    .header-area .main-nav .nav li a:hover,
    .header-area .main-nav .nav li a.active {
        color: #0d6efd !important; /* Tech Blue hover state */
    }
}

/* Ensure the main logo container has enough room on large screens */
@media (min-width: 1200px) {
    .header-area .main-nav .nav li a {
        font-size: 18px !important; /* Even larger on massive desktop monitors */
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}
/* --- BULLETPROOF MOBILE MENU OVERRIDES --- */
/* --- BULLETPROOF MOBILE MENU STYLING --- */
@media (max-width: 991px) {
    /* 1. The Main Dropdown Container */
    .header-area .main-nav .nav {
        background-color: #0a0a0a !important; /* Pitch black background */
        border: 1px solid #222 !important; /* Sleek dark border */
        border-radius: 8px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.9) !important;
        padding: 10px 20px !important;
        margin-top: 15px !important;
        display: none; /* Keep this so the jQuery slideToggle works */
    }

    /* 2. Strip away the white background from the list items */
    .header-area .main-nav .nav li {
        background: transparent !important; 
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Style the Text Links */
    .header-area .main-nav .nav li a {
        color: #d1d5db !important; /* Light grey text so it pops against the black */
        background-color: transparent !important; /* Kills the white box */
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #222 !important; /* Dark separator lines */
        text-align: left !important;
        display: block !important;
    }

    /* Remove the separator line from the last link */
    .header-area .main-nav .nav li:last-child a {
        border-bottom: none !important;
    }

    /* 4. Active & Hover States */
    .header-area .main-nav .nav li a:hover,
    .header-area .main-nav .nav li a.active {
        color: #ff4500 !important; /* AESURUS Orange when tapped */
        padding-left: 10px !important; /* Cool indent animation when tapped */
        transition: all 0.3s ease !important;
    }
}
/* --- DESKTOP NAVBAR ALIGNMENT FIX --- */
@media (min-width: 992px) {
    /* 1. Force the main container to keep items on the same row */
    .header-area .main-nav {
        display: flex !important;
        justify-content: space-between !important; /* Pushes logo left, menu right */
        align-items: center !important;
        height: 100% !important;
    }
    
    /* 2. Stop the logo from expanding and pushing the menu down */
    .header-area .main-nav .logo {
        flex: 0 0 auto !important; /* Tells the logo to only take up the space it needs */
        width: auto !important;
        margin: 0 !important;
    }

    /* 3. Force the menu list to act as a horizontal row */
    .header-area .main-nav .nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        position: static !important; /* Overrides any weird template positioning */
        width: auto !important;
        margin: 0 !important;
        background: transparent !important;
    }
    
    /* 4. Fix any weird margins on the list items */
    .header-area .main-nav .nav li {
        margin: 0 !important;
        padding: 0 !important;
    }
}
/* --- SMALL LAPTOP / TABLET NAVBAR FIX (992px to 1199px) --- */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-area .main-nav .nav li a {
        font-size: 14px !important; /* Shrinks the text slightly */
        padding-left: 12px !important; /* Reduces the gap between links */
        padding-right: 12px !important;
        letter-spacing: 0px !important;
    }
    
    /* Ensure the logo shrinks slightly to make room for the menu */
    .header-area .main-nav .logo img {
        max-height: 50px !important; 
    }
}