body .leadership_profile {

  padding: 90px 0px;

}



/*body .leadership_profile .leadership_box {*/

/*  width: 70%;*/

/*  margin: auto;*/

/*}*/



body .leadership_profile .leadership_box .img-bg {

  background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e6e7), to(#cdcfd0));

  background-image: linear-gradient(#e5e6e7, #cdcfd0);

}



body .leadership_profile .leadership_box img {

  width: 100%;

}



body .leadership_profile .leadership_box p {

  /*margin-top: 20px;*/

  font-size: 18px;

  font-weight: 700;

  line-height: 21px;

  color: #d2232a;

  letter-spacing: 0.7px;

}



body .leadership_profile .leadership_box p span {

  color: #000;

  display: block;

  font-size: 16px;

  font-weight: 400;

}

.img-bg {

        position: relative;

        overflow: hidden;

        /* height: 370px; Adjust as necessary */

    }

    .card-img-top {

     height: auto;

}

    .leadership-img {

        transition: transform 0.4s ease;

        width: 100%;

        display: block;

    }

 

    /* .img-bg:hover .leadership-img {

        transform: scale(1.1);

    }

 

    .plus-icon {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        font-size: 30px;

        background-color: rgba(255, 255, 255, 0.9);

        border: none;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        text-align: center;

        line-height: 42px;

        color: #333;

        cursor: pointer;

        box-shadow: 0 2px 10px rgba(0,0,0,0.2);

        transition: transform 0.3s;

        z-index: 2;

    } */

    .plus-icon {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 30px;

    background-color: rgba(255, 255, 255, 0.9);

    border: none;

    border-radius: 50%;

    width: 45px;

    height: 45px;

    text-align: center;

    line-height: 42px;

    color: #333;

    cursor: pointer;

    box-shadow: 0 2px 10px rgba(0,0,0,0.2);

    transition: transform 0.3s;

    z-index: 2;

    opacity: 0; /* Hidden by default */

    visibility: hidden;

}

 

.img-bg:hover .plus-icon {

    opacity: 1;

    visibility: visible;

}

 

    .plus-icon:hover {

        transform: translate(-50%, -50%) scale(1.1);

    }

 

    .btn-close {

        font-size: 1.5rem;

        background-color: rgba(0, 0, 0, 0.5);

    }

    .img-bg {

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;

}

 

.leadership-img {

    transition: transform 0.4s ease;

    width: 100%;

    display: block;

}

.card-body {

  padding: 20px 0px !important;

  border-radius: 10px !important;

  color: #d2232a !important;

  background-color:white !important;

  font-weight: 600;

  text-transform: uppercase;

}

.leader-card:hover .card-body{

  background-color: #fdb913 !important;

}

.img-bg:hover .leadership-img {

    transform: scale(1.1);

}

 

.plus-icon {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 30px;

    background-color: rgba(255, 255, 255, 0.9);

    border: none;

    border-radius: 50%;

    width: 45px;

    height: 45px;

    text-align: center;

    line-height: 42px;

    color: #333;

    cursor: pointer;

    box-shadow: 0 2px 10px rgba(0,0,0,0.2);

    transition: transform 0.3s;

    z-index: 2;

}

 

.plus-icon:hover {

    transform: translate(-50%, -50%) scale(1.1);

}  

.profile-main{

      display: flex;

      justify-content: center;

      align-items: center;

      position: relative;

      padding: 40px;

    }

.modal-wrapper {

      position: relative;

    }

 

    .close-btn {

      position: absolute;

      top: -15px;

      right: -15px;

      background: #fdb913;

      color: white;

      border: none;

      font-size: 20px;

      font-weight: bold;

      cursor: pointer;

      width: 32px;

      height: 32px;

      border-radius: 4px;

      z-index: 10;

    }

 

    .modal-box {

      background: white;

      border-radius: 15px;

      box-shadow: 0 4px 20px rgba(0,0,0,0.2);

      width: 100%;

      overflow: hidden;

      display: flex;

      flex-wrap: wrap;

    }

 

    .profile-image {

      flex: 1 1 250px;

      padding: 20px;

      text-align: center;

      border-right: 1px solid #eee;

    }

 

    .profile-image img {

      height: auto;

      border-radius: 8px;

      margin-bottom: 15px;

    }
    .profile-image h2 {

    font-size: 25px !important;

    margin-bottom: 5px;

    font-weight: 600;

    }
    .profile-image p {

      font-weight: bold;

      color: #555;

    }
    .profile-details {

      flex: 2 1 500px;

      padding: 20px;

      display: flex;

      flex-wrap: wrap;

    }

 

    .profile-left {

      flex: 2;

      padding-right: 20px;

    }

    .profile-left p{

        font-size:20px !important;

        color: #d2232a !important;

    }

    .profile-left h5{

      font-weight:600;

      margin-top: 20px;

    }

    .profile-right {

      flex: 1;

      border-left: 1px solid #eee;

      padding-left: 20px;

    }

    .detail-row {

      margin-bottom: 15px;

      font-size: 18px;

      line-height: 1.5;

    }

 

    .detail-row span.label {

      font-weight: bold;

      color: #222;

    }

 

    .profile-right strong {

      display: block;

      margin-bottom: 10px;

    }

 

    .profile-right ul {

      list-style: none;

      padding-left: 0;

    }

 

    .profile-right2 li {

      margin-bottom: 15px !important;

      font-size: 18px !important;

      color: #333;

    }

 

    @media (max-width: 768px) {

      .modal-box {

        flex-direction: column;

      }

 

      .profile-image {

        border-right: none;

        border-bottom: 1px solid #eee;

      }

 

      .profile-left, .profile-right {

        flex: 1 1 100%;

        padding-right: 0;

        padding-left: 0;

        border-left: none;

      }

 

      .close-btn {

        top: -12px;

        right: -12px;

      }

    }

    .leader-card {

      cursor: pointer;

      transition: 0.3s;

      margin: 15px auto;

      box-shadow: 10px 10px 9px 10px #cecece;

      border-radius: 10px !important;

    }

 

    .leader-card:hover {

      transform: scale(1.03);

    }

 

    .custom-modal .modal-content {

      position: relative;

      padding: 20px;

      border-radius: 10px !important;

    }

 

    .custom-modal .close-btn {

      position: absolute;

      top: 3px;

      right: 6px;

      background-color: #fdb913;

      color: white;

      border: none;

      border-radius: 50%;

      width: 35px;

      height: 35px;

      font-size: 20px;

      z-index: 1056;

    }

    .modal-content {background-color: #fff !important;}

    .custom-modal .profile-section {

      display: flex;

      flex-wrap: wrap;

      gap: 20px;

      padding: 0px 0px !important;

      min-height: auto !important;

    }

 

    .custom-modal .profile-left {

      flex: 1 1 200px;

      text-align: center;

    }

    .card-title {

      font-weight:600;

      font-size:17px !important;

    }

    .custom-modal .profile-right , .profile-right2{

      flex: 2 1 200px;

      padding-left: 20px;

    }

 

    .custom-modal .profile-img {

      max-width: 100% !important;

      border-radius: 10px;

    }

    .profile-right p{

      font-size:18px !important;

    }

    .profile-right2 p{

      font-size:18px !important;

    }

    .custom-modal .section-title {

      font-weight: bold;

      /* margin-top: 15px; */

    }

    .custom-modal ul {

      padding-left: 20px;

      margin: 0;

    }

    @media (min-width: 576px) {

    .modal-dialog {

        margin: 0rem auto !important;

    }

}

body .modal-dialog {

    max-width: 75%;

}

    .plus-icon-overlay {

  position: absolute;

  top: 45%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 40px;

  color: white;

  background-color: rgb(0, 0, 0, 0.6);

  width: 60px;

  height: 60px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: 0.3s ease;

  pointer-events: none;

}

.text-muted {

  color: #d2232a !important;

}

.leadership_box:hover .plus-icon-overlay {

  opacity: 1;

  pointer-events: auto;

}

  .leader-card {

  width: 83%;

}

@media (max-width: 1399px) and (min-width:1200px){

  .leader-card {

    height: 500px;

}

.cust-card{

  height: 474px !important;

}

}

@media (max-width: 1199px) and (min-width:768px){

  .leader-card {

    height: 490px;

}

}

@media (min-width: 769px) and (max-width:992px){

  .container, .container-md, .container-sm {

    max-width: 100%;

  }

}

    @media (max-width: 768px) {

      .custom-modal .profile-section {

        flex-direction: column;

      }

 

      .custom-modal .close-btn {

        top: 5px;

        right: 2px;

        width: 30px;

        height: 30px;

      }

      .custom-modal .modal-content {

         margin:0px 28px;

}

    }

    @media (min-width: 320px) {

  .modal-content {

    overflow-y: auto !important;

  }

}