.main-banner{
  position: relative;
  width:100%;
  min-height:300px;                 /* desktop */
  background-image: url("/image/about/banner1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow:hidden;
}

/* Overlay for readability */
.main-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}

/* Content */
.banner-content{
  position:relative;
  z-index:1;
  max-width:900px;
  padding:0 15px;
}

.banner-content h1{
  font-size:40px;
  font-weight:700;
  margin-bottom:10px;
}

.banner-content p{
  font-size:18px;
  line-height:1.6;
}

/* ================= RESPONSIVE ================= */

/* Large tablets */
@media(max-width:992px){
  .main-banner{
    min-height:280px;
  }

  .banner-content h1{
    font-size:34px;
  }

  .banner-content p{
    font-size:16px;
  }
}

/* Mobile */
@media(max-width:768px){
  .main-banner{
    min-height:240px;
    background-position: center top;
  }

  .banner-content h1{
    font-size:26px;
  }

  .banner-content p{
    font-size:15px;
  }
}

/* Small Mobile */
@media(max-width:480px){
  .main-banner{
    min-height:140px;
  }

  .banner-content h1{
    font-size:22px;
  }

  .banner-content p{
    font-size:14px;
  }
}



/*=============================================================*/
.mgmt-section{
  background:#eaf3fb;
  padding:30px 20px;
  background-image:url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23cfe3f5' stroke-width='1'%3E%3Cpath d='M20 20h20v20H20z'/%3E%3Ccircle cx='80' cy='40' r='6'/%3E%3Cpath d='M40 90l20-20'/%3E%3C/g%3E%3C/svg%3E");
}

/* Main layout */
.mgmt-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 380px;
  align-items:center;
  gap:40px;
}

/* Text */
.mgmt-text{
  text-align:center;
}

.mgmt-text h2{
  font-size:26px;
  letter-spacing:2px;
  color:#1f3c5b;
  margin-bottom:20px;
  text-align:end;
  position:relative;
}

/* underline only under text */
.mgmt-text h2::after{
  content:"";
  position:absolute;
  right:0;                /* end align ke liye */
  bottom:-6px;
  width:50px;             /* underline length */
  height:2px;
  text-align:end;

  background:#ff2b5c;
}


.mgmt-text p{
  max-width:680px;
  margin:auto;
  font-size:17px;              /* font size 17px */
  line-height:1.8;
  color:#4b5e72;
  text-align: justify;         /* justify text */
  font-family: sans-serif;     /* sans font */
}

/* Image card */
.mgmt-image img{
  width:100%;
  border:4px solid #ffffff;
  box-shadow:0 12px 30px rgba(0,0,0,0.15);
  background:#fff;
}


.mgmt-image{
  position:relative;
}

.img-frame{
  padding:8px;                     /* frame thickness */
  background:#ffffff;              /* frame color */
  box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

.img-frame img{
  width:100%;
  display:block;
}


/* Responsive */
@media(max-width:992px){
  .mgmt-wrap{
    grid-template-columns:1fr;
  }

  .mgmt-image{
    max-width:320px;
    margin:auto;
  }
}

@media (max-width: 576px){

  .mgmt-wrap{
    display: grid;              /* ensure grid */
    grid-template-columns: 1fr;
  }

  .mgmt-image{
    order: 1;                   /* IMAGE FIRST */
    max-width: 360px;
    margin: 0 auto 20px;
  }

  .mgmt-text{
    order: 2;                   /* TEXT BELOW */
  }

  .mgmt-text h2{
    font-size:22px;
    text-align:center;
  }

  .mgmt-text h2::after{
    right:50%;
    transform:translateX(50%);
    width:80px;
  }
}

/* our jerumy section  */

.journey-section{
  background:#f9fdff;
  padding:30px 20px;
}

.journey-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:420px 1fr;
  gap:50px;
  align-items:center;
}

/* Image frame */
.journey-frame{
  padding:10px;
  background:#ffffff;
  border:1px solid #c7d9ee;
}

.journey-frame img{
  width:100%;
  display:block;
  height:240px;
}

/* Text */
.journey-text h2{
  font-size:26px;
  letter-spacing:1.5px;
  color:#1f3c5b;
  margin-bottom:20px;
  position:relative;
}

/* small underline */
.journey-text h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:50px;          /* underline length */
  height:2px;
  background:#ff2b5c;  /* border color */
}


.journey-text p{
  font-size:17px;
  line-height:1.8;
  color:#4b5e72;
  text-align:justify;
  font-family:sans-serif;
}

/* ================= Responsive ================= */

@media(max-width:992px){
  .journey-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .journey-frame{
    max-width:360px;
    margin:auto;
  }

  .journey-text p{
    text-align:justify;
  }
}

@media(max-width:576px){
  .journey-section{
    padding:30px 15px;
  }

  .journey-text h2{
    font-size:22px;
  }

  .journey-text p{
    font-size:15px;
  }
  .journey-text h2::after{
    content:"";
    position:absolute;
    left:150px;
    bottom:-6px;
    width:76px;          /* underline length */
    height:2px;
    background:#ff2b5c;  /* border color */
  }
  
}

/* map section  */

.map-section{
  width:100%;
}

.map-container{
  position:relative;
  width:100%;
  height:400px;
}

/* Full map background */
.map-container iframe{
  width:100%;
  height:100%;
  border:0;
}

/* Overlay card (same as image) */
.map-card{
  position:absolute;
  top:50%;
  right:40px;
  transform:translateY(-50%);
  background:#ffffff;
  padding:25px 30px;
  width:320px;
  box-shadow:0 15px 35px rgba(0,0,0,0.25);
  font-family:sans-serif;
}

/* Icon */
.map-icon{
  font-size:32px;
  margin-bottom:10px;
}

/* Heading */
.map-card h3{
  font-size:20px;
  margin-bottom:10px;
  color:#1f3c5b;
}

/* Text */
.map-card p{
  font-size:15px;
  line-height:1.6;
  color:#4b5e72;
}

/* Phone */
.map-card .phone{
  margin-top:10px;
  font-weight:600;
}

/* ================= Responsive ================= */

/* Tablet */
@media(max-width:992px){
  .map-container{
    height:360px;
  }

  .map-card{
    right:20px;
    width:300px;
  }
}

/* Mobile */
@media(max-width:576px){
  .map-container{
    height:auto;
  }

  .map-container iframe{
    height:280px;
  }

  .map-card{
    position:relative;
    transform:none;
    top:auto;
    right:auto;
    margin:15px;
    width:auto;
  }
}