/*>>>>>>>>>>>>>>>>Start Details Page */
.DetailsPage {
  width: 100%;
  background: #481e72;
  box-sizing: border-box;
  color: white;
  padding: 60px 10% 10px; }
  .DetailsPage .header {
    font-size: clamp(25px, 2vw, 30px);
    font-weight: 700; }
    .DetailsPage .header p {
      border-bottom: 1px solid gray;
      padding-bottom: 5px; }
  .DetailsPage .path {
    font-size: clamp(12px, 1vw, 22px); }
    .DetailsPage .path a {
      margin: 0px 20px;
      cursor: pointer; }
      .DetailsPage .path a:hover {
        color: #c9c0c0 !important; }
      .DetailsPage .path a:nth-child(3) {
        text-decoration: underline;
        font-weight: 600; }
    .DetailsPage .path i {
      margin: 1px;
      font-size: clamp(12px, 2vw, 22px); }
  .DetailsPage .socialFooter li {
    display: inline-block;
    margin-left: 7px;
    font-size: 19px; }
    .DetailsPage .socialFooter li a {
      color: #b8b2b2;
      transition: 0.9s all ease;
      cursor: pointer; }
      .DetailsPage .socialFooter li a:hover {
        color: white; }
    .DetailsPage .socialFooter li:nth-child(1) a:hover {
      transition: 0.9s all ease;
      color: #0a58ca; }
    .DetailsPage .socialFooter li:nth-child(2) a:hover {
      transition: 0.9s all ease;
      color: #5081ca; }
    .DetailsPage .socialFooter li:nth-child(3) a:hover {
      transition: 0.9s all ease;
      color: #3166b6; }
    .DetailsPage .socialFooter li:nth-child(4) a:hover {
      transition: 0.9s all ease;
      color: #b91c31; }

/*>>>>>>>>>>>>>>>>Start Header AboutUs */
.header_AboutUs {
  background-color: gray;
  color: white;
  height: auto;
  width: 100%;
  padding: 10px 13%;
  font-size: clamp(10px, 2vw, 15px); }
  .header_AboutUs .col {
    border-left: 2px solid white; }
  .header_AboutUs a {
    text-decoration: none;
    color: white; }
    .header_AboutUs a:hover {
      color: goldenrod; }

/*>>>>>>>>>>>>>>>>Start The Byblos Bank About */
.byblosAbout {
  font-size: clamp(15px, 1vw, 30px);
  color: #646464;
  margin: 5% 0; }
  .byblosAbout .col {
    line-height: 30px; }
    .byblosAbout .col b {
      font-size: clamp(15px, 1vw, 30px); }
    .byblosAbout .col ul {
      margin-top: 20px; }
    .byblosAbout .col a {
      font-size: clamp(15px, 1vw, 30px);
      text-align: center;
      display: inline-block;
      height: 45px;
      line-height: 40px;
      font-weight: 700;
      color: #282828;
      border: 2px solid #282828;
      border-radius: 0 0 15px 0;
      min-width: 300px;
      transition: all 300ms ease;
      padding: 0 18px;
      margin-top: 25px;
      text-decoration: none !important;
      background: transparent;
      position: relative;
      overflow: hidden;
      z-index: 1; }
      .byblosAbout .col a::after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        background-color: #481e72;
        transition: all 0.3s ease; }
      .byblosAbout .col a:hover:after {
        width: 100%;
        left: 0; }
      .byblosAbout .col a:hover {
        color: white; }

/*>>>>>>>>>>>>>>>>Start Board Of Directors */
.BoardOfDirectors {
  border-top: 3px solid goldenrod;
  margin-top: 0px; }
  .BoardOfDirectors header {
    text-align: center; }
    .BoardOfDirectors header h2 {
      margin: 0 auto;
      position: relative;
      top: -25px;
      font-size: clamp(20px, 2vw, 30px);
      width: 70%;
      background-color: #eee;
      font-family: "Maven Pro", sans-serif;
      font-weight: 600; }
    .BoardOfDirectors header .textcontext {
      font-size: clamp(15px, 1vw, 30px);
      color: #646464; }
  .BoardOfDirectors h4 {
    background-color: #eee;
    font-family: "Maven Pro", sans-serif;
    font-weight: 600; }
  .BoardOfDirectors .col-carousel {
    margin-top: 50px; }
    .BoardOfDirectors .col-carousel .owl-prev {
      left: -5%;
      font-size: clamp(15px, 1vw, 30px);
      position: absolute;
      top: 0;
      height: 100%; }
      .BoardOfDirectors .col-carousel .owl-prev:hover span {
        color: goldenrod; }
    .BoardOfDirectors .col-carousel .owl-next {
      right: -5%;
      font-size: clamp(15px, 1vw, 30px);
      position: absolute;
      top: 0;
      height: 100%; }
      .BoardOfDirectors .col-carousel .owl-next:hover span {
        color: goldenrod; }
    .BoardOfDirectors .col-carousel .listingTitle {
      text-align: center;
      font-size: clamp(15px, 1vw, 30px);
      font-weight: 600; }
    .BoardOfDirectors .col-carousel .listingDescription {
      text-align: center;
      width: 100%;
      font-size: clamp(15px, 1vw, 30px);
      margin: 0 auto;
      color: gray;
      padding: 20px 20px;
      border-right: 2px dashed goldenrod; }

/*>>>>>>>>>>>>>>>>Start Committees */
.Committees {
  border-top: 3px solid goldenrod;
  margin-top: 0px; }
  .Committees header {
    text-align: center; }
    .Committees header h2 {
      font-size: clamp(20px, 2vw, 35px);
      margin: 0 auto;
      position: relative;
      top: -25px;
      width: 70%;
      background-color: #eee;
      font-family: "Maven Pro", sans-serif;
      font-weight: 600; }
    .Committees header .textcontext {
      font-size: clamp(15px, 1vw, 30px);
      color: #646464;
      margin-bottom: 30px; }
  .Committees div b {
    font-size: clamp(18px, 1vw, 32px);
    background-color: #eee;
    font-family: "Maven Pro", sans-serif;
    font-weight: 600;
    margin-bottom: 30px; }
  .Committees div p {
    font-size: clamp(15px, 1vw, 30px);
    font-weight: 500;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: darkslategray; }
  .Committees ul li {
    width: 100%;
    font-size: clamp(15px, 1vw, 30px);
    margin: 0 auto;
    color: gray; }
  .Committees a {
    font-size: clamp(15px, 1vw, 30px);
    text-align: center;
    display: inline-block;
    height: 37px;
    line-height: 32px;
    font-weight: 700;
    color: #282828;
    border: 2px solid #282828;
    border-radius: 0 0 15px 0;
    min-width: 200px;
    max-width: 300px;
    width: 50%;
    transition: all 300ms ease;
    padding: 0 18px;
    margin-top: 25px;
    text-decoration: none !important;
    background: transparent;
    position: relative;
    overflow: hidden;
    z-index: 1; }
    .Committees a::after {
      position: absolute;
      content: "";
      width: 0;
      height: 100%;
      top: 0;
      right: 0;
      z-index: -1;
      background-color: #481e72;
      transition: all 0.3s ease; }
    .Committees a:hover:after {
      width: 100%;
      left: 0; }
    .Committees a:hover {
      color: white; }