#comn-bannerinner { clip-path: polygon(99.94% 75.21%, 0.05% 98.81%, 0.02% -0.06%, 99.93% -0.69%); position: relative; }
#comn-bannerinner img { width: 100%; }
.ovrly-comn-banner { background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(12, 77, 139, 0.55) 100%); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
#alummni-dirctory { overflow: inherit; position: relative; padding: 0px 0 96px; }
.left-side-menu-bar { background: #fff; box-shadow: 0px 0px 4px 1px #0000001f; padding: 14px 14px 36px; border-radius: 16px; position: relative; top: -97px; }
.left-side-menu-bar h2 { font-size: 19px; font-weight: 400; text-align: center; margin: 0px auto; padding: 15px 0; }
.accordions-left-menybar {  }
.card {
  border-radius: 1rem;
  background: #fff !important;
  margin-bottom: 22px;
}
body {
  background: #f4f4f4;
}
/*side menu accordion*/
.accordion-container{background:#fff;border-radius:0;width:100%;max-width:100%;overflow:hidden}
.accordion-header{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff;padding:25px;text-align:center}
.accordion-header h2{font-size:1.8rem;font-weight:600;margin-bottom:5px}
.accordion-header p{opacity:.9;font-size:.9rem}
.accordion{list-style:none}
.accordion-item{border-bottom:1px solid #e1e5e9}
.accordion-item:last-child{border-bottom:none}
.accordion-button{background:none;border:none;width:100%;padding:20px 25px;text-align:left;font-size:1.1rem;font-weight:500;color:#2d3748;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .3s ease;position:relative}
.accordion-button:hover{background-color:#f7fafc;color:#4a5568}
.accordion-button.active{background-color:#edf2f7;color:#2b6cb0}
.accordion-icon{transition:transform .3s ease;font-weight:700;color:#718096}
.accordion-button.active .accordion-icon{transform:rotate(180deg);color:#2b6cb0}
.accordion-content{max-height:0;transition:max-height .3s ease;background-color:#f8fafc;}
.accordion-content-inner{padding:13px 12px;color:#4a5568;line-height:1.6}
.accordion-content-inner ul{list-style:none;margin-top:10px}
.accordion-content-inner li{padding:8px 0;border-bottom:1px solid #e2e8f0}
.accordion-content-inner li:last-child{border-bottom:none}
.accordion-content-inner li:hover{color:#2b6cb0;cursor:pointer}
.accordion-item:first-of-type .accordion-button { background: #fff; }
.accordion-button:not(.collapsed) { background-color: #fff; }
.accordion-button:not(.collapsed) { color: #000; padding: 15px 4px; border-bottom: 1px solid #000; font-size: 16px; }
.accordion-item:first-of-type { border: none; } 
.accordion-item { border: none; }
.accordion-button:not(.collapsed)::after { content: url(../images/right-icon_1.png); background-image: none; rotate: -180deg; }
@media (max-width: 480px) {
.accordion-container{max-width:100%;margin:10px auto;}
.accordion-header{padding:20px}
.accordion-header h2{font-size:1.5rem}
.accordion-button{padding:15px 20px;font-size:1rem}
}
/*side menu accordion*/



.multi-select-dropdown{width:100%;position:relative; }
.select-box{border:1px solid #ccc;padding:10px;border-radius:6px;background:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.arrow{font-size:12px}
.options-container{display:none;position:absolute; margin-top: 5px; top:105%;left:0;width:100%;background:#fff;border:1px solid #ccc;border-radius:6px;max-height:200px;overflow-y:auto;box-shadow:0 4px 6px #0000001a;z-index:999}
.options-container.show{display:block}
.options-container input[type="text"]{width:90%;margin:10px;padding:6px;border:1px solid #ccc;border-radius:4px}
.options-list label{display:block;padding:8px 12px;cursor:pointer; border-bottom: 1px solid #dfdfdf; }
.options-list label:hover{background:#f1f1f1}

.alumnidirectoryy-content { padding-left: 21px; font-weight: 300; line-height: 33px; }
.inner-content-hdd { font-weight: 200; width: fit-content; font-size: 43px; background: linear-gradient(to right, #D98600, #0C4D8B);  background-clip: border-box; -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 20px; }
.inner-content-hdd h1 { font-weight: 300; }
.alumnidirectoryy-content p {  }
.alumnidirectoryy-content h2 { font-weight: 300; color: #D98600; }
.alumnidirectoryy-content h3 { font-weight: 200; color: #D98600; font-size: 29px; text-transform: inherit; }
.alumnidirectoryy-content h4 { font-weight: 200; color: #D98600; font-size: 24px; text-transform: inherit; }
.alumnidirectoryy-content h5 { font-weight: 200; color: #D98600; font-size: 19px; text-transform: inherit; }
.alumnidirectoryy-content h6 { font-weight: 200; color: #D98600; font-size: 17px; text-transform: inherit; }


.widget ul li::before { content: url(../images/right-icon_1.png); left:0; position:absolute; padding-left:4px; color:#707070; font-size: 16px;}
.widget ul { float:left; list-style:outside none none; margin-bottom:16px; padding-left:0; width:100% }
.widget ul li { margin-bottom:3px; padding-left:36px; position:relative;  line-height: 31px; font-size: 16px;}

table { border:none !important; }
#content-tables_1 table { border-collapse: collapse; font-size:16px; width: 100%; }
#content-tables_1 th { text-align: left; padding: 11px 11px !important;  background-color: #9BBB59; color:#FFF; } 
#content-tables_1 td { text-align: left; padding: 11px 11px; background:none;line-height: 28px;}
#content-tables_1 tr:nth-child(odd) { background-color:#EEDBD4; transition: all 0.4s ease; }
#content-tables_1 tr:nth-child(odd):hover { background-color:#BBD2D9; transition: all 0.4s ease; }
#content-tables_1 tr:nth-child(even) { background-color:#FFF3DD; transition: all 0.4s ease; } 
#content-tables_1 tr:nth-child(even):hover { background-color:#F2E4CA; transition: all 0.4s ease; }
#content-tables_1 table thead tr td { background:#DDAE68; }
#content-tables_1 table thead tr th { background:#DDAE68; }
#content-tables_1 table tr { }
.accordion-button:not(.collapsed) {
  box-shadow: none;
}



@media screen and (min-width:280px) and (max-width:388px) {
    .left-side-menu-bar { top: -26px; }
    .top-hddr-strp { margin-bottom: 62px; }
    .alumnidirectoryy-content { padding-left: 0; } 
    .srch-dirctry-plcholder { margin-bottom: 13px; }
    #alummni-dirctory { padding: 0px 0 24px; } 
}
@media screen and (min-width:389px) and (max-width:476px) {
    .alumnidirectoryy-content { padding-left: 0; } 
    .srch-dirctry-plcholder { margin-bottom: 13px; }
    #alummni-dirctory { padding: 0px 0 24px; } 
    .left-side-menu-bar { top: -30px; }
}
@media screen and (min-width:477px) and (max-width:575px) {
    .alumnidirectoryy-content { padding-left: 0; } 
    .srch-dirctry-plcholder { margin-bottom: 13px; }
    #alummni-dirctory { padding: 0px 0 24px; } 
    .left-side-menu-bar { top: -30px; }
}
@media screen and (min-width:576px) and (max-width:767px) {
    .alumnidirectoryy-content { padding-left: 0; } 
    .srch-dirctry-plcholder { margin-bottom: 13px; }
    #alummni-dirctory { padding: 0px 0 24px; } 
    .left-side-menu-bar { top: -30px; }
}
@media screen and (min-width:768px) and (max-width:991px) {
    .alumnidirectoryy-content { padding-left: 0; } 
    .srch-dirctry-plcholder { margin-bottom: 13px; }
    #alummni-dirctory { padding: 0px 0 24px; } 
    .left-side-menu-bar { top: -30px; }
}
@media screen and (min-width:992px) and (max-width:1150px) {
    .left-side-menu-bar { padding: 14px 12px 36px; }
    .alumnidirectoryy-content { padding-left: 0; }
}
@media screen and (min-width:1150px) and (max-width:1240px) {
    .left-side-menu-bar { padding: 14px 12px 36px; }
    .alumnidirectoryy-content { padding-left: 0; }
} 
@media screen and (min-width:1241px) and (max-width:1340px) {

}
@media screen and (min-width:1341px) and (max-width:1399px) {
   
}
@media screen and (min-width:1400px) and (max-width:1499px) {
  
}
@media screen and (min-width:1500px) and (max-width:1599px) {
   
}
@media screen and (min-width:1600px) and (max-width:1699px) {

}
@media screen and (min-width:1700px) and (max-width:1799px) {
    
}
@media screen and (min-width:1800px) and (max-width:1899px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1582px; }
}
@media screen and (min-width:1900px) and (max-width:1999px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1582px; }
}
@media screen and (min-width:2000px) and (max-width:2999px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 86%; }
}
@media screen and (min-width:3000px) and (max-width:3999px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 86%; }
}
@media screen and (min-width:4000px) and (max-width:4999px) {

}
@media screen and (min-width:5000px) and (max-width:5999px) {

}

<!--campus page  -->

.grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:20px;
      margin-top:24px;
    }
    .card{
      background:var(--card-bg);
      border-radius:12px;
      padding:20px;
      box-shadow:var(--shadow);
      transform-origin:center;
      overflow:hidden;
      border:1px solid rgba(15,23,42,0.04);
    }

    .campus-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
    .campus-title h2{font-size:18px;margin:0;font-weight:600}
    .year{font-size:13px;color:var(--muted)}
    .meta{font-size:14px;color:var(--muted);line-height:28px;margin-bottom:12px}

    address{font-style:normal;color:#111827;background:linear-gradient(180deg,transparent 0%, transparent 100%);padding:12px;border-radius:8px;border:1px dashed rgba(11,94,215,0.06);}
    .address-title{font-weight:600;margin-bottom:6px}
    .km{font-weight:600;color:var(--accent)}

    /* animations */
    .card{
      opacity:0;
      transform:translateY(18px) scale(0.995);
      animation:fadeUp 700ms ease forwards;
    }
    .card:nth-child(1){animation-delay:120ms}
    .card:nth-child(2){animation-delay:220ms}
    .card:nth-child(3){animation-delay:320ms}
    .card:nth-child(4){animation-delay:420ms}
    .card:nth-child(5){animation-delay:520ms}
    .card:nth-child(6){animation-delay:620ms}

    @keyframes fadeUp{
      to{opacity:1;transform:translateY(0) scale(1)}
    }

    /* hover micro-interactions */
    .card:hover{
      transform:translateY(-6px) scale(1.01);
      box-shadow: 0 12px 30px rgba(15,23,42,0.12);
      transition:transform 280ms ease, box-shadow 280ms ease;
    }

    .tag{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;background:rgba(11,94,215,0.08);color:var(--accent);font-weight:600}

    /* subtle underline animation for headings */
    .underline{
      display:inline-block;position:relative;padding-bottom:6px;
    }
    .underline:after{
      content:'';position:absolute;left:0;right:0;height:3px;border-radius:4px;bottom:0;background:linear-gradient(90deg,var(--accent),#7c3aed);transform:scaleX(0);transform-origin:left;transition:transform 350ms cubic-bezier(.2,.9,.2,1);
    }
    .card:hover .underline:after{transform:scaleX(1)}

    footer{margin-top:28px;color:var(--muted);font-size:13px}

    /* responsive tweaks */

	
	
	
<!--Meesage from director  -->

.container_mess {
max-width: 1000px;
width: 100%;
background: #fff;
border-radius: 18px;
box-shadow: var(--shadow);
overflow: hidden;
animation: fadeUp 0.8s ease-out;
border: 1px solid rgba(11, 94, 215, 0.08);
}

	
.header-bar {
animation: fadeIn 1.1s ease-out;
}


.message h3 {
font-size: 20px;
font-weight: 700;
color: #111827;
margin-bottom: 14px;
position: relative;
display: inline-block;
}


.message h3::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 60%;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-light));
border-radius: 3px;
animation: underlineGrow 1.2s ease-out forwards;
}


@keyframes underlineGrow {
from { width: 0; }
to { width: 60%; }
}


@keyframes fadeUp {
from { opacity: 0; transform: translateY(25px); }
to { opacity: 1; transform: translateY(0); }
}


@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}


@keyframes slideIn {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}





@media (max-width: 700px) {
.profile { flex-direction: column; text-align: center; padding: 30px 20px; }
.text-section { animation: none; }
.message { padding: 0 24px 30px; }
.header-bar { text-align: center; font-size: 17px; }
}



<!-- Animation Styles -->

.animate-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
  }
  .animate-fade.delay-1 {
    transition-delay: 0.3s;
  }
  .animate-fade.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .fs-5 {font-size: 16px !important; color:#000 !important;}
  
  
  
  <!-- Committee members page Animation Styles -->
<style type="text/css">.animate-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
  }
  .animate-fade.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .animate-fade.delay-1 { transition-delay: 0.2s; }
  .animate-fade.delay-2 { transition-delay: 0.4s; }
  .animate-fade.delay-3 { transition-delay: 0.6s; }
  .animate-fade.delay-4 { transition-delay: 0.8s; }

  .card:hover {
    transform: translateY(-8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
  }

  
  
  .section-title {
      border-left: 4px solid #0d6efd;
      padding-left: 12px;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .section-title h2 {
      font-weight: 700;
      color: #0d6efd;
      margin: 0;
    }
    .list-group-item {
      border-color: #e7e7e7;
    }
    .card {
      border-radius: 1rem;
    }  
  
</style>