body{
  background-color: rgba(230,230,250,1);
}

.opportunity-card {
  height: 73px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: white;
  position: relative;
  overflow: hidden;
}

.opportunity-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
}

.opportunity-card span {
  position: relative;
  z-index: 1;
}

.company-section {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 500px;
}

.jobs-section {
  padding: 32px;
  background: #e9e9fc;
  border-radius: 8px;
  position: relative;
  overflow: visible;
  max-width: 1200px;
  margin: 0 auto;
}

.jobs-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 18px 16px;
  color: #0f1724;
}

.jobs-wrapper {
  position: relative;
  padding: 12px 40px 24px 16px;
}

.job-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.company-logo {
  width: 72px;
  display: block;
  margin-bottom: 8px;
}

.badge {
  position: relative;
  top: auto !important; 
  right: auto !important;

  
}

.job-title {
  font-weight: 800;
  font-size: 18px;
  margin-top: 4px;
  margin-bottom: 6px;
  color: #0b1220;
}

.company {
  color: #7b8b9a;
  margin-bottom: 12px;
}

.salary {
  font-size: 15px;
  margin-bottom: 12px;
  color: #4b5563;
}

.job-info {
  font-size: 14px;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Carousel nav (circle) */
.carousel-nav {
  position: absolute;
  right: 16px;
  bottom: 18px;
  transform: translateY(0);
  background: #4a5cf0;
  border: none;
  color: #fff;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(74,92,240,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

/* Hide default scrollbar on webkit while keeping scroll functionality */
.job-carousel::-webkit-scrollbar { height: 8px; }
.job-carousel::-webkit-scrollbar-thumb {
  background: rgba(11,18,32,0.08);
  border-radius: 6px;
}

#breadcrumb-main-page,
#breadcrumb-page,
.d-flex.align-items-center span1 {
  font-size: clamp(16px, 2vw, 22px); /* Responsive between 16px–22px */
  color: white;                      /* Ensure white text */
  font-weight: 600;
   white-space: nowrap;
}

@media (max-width: 576px) {
  #breadcrumb-main-page,
  #breadcrumb-page,
  .d-flex.align-items-center span1 {
    font-size: 16px;
  }
}
@media (max-width: 576px) {
  #breadcrumb-main-page,
  #breadcrumb-page,
  .d-flex.align-items-center span {
    font-size: 14px;
  }
}

.company-image-wrapper {
  height: 100%;
}

.company-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.angled-overlay {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 45%;
  /* Light blue gradient */
  background: linear-gradient(135deg, #cce7ff, #99d6ff, #66c2ff);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 2;
  transition: all 0.3s ease-in-out;
}

.company-text {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 400px;
  text-align: left;
  color: black;

  /* Animation */
  opacity: 0;
  animation: slideFadeIn 1.5s forwards;
  animation-delay: 0.5s; /* optional delay */
}

/* Keyframes */
@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(50px); /* Start from right */
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);   /* End at normal position */
  }
}

/* Optional: Responsive */
@media (max-width: 768px) {
  .company-text {
    right: 5%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .company-text {
    right: 2%;
    max-width: 250px;
  }
}

.circle {
  width: 80px;
  height: 80px;
  transition: all 0.3s ease;
}
.circle:hover .icon-img {
  transform: scale(1.5);
}
.circle:hover .label {
  display: none;
}
.icon-img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}
.wave-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

/* Scroll Container */
.services-offered .scroll-container {
  overflow-x: auto;
  scroll-behavior: smooth; /* smooth scrolling */
  padding-bottom: 10px;
}

/* Scrollbar styling - Webkit browsers */
.services-offered .scroll-container::-webkit-scrollbar {
  height: 12px;
}

.services-offered .scroll-container::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 6px;
}

.services-offered .scroll-container::-webkit-scrollbar-thumb {
  background-color: #4150d2;
  border-radius: 6px;
  transition: background 0.3s;
}

.services-offered .scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #6b73ff;
}

/* Firefox */
.services-offered .scroll-container {
  scrollbar-width: thin;
  scrollbar-color: #4150d2 #f0f0f0;
}

/* Image hover effect */
.services-offered .scroll-container .text-center img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-offered .scroll-container .text-center img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .services-offered .scroll-container .text-center img {
    width: 200px !important;
  }
}

@media (max-width: 480px) {
  .services-offered .scroll-container .text-center img {
    width: 150px !important;
  }
}
/* Service Area Buttons */
.service-areas .btn {
  background-color: rgba(152, 162, 179, 1);
  color: #fff;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  opacity: 0; /* start hidden */
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.service-areas .btn.animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hover effect */
.service-areas .btn:hover {
  transform: translateY(-5px) scale(1.1);
  background-color: rgba(65, 75, 210, 1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Staggered animation with CSS variable */
.service-areas .btn {
  --i: 1; /* default */
  animation-delay: calc(var(--i) * 0.1s);
}

/* Entrance animation keyframes */
@keyframes fadeInUpScale {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Optional responsive adjustments */
@media (max-width: 768px) {
  .service-areas .btn {
    font-size: 14px;
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  .service-areas .btn {
    font-size: 12px;
    padding: 6px 10px;
  }
}


/* Product Card Hover + Fade-in Animation */
.products .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.8s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

/* Staggered Animation: set --i variable on each card inline */
.products .card:nth-child(n) {
  animation-delay: calc(0.1s * var(--i));
}

.products .card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Fade-in Up Keyframes */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll Container */
.products .overflow-auto {
  overflow-x: auto;
  scroll-behavior: smooth; /* smooth horizontal scroll */
  padding-bottom: 10px;
}

/* Scrollbar styling - Webkit browsers */
.products .overflow-auto::-webkit-scrollbar {
  height: 12px;
}
.products .overflow-auto::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 6px;
}
.products .overflow-auto::-webkit-scrollbar-thumb {
  background-color: #4150d2;
  border-radius: 6px;
  transition: background 0.3s;
}
.products .overflow-auto::-webkit-scrollbar-thumb:hover {
  background-color: #6b73ff;
}

/* Firefox Scrollbar */
.products .overflow-auto {
  scrollbar-width: thin;
  scrollbar-color: #4150d2 #f0f0f0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .products .overflow-auto .card {
    min-width: 200px;
  }
}

@media (max-width: 480px) {
  .products .overflow-auto .card {
    min-width: 150px;
  }
}

.placeholder-gray::placeholder {
  color: #ccc; /* Light gray */
  opacity: 1;  /* Ensure it's fully visible */
}
.btn-send-enquiry{
  background-color: rgba(65,75,210,1) !important;
  transition: background-color 0.3s ease;
}

/* Fade-in animation for the card */
.card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

/* Stagger effect for multiple cards (if more than one) */
.card:nth-child(n) {
  animation-delay: calc(0.1s * var(--i));
}

/* Fade-in keyframes */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.opportunity-slider {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.opportunity-slider::-webkit-scrollbar {
  display: none;
}

/* OPPORTUNITY CARDS - INCREASED SIZES FOR MOBILE */
.o-card {
  flex: 0 0 240px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  padding: 12px;
  text-align: center;
  color: #333;
  transition: transform 0.3s, box-shadow 0.3s;
}
.o-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}
.o-card h5 {
  margin-top: 6px;
  font-size: 1rem;
}
.o-card p {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 4px;
}
.o-card button {
  background: #6c63ff;
  border: none;
  color: white;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.8rem;
  transition: background 0.3s;
}
.o-card button:hover {
  background: #4a44c3;
}
.o-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* ===== MOBILE: INCREASE O-CARD CONTENT SIZES ===== */
@media (max-width: 768px) {
  .o-card {
    padding: 16px !important; /* Increased padding */
  }
  
  .o-card img {
    height: 150px !important; /* Taller images */
    border-radius: 12px !important; /* Bigger radius */
  }
  
  .o-card h5 {
    font-size: 1.2rem !important; /* Bigger title */
    margin-top: 12px !important; /* More space */
    margin-bottom: 8px !important;
    font-weight: 700 !important; /* Bolder */
    line-height: 1.4 !important;
  }
  
  .o-card p {
    font-size: 1rem !important; /* Bigger description */
    line-height: 1.6 !important;
    margin-bottom: 12px !important; /* More space */
    color: #555 !important; /* Darker for better readability */
  }
  
  .o-card button,
  .o-card a.btn {
    padding: 10px 24px !important; /* Bigger button */
    font-size: 1rem !important; /* Bigger button text */
    border-radius: 25px !important; /* Bigger radius */
    font-weight: 600 !important; /* Bolder */
    min-height: 42px !important; /* Taller button */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Extra small phones - even bigger */
@media (max-width: 480px) {
  .o-card {
    padding: 14px !important;
  }
  
  .o-card img {
    height: 140px !important;
  }
  
  .o-card h5 {
    font-size: 1.15rem !important;
  }
  
  .o-card p {
    font-size: 0.95rem !important;
  }
  
  .o-card button,
  .o-card a.btn {
    padding: 9px 20px !important;
    font-size: 0.95rem !important;
  }
}

.slide-btn {
  border: none;
  background: #6c63ff;
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: background 0.3s;
}
.slide-btn:hover {
  background: #4a44c3;
}

/* Image hover effect */
.card img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card img:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.btn-call{
  width: 130px;
  background-color: rgba(65, 75, 210, 1) !important;
  transition: background-color 0.3s ease;
}
.btn-get-quote{
  width: 130px;
  background-color: rgba(255,244,29,1) !important;
  transition: background-color 0.3s ease;
}
.btn-send-enquiry:hover,
.btn-call:hover,
.btn-get-quote:hover{
  color: #fff;
background: linear-gradient(90deg,rgba(65, 75, 210, 1) 0%, rgba(9, 9, 121, 1) 45%, rgba(0, 212, 255, 1) 100%);
}
.btn-submit-review{
  background-color: rgba(255,244,29,1) !important;
  transition: background-color 0.3s ease;
}
.btn-submit-review:hover{
  color: #fff;
background: linear-gradient(90deg,rgba(65, 75, 210, 1) 0%, rgba(9, 9, 121, 1) 45%, rgba(0, 212, 255, 1) 100%);
}

.review-card {
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.star-rating i.star {
  cursor: pointer;
  font-size: 1.1rem;
  transition: transform 0.2s;
}

.star-rating i.star:hover,
.star-rating i.star.active {
  transform: scale(1.2);
  color: #f4c150;
}

.form-control {
  transition: box-shadow 0.3s, border-color 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: #6c63ff;
  box-shadow: 0 0 5px rgba(108,99,255,0.4);
}

.star-rating {
  color: #f9c806;
  font-size: 18px;
  margin-top: 8px;
}
.review-card {
  background: linear-gradient(
    135deg, 
    #746bde 0%,   /* Purple */
    #a565d6 60%,  /* Light Purple */
    #583379 100%  /* Dark Shade Bottom */
  );
  padding: 30px;
}

/* Responsive */
@media (max-width: 1024px) {
  .feedback-row {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media(max-width:991px){
  .company-section {
    height: auto;
    display: flex;
    
  }

  .company-image-wrapper {
    height: 100%;
  }

  .company-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .angled-overlay {
    width: 50%;
    background-color: white;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    
    transition: all 0.3s ease-in-out;
  }

  .company-text {
    position: relative;
    top: 40%;
    right: 5%;
  
    margin: 0 auto;
    transform: none;
    z-index: 3;
    text-align: left;
    max-width: 350px;
    padding:  20px;
  }
  .border-end{
    display: none;
  }
}
/* Responsive */
@media (max-width: 550px) {
  .company-section {
    display: flex;
    flex-direction: row;
    height: 380px;
    position: relative;
    overflow: hidden;
  }

  .company-image {
    height: 380px;
    width: 50%;
    object-fit: cover;
    display: block;
  }

  .angled-overlay {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    background-color: white;
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
  }

  .company-text {
    position: relative;
    width: 50%;
    height: 100%;
    z-index: 2;
    text-align: center;
    padding: 20px;
    font-size: 0.7rem;
    display: flex;
    flex-direction: column;
    word-break: break-word;
    background-color: transparent;
  }

  .company-text h2 {
    font-size: 1.25rem;
  }

  .company-text p {
    font-size: 0.95rem;
  }
}

/* .card {
background-color: rgb(247, 250, 230); 
border-radius: 12px;
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-body h6 {
font-weight: 600;
color: #203656;
}
*/
.card {
  border-radius: 10px;
  overflow: hidden;
}

.card .bg-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;  
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.card-body {
z-index:2;
}
/* Full-screen overlay */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff; /* page background while loading */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Loader container */
.square-loader {
  display: flex;
  gap: 10px;
}

.square-loader div {
  width: 30px;
  height: 60px;
  background-color: #0d6efd; /* blue squares */
  animation: squareAnim 1.2s infinite ease-in-out;
}

/* Staggered animation for each square */
.square-loader div:nth-child(1) { animation-delay: 0s; }
.square-loader div:nth-child(2) { animation-delay: 0.2s; }
.square-loader div:nth-child(3) { animation-delay: 0.4s; }
square-loader div:nth-child(4) { animation-delay: 0.6s; }

/* Keyframes: scale up and down */
@keyframes squareAnim {
  0%, 100% { transform: scale(0); opacity: 0.3; }
  50% { transform: scale(1); opacity: 1; }
}

/* ===== ABOUT SECTION MOBILE FIX - ALL IN ONE LINE ===== */

/* Fix for "ABOUT | Company" header on mobile */
@media (max-width: 768px) {
  /* Fix the header */
  .card h5.fw-bold.d-flex.gap-2.mb-1 {
    flex-direction: row !important;
    align-items: center;
    gap: 5px !important;
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  
  .card h5.fw-bold.d-flex.gap-2.mb-1 p {
    display: inline;
    margin: 0;
    line-height: 1.3;
    font-size: 18px !important;
  }
  
  .card h5.fw-bold.d-flex.gap-2.mb-1 p:first-child {
    color: rgba(65, 75, 210, 1) !important;
  }
  
  /* FIX: INCREASE PARAGRAPH FONT SIZE FOR MOBILE */
  .card .p-3 {
    font-size: 17px !important; /* Increased from 16px */
    line-height: 1.7 !important; /* Increased from 1.6 */
    padding: 16px 12px !important; /* Slightly more padding */
    text-align: left;
    word-break: break-word;
    color: #333 !important;
  }
  
  /* FIX: Keep view, like, and share icons in ONE LINE */
  .card .d-flex.gap-4.px-3.mt-2.align-items-center {
    flex-direction: row !important; /* Keep horizontal */
    flex-wrap: wrap; /* Allow wrapping if needed */
    align-items: center;
    justify-content: space-between !important; /* Spread items */
    gap: 15px !important;
    padding: 16px 12px !important; /* Match paragraph padding */
    margin-top: 20px !important;
    border-top: 1px solid #eee;
  }
  
  /* View count - adjust spacing */
  .card .d-flex.gap-4.px-3.mt-2.align-items-center > span:first-child {
    margin-bottom: 0 !important; /* Remove vertical margin */
    font-size: 16px !important;
    white-space: nowrap; /* Keep on one line */
  }
  
  /* Like button - adjust spacing */
  .card .d-flex.gap-4.px-3.mt-2.align-items-center > span:nth-child(2) {
    margin-left: 0 !important;
  }
  
  #company-like-btn {
    font-size: 15px !important;
    padding: 6px 12px !important;
    white-space: nowrap;
  }
  
  /* Social icons - keep in same row */
  .card .d-flex.gap-3.align-items-center {
    margin-left: 0 !important;
    justify-content: flex-end; /* Align to right */
    flex-wrap: nowrap; /* Keep in one line */
    gap: 15px !important;
  }
  
  /* Make all items align properly */
  .card .d-flex.gap-4.px-3.mt-2.align-items-center > * {
    flex-shrink: 0; /* Prevent shrinking */
  }
  
  /* Ensure proper spacing between items */
  .card .d-flex.gap-4.px-3.mt-2.align-items-center > span:first-child {
    margin-right: 10px;
  }
}

/* Extra small phones - adjust spacing */
@media (max-width: 480px) {
  /* Slightly smaller fonts on very small screens */
  .card h5.fw-bold.d-flex.gap-2.mb-1 {
    font-size: 17px !important;
  }
  
  .card h5.fw-bold.d-flex.gap-2.mb-1 p {
    font-size: 17px !important;
  }
  
  /* FIX: INCREASED FONT FOR SMALL PHONES TOO */
  .card .p-3 {
    font-size: 16px !important; /* Increased from 15px */
    line-height: 1.6 !important; /* Increased from 1.5 */
    padding: 14px 10px !important; /* More padding */
  }
  
  /* Adjust spacing for very small screens */
  .card .d-flex.gap-4.px-3.mt-2.align-items-center {
    gap: 10px !important;
    padding: 14px 10px !important; /* Match paragraph padding */
  }
  
  /* Smaller buttons */
  #company-like-btn {
    padding: 5px 10px !important;
    font-size: 14px !important;
  }
  
  /* Smaller social icons */
  .card .d-flex.gap-3.align-items-center i {
    font-size: 1.2rem !important;
  }
  
  .card .d-flex.gap-3.align-items-center {
    gap: 10px !important;
  }
}

/* Very small phones - stack only if absolutely necessary */
@media (max-width: 360px) {
  .card .d-flex.gap-4.px-3.mt-2.align-items-center {
    flex-wrap: wrap; /* Allow wrapping on very small screens */
    justify-content: flex-start !important;
  }
  
  .card .d-flex.gap-3.align-items-center {
    margin-top: 10px;
    justify-content: flex-start !important;
    width: 100%;
  }
  
  /* FIX: Keep font readable even on tiny screens */
  .card .p-3 {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* Make sure everything is properly sized */
#company-like-btn {
  min-height: 36px;
}

.card .d-flex.gap-4.px-3.mt-2.align-items-center > span:first-child i {
  font-size: 16px !important;
  margin-right: 5px;
}

/* Desktop view - ensure proper spacing (NO CHANGES HERE) */
@media (min-width: 769px) {
 
  .card .d-flex.gap-4.px-3.mt-2.align-items-center {
    justify-content: space-between;
  }
}


/* ===== SERVICES SECTION - NO SCROLL, FULL IMAGES ===== */

/* For mobile screens */
@media (max-width: 768px) {
  /* Fix "SERVICES | Offered" text */
  .services-offered h5.fw-bold.d-flex.gap-2.mb-1 {
    display: block !important;
    font-size: 20px !important; /* Bigger font */
  }
  
  .services-offered h5.fw-bold.d-flex.gap-2.mb-1 p {
    display: inline !important;
    font-size: 20px !important; /* Bigger font */
  }
  
  /* REMOVE SCROLL - Show items in grid */
  .services-offered .scroll-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    overflow: visible !important;
    max-height: none !important;
    padding: 10px 0 !important;
  }
  
  /* Style each service item */
  .services-offered .scroll-container .text-center {
    width: 100% !important;
    margin-bottom: 20px;
  }
  
  /* FIX: SHOW FULL IMAGES (not cropped) */
  .services-offered .scroll-container .text-center img {
    width: 100% !important;
    height: auto !important; /* CHANGED: Auto height to show full image */
    object-fit: contain !important; /* CHANGED: Show full image without cropping */
    max-height: 180px; /* Limit maximum height */
    border-radius: 8px;
  }
  
  /* Fix service description text - BIGGER FONT */
  .services-offered .mt-2.text-muted.fs-5 {
    font-size: 16px !important; /* Bigger font */
    line-height: 1.5;
    padding: 10px 0;
    text-align: center;
    margin-top: 10px !important;
  }
}

/* For very small phones */
@media (max-width: 480px) {
  /* Single column on very small screens */
  .services-offered .scroll-container {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
  
  /* Bigger font for small phones */
  .services-offered h5.fw-bold.d-flex.gap-2.mb-1 {
    font-size: 19px !important;
  }
  
  .services-offered h5.fw-bold.d-flex.gap-2.mb-1 p {
    font-size: 19px !important;
  }
  
  .services-offered .mt-2.text-muted.fs-5 {
    font-size: 15px !important;
  }
  
  /* Show full images */
  .services-offered .scroll-container .text-center img {
    max-height: 160px;
  }
}

/* For tablets (768px to 991px) */
@media (min-width: 769px) and (max-width: 991px) {
  .services-offered .scroll-container {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .services-offered .scroll-container .text-center img {
    height: auto !important;
    object-fit: contain !important;
    max-height: 200px;
  }
}

/* Desktop - keep original scroll */
@media (min-width: 992px) {
  .services-offered .scroll-container {
    display: flex !important;
    overflow-x: auto !important;
  }
  
  /* Desktop images keep original style */
  .services-offered .scroll-container .text-center img {
    height: 180px !important;
    object-fit: cover !important;
  }
}

/* ===== REVIEW SECTION MOBILE FIXES ===== */

/* Fix for review section on mobile */
@media (max-width: 768px) {
  /* Make review cards stack vertically on mobile */
  .col-12.col-md-6.col-lg-12 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
  }
  
  /* Fix review card layout */
  .review-card {
    margin: 0 auto !important;
    padding: 20px 15px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Fix header in review section */
  .review-card h4.fw-bold {
    font-size: 22px !important;
    text-align: center !important;
  }
  
  /* Fix horizontal line */
  .review-card hr {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Center the star rating section */
  .review-card .d-flex.align-items-center {
    justify-content: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;
  }
  
  /* Make star rating bigger and centered */
  .star-rating {
    text-align: center !important;
    margin: 15px auto !important;
    display: flex !important;
    justify-content: center !important;
    font-size: 22px !important;
  }
  
  /* Fix form inputs */
  .review-card .form-control {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
  }
  
  /* Fix textarea */
  .review-card textarea.form-control {
    min-height: 120px !important;
    resize: vertical !important;
  }
  
  /* Fix submit button */
  .review-card .btn-primary {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
    margin-top: 10px !important;
  }
  
  /* Fix existing reviews slider on mobile */
  #reviewsScroll {
    padding: 10px 5px !important;
  }
  
  .review-slide {
    min-width: 300px !important;
    max-width: 280px !important;
    padding: 15px !important;
    margin: 0 5px !important;
  }
  
  /* Adjust review slider controls */
  #prevReviews, #nextReviews {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(112, 118, 205, 0.8) !important;
    border: 1px solid #ddd !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
 
 #prevReviews {
    left: 5px !important;
  }
  
  #nextReviews {
    right: 5px !important;
  }
  
  /* Fix customer reviews section */
  .review-card .row {
    flex-direction: column !important;
  }
  
  .review-card .col-md-6 {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  /* Center the average rating display */
  .review-card .text-center {
    padding: 15px 0 !important;
  }
  
  .review-card .display-4 {
    font-size: 2.5rem !important;
  }
  
  /* Make "Leave a Review" form full width */
  .review-card form {
    width: 100% !important;
    padding: 0 !important;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  /* Further reduce padding on mobile */
  .review-card {
    padding: 15px 10px !important;
  }
  
  /* Make form elements even more compact */
  .review-card .form-control {
    padding: 10px !important;
    font-size: 14px !important;
  }
  
  /* Adjust review card header */
  .review-card h4.fw-bold {
    font-size: 20px !important;
  }
  
  /* Smaller review slides */
  .review-slide {
    min-width: 250px !important;
    max-width: 250px !important;
    padding: 12px !important;
  }
  
  /* Adjust star rating */
  .star-rating {
    font-size: 20px !important;
  }
  
  /* Make the "How did we do?" section wrap properly */
  .review-card .d-flex.align-items-center.mb-3 {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .review-card .d-flex.align-items-center.mb-3 p {
    margin-bottom: 10px !important;
  }
}

/* Very small devices */
@media (max-width: 360px) {
  .review-card h4.fw-bold {
    font-size: 18px !important;
  }
  
  .review-slide {
    min-width: 220px !important;
    max-width: 220px !important;
  }
  
  .review-card .form-control {
    font-size: 13px !important;
    padding: 8px !important;
  }
  
  .review-card .btn-primary {
    font-size: 14px !important;
    padding: 10px !important;
  }
}

/* Ensure proper spacing between sections */
@media (max-width: 768px) {
  .wrapper.mt-5 {
    margin-top: 30px !important;
  }
  
  .container-fluid .row.g-4 {
    margin: 0 !important;
  }
}

/* Fix for mobile form layout */
@media (max-width: 768px) {
  /* Ensure forms are properly aligned */
  .review-card form .mb-3 {
    margin-bottom: 15px !important;
  }
  
  /* Center align everything in review section */
  .review-card {
    text-align: center !important;
  }
  
  /* Guest fields spacing */
  .review-card .form-control[name="name"],
  .review-card .form-control[name="email"] {
    margin-bottom: 12px !important;
  }
}

/* Fix the star rating selection area */
@media (max-width: 768px) {
  .star-rating i.star {
    margin: 0 3px !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
  }
  
  .star-rating i.star:hover,
  .star-rating i.star.active {
    transform: scale(1.3) !important;
  }
}

/* ===== JOBS SECTION - FIXED FOR MOBILE ===== */

/* Base styles */
.jobs-section {
  padding: 32px;
  background: #e9e9fc;
  border-radius: 8px;
  position: relative;
  overflow: visible;
  max-width: 1200px;
  margin: 0 auto;
}

.jobs-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 18px 16px;
  color: #0f1724;
}

.jobs-wrapper {
  position: relative;
  padding: 12px 60px 24px 60px; /* Increased padding for arrows */
}

.job-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.job-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(13, 36, 63, 0.06);
  padding: 16px;
  flex: 0 0 280px;
  position: relative;
  min-height: 180px;
  scroll-snap-align: start;
}

/* Badge styling */
.badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #e94b4b;
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 8px rgba(233,75,75,0.18);
}

.job-title {
  font-weight: 800;
  font-size: 18px;
  margin-top: 40px; /* Increased to make space for badge */
  margin-bottom: 8px;
  color: #0b1220;
}

.company {
  color: #7b8b9a;
  margin-bottom: 12px;
  font-size: 14px;
}

.job-info {
  font-size: 14px;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* ===== MOBILE: INCREASE JOB CARD CONTENT SIZES ===== */
@media (max-width: 768px) {
  .job-card {
    padding: 20px !important; /* More padding */
  }
  
  .job-title {
    font-size: 20px !important; /* Bigger title */
    margin-top: 45px !important; /* More space for badge */
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
  }
  
  .company {
    font-size: 16px !important; /* Bigger company name */
    margin-bottom: 15px !important;
  }
  
  .job-info {
    font-size: 15px !important; /* Bigger info text */
    margin-bottom: 8px !important;
    gap: 10px !important; /* More space between icons */
  }
  
  .salary {
    font-size: 16px !important; /* Bigger salary */
    margin-bottom: 15px !important;
  }
  
  .badge {
    font-size: 14px !important; /* Bigger badge */
    padding: 8px 14px !important; /* Bigger padding */
    top: 18px !important;
    right: 18px !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  .job-title {
    font-size: 19px !important;
  }
  
  .company {
    font-size: 15px !important;
  }
  
  .job-info {
    font-size: 14px !important;
  }
  
  .badge {
    font-size: 13px !important;
    padding: 7px 12px !important;
  }
}

/* Carousel nav buttons */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #4a5cf0;
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(74,92,240,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
}

.carousel-nav.left-arrow {
  left: 10px;
}

.carousel-nav.right-arrow {
  right: 10px;
}

/* Hide scrollbar on webkit */
.job-carousel::-webkit-scrollbar { 
  height: 8px; 
}

.job-carousel::-webkit-scrollbar-thumb {
  background: rgba(11,18,32,0.08);
  border-radius: 6px;
}

/* Hide scrollbar on Firefox */
.job-carousel {
  scrollbar-width: thin;
  scrollbar-color: rgba(11,18,32,0.08) transparent;
}

/* ===== MOBILE VIEW (768px and below) ===== */
@media (max-width: 768px) {
  .jobs-section {
    padding: 20px 15px !important;
    margin: 20px auto !important;
  }
  
  .jobs-title {
    font-size: 24px !important;
    margin: 0 0 15px 0 !important;
    text-align: left !important;
  }
  
  .jobs-wrapper {
    padding: 0 50px !important; /* Space for arrows */
    position: relative !important;
  }
  
  /* Make carousel show one card at a time */
  .job-carousel {
    display: flex !important;
    overflow: hidden !important; /* Hide scrollbar */
    gap: 0 !important;
    padding: 10px 0 !important;
    scroll-snap-type: x mandatory !important;
  }
  
  /* Each job card takes full width */
  .job-card {
    flex: 0 0 calc(100% - 20px) !important;
    width: calc(100% - 20px) !important;
    min-width: calc(100% - 20px) !important;
    margin: 0 10px !important;
    padding: 16px !important;
    min-height: 180px !important;
    scroll-snap-align: center !important;
  }
  
  /* Hide scrollbar completely */
  .job-carousel::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }
  
  .job-carousel {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  /* Show arrows on mobile */
  .carousel-nav {
    display: flex !important;
  }
  
  /* Adjust job card content for mobile */
  .job-title {
    font-size: 17px !important;
    margin-top: 40px !important; /* Space for badge */
    margin-bottom: 8px !important;
  }
  
  .company {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  
  .badge {
    top: 16px !important;
    right: 16px !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
  }
  
  .job-info {
    font-size: 13px !important;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .jobs-section {
    padding: 16px 12px !important;
  }
  
  .jobs-title {
    font-size: 22px !important;
  }
  
  .job-card {
    flex: 0 0 calc(100% - 16px) !important;
    width: calc(100% - 16px) !important;
    min-width: calc(100% - 16px) !important;
    margin: 0 8px !important;
    padding: 14px !important;
  }
  
  .jobs-wrapper {
    padding: 0 45px !important;
  }
  
  .carousel-nav {
    width: 40px !important;
    height: 40px !important;
  }
  
  .job-title {
    font-size: 16px !important;
  }
  
  .company {
    font-size: 13px !important;
  }
}

/* Tablet view (769px to 991px) */
@media (min-width: 769px) and (max-width: 991px) {
  .job-carousel {
    display: flex !important;
    overflow-x: auto !important;
  }
  
  .job-card {
    flex: 0 0 calc(50% - 10px) !important; /* Show 2 cards */
    min-width: calc(50% - 10px) !important;
  }
  
  .carousel-nav {
    display: flex !important;
  }
}

/* Desktop view (992px and above) */
@media (min-width: 992px) {
  .job-carousel {
    display: flex !important;
    overflow-x: auto !important;
  }
  
  .job-card {
    flex: 0 0 280px !important; /* Fixed width */
  }
  
  .carousel-nav {
    display: flex !important;
  }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
  .body-container-wrapper,
  .container-fluid,
  .row,
  .col-12.col-lg-8 {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* ===== PRODUCTS SECTION - MOBILE VIEW FIX (CSS ONLY) ===== */

/* For mobile screens - Show one product at a time */
@media (max-width: 768px) {
  /* Make the container hide overflow */
  .products .overflow-auto {
    overflow: hidden !important;
    position: relative !important;
    padding: 0 50px !important; /* Space for arrows */
  }
  
  /* Make scroll container show only current item */
  #productsScroll {
    display: flex !important;
    overflow: hidden !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    padding: 10px 0 !important;
    width: 100% !important;
  }
  
  /* Each product takes full container width */
  #productsScroll .product-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    transition: transform 0.3s ease;
  }
  
  /* Hide scrollbars completely */
  #productsScroll::-webkit-scrollbar {
    display: none !important;
  }
  
  #productsScroll {
    scrollbar-width: none !important;
    -ms-overflow-sc-style: none !important;
  }
  
  /* Make arrow buttons more visible and always shown */
  #prevProducts, #nextProducts {
    display: flex !important;
    position: absolute !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    background: white !important;
    border: 2px solid rgba(65, 75, 210, 1) !important;
    color: rgba(65, 75, 210, 1) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    font-size: 20px !important;
    font-weight: bold !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  #prevProducts {
    left: 5px !important;
    top: 120px !important; /* Position below header */
  }
  
  #nextProducts {
    right: 5px !important;
    top: 120px !important; /* Position below header */
  }
  
  /* ===== MOBILE: INCREASE PRODUCT CARD CONTENT SIZES ===== */
  .product-slide {
    min-height: 420px !important;
  }
  
  .product-slide div[style*="height: 220px"] {
    height: 180px !important;
  }
  
  .product-slide .card-body {
    padding: 18px !important; /* More padding */
  }
  
  /* Make text more readable on mobile */
  .product-slide .fw-bold.text-dark.fs-6 {
    font-size: 18px !important; /* Bigger product name */
    line-height: 1.4;
    margin-bottom: 5px !important;
  }
  
  .product-slide .text-danger.small.fw-semibold.fs-6 {
    font-size: 17px !important; /* Bigger price */
    font-weight: 600;
  }
  
  .product-slide .small.text-muted.mt-2 {
    font-size: 15px !important; /* Bigger description */
    line-height: 1.6;
  }
  
  .product-slide .small.text-muted {
    font-size: 14px !important; /* Bigger company name */
  }
  
  /* Adjust the product image container */
  .product-slide > div:first-child {
    height: 180px !important;
  }
  
  /* Ensure the container doesn't show multiple products */
  .overflow-auto {
    max-height: 350px !important;
  }
}

/* For very small phones */
@media (max-width: 480px) {
  .products .overflow-auto {
    padding: 0 40px !important;
  }
  
  #prevProducts, #nextProducts {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    top: 110px !important;
  }
  
  #prevProducts {
    left: 2px !important;
  }
  
  #nextProducts {
    right: 2px !important;
  }
  
  .product-slide {
    min-height: 300px !important;
  }
  
  .product-slide div[style*="height: 220px"] {
    height: 160px !important;
  }
  
  .product-slide .fw-bold.text-dark.fs-6 {
    font-size: 17px !important;
  }
  
  .product-slide .text-danger.small.fw-semibold.fs-6 {
    font-size: 16px !important;
  }
}

/* Tablet view (769px to 991px) */
@media (min-width: 769px) and (max-width: 991px) {
  /* Keep scroll but make arrows visible */
  #prevProducts, #nextProducts {
    display: flex !important;
    top: 40px !important;
  }
}

/* Desktop view (992px and above) */
@media (min-width: 992px) {
  #prevProducts, #nextProducts {
    display: none !important; /* Hide arrows on desktop */
  }
  
  .products .overflow-auto {
    overflow-x: auto !important; /* Restore scroll on desktop */
  }
  
  #productsScroll {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  
  .product-slide {
    flex: 0 0 230px !important; /* Original width */
  }

  
}

/* Arrow button hover effects */
#prevProducts:hover, #nextProducts:hover {
  background: rgba(65, 75, 210, 1) !important;
  color: white !important;
  transform: translateY(-50%) scale(1.05) !important;
}





/* ===== OPPORTUNITIES SECTION - FIX FOR MOBILE ===== */

/* Base styles for all opportunity sections */
.opportunities-section {
  background: #f2f2fc;
  padding: 30px 0;
  border-radius: 10px;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.opportunities-section h2 {
  font-weight: bold;
  margin-bottom: 30px;
  color: #4150d2;
  text-align: center;
  font-size: 28px;
}

/* Event section specific (already has good mobile styles) */
.events-section {
  background: #fff;
  padding: 30px 0;
  border-radius: 10px;
  margin-bottom: 30px;
}

.events-section h2 {
  display: none; /* Hide the duplicate "Events" heading */
}

/* Make all opportunity sections look the same */
.opportunity-block {
  margin-bottom: 40px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}

.opportunity-block h3 {
  font-weight: bold;
  color: #0f1724;
  margin: 0;
  font-size: 22px;
  margin-bottom: 15px;
}

/* Header with title and arrows */
.opportunity-block > .d-flex {
  margin-bottom: 20px;
  align-items: center;
}

/* Opportunity slider container */
.opportunity-slider {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 10px 5px;
  scroll-snap-type: x mandatory;
}

.opportunity-slider::-webkit-scrollbar {
  display: none;
}

/* Opportunity cards */
.o-card {
  flex: 0 0 240px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  padding: 15px;
  text-align: center;
  color: #333;
  transition: transform 0.3s, box-shadow 0.3s;
  scroll-snap-align: start;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.o-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}

.o-card h5 {
  margin-top: 0;
  font-size: 16px;
  font-weight: 600;
  min-height: 48px;

  display: -webkit-box;         /* Required for -webkit-line-clamp */
  -webkit-box-orient: vertical; /* Required */
  -webkit-line-clamp: 2;        /* WebKit-specific */
  line-clamp: 2;                /* Standard property for compatibility */

  overflow: hidden;             /* Hide overflow */
  text-overflow: ellipsis;      /* Add … at the end */
}


.o-card p {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  min-height: 60px;
  
  display: -webkit-box;         /* Required for -webkit-line-clamp */
  -webkit-box-orient: vertical; /* Required */
  -webkit-line-clamp: 3;        /* WebKit-specific */
  line-clamp: 3;                /* Standard property for compatibility */
  
  overflow: hidden;             /* Hide extra text */
  text-overflow: ellipsis;      /* Add … at the end */
}


.o-card button, 
.o-card a.btn {
  background: #6c63ff;
  border: none;
  color: white;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  transition: background 0.3s;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  margin: 0 auto;
}

.o-card button:hover,
.o-card a.btn:hover {
  background: #4a44c3;
  color: white;
  text-decoration: none;
}

.o-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Slide buttons */
.slide-btn {
  border: none;
  background: #6c63ff;
  color: white;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.slide-btn:hover {
  background: #4a44c3;
}

/* ===== MOBILE VIEW FOR ALL OPPORTUNITY SECTIONS (768px and below) ===== */
@media (max-width: 768px) {
  .opportunities-section {
    padding: 20px 15px !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  
  .opportunities-section h2 {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }
  
  .events-section {
    padding: 20px 15px !important;
    margin-bottom: 20px !important;
    background: #fff;
  }
  
  /* Each opportunity block - make them look like event section */
  .opportunity-block {
    margin-bottom: 30px !important;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  
  .opportunity-block h3 {
    font-size: 20px !important;
    margin-bottom: 15px;
    color: #0f1724;
  }
  
  /* Hide scrollbar on mobile and show one card at a time */
  .opportunity-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    padding: 10px 0 !important;
    width: 100%;
  }
  
  /* Each card takes full width on mobile - JUST LIKE EVENT SECTION */
  .o-card {
    flex: 0 0 calc(100% - 40px) !important;
    width: calc(100% - 40px) !important;
    min-width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 20px !important;
    scroll-snap-align: center !important;
    min-height: 280px;
    padding: 15px;
  }
  
  /* Make all cards the same height */
  .o-card img {
    height: 150px !important;
  }
  
  .o-card h5 {
    font-size: 17px !important;
    min-height: 40px;
    margin-top: 10px;
  }
  
  .o-card p {
    font-size: 14px !important;
    min-height: 63px;
    margin-bottom: 15px;
  }
  
  .o-card button,
  .o-card a.btn {
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 500;
  }
  
  /* Make slide buttons more prominent on mobile */
  .slide-btn {
    width: 40px !important;
    height: 40px !important;
    background: #4150d2 !important;
    font-size: 16px;
  }
  
  .slide-btn:hover {
    background: #4a44c3 !important;
  }
  
  /* Ensure arrows are visible and properly aligned */
  .opportunity-block > .d-flex {
    margin-bottom: 15px;
  }
  
  .opportunity-block > .d-flex > div {
    display: flex !important;
    gap: 10px;
  }
  
  /* Hide scrollbars completely on mobile */
  .opportunity-slider::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }
  
  .opportunity-slider {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  /* Make the "No items" message consistent */
  .opportunity-slider .text-muted {
    width: 100%;
    text-align: center;
    padding: 40px 20px;
    font-size: 16px;
    color: #666;
  }
}

/* Very small phones (480px and below) */
@media (max-width: 480px) {
  .opportunities-section {
    padding: 15px 10px !important;
  }
  
  .opportunities-section h2 {
    font-size: 22px !important;
  }
  
  .events-section {
    padding: 15px 10px !important;
  }
  
  .opportunity-block {
    padding: 12px !important;
    margin-bottom: 25px !important;
  }
  
  .opportunity-block h3 {
    font-size: 18px !important;
    margin-bottom: 12px;
  }
  
  /* Adjust card width for very small screens */
  .o-card {
    flex: 0 0 calc(100% - 30px) !important;
    width: calc(100% - 30px) !important;
    min-width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin: 0 15px !important;
    padding: 12px !important;
    min-height: 260px;
  }
  
  .o-card img {
    height: 130px !important;
  }
  
  .o-card h5 {
    font-size: 16px !important;
    min-height: 38px;
  }
  
  .o-card p {
    font-size: 13px !important;
    min-height: 58px;
  }
  
  .slide-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px;
  }
  
  .o-card button,
  .o-card a.btn {
    padding: 8px 20px !important;
    font-size: 14px !important;
  }
}

/* Tablet view (769px to 991px) */
@media (min-width: 769px) and (max-width: 991px) {
  .opportunity-slider {
    overflow-x: auto !important;
  }
  
  .o-card {
    flex: 0 0 calc(50% - 15px) !important;
    min-width: calc(50% - 15px) !important;
  }
  
  /* Show 2 cards on tablet */
  .opportunity-slider {
    display: flex !important;
    overflow-x: auto !important;
  }
}

/* Desktop view (992px and above) */
@media (min-width: 992px) {
  .opportunities-section {
    padding: 50px 0 !important;
  }
  
  .opportunity-slider {
    display: flex !important;
    overflow-x: auto !important;
  }
  
  .o-card {
    flex: 0 0 240px !important;
  }
  
  /* Hide the events section heading inside opportunities */
  .events-section h2 {
    display: none;
  }
}

/* Ensure consistent spacing between sections */
.opportunity-block:last-child {
  margin-bottom: 0;
}

/* Fix for Business for Sale section specifically */
#businessSlider .o-card {
  min-height: 280px;
}

#businessSlider .o-card h5 {
  min-height: 48px;
}

/* Make sure all sections have the same background */
.opportunity-block,
.events-section {
  background: #fff;
}

/* Container adjustments for mobile */
@media (max-width: 768px) {
  .opportunities-section .container {
    padding: 0 !important;
  }
  
  .opportunity-block > .d-flex {
    padding: 0;
  }
}
/* ===== FIX REVIEW SECTION FOR MOBILE ===== */

/* For mobile screens (768px and below) */
@media (max-width: 768px) {
  /* Make the entire reviews section stack properly */
  .wrapper.mt-5 {
    margin-top: 20px !important;
  }
  
  /* Fix the two-column layout to stack vertically */
  .review-card .row {
    flex-direction: column !important;
    margin: 0 !important;
  }
  
  /* Make each column take full width */
  .review-card .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin-bottom: 25px !important;
  }
  
  /* Customer Reviews left side */
  .review-card .col-md-6:first-child {
    order: 2 !important; /* Move to bottom on mobile */
    padding: 20px 15px !important;
    background: #f8f9fa;
    border-radius: 10px;
  }
  
  /* Leave Review form right side */
  .review-card .col-md-6:last-child {
    order: 1 !important; /* Move to top on mobile */
    padding: 20px 15px !important;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  }
  
  /* Fix the average rating display */
  .review-card .text-center {
    padding: 15px 0 !important;
  }
  
  .review-card .display-4 {
    font-size: 2.8rem !important; /* Bigger number */
    font-weight: bold;
    color: #f4c150;
  }
  
  .review-card .fs-5 {
    font-size: 1.1rem !important;
    margin-bottom: 10px;
  }
  
  /* Fix the stars in average rating */
  .review-card .fs-6 .star-rating {
    font-size: 24px !important; /* Bigger stars */
    justify-content: center !important;
    margin: 10px 0;
  }
  
  /* Fix the "1 reviews" text */
  .review-card .text-muted.fs-6 {
    font-size: 1rem !important;
    margin-top: 10px;
  }
  
  /* Fix "Leave a Review" header */
  .review-card h4.fw-bold {
    font-size: 22px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    color: #0f1724;
  }
  
  /* Fix form inputs */
  .review-card .form-control {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  
  /* Fix textarea */
  .review-card textarea.form-control {
    min-height: 140px !important;
    resize: vertical !important;
  }
  
  /* Fix star rating input */
  .star-rating i.star {
    margin: 0 5px !important;
    font-size: 1.6rem !important;
    cursor: pointer !important;
  }
  
  .star-rating i.star:hover,
  .star-rating i.star.active {
    transform: scale(1.3) !important;
  }
  
  /* Fix submit button */
  .review-card .btn-primary {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
    font-weight: 600;
    margin-top: 15px !important;
    border-radius: 8px;
    background: linear-gradient(135deg, #746bde 0%, #a565d6 60%, #5a2d82 100%) !important;
    border: none;
  }
  
  /* Fix horizontal line */
  .review-card hr {
    width: 100% !important;
    margin: 20px 0 !important;
    border-color: #ddd;
  }
  
  /* Fix the existing reviews slider */
  #reviewsScroll {
    padding: 10px 0 !important;
    overflow-x: auto;
    display: flex;
    gap: 15px;
  }
  
  .review-slide {
    min-width: 280px !important;
    max-width: 280px !important;
    padding: 20px 15px !important;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    flex-shrink: 0;
  }
  
  /* Fix review content */
  .review-slide .mb-3 {
    margin-bottom: 15px !important;
  }
  
  .review-slide .fw-semibold {
    font-size: 16px !important;
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .review-slide .text-muted {
    font-size: 14px !important;
    color: #666 !important;
  }
  
  .review-slide p {
    font-size: 15px !important;
    line-height: 1.5;
    margin: 10px 0;
  }
  
  /* Remove arrows on mobile for reviews */
  #prevReviews, #nextReviews {
    display: none !important;
  }
  
  /* Fix spacing between sections */
  .review-card .mb-5 {
    margin-bottom: 25px !important;
  }
  
  /* Make the gradient background cover entire review card */
  .review-card {
    background: linear-gradient(135deg, #746bde 0%, #a565d6 60%, #5a2d82 100%);
    padding: 20px 15px !important;
    border-radius: 15px;
  }
  
  /* Fix inner content background */
  .review-card > .row {
    background: white;
    border-radius: 10px;
    padding: 15px !important;
    margin: 0 !important;
  }
}

/* Extra small devices (480px and below) */
@media (max-width: 480px) {
  /* Adjust padding */
  .review-card {
    padding: 15px 10px !important;
  }
  
  .review-card .col-md-6:first-child,
  .review-card .col-md-6:last-child {
    padding: 15px 10px !important;
  }
  
  /* Smaller form elements */
  .review-card .form-control {
    padding: 12px !important;
    font-size: 15px !important;
  }
  
  .review-card textarea.form-control {
    min-height: 120px !important;
  }
  
  /* Adjust review card header */
  .review-card h4.fw-bold {
    font-size: 20px !important;
  }
  
  /* Smaller review slides */
  .review-slide {
    min-width: 260px !important;
    max-width: 260px !important;
    padding: 15px 10px !important;
  }
  
  /* Smaller average rating number */
  .review-card .display-4 {
    font-size: 2.5rem !important;
  }
  
  /* Smaller stars */
  .star-rating i.star {
    font-size: 1.4rem !important;
    margin: 0 4px !important;
  }
  
  .review-card .btn-primary {
    padding: 12px !important;
    font-size: 15px !important;
  }
  
  /* Fix the "How did we do?" text */
  .review-card .d-flex.align-items-center.mb-3 p {
    font-size: 16px !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    width: 100%;
  }
}

/* Very small devices (360px and below) */
@media (max-width: 360px) {
  .review-card h4.fw-bold {
    font-size: 18px !important;
  }
  
  .review-slide {
    min-width: 240px !important;
    max-width: 240px !important;
    padding: 12px 8px !important;
  }
  
  .review-card .form-control {
    font-size: 14px !important;
    padding: 10px !important;
  }
  
  .review-card .btn-primary {
    font-size: 14px !important;
    padding: 10px !important;
  }
  
  .review-card .display-4 {
    font-size: 2.2rem !important;
  }
}

/* Fix for tablet view (769px to 991px) */
@media (min-width: 769px) and (max-width: 991px) {
  /* Keep two columns but adjust spacing */
  .review-card .col-md-6 {
    padding: 0 15px !important;
  }
  
  /* Adjust review slides for tablet */
  .review-slide {
    min-width: 300px !important;
    max-width: 300px !important;
  }
  
  /* Ensure the review section doesn't overlap */
  .review-card {
    margin-bottom: 30px !important;
  }
}

/* Ensure no horizontal overflow on mobile */
@media (max-width: 768px) {
  .review-card {
    overflow: hidden !important;
  }
  
  .container-fluid, .row, .col-12.col-lg-8 {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* Fix star rating alignment on mobile */
@media (max-width: 768px) {
  .star-rating {
    display: flex !important;
    justify-content: center !important;
    margin: 15px 0 !important;
  }
  
  .star-rating i {
    margin: 0 6px !important;
  }
  
  /* Center the "How did we do?" section */
  .review-card .d-flex.align-items-center.mb-3 {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .review-card .d-flex.align-items-center.mb-3 p {
    margin-bottom: 15px !important;
    width: 100%;
  }
}

/* Fix the existing reviews section title */
@media (max-width: 768px) {
  .review-card .mb-5 h5 {
    font-size: 18px !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    color: #0f1724;
    font-weight: 600;
  }
}



  /* Make all review cards the same size and show full content */
  .review-slide {
    height: 240px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .review-slide .card-body-content {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 100px !important;
    max-height: 120px !important;
    margin-bottom: 10px !important;
  }
  
  .review-slide p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin-bottom: 10px !important;
  }
  
  .review-slide .author-info {
    margin-top: auto !important;
    font-size: 13px !important;
  }
  
  /* Ensure all cards have consistent dimensions */
  #reviewsScroll .review-slide {
    min-width: 320px !important;
    max-width: 320px !important;
    width: 320px !important;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    #reviewsScroll .review-slide {
      min-width: 280px !important;
      max-width: 280px !important;
      width: 280px !important;
      height: 260px !important;
    }
    
    .review-slide p {
      font-size: 13px !important;
    }
  }


 /* ===== MOBILE FIX ONLY - Hide scrollbar, show 1 card at a time ===== */
/* Only applies to screens 768px and below (mobile) */

@media (max-width: 768px) {
  /* 1. Remove scrollbar from review container */
  #reviewsScroll {
    overflow-x: hidden !important; /* Hide horizontal scroll */
    overflow-y: visible !important;
    display: flex !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 0 !important;
    gap: 0 !important;
    
    /* Hide scrollbar completely */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }
  
  /* Hide scrollbar for Chrome, Safari, Opera */
  #reviewsScroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  
  /* 2. Make review cards take full width (show 1 at a time) */
  #reviewsScroll .review-slide {
    flex: 0 0 calc(100% - 40px) !important;
    width: calc(100% - 40px) !important;
    min-width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 20px !important;
    scroll-snap-align: center !important;
  }
  
  /* 3. Show navigation arrows on mobile */
  #prevReviews, #nextReviews {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: white !important;
    border: 2px solid #4150d2 !important;
    color: #4150d2 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
  }
  
  #prevReviews {
    left: 5px !important;
  }
  
  #nextReviews {
    right: 5px !important;
  }
  
  /* 4. Make sure review content fits on mobile */
  .review-slide {
    min-height: 280px !important;
    max-height: 280px !important;
    padding: 15px !important;
  }
  
  .review-slide p {
    font-size: 14px !important;
    line-height: 1.4 !important;
    max-height: 140px !important;
    overflow-y: auto !important;
  }
}


/* ===== REMOVE WHITE BACKGROUND FROM EVENTS SECTION ON MOBILE ===== */
@media (max-width: 768px) {
  /* Remove white background from events section container */
  .events-section {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
  }
  
  /* Remove white card/border around events */
  .events-section .card,
  .opportunity-block.events,
  .events-section > .bg-white,
  .events-section > .card,
  .events-section > [class*="card"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Keep the event cards (o-cards) visible but adjust styling */
  .events-section .o-card {
    background: #fff !important; /* Keep event cards white */
    border-radius: 15px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
    display: block !important; /* Make sure they're visible */
  }
  
  /* Remove any white background from the opportunities section */
  .opportunities-section {
    background: transparent !important;
  }
  
  /* Remove white background from opportunity blocks */
  .opportunity-block {
    background: transparent !important;
    padding: 0 !important;
  }
  
  /* Specifically target the events block if it has a specific class */
  .events-opportunity-block,
  .events-opportunity,
  .opportunity-block:has(h3:contains("Events")) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
}


/* ===== INCREASE ALL CARD SIZES ON MOBILE ===== */
@media (max-width: 768px) {
  /* ===== 1. JOB CARDS - INCREASED SIZE ===== */
  .job-card {
    padding: 24px !important; /* Increased from 20px */
    min-height: 200px !important; /* Increased from 180px */
    border-radius: 12px !important;
  }
  
  .job-title {
    font-size: 22px !important; /* Increased from 20px */
    margin-top: 50px !important; /* More space for badge */
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
  }
  
  .company {
    font-size: 18px !important; /* Increased from 16px */
    margin-bottom: 18px !important;
  }
  
  .salary {
    font-size: 18px !important; /* Increased from 16px */
    margin-bottom: 18px !important;
  }
  
  .job-info {
    font-size: 16px !important; /* Increased from 15px */
    margin-bottom: 10px !important;
    gap: 12px !important;
  }
  
  .badge {
    font-size: 15px !important; /* Increased from 14px */
    padding: 10px 16px !important; /* Increased padding */
    top: 20px !important;
    right: 20px !important;
  }
  
  /* ===== 2. PRODUCT CARDS - INCREASED SIZE ===== */
  .product-slide {
    min-height: 460px !important; /* Increased from 420px */
    padding: 20px !important;
  }
  
  .product-slide div[style*="height: 220px"] {
    height: 200px !important; /* Increased from 180px */
  }
  
  .product-slide .card-body {
    padding: 22px !important; /* Increased from 18px */
  }
  
  .product-slide .fw-bold.text-dark.fs-6 {
    font-size: 20px !important; /* Increased from 18px */
    margin-bottom: 8px !important;
  }
  
  .product-slide .text-danger.small.fw-semibold.fs-6 {
    font-size: 19px !important; /* Increased from 17px */
  }
  
  .product-slide .small.text-muted.mt-2 {
    font-size: 16px !important; /* Increased from 15px */
    line-height: 1.7 !important;
  }
  
  .product-slide .small.text-muted {
    font-size: 15px !important; /* Increased from 14px */
  }
  
  /* ===== 3. OPPORTUNITY CARDS - INCREASED SIZE ===== */
  .opportunity-slider .o-card {
    padding: 24px !important; /* Increased from 22px */
    min-height: 360px !important; /* Increased from 340px */
    border-radius: 20px !important; /* Increased from 18px */
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
  }
  
  .opportunity-slider .o-card img {
    height: 180px !important; /* Increased from 160px */
    border-radius: 15px !important; /* Increased from 12px */
    margin-bottom: 18px !important;
  }
  
  .opportunity-slider .o-card h5 {
    font-size: 20px !important; /* Increased from 18px */
    min-height: 60px !important; /* Increased from 55px */
    margin-bottom: 15px !important;
    font-weight: 700 !important;
  }
  
  .opportunity-slider .o-card p {
    font-size: 16px !important; /* Increased from 15px */
    min-height: 80px !important; /* Increased from 70px */
    line-height: 1.7 !important;
    margin-bottom: 22px !important;
  }
  
  .opportunity-slider .o-card button,
  .opportunity-slider .o-card a.btn {
    padding: 14px 32px !important; /* Increased from 12px 28px */
    font-size: 17px !important; /* Increased from 16px */
    border-radius: 28px !important; /* Increased from 25px */
    min-height: 52px !important; /* Increased from 48px */
    min-width: 180px !important; /* Increased from 160px */
  }
  
  /* ===== 4. REVIEW CARDS - INCREASED SIZE ===== */
  .review-slide {
    min-height: 300px !important; /* Increased from 280px */
    max-height: 300px !important; /* Increased from 280px */
    padding: 20px !important; /* Increased from 15px */
    border-radius: 15px !important;
  }
  
  .review-slide p {
    font-size: 16px !important; /* Increased from 14px */
    line-height: 1.6 !important;
    max-height: 160px !important; /* Increased from 140px */
  }
  
  .review-slide .fw-semibold {
    font-size: 18px !important; /* Increased from 16px */
  }
  
  .review-slide .text-muted {
    font-size: 16px !important; /* Increased from 14px */
  }
  
  /* ===== 5. ABOUT SECTION CARDS - INCREASED SIZE ===== */
  .card .p-3 {
    font-size: 18px !important; /* Increased from 17px */
    line-height: 1.8 !important; /* Increased from 1.7 */
    padding: 20px 16px !important; /* Increased from 16px 12px */
  }
  
  .card h5.fw-bold.d-flex.gap-2.mb-1 {
    font-size: 20px !important; /* Increased from 18px */
  }
  
  .card h5.fw-bold.d-flex.gap-2.mb-1 p {
    font-size: 20px !important; /* Increased from 18px */
  }
  
  #company-like-btn {
    font-size: 16px !important; /* Increased from 15px */
    padding: 8px 16px !important; /* Increased from 6px 12px */
  }
  
  /* ===== 6. SERVICES CARDS - INCREASED SIZE ===== */
  .services-offered h5.fw-bold.d-flex.gap-2.mb-1 {
    font-size: 22px !important; /* Increased from 20px */
  }
  
  .services-offered h5.fw-bold.d-flex.gap-2.mb-1 p {
    font-size: 22px !important; /* Increased from 20px */
  }
  
  .services-offered .mt-2.text-muted.fs-5 {
    font-size: 17px !important; /* Increased from 16px */
    line-height: 1.6 !important;
  }
  
  .services-offered .scroll-container .text-center img {
    max-height: 200px !important; /* Increased from 180px */
  }
  
  /* ===== 7. SECTION HEADERS - INCREASED SIZE ===== */
  .jobs-title,
  .opportunity-block h3,
  .review-card h4.fw-bold,
  .review-card .mb-5 h5 {
    font-size: 26px !important; /* Bigger section titles */
    margin-bottom: 25px !important;
  }
  
  .opportunities-section h2 {
    font-size: 28px !important; /* Increased from 24px */
  }
  
  /* ===== 8. FORM ELEMENTS - INCREASED SIZE ===== */
  .review-card .form-control {
    padding: 16px !important; /* Increased from 14px */
    font-size: 17px !important; /* Increased from 16px */
    margin-bottom: 18px !important;
  }
  
  .review-card textarea.form-control {
    min-height: 160px !important; /* Increased from 140px */
  }
  
  .review-card .btn-primary {
    padding: 16px !important; /* Increased from 14px */
    font-size: 18px !important; /* Increased from 16px */
    margin-top: 20px !important;
  }
  
  /* ===== 9. BUTTONS - INCREASED SIZE ===== */
  .carousel-nav,
  .slide-btn,
  #prevProducts, #nextProducts,
  #prevReviews, #nextReviews {
    width: 50px !important; /* Increased from 44px */
    height: 50px !important; /* Increased from 44px */
    font-size: 22px !important; /* Increased from 18px */
  }
  
  .btn-send-enquiry,
  .btn-call,
  .btn-get-quote,
  .btn-submit-review {
    padding: 14px 28px !important;
    font-size: 17px !important;
    min-height: 50px !important;
  }
  
  /* ===== 10. INCREASE SPACING ===== */
  .jobs-section {
    padding: 25px 20px !important; /* Increased padding */
    margin: 25px auto !important;
  }
  
  .jobs-wrapper {
    padding: 0 60px !important; /* More space for arrows */
  }
  
  .opportunity-slider {
    gap: 30px !important; /* More space between cards */
    padding: 15px 0 !important;
  }
  
  /* Individual card width on mobile with more spacing */
  .job-card,
  .opportunity-slider .o-card,
  #reviewsScroll .review-slide,
  #productsScroll .product-slide {
    flex: 0 0 calc(100% - 40px) !important;
    width: calc(100% - 40px) !important;
    min-width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 20px !important;
  }
}

/* Extra small phones - adjust for very small screens */
@media (max-width: 480px) {
  /* Slightly reduce sizes on very small screens but still larger than before */
  .job-title {
    font-size: 20px !important;
  }
  
  .company {
    font-size: 16px !important;
  }
  
  .job-info {
    font-size: 15px !important;
  }
  
  .product-slide {
    min-height: 420px !important;
  }
  
  .product-slide .fw-bold.text-dark.fs-6 {
    font-size: 18px !important;
  }
  
  .opportunity-slider .o-card {
    padding: 20px !important;
    min-height: 340px !important;
  }
  
  .opportunity-slider .o-card img {
    height: 160px !important;
  }
  
  .opportunity-slider .o-card h5 {
    font-size: 18px !important;
  }
  
  .opportunity-slider .o-card p {
    font-size: 15px !important;
  }
  
  .review-slide {
    min-height: 280px !important;
  }
  
  .review-slide p {
    font-size: 15px !important;
  }
  
  .jobs-title,
  .opportunity-block h3 {
    font-size: 24px !important;
  }
  
  /* Reduce button sizes slightly */
  .carousel-nav,
  .slide-btn,
  #prevProducts, #nextProducts {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
  
  /* Adjust card width for very small screens */
  .job-card,
  .opportunity-slider .o-card,
  #reviewsScroll .review-slide {
    flex: 0 0 calc(100% - 30px) !important;
    width: calc(100% - 30px) !important;
    min-width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin: 0 15px !important;
  }
}

/* Very small phones - keep everything readable */
@media (max-width: 360px) {
  /* Minimum sizes to ensure readability */
  .job-title,
  .product-slide .fw-bold.text-dark.fs-6,
  .opportunity-slider .o-card h5 {
    font-size: 17px !important;
  }
  
  .card .p-3,
  .review-slide p,
  .services-offered .mt-2.text-muted.fs-5 {
    font-size: 16px !important;
  }
  
  .jobs-title,
  .opportunity-block h3,
  .review-card h4.fw-bold {
    font-size: 22px !important;
  }
  
  .review-card .form-control {
    font-size: 16px !important;
    padding: 14px !important;
  }
}

/* ===== MOBILE FIX FOR PRODUCT SECTION ONLY ===== */

@media (max-width: 768px) {
  /* 1. Remove horizontal scroll and show one product at a time */
  .products .overflow-auto {
    overflow: hidden !important;
    position: relative !important;
    padding: 0 50px !important; /* Space for arrows */
    margin: 0 -15px !important; /* Full width */
    width: calc(100% + 30px) !important;
  }
  
  /* 2. Make product slider hide scroll and snap to cards */
  #productsScroll {
    display: flex !important;
    overflow: hidden !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    padding: 10px 0 !important;
    width: 100% !important;
  }
  
  /* 3. Each product takes full container width (one at a time) */
  #productsScroll .product-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    padding: 0 10px !important;
  }
  
  /* 4. Hide all scrollbars */
  #productsScroll::-webkit-scrollbar {
    display: none !important;
  }
  
  #productsScroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  /* 5. Make arrow navigation buttons visible */
  #prevProducts, #nextProducts {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: white !important;
    border: 2px solid rgba(65, 75, 210, 1) !important;
    color: rgba(65, 75, 210, 1) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    font-size: 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
  }
  
  #prevProducts {
    left: 10px !important;
  }
  
  #nextProducts {
    right: 10px !important;
  }
  
  /* 6. Make product cards larger for mobile */
  .product-slide {
    min-height: 420px !important;
  }
  
  .product-slide > div:first-child {
    height: 200px !important; /* Taller image */
  }
  
  .product-slide .card-body {
    padding: 20px !important; /* More padding */
  }
  
  /* 7. Increase text sizes for mobile readability */
  .product-slide .fw-bold.text-dark.fs-6 {
    font-size: 18px !important; /* Bigger product name */
    margin-bottom: 8px !important;
  }
  
  .product-slide .text-danger.small.fw-semibold.fs-6 {
    font-size: 17px !important; /* Bigger price */
  }
  
  .product-slide .small.text-muted.mt-2 {
    font-size: 15px !important; /* Bigger description */
    line-height: 1.6 !important;
  }
  
  .product-slide .small.text-muted {
    font-size: 14px !important; /* Bigger company name */
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  .products .overflow-auto {
    padding: 0 40px !important;
  }
  
  #prevProducts, #nextProducts {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  
  #prevProducts {
    left: 5px !important;
  }
  
  #nextProducts {
    right: 5px !important;
  }
  
  .product-slide {
    min-height: 380px !important;
  }
  
  .product-slide > div:first-child {
    height: 180px !important;
  }
  
  .product-slide .fw-bold.text-dark.fs-6 {
    font-size: 17px !important;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .products .overflow-auto {
    padding: 0 35px !important;
  }
  
  #prevProducts, #nextProducts {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  
  .product-slide {
    min-height: 350px !important;
  }
}

/* ===== REMOVE ALL BACKGROUND SPACING FROM JOBS SECTION - MOBILE VIEW ===== */
@media (max-width: 768px) {
  /* 1. Remove ALL backgrounds, padding, margins from jobs section */
  .jobs-section {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }
  
  /* 2. Remove wrapper background and spacing */
  .jobs-wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* 3. Make section title clean without background */
  .jobs-title {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    color: #0f1724 !important;
    font-size: 24px !important;
    text-align: left !important;
  }
  
  /* 4. COMPACT CAROUSEL - Remove ALL padding and margins */
  .job-carousel {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
  }
  
  /* 5. INDIVIDUAL JOB CARDS - Show only cards with minimal spacing */
  .job-card {
    background: #fff !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.12) !important;
    padding: 24px !important;
    min-height: 200px !important;
    margin: 0 0 15px 0 !important; /* Only bottom margin between cards */
    width: 100% !important;
    
    /* Card takes full width */
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    
    /* CENTER ALIGN ALL CARD CONTENT */
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* 6. CENTER JOB TITLE */
  .job-title {
    font-size: 22px !important;
    margin-top: 55px !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  /* 7. CENTER COMPANY NAME */
  .company {
    font-size: 18px !important;
    margin-bottom: 18px !important;
    color: #555 !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  /* 8. CENTER SALARY */
  .salary {
    font-size: 18px !important;
    margin-bottom: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  /* 9. CENTER JOB INFO (Full-Time/Part-Time) */
  .job-info {
    font-size: 16px !important;
    margin-bottom: 10px !important;
    gap: 12px !important;
    color: #444 !important;
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  /* 10. Center badge if it has position absolute */
  .badge {
    font-size: 15px !important;
    padding: 10px 16px !important;
    top: 22px !important;
    right: 22px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    
    /* If badge should also be centered, use this instead: */
    /* position: relative !important;
    top: auto !important;
    right: auto !important;
    display: inline-block !important;
    margin: 0 auto 15px auto !important; */
  }
  
  /* 11. Center any icons in job info */
  .job-info i {
    margin: 0 5px !important;
  }
  
  /* 12. Remove arrow container background and spacing */
  .carousel-nav.left-arrow,
  .carousel-nav.right-arrow {
    background: #4150d2 !important;
    color: white !important;
    border: none !important;
    margin: 0 !important;
  }
  
  /* 13. Position arrows for mobile */
  .carousel-nav.left-arrow {
    left: 5px !important;
  }
  
  .carousel-nav.right-arrow {
    right: 5px !important;
  }
  
  /* 14. Remove any container padding that might add space */
  .jobs-section .container,
  .jobs-section .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* 15. Remove any parent container spacing */
  .jobs-section .row {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 16. Hide scrollbars completely on mobile */
  .job-carousel::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }
  
  .job-carousel {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  /* 17. Ensure no white space around the entire section */
  .jobs-section * {
    max-width: 100% !important;
  }
}

/* Extra small phones - even more compact */
@media (max-width: 480px) {
  .jobs-section {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .job-card {
    padding: 20px !important;
    min-height: 180px !important;
    margin: 0 0 12px 0 !important;
    border-radius: 12px !important;
    
    /* Maintain center alignment */
    text-align: center !important;
    align-items: center !important;
  }
  
  .jobs-title {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
  
  .job-title {
    font-size: 20px !important;
    margin-top: 50px !important;
    text-align: center !important;
  }
  
  .company {
    font-size: 16px !important;
    text-align: center !important;
  }
  
  .salary {
    font-size: 16px !important;
    text-align: center !important;
  }
  
  .job-info {
    font-size: 15px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  
  .badge {
    font-size: 14px !important;
    padding: 8px 14px !important;
  }
  
  .carousel-nav.left-arrow,
  .carousel-nav.right-arrow {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  
  /* Make carousel take full width without any padding */
  .job-carousel {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .jobs-section {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .job-card {
    padding: 18px !important;
    min-height: 170px !important;
    margin: 0 0 10px 0 !important;
    
    /* Maintain center alignment */
    text-align: center !important;
    align-items: center !important;
  }
  
  .jobs-title {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
  
  .job-title {
    font-size: 18px !important;
    text-align: center !important;
  }
  
  .company {
    font-size: 15px !important;
    text-align: center !important;
  }
  
  .job-info {
    font-size: 14px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  
  /* Center job info items */
  .job-info > * {
    display: inline-block !important;
    text-align: center !important;
  }
}

/* Remove any residual background from all possible selectors in jobs section */
@media (max-width: 768px) {
  .jobs-section [class*="bg-"],
  .jobs-section [class*="shadow"],
  .jobs-section [class*="rounded"],
  .jobs-section [class*="border"],
  .jobs-wrapper [class*="bg-"],
  .jobs-wrapper [class*="shadow"],
  .jobs-wrapper [class*="rounded"],
  .jobs-wrapper [class*="border"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Ensure only the individual job cards are visible */
@media (max-width: 768px) {
  .jobs-section > *:not(.job-carousel),
  .jobs-section > *:not(.job-card),
  .jobs-section > *:not(.jobs-title) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Make sure only the job cards have background */
  .jobs-section .job-card {
    background: #fff !important;
  }
  
  /* Everything else should be transparent */
  .jobs-section .job-card:only-child {
    background: #fff !important;
  }
}

/* Arrow hover effects */
.carousel-nav.left-arrow:hover,
.carousel-nav.right-arrow:hover {
  background: #2a3ac7 !important;
  color: white !important;
  transform: translateY(-50%) scale(1.05) !important;
}

/* ===== FINAL FIX - MAKE ARROWS VISIBLE ===== */

/* 1. FIRST, FORCE THE CONTAINERS TO BE POSITIONED */
.products .d-flex.justify-content-between.align-items-center {
    position: relative !important;
    min-height: 50px !important;
}

.review-card .d-flex.justify-content-between.align-items-center {
    position: relative !important;
    min-height: 50px !important;
}

/* 2. SHOW AND POSITION PRODUCT ARROWS */
#prevProducts, #nextProducts {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;  /* Change from absolute to relative */
    background: #4150d2 !important;
    color: white !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100 !important;
}

/* 3. SHOW AND POSITION REVIEW ARROWS */
#prevReviews, #nextReviews {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;  /* Change from absolute to relative */
    background: #4150d2 !important;
    color: white !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100 !important;
}

/* 4. HIDE ALL SCROLLBAR ARROWS PERMANENTLY */
.products .overflow-auto::-webkit-scrollbar-button,
#reviewsScroll::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.products .overflow-auto {
    scrollbar-width: thin !important;
}

#reviewsScroll {
    scrollbar-width: thin !important;
}

/* 5. MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
    #prevProducts, #nextProducts,
    #prevReviews, #nextReviews {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }
}

/* ===== CONSISTENT ARROW BUTTON STYLING ===== */
/* Apply to all arrow buttons in opportunities sections */
#prevProducts, #nextProducts,
#prevServices, #nextServices,
#prevEvents, #nextEvents,
#prevTenders, #nextTenders,
#prevInvestments, #nextInvestments,
#prevBusiness, #nextBusiness,
#prevReviews, #nextReviews {
    display: flex !important; /* Changed from none to flex */
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border: 1px solid #adb5bd !important;
    border-radius: 6px !important;
    background-color: white !important;
    color: #495057 !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

/* MOBILE VIEW - Always show arrows */
@media (max-width: 768px) {
    #prevProducts, #nextProducts,
    #prevServices, #nextServices,
    #prevEvents, #nextEvents,
    #prevTenders, #nextTenders,
    #prevInvestments, #nextInvestments,
    #prevBusiness, #nextBusiness,
    #prevReviews, #nextReviews {
        display: flex !important; /* Force show on mobile */
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        background-color: #4150d2 !important;
        border-color: #4150d2 !important;
        color: white !important;
    }
    
    /* Disable arrows when at start/end */
    #prevProducts:disabled, #nextProducts:disabled,
    #prevServices:disabled, #nextServices:disabled,
    #prevEvents:disabled, #nextEvents:disabled,
    #prevTenders:disabled, #nextTenders:disabled,
    #prevInvestments:disabled, #nextInvestments:disabled,
    #prevBusiness:disabled, #nextBusiness:disabled,
    #prevReviews:disabled, #nextReviews:disabled {
        background-color: #6c757d !important;
        border-color: #6c757d !important;
        color: white !important;
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }
}

/* ===== SIMPLE FIX: ALWAYS SHOW ARROWS ===== */

/* DESKTOP: Show arrows on desktop too */
@media (min-width: 769px) {
    #prevProducts, #nextProducts,
    #prevServices, #nextServices,
    #prevEvents, #nextEvents,
    #prevTenders, #nextTenders,
    #prevInvestments, #nextInvestments,
    #prevSales, #nextSales,
    #prevReviews, #nextReviews {
        display: flex !important;  /* CHANGE THIS LINE - Show on desktop */
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        font-size: 18px !important;
        font-weight: bold !important;
        border: 1px solid #adb5bd !important;
        border-radius: 6px !important;
        background-color: white !important;
        color: #495057 !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
        margin: 0 2px !important;
    }
}

/* MOBILE: Show arrows */
@media (max-width: 768px) {
    #prevProducts, #nextProducts,
    #prevServices, #nextServices,
    #prevEvents, #nextEvents,
    #prevTenders, #nextTenders,
    #prevInvestments, #nextInvestments,
    #prevSales, #nextSales,
    #prevReviews, #nextReviews {
        display: flex !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        background-color: #4150d2 !important;
        border-color: #4150d2 !important;
        color: white !important;
    }
}

/* Arrow hover effects */
#prevProducts:hover, #nextProducts:hover,
#prevServices:hover, #nextServices:hover,
#prevEvents:hover, #nextEvents:hover,
#prevTenders:hover, #nextTenders:hover,
#prevInvestments:hover, #nextInvestments:hover,
#prevSales:hover, #nextSales:hover,
#prevReviews:hover, #nextReviews:hover {
    background-color: #4150d2 !important;
    border-color: #4150d2 !important;
    color: white !important;
}

/* Disabled state */
#prevProducts:disabled, #nextProducts:disabled,
#prevServices:disabled, #nextServices:disabled,
#prevEvents:disabled, #nextEvents:disabled,
#prevTenders:disabled, #nextTenders:disabled,
#prevInvestments:disabled, #nextInvestments:disabled,
#prevSales:disabled, #nextSales:disabled,
#prevReviews:disabled, #nextReviews:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}


/* ===== SIMPLE JOBS SECTION FIX ===== */

/* Job cards container - show 3 cards on desktop */
#jobCarousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
}

/* Hide scrollbar */
#jobCarousel::-webkit-scrollbar {
    display: none;
}

/* Each job card - 3 cards on desktop */
.job-card {
    flex: 0 0 calc(33.333% - 14px); /* 3 cards */
    min-width: 300px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
    text-decoration: none;
    color: inherit;
}

/* Mobile: show 1 card */
@media (max-width: 768px) {
    .job-card {
        flex: 0 0 calc(100% - 20px); /* 1 card */
        min-width: calc(100% - 20px);
        margin: 0 10px;
    }
}

/* Tablet: show 2 cards */
@media (min-width: 769px) and (max-width: 991px) {
    .job-card {
        flex: 0 0 calc(50% - 15px); /* 2 cards */
    }
}

/* Simple arrow buttons */
.jobs-nav {
    width: 36px;
    height: 36px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: white;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.jobs-nav:hover {
    background: #4150d2;
    color: white;
    border-color: #4150d2;
}

/* Hide arrows when not needed */
@media (min-width: 992px) {
    /* Hide if 3 or fewer cards on desktop */
    .job-carousel:has(.job-card:nth-child(4)) ~ .d-flex .jobs-nav {
        display: flex;
    }
    .job-carousel:not(:has(.job-card:nth-child(4))) ~ .d-flex .jobs-nav {
        display: none;
    }
}


/* ===== FIX: Position arrows at bottom of review CARDS section only (not form) ===== */
@media (max-width: 768px) {
    /* Target the right column (review cards column) */
    .review-card .col-lg-8 {
        position: relative !important;
        padding-bottom: 70px !important; /* Space for arrows below cards */
    }
    
    /* Position arrows at the bottom of the review cards column */
    #prevReviews, #nextReviews {
        position: absolute !important;
        top: auto !important;
        bottom: 10px !important; /* Position from bottom of cards column */
        transform: none !important;
    }
    
    #prevReviews {
        left: calc(50% - 60px) !important; /* Position left arrow */
    }
    
    #nextReviews {
        right: calc(50% - 60px) !important; /* Position right arrow */
    }
    
    /* Make sure the reviews container is positioned relatively */
    .reviews-container {
        position: relative !important;
    }
    
    /* Style the arrows */
    #prevReviews, #nextReviews {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
        background: white !important;
        border: 2px solid #4150d2 !important;
        color: #4150d2 !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        z-index: 10 !important;
    }
    
    /* Ensure form column doesn't get extra padding */
    .review-card .col-lg-4 {
        padding-bottom: 20px !important;
    }
    
    /* Adjust the reviews content to fit with arrows below */
    #reviewsContent {
        max-height: 350px !important;
        overflow-y: auto !important;
        margin-bottom: 10px !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .review-card .col-lg-8 {
        padding-bottom: 65px !important;
    }
    
    #prevReviews, #nextReviews {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        bottom: 8px !important;
    }
    
    #prevReviews {
        left: calc(50% - 55px) !important;
    }
    
    #nextReviews {
        right: calc(50% - 55px) !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .review-card .col-lg-8 {
        padding-bottom: 60px !important;
    }
    
    #prevReviews, #nextReviews {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        bottom: 6px !important;
    }
    
    #prevReviews {
        left: calc(50% - 50px) !important;
    }
    
    #nextReviews {
        right: calc(50% - 50px) !important;
    }
}

/* ===== FIX FOR AD SHOWCASE SECTION - MOBILE VIEW ONLY ===== */
@media (max-width: 768px) {
  /* AD Showcase card adjustments */
  .card[style*="background-color: #ffffff;"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
  }
  
  /* Fix the AD Showcase header */
  .card .fw-bold.d-flex.gap-2.mb-1 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  
  .card .fw-bold.d-flex.gap-2.mb-1 p {
    display: inline !important;
    font-size: 20px !important;
  }
  
  /* Fix horizontal line */
  .card hr {
    margin: 5px 0 15px 0 !important;
  }
  
  /* Fix the carousel container */
  .ads-carousel-container {
    height: 250px !important; /* Reduced height for mobile */
    min-height: 250px !important;
    max-height: 250px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  
  /* Fix carousel itself */
  #adsCarousel {
    height: 100% !important;
  }
  
  /* Fix carousel inner */
  .carousel-inner {
    height: 100% !important;
    border-radius: 12px !important;
  }
  
  /* Fix carousel items and images */
  .carousel-item {
    height: 100% !important;
  }
  
  .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Changed from cover to contain to show full ad */
    background-color: #f8f9fa; /* Add background for transparent images */
    border-radius: 12px !important;
  }
  
  /* Fix carousel controls for mobile */
  .carousel-control-prev,
  .carousel-control-next {
    width: 40px !important;
    height: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(65, 75, 210, 0.8) !important;
    border-radius: 50% !important;
    margin: 0 10px !important;
  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 20px !important;
    height: 20px !important;
  }
  
  /* Fix placeholder when no ads */
  .carousel-item .w-100.h-100 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .carousel-item .bi-image {
    font-size: 48px !important;
    color: #ccc !important;
    margin-bottom: 10px !important;
  }
  
  .carousel-item .text-muted {
    font-size: 14px !important;
    color: #888 !important;
  }
  
  /* Ensure proper spacing */
  .card.rounded-4.p-4.mb-4 {
    margin-bottom: 20px !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  .ads-carousel-container {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
  
  .card .fw-bold.d-flex.gap-2.mb-1 {
    font-size: 18px !important;
  }
  
  .card .fw-bold.d-flex.gap-2.mb-1 p {
    font-size: 18px !important;
  }
  
  .carousel-control-prev,
  .carousel-control-next {
    width: 36px !important;
    height: 36px !important;
    margin: 0 5px !important;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .ads-carousel-container {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }
  
  .card .fw-bold.d-flex.gap-2.mb-1 {
    font-size: 17px !important;
  }
  
  .card .fw-bold.d-flex.gap-2.mb-1 p {
    font-size: 17px !important;
  }
}

/* Tablet view - keep original but ensure proper sizing */
@media (min-width: 769px) and (max-width: 991px) {
  .ads-carousel-container {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
}

/* Desktop view - keep original styling */
@media (min-width: 992px) {
  /* No changes needed for desktop */
}

/* Optional: Make ads fully visible on mobile without cropping */
@media (max-width: 768px) {
  .carousel-item img {
    object-fit: contain !important; /* Shows full ad without cropping */
  }
  
  .ads-carousel-container {
    background-color: #f8f9fa; /* Add background for better visibility */
  }
}