/* UX/UI Fixes for Spacing and Alignment Issues */

/* ========================================
   CONTENT ELEMENT SPACING FIXES
   ======================================== */

/* Add spacing between paragraphs and icon-boxes */
.about-us-content-area p+.icon-box,
.about-us-content-area .title-box+p+.icon-box {
  margin-top: 30px !important;
}

/* Ensure icon-boxes have proper spacing from preceding content */
p+.icon-box,
.text-content+.icon-box,
.description+.icon-box {
  margin-top: 25px !important;
}

/* Spacing between consecutive icon-boxes */
.icon-box+.icon-box {
  margin-top: 20px !important;
}

/* Spacing between text paragraphs */
.about-us-content-area p {
  margin-bottom: 25px !important;
}

/* Spacing between title and paragraph */
.title-box+p,
.section-title+p,
h3+p,
h4+p {
  margin-top: 15px !important;
}

/* Spacing before buttons/CTAs */
.icon-box+.about-btn-box,
.icon-box+.btn-box,
p+.about-btn-box,
p+.btn-box {
  margin-top: 30px !important;
}

/* Service page content spacing */
.service-details-page-content p+p {
  margin-top: 15px !important;
}

.service-details-page-content h3+p,
.service-details-page-content h4+p {
  margin-top: 15px !important;
}

.service-details-page-content p+h3,
.service-details-page-content p+h4 {
  margin-top: 30px !important;
}

/* List spacing in content areas */
.service-details-page-content ul,
.service-details-page-content ol,
.about-us-content-area ul,
.about-us-content-area ol {
  margin-top: 15px !important;
  margin-bottom: 20px !important;
}

/* Feature/benefit list spacing */
.feature-list li,
.benefit-list li,
.service-list li {
  margin-bottom: 10px !important;
}

/* Card/box spacing in grid layouts */
.service-slider-area,
.project-slider-area,
.team-slider-area {
  margin-bottom: 20px !important;
}

/* Testimonial and review spacing */
.testimonials-box+.testimonials-box {
  margin-top: 20px !important;
}

/* Blog post spacing */
.blog-area+.blog-area {
  margin-top: 30px !important;
}

/* FAQ spacing */
.faq-item+.faq-item {
  margin-top: 15px !important;
}

/* Service details page content spacing */
.service-details-page-content {
  line-height: 1.7 !important;
}

.service-details-page-content p {
  margin-bottom: 20px !important;
}

.service-details-page-content h4 {
  margin-top: 30px !important;
  margin-bottom: 15px !important;
}

.service-details-page-content h4:first-child {
  margin-top: 0 !important;
}

.service-details-page-content .row {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.service-details-page-content figure {
  margin-bottom: 20px !important;
}

/* Service details list spacing */
.service-details-page-list {
  padding-left: 0 !important;
}

.service-details-page-list li {
  margin-bottom: 12px !important;
  padding-left: 25px !important;
}

/* Choose area icon box spacing */
.choose-area-icon-box {
  margin-bottom: 20px !important;
}

.choose-area-icon-box+hr {
  margin: 20px 0 !important;
}

.choose-area-icon-box .content h5 {
  margin-bottom: 10px !important;
}

.choose-area-icon-box .content p {
  margin-bottom: 0 !important;
}

/* Glance cards spacing */
.glance-card {
  margin-bottom: 20px !important;
}

.glance-card h5 {
  margin-bottom: 15px !important;
}

.glance-card p {
  margin-bottom: 20px !important;
}

/* Process/steps spacing */
.process-box+.process-box,
.step-box+.step-box {
  margin-top: 20px !important;
}

/* Team cards spacing */
.team-area {
  margin-bottom: 25px !important;
}

/* Pricing cards spacing */
.pricing-area {
  margin-bottom: 25px !important;
}

/* Contact form spacing */
.contact-from label {
  margin-bottom: 8px !important;
}

.contact-from input,
.contact-from textarea,
.contact-from select {
  margin-bottom: 20px !important;
}

/* Widget spacing in sidebars */
.service-widget-1,
.service-widget-2 {
  margin-bottom: 30px !important;
}

.service-widget-1 h5,
.service-widget-2 h5 {
  margin-bottom: 15px !important;
}

.service-widget-1 ul li {
  margin-bottom: 8px !important;
}

/* ========================================
   SECTION SPACING FIXES
   ======================================== */

/* Reduce excessive spacing between sections */
.section-space {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  .section-space {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* Fix alignment issues in service pages - ensure sidebar and content align at top */
.service-details-page .row {
  align-items: flex-start !important;
}

.service-details-page .row>div {
  display: flex;
  flex-direction: column;
}

.service-details-page-content {
  padding-top: 0 !important;
}

.service-details-page-content .service-details-title:first-child,
.service-details-page-content h3:first-child,
.service-details-page-content h4:first-child {
  margin-top: 0 !important;
}

.service-sidebar {
  padding-top: 0 !important;
}

.service-sidebar {
  position: sticky;
  top: 100px;
}

/* Reduce spacing for consecutive sections */
.section-space+.section-space {
  padding-top: 40px !important;
}

.section-space-top+.section-space {
  padding-top: 40px !important;
}

/* Fix spacing in services page - reduce gaps between text sections */
.services-page-section+.section-space {
  padding-top: 40px !important;
}

/* Reduce spacing in choose section */
.choose-section.section-space-top {
  padding-top: 80px !important;
}

/* Fix alignment for service tab sections */
.service-tab-section .row {
  align-items: flex-start !important;
}

.service-tab-title-area {
  margin-bottom: 40px !important;
}

.service-tab-btn-area {
  margin-bottom: 0 !important;
}

.service-tab-details-area {
  margin-top: 0 !important;
}

/* Reduce spacing after breadcrumb */
.breadcrumb__area+section {
  padding-top: 60px !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb__area+section {
    padding-top: 50px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb__area+section {
    padding-top: 40px !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  .breadcrumb__area+section {
    padding-top: 30px !important;
  }
}

/* Fix spacing in icon box counter section */
.icon-box-counter-section.section-space {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Reduce spacing between footer sections */
.footer-top.section-space-medium {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Fix alignment for two-column layouts */
.row.align-items-start,
.row[class*="align-items"] {
  align-items: flex-start !important;
}

/* Reduce excessive margin-top on first elements in sections */
.section-space .title-box:first-child,
.section-space h3:first-child,
.section-space h4:first-child {
  margin-top: 0 !important;
}

/* Fix spacing in service page sections */
.service-page-section.section-space {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Reduce spacing for text-only sections */
.section-space p:only-child,
.section-space .title-box+p {
  margin-bottom: 0 !important;
}

/* Fix alignment for content with sidebar */
.col-xxl-8+.col-xxl-4,
.col-xl-8+.col-xl-4,
.col-lg-8+.col-lg-4 {
  padding-top: 0 !important;
}

/* Ensure proper vertical alignment - but preserve menu alignment */
.d-flex.align-items-center:not(.header-right):not(.header-main):not(.mean__menu-wrapper) {
  align-items: flex-start !important;
}

/* Fix spacing in main content areas */
main>section:first-of-type:not(.banner-section) {
  padding-top: 60px !important;
}

main>section:last-of-type {
  padding-bottom: 60px !important;
}

/* Remove top gap from banner section - align to top */
.banner-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

main>.banner-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Home page specific spacing fixes */
.banner-section+section {
  padding-top: 60px !important;
}

.about-us-section.section-space {
  padding-top: 60px !important;
  padding-bottom: 80px !important;
}

.service-slider-section.section-space {
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}

.project-slider-section.section-space {
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}

.choose-section.section-space-top {
  padding-top: 60px !important;
}

.testimonials-two-section {
  padding-top: 40px !important;
  padding-bottom: 0 !important;
}

.testimonials-two-area.section-space-medium {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.blog-section-one.section-space {
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}

.brand-section.section-space-bottom {
  padding-top: 40px !important;
  padding-bottom: 60px !important;
}

.cta-bottom-section.pt-120 {
  padding-top: 60px !important;
}

.cta-bottom-section.pb-120 {
  padding-bottom: 60px !important;
}

.cta-bottom-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Reduce spacing between consecutive sections on home page */
.banner-section+.about-us-section {
  padding-top: 60px !important;
}

.about-us-section+.service-slider-section {
  padding-top: 40px !important;
}

.service-slider-section+.project-slider-section {
  padding-top: 40px !important;
}

.project-slider-section+.choose-section {
  padding-top: 40px !important;
}

.choose-section+.testimonials-two-section {
  padding-top: 40px !important;
}

.testimonials-two-section+.blog-section-one {
  padding-top: 40px !important;
}

.blog-section-one+.brand-section {
  padding-top: 40px !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-section+section {
    padding-top: 50px !important;
  }

  .about-us-section.section-space {
    padding-top: 50px !important;
    padding-bottom: 70px !important;
  }

  .service-slider-section.section-space,
  .project-slider-section.section-space,
  .blog-section-one.section-space {
    padding-top: 30px !important;
    padding-bottom: 70px !important;
  }

  .choose-section.section-space-top {
    padding-top: 50px !important;
  }

  .testimonials-two-area.section-space-medium {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .brand-section.section-space-bottom {
    padding-top: 30px !important;
    padding-bottom: 50px !important;
  }

  .cta-bottom-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-section+section {
    padding-top: 40px !important;
  }

  .about-us-section.section-space {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
  }

  .service-slider-section.section-space,
  .project-slider-section.section-space,
  .blog-section-one.section-space {
    padding-top: 30px !important;
    padding-bottom: 60px !important;
  }

  .choose-section.section-space-top {
    padding-top: 40px !important;
  }

  .testimonials-two-area.section-space-medium {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .brand-section.section-space-bottom {
    padding-top: 30px !important;
    padding-bottom: 40px !important;
  }

  .cta-bottom-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  .banner-section+section {
    padding-top: 30px !important;
  }

  .about-us-section.section-space {
    padding-top: 30px !important;
    padding-bottom: 50px !important;
  }

  .service-slider-section.section-space,
  .project-slider-section.section-space,
  .blog-section-one.section-space {
    padding-top: 30px !important;
    padding-bottom: 50px !important;
  }

  .choose-section.section-space-top {
    padding-top: 30px !important;
  }

  .testimonials-two-area.section-space-medium {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .brand-section.section-space-bottom {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }

  .cta-bottom-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* ========================================
   MENU LAYOUT FIXES
   ======================================== */

/* 1. FORCE MOBILE MENU ON TABLET/SMALL LAPTOP (Up to 1199px) */
@media (max-width: 1199px) {

  /* Hide desktop menu */
  .mean__menu-wrapper {
    display: none !important;
  }

  /* Show hamburger menu */
  .header__hamburger {
    display: flex !important;
  }

  /* Hide desktop-only header actions if they cause clutter */
  .header-action.d-none.d-xl-inline-flex {
    display: none !important;
  }

  /* Adjust header right spacing */
  .header-right {
    gap: 15px !important;
  }
}

/* 2. COMPACT DESKTOP MENU FOR ALL DESKTOP SCREENS (1200px+) */
@media only screen and (min-width: 1200px) {

  /* Reduce gap between logo and menu */
  .header-left {
    gap: 30px !important;
  }

  /* Reduce spacing between menu items - Top Level Only */
  .main-menu>nav>ul>li {
    margin-inline-end: 20px !important;
  }

  /* Reduce font size of menu items - Top Level Only */
  .main-menu>nav>ul>li>a {
    font-size: 15px !important;
    padding: 35px 0 !important;
  }

  /* Reduce gap in right section */
  .header-right {
    gap: 20px !important;
  }

  /* Ensure header padding is minimal */
  .header-area {
    padding: 0 30px !important;
  }

  /* Make the CTA button smaller */
  .primary-btn-1 {
    padding: 15px 20px !important;
    font-size: 13px !important;
    height: 45px !important;
    gap: 8px !important;
  }

  /* Adjust the "Call Us" section */
  .header-link-1 {
    gap: 10px !important;
  }

  .header-link-1 .icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }

  .header-link-1 .icon:before {
    width: 48px !important;
    height: 48px !important;
  }

  .header-link-1 .content h6 {
    font-size: 15px !important;
  }

  .header-link-1 .content span {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

/* ========================================
   SUBMENU FIXES
   ======================================== */

/* Fix for nested submenu positioning */
.main-menu ul li .submenu li {
  position: relative;
  /* Ensure li is relative for absolute positioning of child submenu */
}

.main-menu ul li .submenu li .submenu {
  left: 100%;
  /* Position to the right of the parent item */
  top: 0;
  margin-top: -1px;
  /* Align top borders */
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-out;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.main-menu ul li .submenu li:hover>.submenu {
  visibility: visible;
  opacity: 1;
  top: 0;
}

/* Ensure the parent submenu doesn't get cut off */
.main-menu ul li .submenu {
  overflow: visible;
}

/* Fix for IT Products specific submenu */
.main-menu ul li .submenu li.has-dropdown>a::after {
  content: "\f105";
  /* FontAwesome right angle bracket */
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}

/* Ensure background color consistency */
.main-menu ul li .submenu li:hover>a {
  background-color: var(--theme-color);
  color: #ffffff;
}

/* Fix z-index issues */
.header-area {
  z-index: 999;
}
/* WhatsApp Floating Button */
.whatsapp-wrap {
  position: fixed;
  bottom: 35px;
  left: 30px;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 999; /* High z-index to stay on top */
  background-color: #25D366; /* WhatsApp Green */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.whatsapp-wrap:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  background-color: #20bd5a;
}

.whatsapp-wrap i {
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

/* Pulse animation for attention */
@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-wrap {
  animation: whatsapp-pulse 2s infinite;
}

/* Adjust for mobile */
@media (max-width: 767px) {
  .whatsapp-wrap {
    bottom: 20px;
    left: 20px;
    height: 45px;
    width: 45px;
  }
  
  .whatsapp-wrap i {
    font-size: 24px;
  }
}


/* Menu Separators for Desktop */
@media only screen and (min-width: 1200px) {
  .main-menu>nav>ul>li {
    position: relative;
  }
  .main-menu>nav>ul>li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.15);
  }
}