.banner{
    height: 200px;
    width: 100%;
    background: var(--primary10);
    position: relative;
    display: flex;
    align-items: flex-end;
}

.banner-img{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}
.banner-img::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgb(0 55 119) 0%, rgb(17 72 65) 40%, rgb(20 62 9) 100%);
  opacity: .8;
}
.banner-img img{
    width:100%;
    height:120%;
    object-fit:cover;
    object-position: bottom;
    position:absolute;
    top:-10%;
    left:0;
    transform:translateY(0);
    transition:transform .1s linear;
}

.banner .bancont{
    position: relative;
    z-index: 1;
}
.banner h1{
    font-size: var(--font32);
    color: #fff;
    max-width: 75%;
}

.breadcrumb {
    display: flex;
    list-style-type: none;
    flex-flow: wrap;
    margin-bottom: 0;
    font-size: var(--font14);
    padding: 0;
}
.breadcrumb-item{
    display: flex;
    align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    margin: 0 6px;
    display: inline-block;
    border-left: 6px solid var(--secondary);
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
}
.breadcrumb-item a{
  color: #fff;
}
.breadcrumb-item a:hover{
    color: var(--secondary);
}
.breadcrumb-item.active {
    color: rgb(255 255 255 / 65%);
}


.stickytop,
.sidenav{
    position: sticky;
    top: 120px;
}
.sidecol{
  max-width: 300px;
}
.sidenav .navlist{
    display: flex;
    flex-direction: column;
    position: relative;
    gap: .5rem;
}
.sidenav .navlist li {
    flex: 1 0 auto;
}
.sidenav .navlist a{
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: var(--textclr);
    position: relative;
    line-height: 1.4;
    border-radius: .5rem;
    border: 1px solid var(--primary20);
}

.sidenav .navlist a:hover{
    color: var(--primary);
    background-color: var(--primary10);
}
.sidenav .navlist .active a{
    background-color: var(--primary);
    background: var(--gradient2);
    color: #fff;
}
.sidenav .navlist .active a:after{
    background-color: var(--secondary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--secondary);
    transform: scale(1.3);
}


.sectimg {
    margin-bottom: 10px;
    border-radius: 10px;
    object-fit: cover;
}
.img-left {
    float: left;
    margin-right: 20px;
}
.img-right {
    float: right;
    margin-left: 20px;
}

@media(max-width:991px){
    .sectimg{
        width: 50%;
        height: 50%;
    }
    .stickytop, .sidenav {
        position: sticky;
        top: 80px;
    }
}
@media (max-width: 767px) {
    .sectimg{
        width: 75%;
        height: auto;
    }
    .img-left {
        margin: auto;
        float: unset;
        margin-bottom: 20px;
    }
    .sidecol{
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
    }
}
@media (max-width: 575px) {
    .sectimg{
        width: 100%;
    }
    .banner{
      height: 130px;
    }
    .banner h1{
      font-size: var(--font28);
    }
}



.contcard a{
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--textclr);
}
.contcard a:hover{
    color: var(--primary);
}




ul.pagination {
    position: relative;
    gap: 10px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
}
ul.pagination li {
    padding: 0;
}
ul.pagination li::before {
    display: none;
}
ul.pagination li .page-link {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(0 0 0 / 20%);
}
ul.pagination li .page-link:hover {
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

ul.pagination li.active .page-link {
    background-color: var(--secondary);
    background: var(--gradient2);
    border-color: var(--secondary);
    color: white;
}

ul.pagination li:first-child .page-link,
ul.pagination li:last-child .page-link {
    display: flex;
    align-items: center;
    height: auto;
    width: auto;
    border-radius: 0;
    border: none;
}
ul.pagination li:first-child .page-link:hover,
ul.pagination li:last-child .page-link:hover {
    background-color: transparent;
}

ul.pagination .page-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.pagenum{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    color: var(--textclr);
    font-size: var(--font14);
}
.pagenum input{
    width: 50px;
    text-align: center;
    height: 36px;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: .3rem;
    background: transparent;
    outline: 0;
    font-weight: 500;
    font-size: 1rem;
    color: var(--black);
}
.pagenum input:focus{
    border-color: var(--secondary);
}




/* -----------GALLERY---------------- */

.galbox{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    transition: var(--trans30);
    -webkit-transition: var(--trans30);
    cursor: zoom-in;
    height: 100%;
  }
  .galbox .galimg{
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    width: 100%;
    border: 1px solid var(--primary);
    border-top: 2px solid var(--secondary);
    border-right: 2px solid var(--secondary);
  }
  .galbox .galimg .coverimg{
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
   .galbox.reels .galimg .coverimg{
      aspect-ratio: 9 / 15;
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
   }
  .galbox:hover .galimg .coverimg{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }
  .galbox .galimg .galicon{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border-top-right-radius: 4px;
    position: absolute;
    top: -1px;
    right: -1px;
    background-color: var(--secondary);
    background: var(--gradient2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
  }
  .galbox:hover .galimg .galicon{
    background-color: var(--secondary);
  }
  .galbox .galimg .galicon.vid{
    background: rgb(255 255 255 / 30%);
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    bottom: 50%;
  }
  .galbox:hover .galimg .galicon.vid{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
  .galbox .galcont{
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    color: #fff;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
  }
  .galbox:hover .galcont{
    opacity: 1;
  }
  .galbox .galimg:after{
    content: '';
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: rgb(0 0 0 / 20%);
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 75%) 70%);
  }
  .galbox .galcont span{
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--font14);
  }

  .fancybox__container{
    z-index: 9999;
  }
  
  
  @media(max-width:480px){
    .galbox .galimg .coverimg{
        min-height: 150px;
    }
    .galbox .galimg .galicon{
      width: 36px;
      height: 36px;
    }
  }

  @media(max-width:380px){
    .galbox .galimg .coverimg{
        min-height: 120px;
    }
  }



/***********TABLE***********/
.table-responsive{
  overflow-x: auto;
}
table {
  color: var(--textclr);
  width: 100%;
  margin-bottom: 1rem;
  border-spacing: 0;
  border-collapse: separate;
  overflow: hidden;
  font-size: var(--font14);
  border-radius:10px;
  border: .5px solid rgb(11 77 161 / 10%);
}
table thead {
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  background-color: var(--primary);
  background: var(--gradient1);
}
table td,
table th {
  border: .5px solid rgb(11 77 161 / 10%);
  padding: 10px;
  overflow: hidden;
  transition: 0.3s;
}
table tr {
  transition: 0.3s;
}
table .upinfo{
    color: var(--primary);
}
table th:first-child{
    border-top-left-radius:10px;
}
table th:last-child{
    border-top-right-radius:10px;
}
/* table tr:last-child td:first-child{
    border-bottom-left-radius:10px;
}
table tr:last-child td:last-child{
    border-bottom-right-radius:10px;
} */




.usercard {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 10px;
    position: relative;
    height: 100%;
    transition: var(--trans30);
    -webkit-transition: var(--trans30);
    background: linear-gradient(120deg, rgb(7 80 149 / 5%) 0%, rgb(90 200 108 / 5%) 100%);
    padding: 10px;
    border-radius: 1rem;
    border: 1px solid var(--primary10);
    height: 100%;
}
.usercard .imgbox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.usercard .imgbox .proimg {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    max-height: 280px;
    border: 1px solid var(--primary);
    border-top: 2px solid var(--secondary);
    border-right: 2px solid var(--secondary);
    object-fit: cover;
    object-position: top;
}
.usercard .boxcont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2px;
}
.usercard .boxcont .head{
    font-weight: 600;
    font-size: var(--font16);
    color: var(--black);
    line-height: normal;
    transition: var(--trans30);
    -webkit-transition: var(--trans30);
}
.usercard .boxcont .desc {
    font-size: var(--font14);
}



.listcard {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: .3rem;
}
.listcard .head{
    margin-bottom: 0;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.listcard:hover .head{
    color: var(--primary);
}


@media(max-width:576px){
  .usercard{
    width: 320px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}





/*********ACCORDION***********/
.myaccordion {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .myaccordion .accordion-item {
    margin-bottom: .5rem; 
    border: 1px solid;
    border-color: #eee;
    background: #fff;
    border-radius: .5rem;
  }
  
  .myaccordion .accordion-button {
    background-color: var(--primary);
    background: var(--gradient1);
    color: #fff;
    font-size: var(--font15);
    padding: 13px 15px;
    padding-right: 50px;
    font-weight: 500;
    border-radius: .5rem !important;
    box-shadow: none;
    transition: .3s;
    flex-direction: column;
    align-items: start;
  }
  .myaccordion .accordion-button.collapsed{
    background: #fff;
    color: var(--black);
    flex-direction: row;
    align-items: center;
  }
  .myaccordion .accordion-button.collapsed:hover {
    color: var(--primary);
  }
  .myaccordion .accordion-button::after {
    width: 24px;
    height: 24px;
    background-image: url(../img/icons/angledown.svg);
    background-size: contain;
    text-align: center;
    position: absolute;
    right: 15px;
    filter: brightness(0) opacity(.75);
    top: 50%;
    transform: translateY(-50%);
  }
  .myaccordion .accordion-button:not(.collapsed)::after {
    filter: brightness(1) opacity(1);
    transform: translateY(-50%) rotateX(180deg);
  }
  .myaccordion .has-icon .accordion-button.collapsed img{
    filter: brightness(0) opacity(.5);
    -webkit-filter: brightness(0) opacity(.5);
  }
  .myaccordion .has-icon .accordion-button{
    flex-direction: row !important;
    align-items: center;
  }
  .myaccordion .accordion-button .date{
    color: var(--white);
    opacity: .75;
    min-width: 90px;
  }
  .myaccordion .accordion-button.collapsed .date{
    color: var(--secondary);
    opacity: 1;
  }
  .myaccordion .accordion-button .name{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .myaccordion .accordion-button .new{
    position: absolute;
    top: -10px;
    right: 10px;
  }
  .myaccordion .accordion-body p:last-child{
    margin-bottom: 0;
  }
  .myaccordion .dwnitem{
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
  }
  .myaccordion .dwnitem:hover{
    color: var(--primary);
  }
  
  @media(max-width:575px){
    .myaccordion .accordion-button{
      flex-direction: column !important;
      font-size: var(--font14);
      align-items: start !important;
    }
    .myaccordion .accordion-button::after{
      width: 20px;
      height: 20px;
    }
    .myaccordion .has-icon .accordion-button{
      align-items: center !important;
    }
  }



  /* *******************LIST******************** */
  
.mylist, .sublist, .genlist{
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--textclr);
  }
  .mylist li, .sublist li, .genlist li{
    position: relative;
    padding-left: 20px;
  }
  .mylist li:before,
  .sublist li:before,
  .genlist li:before{
    content: '';
    position: absolute;
    left: 0;
    width: 14px;
    height: 14px;
    background-image: url(../img/logo/icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 5px;
  }
  .genlist li:before{
    background-image: url(../img/icons/licircle.svg);
  }
  .mylist li>ul,
  .genlist li>ul{
    margin: .5rem 0;
  }
  .mylist li>ul>li,
  .genlist li>ul>li,
  .sublist li{
    padding-left: 15px;
  }
  .mylist li>ul>li:before,
  .genlist li>ul>li:before,
  .sublist li:before{
    background-color: var(--secondary);
    background: var(--gradient2);
    border-radius: 6px;
    width: 8px;
    height: 4px;
    margin-top: 10px;
  }
  
  


.contact-card{
    color: var(--textclr);
    font-size: var(--font14);
}
.contact-item{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-bottom:8px;
    border-bottom: 1px solid var(--primary10);
    padding-bottom: 8px;
}
.contact-item .label{
  display: flex;
  gap: 5px;
  width: 90px;
  flex: none;
  border-right: 1px dashed var(--primary20);
}
.contact-item i{
    color: var(--secondary);
    min-width:15px;
}
.contact-item span{
    flex:1;
}

.mapframe{
  border-radius: .5rem;
  border: 1px solid var(--primary20);
  min-height: 250px;
}


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


.applycard{
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: .5rem;
    background: linear-gradient(120deg, rgba(28, 181, 224, .1) 0%, rgba(34, 169, 152, .1) 40%, rgba(118, 212, 92, .1) 100%);
    border: 1px solid var(--primary);
    border-top: 2px solid var(--secondary);
    border-right: 2px solid var(--secondary);
    position: relative;
    width: 400px;
    float: right;
    margin-left: 1rem;
    margin-bottom: .5rem;
}
.applycard:before{
  content: '';
  position: absolute;
  top: 8px;
  height: 90%;
  width: 60px;
  background-image: url(../img/logo/icon.svg);
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
  left: 0;
  z-index: -1;
  opacity: .1;
}
.applycard .intrate {
    flex: none;
    align-items: center;
}
.applycard .value{
  line-height: 1;
  font-weight: 800;
}

.animated-gradbtn {
    background: var(--primary);
    background: linear-gradient(120deg, var(--primary) 0%, var(--secondary) 100%);
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary), var(--secondary));
    background-size: 400% 400%;
    animation: gradient 3s ease infinite;
    color: #fff;
}


@media(max-width:767px){
  .applycard{
    width: 100%;
    float: none;
    margin: 0;
    margin-bottom: 2rem;
  }
}




.label-list .item{
  border: 1px solid;
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 2rem;
  font-weight: 500;
  background-color: transparent;
}
.label-list .item.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}


.stars{
    display:flex;
    gap:3px;
}
.stars i{
    font-size:12px;
    color:#d4d4d4;
}
.stars i.active{
    color:#ffc107;
}


.popular-links a{
  color: var(--textclr);
}
.popular-links a:hover{
  color: var(--primary);
}

.linkedlist a:hover .head{
  color: var(--primary) !important;
}