.management-section {
  
  padding: 60px 20px;
  background: #f8f8f8;
 
}

/* Container */
.management-container {
  width: 100%;
  max-width: 1300px;   /* 2000px unnecessary, safer at 1600 */
  margin: 0 auto;

  box-sizing: border-box;
}

/* ================= WRAPPER ================= */

.management-wrapper {
  display: grid;  /* Changed from flex to grid for reliable sticky behavior */
  grid-template-columns: 38% 1fr;  /* Image takes 38%, content takes remaining space */
  gap: 80px;
  align-items: start;  /* Equivalent to flex-start */
}

/* ================= STICKY IMAGE ================= */

.management-image {
  grid-column: 1;  /* Places image in the first grid column */
  position: sticky;
  top: 0px;  /* Sticks at 120px from viewport top, matching section padding */
  height: fit-content;  /* Ensures natural height for proper sticking */
  align-self: start;  /* Aligns to top */
  border-radius: 24px;
  z-index: 100;
  min-height: 400px;
}

/* Image */
.management-image img {
  width: 100%;
  display: block;
  border-radius: 24px;
  /* height: 500px; */
}

.management-content h3 {
  font-size: 28px;       /* heading size */
  margin-bottom: 20px;
}

.management-content p {
  font-size: 18px;       /* paragraph size */
  line-height: 1.8;      /* improves readability */
  color: #333;
  margin-bottom: 18px;
  text-align: justify;   /* justify alignment */
}


/* ================= MOBILE (Disable Sticky & Stack) ================= */

@media (max-width: 800px) {


.management-container {
 padding: 10px 0px;
 
}

  .management-wrapper {
    display: flex;              /* ensure flex */
    flex-direction: column;     /* stack */
    align-items: stretch;       /* prevent left alignment */
    gap: 30px;
  }

  .management-image {
    position: relative;         /* disable sticky */
    top: 0;
    flex: none;                 /* remove 38% */
    width: 100%;
    margin: 0;                  /* remove any left spacing */
  }

  .management-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

}




/* ===== BELOW 580px PERFECT FIX ===== */
@media (max-width:580px){

  .management-wrapper{
    display:flex;
    flex-direction:column;
    gap:0 !important;
  }

  .management-image{
    width:100%;
    margin:0 !important;
    padding:0 !important;
  }

  .management-image img{
    width:100%;
    height:380px;        /* 🔥 FIXED HEIGHT */
    object-fit:cover;
    display:block;
    margin:0;
  }

  .management-content{
    margin-top:0 !important;
    padding-top:15px;    /* small clean spacing */
  }

}



























.transport-section {
  padding: 60px 20px;
  background: #f8f8f8;
 
}

/* Container */
.transport-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  
  box-sizing: border-box;
}

/* ================= WRAPPER ================= */

.transport-wrapper {
  display: grid;
  grid-template-columns:  1fr  38%;
  gap: 80px;
  align-items: start;
}

/* ================= STICKY IMAGE ================= */

.transport-image {
  
  position: sticky;
  top: 0px;
  height: fit-content;
  align-self: start;
  border-radius: 24px;
  z-index: 100;
  
}

/* Image */
.transport-image img {
  width: 100%;
  display: block;
  border-radius: 24px;
  transition: transform 0.4s ease; /* smooth zoom */
  /* height: 500px; */
}

.transport-image img:hover {
 transform: scale(1.04); /* zoom-in */
}


.transport-content h3 {
  font-size: 28px;
  margin-bottom: 20px;
}

.transport-content p {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 18px;
  text-align: justify !important;
}



/* ================= MOBILE (Disable Sticky & Stack) ================= */

@media (max-width: 800px) {


  .transport-section {
  padding: 0px 20px;
  
 
}

  .transport-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  /* 🔥 THIS LINE FIXES THE ORDER */
  .transport-image {
    order: -1;   /* moves image above content */
    position: relative;
    top: 0;
    width: 100%;
    margin: 0;
  }

  .transport-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}


























