/* Comic Panel Styling */

.services-section,
.university-section {
  border: 5px solid #373737; /* Thicker comic-style border */
  padding: 2rem 1.5rem;   /* Add internal spacing */
  margin-bottom: 4rem; /* Ensure space between panels */
  background-color: white; /* Override gradients/grays */
  background-image: none; /* Remove gradients */
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.85); /* Hard offset shadow */
  transform: skewY(0); /* Slight skew */
  border-radius: 0; /* Ensure sharp corners */
}

/* Optional: Counter-skew content if text looks too slanted */
/*
#services-section > .container,
#university-section > .container {
  transform: skewY(1.5deg);
}
*/

/* Style the cards within the services section */
.services-section .card {
  border: 2px solid #373737;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7);
  margin-bottom: 2rem; /* Add space below cards if needed */
  border-radius: 0; /* Sharp corners for cards */

  /* Override theme's lift effect */
  transition: none !important;
  transform: none !important;
}

/* Override the lift hover effect */
.services-section .card:hover {
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7) !important; /* Keep shadow static */
  transform: none !important; /* Prevent lifting */
}

/* Style the image within the university section */
.university-section img {
   border: 2px solid #373737;
   box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7);
   border-radius: 0;
}

/* Adjust heading padding if needed due to skew/borders */
.services-section h1 {
  padding-top: 1rem;
}

/* Make badges slightly bolder */
.services-section .badge {
    border: 1px solid #373737;
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
}

/* Ensure buttons fit the theme */
.btn {
    border: 2px solid #373737;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7);
    border-radius: 0; /* Sharp corners for buttons */
}
.btn:hover {
     box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7); /* Keep shadow static */
     transform: none !important; /* Prevent lifting */
}

/* =========================================
   MOBILE RESPONSIVE FIXES (iPhone/Mobile)
   ========================================= */
@media (max-width: 767.98px) {
  
  /* 1. Fix the squeezed 3 tall boxes (Services) */
  /* This strips the heavy comic border/padding from the structural .row 
     so the columns and cards inside can expand to full width. */
  .row.services-section {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    margin-bottom: 0 !important;
  }

  /* 2. Fix the squeezed University Research section & image */
  /* Reduces the massive padding and border thickness so content isn't crushed */
  section.services-section {
    padding: 1.5rem 1rem !important;
    border-width: 5px !important;
  }

  /* Reduces the internal padding of the image itself */
  img.services-section {
    padding: 0.5rem !important; 
    border-width: 4px !important;
  }
  
  /* 3. Fix the massive footer logo */
  .footer-brand {
    max-width: 150px !important; 
    height: auto !important;
  }
}

@media (max-width: 767.98px) {
  /* ... your other mobile fixes ... */

  /* Hide the right arrow on buttons for mobile screens */
  .btn .fe-arrow-right {
    display: none !important;
  }
}