/* ourstory */
.about-us {
    padding: 50px 0px;
}

.breadcrumb {
    font-size: 16px;
    color: #666;
    margin-bottom: 50px;
}

.breadcrumb a {
    text-decoration: none;
    color: #86868b;
}

.breadcrumb strong {
    text-decoration: none;
    color: #23559b;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 5px;
}

/* brad crum end  */
.about-us-research-banner {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* section starts  */
.left-section h3 {
    font-size: 20px;
    margin-block: 50px 20px;
}

.left-section p {
    font-size: 16px;
    margin-bottom: 20px;

}

.vison-mission {
    display: flex;
    gap: 50px;
}

.vision-para h3 {
    margin-bottom: 20px;
    font-size: 20px;
}

.vision-para p {
    font-size: 16px;
}

.vision-image {
    min-width: 87px;
    height: 83px;
    background: #23559b48;
    align-content: center;
    text-align: center;
    border-radius: 20px;
}

.vision-div {
    display: flex;
    gap: 25px;
    padding: 10px;
    background-color: #FFFAE8;
    border-radius: 20px;
    align-items: flex-start;
    width: 50%;
}

.vison-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* Our history  */
.history-section {
    position: relative;
    background-image: url('../images/history-bg-research.webp');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    overflow: hidden;
    color: white;
    text-align: center;
    background-repeat: no-repeat;
    width: 100%;
    padding: 50px;
    margin-top: 30px;
}

/* Blue overlay fade effect */
.history-section::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to right, rgba(0, 53, 128, 0.8) 0%, rgba(0, 53, 128, 0.95) 50%, rgba(0, 53, 128, 0.8) 100%); */
    z-index: 1;
}

/* Ensure inner content stays above overlay */
.history-section>* {
    position: relative;
    z-index: 2;
}
/* history button */
.history-button {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    background: transparent;
    color: #383939;
    padding: 10px 40px;
    font-weight: 600;
    border-radius: 25px;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
    margin-top: 50px;
    border: 1px solid #23559b;
    transition: color 0.3s ease-in-out;
    z-index: 1;
    display: block;
    width: max-content;
    margin: auto;
}

/* Background wipe effect */
.history-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #000000;
    transition: width 0.3s ease-in-out;
    border-radius: 25px;
    z-index: -1;
}

/* Initial background */
.history-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d0bb68;
    z-index: -2;
    border-radius: 25px;
}

/* On hover: background expands and text color changes */
.history-button:hover::before {
    width: 100%;
}

.history-button:hover {
    color: white;
}  
.news-button {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    background: transparent;
    color: #000000;
    padding: 10px 40px;
    font-weight: 600;
    border-radius: 25px;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
    border: 1px solid #23559b;
    transition: color 0.3s ease-in-out;
    z-index: 1;
    display: block;
    width: max-content;
    /* margin: auto; */
  }
  
  /* Hover background fill */
  .news-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: #23559b; /* same hover fill as submit-btn */
    z-index: -1;
    transition: width 0.3s ease-in-out;
    border-radius: 25px;
  }
  
  .news-button:hover {
    color: white;
  }
  
  .news-button:hover::before {
    width: 100%;
  }
  
/* Initial background */
.news-button::after,
.news-button-history::after  {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d0bb68;
    z-index: -2;
    border-radius: 25px;
}

/* On hover: background expands and text color changes */
.news-button:hover::before {
    width: 100%;
}

.news-button:hover {
    color: white;
}

.history-section h3 {
    font-size: 42px;
    margin-bottom: 30px;
}

.history-section p {
    font-size: 16px;
    margin-bottom: 30px;
    max-width: 640px;
    margin-inline: auto;
}

.institutional-distinctiveness-section {
    display: grid;
    margin-top: 30px;
    align-items: start;
    gap: 5px;
}

.institutional-distinctiveness-section-left-section p {
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.institutional-distinctiveness-section-left-section h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

/* vision */
#mision {
    margin-block: 50px 0;
}

.vision-card {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    overflow: hidden;
    width: 100%;
    margin-bottom: 15px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0);
    padding: 20px;
}

.vision-card-song {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    overflow: hidden;
    width: 100%;
    margin-bottom: 50px;
}

.image-column {
    flex: 1;
    min-height: 250px;
}

.image-column img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
    display: block;
}

.image-column iframe {
    border-radius: 15px;
}

.content-column {
    flex: 3;
    padding: 10px;
}

.content-column-poem {
    flex: 3;
    display: flex;
    gap: 50px;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0);
}

.vision-title {
    font-size: 20px;
    font-weight: 600;
    color: #23559B;
    margin-bottom: 16px;
}

.vision-subtitle {
    font-size: 16px;
    color: #2d2525;
    margin-bottom: 24px;
    font-weight: 700;
}

.vision-description {
    color: #2d2525;
    font-size: 14px;
    line-height: 1.7;
    text-align: justify;
}

.vision-description-song {
    margin: 0 0 20px 0;
    color: #2d2525;
    font-size: 16px;
    line-height: 1.7;
    text-align: justify;
}

.vision-dowload {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 16px;
}

.vision-dowload a {
    color: #23559B;
}

/* .image-column-vison {

} */

@media screen and (max-width:767px) {
    .institutional-distinctiveness-section {
        flex-direction: column;
        gap: 50px;
    }
    .vision-card,.vison-mission {
        flex-direction: column;
    }
    .vision-div {
        width: 100%;
    }
    .history-section {
        background-image: url('../images/bg-image-about-us-research-area.webp');
    }
    .image-column-vison {
        width: -webkit-fill-available;
    }
    .standards-about-us {
        width: 100%;
        height: 100%;
    }
    .vision-dowload {
        margin-top: 16px;
    }
    .vision-card {
        padding: 14px;
    }
}
p {
    line-height: 24px;
}