.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;
  }
}





/* first section */
 /* about======== */
 .about-wrap{
  padding:60px 0;
  background:#f9fdff;
  overflow:hidden;
}

/* ================= TABS ================= */
.about-tabs{
  display:flex;
  justify-content:space-between;
  border-top:2px solid #ff2b5c;
  margin-bottom:40px;
}

.tab{
  flex:1;
  text-align:center;
  background:transparent;
  border:none;
  padding:14px 10px;
  font-weight:700;
  color:#1f4c8f;
  position:relative;
  transition:all .3s ease;
  cursor:pointer;
}

/* Hover effect (inactive only) */
.tab:not(.active):hover{
  color:white;
  background:#e1375f;
}

/* Top line animation on hover */
.tab:not(.active)::before{
  content:'';
  position:absolute;
  top:-2px;
  left:0;
  width:0;
  height:2px;
  background:#e1375f;
  transition:.3s;
}

.tab:not(.active):hover::before{
  width:100%;
}

/* Active Tab */
.tab.active{
  background:#083a6b;
  color:#fff;
}

/* ================= CONTENT ================= */
.tab-content{
  display:none;
}

.tab-content.active{
  display:block;
}

/* WHO WE ARE Layout - Full width */
.team-member-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  margin-bottom: 20px;
}

.team-member-card:hover {
  transform: translateY(-5px);
}

.person-content {
  flex-grow: 1;
  padding: 15px 0;
}

.person-content p {
  font-size: 17px;
  line-height: 1.7;
  color: #212529;
  margin-bottom: 15px;
  font-family: sans-serif;
  text-align:justify;


}

.content{
    font-size: 17px;
  line-height: 1.7;
  color: #212529;
  margin-bottom: 15px;
  font-family: sans-serif;
  text-align:justify;

    }

.person-content strong {
  color: #083a6b;
}

.team-member-card h5 {
  color: #083a6b;
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ff2b5c;
  display: inline-block;
  margin: 0 auto;
}

/* College Description */
.college-description {
  padding: 25px;
  background: #fff;
  border-radius: 8px;
  margin-top: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.college-description p {
  font-size: 16px;
  line-height: 1.8;
  color: #5f6f82;
  margin-bottom: 20px;
}

/* Image Frame */
.image-frame{
  border:1px solid #cfdff1;
  padding:8px;
  overflow: hidden;
  background: #fff;
}

.image-frame img{
  width:100%;
  height:280px;
  display:block;
  transition: transform 0.3s ease;
}

.image-frame:hover img{
  transform: scale(1.03);
}

/* Button */
.read-more-btn{
  display:inline-block;
  padding:12px 35px;
  border:2px solid #ff2b5c;
  color:#ff2b5c;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
  margin-top: 10px;
  background: #fff;
}

.read-more-btn:hover{
  background:#ff2b5c;
  color:#fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 43, 92, 0.3);
}

/* ================= RIGHT CARDS ================= */
.info-card{
  background:#e1e9f1;
  padding:18px;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  margin-bottom:18px;
  transition:.3s;
  cursor:pointer;
  border-radius: 8px;
}

.info-card:hover{
  background:#083a6b;
  transform: translateX(5px);
}

.info-card img{
  width:42px;
}

.info-card span{
  font-weight:700;
  color:#0a3d6f;
  flex:1;
  transition:.3s;
}

.info-card i{
  font-size:20px;
  color:#0a3d6f;
  transition:.3s;
}

.info-card:hover span,
.info-card:hover i{
  color:#fff;
}

/* ================= WHO WE ARE FULL WIDTH ================= */
.who-we-are-full .content-container {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.who-we-are-full .sidebar-container {
  display: none !important;
}

/* ================= MOBILE ================= */
@media(max-width:768px){
  .about-tabs{
    flex-direction:column;
  }
  
  .tab{
    border-bottom:1px solid #ff2b5c;
  }
  
  .image-frame img{
    height:320px;
  }
  
  .about-wrap{
    padding: 40px 0 0 0;
  }
  
  .team-member-card {
    margin-bottom: 30px;
  }
  
 
  .person-content p {
      font-size: 17px;
    font-family: sans-serif;
    color:#212529;
        text-align:justify;


 }
  
  .content{
       font-size: 17px;
      font-family: sans-serif;
      color:#212529;
          text-align:justify;


  }
      
  }
  .college-description {
    padding: 20px;
  }
  
  .college-description p {
    font-size: 15px;
  }


@media(max-width:576px){
  .image-frame img{
    height: 435px;
    object-fit: cover;
  }
  
  .info-card{
    padding: 15px;
  }
  
  .info-card img{
    width: 36px;
  }
  
  .person-content {
    padding: 10px 0;
   
    
  }
  
  .team-member-card h5 {
    font-size: 18px;
  }
}

/* ================= Vision Mission Section ================= */
#visionmission{
  background-image:url('/image/about/visionmisionbg.jpg');
  /* padding:50px 0;    */
}

/* Flex Row */
#visionmission .vm-row{
  display:flex;
  flex-wrap:wrap;
}

/* Columns */
#visionmission .vm-col{
  flex:0 0 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
}

/* Right Background */
#visionmission .visionbgright{
  background:#08304a;
}

/* Card */
.vm-card{
  max-width:500px;
  text-align:center;
}

/* Image Circle */
.img-circle{
  width:100px;
  height:100px;
  border-radius:50%;
  overflow:hidden;
  margin:0 auto 20px;
  border:4px solid rgba(255,255,255,0.3);
}

.img-circle div{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
}

.img-circle div p{
 text-align: left;
}
/* Title */
.title_1{
  font-size:24px;
  font-weight:700;
  margin-bottom:8px;
  text-transform:uppercase;
}

.border-bottom{
  width:50px;
  height:3px;
  background:#f4c430;
  margin:10px auto 15px;
  border:none;
}

/* Text */
#visionmission p{
  font-size:15px;
  line-height:1.6;
  color:#eaeaea;
  margin-bottom:15px;
}

#visionmission ul{
  text-align:left;
  max-width:420px;
  margin:0 auto;
  padding:0;
}

#visionmission ul li{
  font-size:14px;
  margin-bottom:8px;
}

#visionmission ul li strong{
  color:#f4c430;
}

#visionmission p{
  font-size:17px;
  text-align: justify;
  font-family: sans-serif;
}
/* ================= Responsive ================= */

/* Tablet */
@media(max-width:992px){
  .img-circle{
    width:140px;
    height:140px;
  }
}

/* Mobile */
@media(max-width:768px){
 

  #visionmission .vm-col{
    flex:0 0 100%;
    padding:25px 15px;
  }

  .title_1{
    font-size:22px;
  }

  #visionmission p{
    font-size:17px;
    text-align: justify;
    font-family: sans-serif;
  }

  @media(max-width:768px){
    [data-aos="fade-left"],
    [data-aos="fade-right"]{
      transform: translate3d(0, 40px, 0) !important;
      opacity: 0;
    }
  
    [data-aos].aos-animate{
      transform: translate3d(0, 0, 0) !important;
      opacity: 1;
    }
  }
  
}



.mgmt-section{
  background:#eaf3fb;
  padding:60px 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-text h2{
    font-size:22px;
    text-align: center;
  }


  .mgmt-text h2::after {
    content: "";
    position: absolute;
    right: 135px;
    bottom: -6px;
    width: 80px;
    height: 2px;
    text-align: end;
    background: #ff2b5c;
}
  .mgmt-text p{
    font-size:17px;
    text-align: justify;         /* justify text */
    font-family: sans-serif;  
  }
}


/* our jerumy section  */

.journey-section{
  background:#f9fdff;
  padding:60px 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:90%;
}

/* 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:40px 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;
  }
}
